/* Mobile CSS unificado (admin + aluno)
   Escopado por data-app para evitar interferência entre telas. */

/* ===== Conteúdo migrado de public/css/admin_responsive.css ===== */
/* Responsivo do painel admin (separado para evitar quebras no CSS principal)
   Somente regras que podem ser ajustadas sem afetar o desktop atual. */
/* Cabeçalho e botões: permitir quebra e ocupar espaçamento adequado */
body[data-app="admin"] .content-header { flex-wrap: wrap; gap: 8px; }

/* ===== Modal de Pendências (Dar baixa múltipla) - visual igual ao mock ===== */
#baixaPendModal{ backdrop-filter: blur(2px); }
#baixaPendModal .card{
  background: #ffffff;
  border: 1px solid #eceff3;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
#baixaPendModal h2{ font-size: 22px; font-weight: 800; color:#0f172a; }
#baixaPendModal #baixaPendFechar{
  background:#fff; color:#0f172a; border:1px solid #e5e7eb; border-radius:10px;
}
#baixaPendModal .thead{
  background:#f8fafc !important;
  border:1px solid #e5e7eb; border-radius:10px;
  font-size: 13.5px; color:#374151;
}
#baixaPendModal #baixaPendRows{ margin-top: 6px; }
#baixaPendModal #baixaPendRows > div{
  display:grid; grid-template-columns: 32px 1fr 110px 120px 110px; gap:6px; align-items:center;
  padding:6px 8px; border-bottom:1px solid #eef2f7; font-size:14px; line-height:1.25;
}
#baixaPendModal #baixaPendRows > div:hover{ background:#fafafa; }
#baixaPendModal #baixaPendRows > div > :nth-child(5){ justify-self: end; }
#baixaPendModal input[type="checkbox"]{ width:16px; height:16px; }
#baixaPendModal .status.tag{ display:inline-block; padding:3px 8px; border-radius:999px; font-size:11.5px; font-weight:600; }
#baixaPendModal .status.tag.warning{ background:#fef3c7; color:#b45309; }
#baixaPendModal .status.tag.success{ background:#dcfce7; color:#166534; }
#baixaPendModal .btn{ min-height:30px; border-radius:10px; }
#baixaPendModal .btn.btn-sm{ min-height:28px; padding:4px 8px; }
#baixaPendModal .btn.btn-primary{ background:#3b82f6; border:0; color:#fff; border-radius:10px; box-shadow:0 4px 12px rgba(59,130,246,.25); }
#baixaPendModal .btn.btn-primary:hover{ filter:brightness(0.98); }
#baixaPendModal .bp-empty{ padding:12px; color:#6b7280; text-align:center; }

/* ===== Responsividade do modal de pendências ===== */
@media (max-width: 700px){
  #baixaPendModal .thead{ grid-template-columns: 28px 1fr 90px 100px 100px; padding:6px 8px; }
  #baixaPendModal #baixaPendRows > div{ grid-template-columns: 28px 1fr 90px 100px 100px; padding:6px 8px; }
}
@media (max-width: 520px){
  /* Compactar para 3 colunas e 2 linhas: [ck][comp][valor] / [ck][status][ações] */
  #baixaPendModal .thead{ grid-template-columns: 24px 1fr 96px; }
  #baixaPendModal .thead > :nth-child(4),
  #baixaPendModal .thead > :nth-child(5){ display:none; }
  #baixaPendModal #baixaPendRows > div{
    grid-template-columns: 24px 1fr 96px;
    grid-auto-rows: minmax(28px, auto);
    padding:6px 8px;
  }
  #baixaPendModal #baixaPendRows > div > :nth-child(1){ grid-column:1; grid-row: 1 / span 2; align-self:center; }
  #baixaPendModal #baixaPendRows > div > :nth-child(2){ grid-column:2; grid-row:1; }
  #baixaPendModal #baixaPendRows > div > :nth-child(3){ grid-column:3; grid-row:1; justify-self:end; }
  #baixaPendModal #baixaPendRows > div > :nth-child(4){ grid-column:2; grid-row:2; }
  #baixaPendModal #baixaPendRows > div > :nth-child(5){ grid-column:3; grid-row:2; justify-self:end; }
}
/* ===== Relatórios Financeiros: layout dos filtros ===== */
body[data-app="admin"] #view-financeiro .filters-section .filters-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 16px;
  align-items: end;
}
/* Mês + Semana do mês lado a lado dentro do bloco semanal */
body[data-app="admin"] #view-financeiro #rep_block_week{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px !important;
  grid-column: span 2; /* ocupa 2 colunas da grade geral */
}
/* Status e Exportar CSV na mesma linha (cada um em 1 coluna) */
body[data-app="admin"] #view-financeiro #rep_status{ width: 100%; }
body[data-app="admin"] #view-financeiro .filters-section .filter-group:has(> #rep_status){ align-self:end; }
body[data-app="admin"] #view-financeiro .filters-section .filter-group:has(> button[onclick^="exportRelatorioCSV"]) { justify-self: end; align-self: end; }
@media (max-width: 1100px){
  body[data-app="admin"] #view-financeiro .filters-section .filters-row{ grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 820px){
  body[data-app="admin"] #view-financeiro .filters-section .filters-row{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  body[data-app="admin"] #view-financeiro #rep_block_week{ grid-column: span 2; }
}
@media (max-width: 520px){
  body[data-app="admin"] #view-financeiro .filters-section .filters-row{ grid-template-columns: 1fr; }
  body[data-app="admin"] #view-financeiro #rep_block_week{ grid-template-columns: 1fr; grid-column: auto; }
}

/* Grupos e controles com largura consistente */
body[data-app="admin"] #view-financeiro .filters-section .filter-group{ min-width: 0; }
body[data-app="admin"] #view-financeiro .filters-section .filter-group input,
body[data-app="admin"] #view-financeiro .filters-section .filter-group select,
body[data-app="admin"] #view-financeiro .filters-section .filter-group .btn{
  width: 100% !important;
  max-width: 100% !important;
}
/* Inputs e selects com mesma altura/raio */
body[data-app="admin"] #view-financeiro .filters-section input[type="month"],
body[data-app="admin"] #view-financeiro .filters-section select{
  min-height: 40px; border-radius: 10px; padding: 8px 10px;
}

/* Rádio "Agrupar por" alinhado em linha com espaçamento */
body[data-app="admin"] #view-financeiro .filters-section [name="rep_mode"]{ accent-color:#3b82f6; }
body[data-app="admin"] #view-financeiro .filters-section .filter-group label input[type="radio"]{ margin-right: 6px; }
body[data-app="admin"] #view-financeiro .filters-section .filter-group label{ display:inline-flex; align-items:center; gap:6px; }

/* Bloco da ação (Exportar CSV) alinhado à direita da grade */
body[data-app="admin"] #view-financeiro .filters-section .filter-group:has(> button[onclick^="exportRelatorioCSV"]) { justify-self: end; align-self: end; }


/* ===== Guard rails globais (evitar overflow horizontal) ===== */
html, body{ max-width: 100%; overflow-x: hidden; }
body [class*="container"],
body .main-content,
body .card{ box-sizing: border-box; max-width:  100%; }
img, table{ max-width: 100%; height: auto; }

/* Lista mobile padrão: escondida no desktop */
body[data-app="admin"] #m_list{ display: none; }

/* ===== Breakpoints padrão do sistema ===== */
/* Laptops pequenos */
@media (max-width: 1280px){
  /* Espaços ligeiramente menores ajudam a não estourar */
  body[data-app="admin"] .main-content{ padding-left: 16px; padding-right: 16px; max-width: 100vw; }
  body[data-app="admin"] .card{ width: 100%; max-width: none; }
}

/* Tablets (retrato ou paisagem) */
@media (max-width: 1024px){
  body[data-app="admin"] .main-content{ padding-left: 14px; padding-right: 14px; }
  body[data-app="admin"] .card{ width: 100%; max-width: none; }
  body[data-app="admin"] .grid-2, body[data-app="admin"] .grid-3{ grid-template-columns: 1fr !important; }
  body[data-app="admin"] .table{ table-layout: fixed; width: 100%; }
  body[data-app="admin"] .table td a{ max-width: 60vw; }
}

/* Mobile normal (retrato) */
@media (max-width: 768px){
  body[data-app="admin"] .main-content{ overflow-x: hidden; padding-left: 12px; padding-right: 12px; max-width: 100vw; }
  body[data-app="admin"] .card{ width: 100%; }
  body[data-app="admin"] .table th.col-acoes,
  body[data-app="admin"] .table td.col-acoes{ width: 140px; }
  /* Inputs e botões ocupam largura disponível */
  body[data-app="admin"] .filters-section .filter-group > *{ width: 100%; max-width: 100%; }
}

/* Mobile pequeno (muito estreitos) */
@media (max-width: 480px){
  /* Ações ainda mais compactas e sem forçar largura */
  body[data-app="admin"] .table th.col-acoes,
  body[data-app="admin"] .table td.col-acoes{ width: 120px; padding-right: 8px; }
  body[data-app="admin"] .table td.col-acoes .btn{ padding: 5px 8px; font-size: 12px; }
  /* Cards e containers ocupam toda a largura visível */
  body[data-app="admin"] .main-content{ padding-left: 10px; padding-right: 10px; }
  body[data-app="admin"] .card{ margin-left: 0; margin-right: 0; width: 100%; }
  /* Modal: ocupar quase a largura total em celulares antigos */
  body[data-app="admin"] .overlay .modal{ width: 98vw; }
}

/* Esconder colunas menos críticas em telas muito estreitas (somente nas tabelas dos cards, não no modal) */
@media (max-width: 520px){
  /* Oculta a coluna de Status (3ª coluna) quando existir, apenas no conteúdo principal */
  body[data-app="admin"] .main-content .table thead th:nth-child(3),
  body[data-app="admin"] .main-content .table tbody td:nth-child(3){ display: none; }
}
@media (max-width: 420px){
  /* Oculta a coluna de CPF/extra (4ª coluna) quando existir, apenas no conteúdo principal */
  body[data-app="admin"] .main-content .table thead th:nth-child(4),
  body[data-app="admin"] .main-content .table tbody td:nth-child(4){ display: none; }
}

/* Ações mais enxutas em telas muito pequenas */
@media (max-width: 480px){
  body[data-app="admin"] .table th.col-acoes,
  body[data-app="admin"] .table td.col-acoes{ width: 130px; padding-right: 8px; }
  body[data-app="admin"] .table td.col-acoes .btn{ padding: 5px 8px; font-size: 12px; }
}

/* ===== Listas em cards (Turmas, Graduação, etc.) no mobile ===== */
@media (max-width: 900px){
  /* Neutraliza comportamentos de .table / min-width no mobile */
  table.responsive-list, table.responsive-list.rsp-alunos{
    display:block !important; width:100% !important; min-width:0 !important; table-layout:auto !important;
  }
  /* Garante ocultar cabeçalho na lista de alunos */
  table.responsive-list.rsp-alunos thead{ display:none !important; }
  /* Sobrepõe regra global que força <a> como inline-block em .table td (causando corte) */
  body[data-app="admin"] table.responsive-list.rsp-alunos tbody td[data-label="Nome"] a{
    display:block !important; white-space:normal !important; word-break:break-word !important; overflow:visible !important;
  }
  /* Evita corte lateral no container da tabela quando em lista */
  body[data-app="admin"] .table-container{ overflow: visible !important; -webkit-overflow-scrolling: auto !important; }
  /* Evitar corte dos botões à direita nas listas (pontinhos vermelhos) */
  body[data-app="admin"] .card,
  body[data-app="admin"] .card .list,
  body[data-app="admin"] .card .items,
  body[data-app="admin"] .card .rows,
  body[data-app="admin"] .card .list-group{ width: 100%; }
  /* Cada item: conteúdo à esquerda e ações à direita */
  body[data-app="admin"] .card .list .item,
  body[data-app="admin"] .card .items .item,
  body[data-app="admin"] .card .rows .row,
  body[data-app="admin"] .card .list-group .list-group-item{
    display: flex; align-items: center; gap: 8px; padding-right: 16px;
  }

  /* Ajustes estruturais gerais do modal (independente do breakpoint abaixo) */
  body[data-app="admin"] .overlay .modal,
  body[data-app="admin"] .overlay .modal .modal-content{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  body[data-app="admin"] .overlay .modal .modal-content{ padding: 12px; }
  body[data-app="admin"] .overlay .modal .modal-body{
    display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 100%;
  }
  /* Inputs e botões ocupando toda a largura dentro do modal */
  body[data-app="admin"] .overlay .modal .modal-body input,
  body[data-app="admin"] .overlay .modal .modal-body select,
  body[data-app="admin"] .overlay .modal .modal-body button,
  body[data-app="admin"] .overlay .modal .modal-body .btn{
    width: 100% !important; max-width: 100% !important;
  }






  /* Grupo de botões (Editar/Excluir) alinhados lado a lado, dividindo espaço */
  body[data-app="admin"] .overlay .modal .button-group{ display: flex; gap: 8px; width: 100%; }
  body[data-app="admin"] .overlay .modal .button-group button,
  body[data-app="admin"] .overlay .modal .button-group .btn{ flex: 1; }

  /* Mobile normal: modal ocupa a tela inteira e bordas retas */
  @media (max-width: 768px){
    body[data-app="admin"] .overlay .modal,
    body[data-app="admin"] .overlay .modal .modal-content{
      margin: 0; border-radius: 0; height: 100vh;
    }
  }
  /* Em celulares muito estreitos, modal quase full-width e com menos padding interno */
  @media (max-width: 480px){
    body[data-app="admin"] .overlay .modal{ width: 99vw; }
    body[data-app="admin"] .overlay .modal .card{ padding-left: 8px; padding-right: 8px; }
  }
  /* Primeira área do item ocupa o espaço elástico (protege contra .row/.col) */
  body[data-app="admin"] .card .list .item > :first-child,
  body[data-app="admin"] .card .items .item > :first-child,
  body[data-app="admin"] .card .rows .row > :first-child,
  body[data-app="admin"] .card .list-group .list-group-item > :first-child,
  body[data-app="admin"] .card .list .item .row > :first-child,
  body[data-app="admin"] .card .rows .row .col:first-child{ flex: 1 1 auto; min-width: 0; }
  /* Conteúdo do item com ellipsis */
  body[data-app="admin"] .card .list .item > *,
  body[data-app="admin"] .card .items .item > *,
  body[data-app="admin"] .card .rows .row > *{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Ações à direita */
  body[data-app="admin"] .card .list .item .actions,
  body[data-app="admin"] .card .items .item .actions,
  body[data-app="admin"] .card .rows .row .actions,
  body[data-app="admin"] .card .list-group .list-group-item .actions{
    display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-left: auto; flex: 0 0 auto; min-width: 120px;
  }






  
  /* Empurrar botões/links para a direita mesmo sem wrapper .actions */
  body[data-app="admin"] .card .list .item > .btn-danger,
  body[data-app="admin"] .card .list .item > .btn,
  body[data-app="admin"] .card .list-group .list-group-item > .btn-danger,
  body[data-app="admin"] .card .list-group .list-group-item > .btn{ margin-left: auto; flex: 0 0 auto; }
  /* Botão vermelho com raio menor no mobile (evita parecer "cortado") */
  body[data-app="admin"] .card .list .item .btn-danger,
  body[data-app="admin"] .card .list-group .list-group-item .btn-danger{ border-radius: 6px; }
  /* Botões das ações compactos e sem quebra */
  body[data-app="admin"] .card .list .item .actions .btn,
  body[data-app="admin"] .card .list-group .list-group-item .actions .btn{ white-space: nowrap; min-width: 68px; padding:6px 10px; flex: 0 0 auto; }
  /* Fallback: se não houver .actions, empurra o botão vermelho com auto margin */
  body[data-app="admin"] .card .list-group .list-group-item .btn-danger{ margin-left: auto; flex: 0 0 auto; }
  /* Forçar 100% de largura e remover quaisquer limites herdados nos containers */
  body[data-app="admin"] .card .list,
  body[data-app="admin"] .card .items,
  body[data-app="admin"] .card .rows,
  body[data-app="admin"] .card .list-group,
  body[data-app="admin"] .card .list-group .list-group-item{
    width: 100% !important; max-width: none !important; box-sizing: border-box;
  }



  /* Evitar quebra interna quando existir .row/.col dentro do item */
  body[data-app="admin"] .card .list-group .list-group-item .row{ flex-wrap: nowrap !important; }
  body[data-app="admin"] .card .list-group .list-group-item .row > [class*="col"]{ min-width: 0; }
  body[data-app="admin"] .card .list-group .list-group-item .row > [class*="col"]:first-child{ flex: 1 1 auto; }
}
 

/* ===== Modal: Detalhes do aluno (mobile) ===== */
@media (max-width: 900px){
  /* Modal mais largo e com área de conteúdo rolável confortável */
  body[data-app="admin"] .overlay .modal{ width: 96vw; max-width: none; }
  body[data-app="admin"] .overlay .modal-body{
    max-height: calc(100vh - 180px); /* cabeçalho + rodapé aproximados */
    overflow: auto; padding-bottom: 16px;
  }
  body[data-app="admin"] .overlay .modal-footer{
    position: sticky; bottom: 0; background: #fff;
    padding: 10px 12px; border-top: 1px solid #e5e7eb;
  }
  /* Inputs e botões não comprimirem horizontalmente */
  body[data-app="admin"] .overlay .modal input,
  body[data-app="admin"] .overlay .modal select{ min-height: 40px; }
  body[data-app="admin"] .overlay .modal .btn{ min-height: 40px; }
  /* Espaçamento entre blocos (Matrículas, Graduação, etc.) */
  body[data-app="admin"] .overlay .modal h3,
  body[data-app="admin"] .overlay .modal h4{ margin-top: 16px; margin-bottom: 8px; }
  body[data-app="admin"] .overlay .modal .section,
  body[data-app="admin"] .overlay .modal .card{ margin-bottom: 12px; }
  /* Tabelas dentro do modal: evitar colapso e permitir ellipsis */
  body[data-app="admin"] .overlay .modal table{ table-layout: fixed; width: 100%; border-collapse: collapse; }
  body[data-app="admin"] .overlay .modal th,
  body[data-app="admin"] .overlay .modal td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Matrículas/Graduação no modal: layout estável no mobile, sem ocultar dados */
  @media (max-width: 700px){
    /* Tabelas do modal com truncamento suave */
    body[data-app="admin"] .overlay .modal table{ table-layout: fixed; width: 100%; border-collapse: collapse; }
    body[data-app="admin"] .overlay .modal th,
    body[data-app="admin"] .overlay .modal td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Permitir que colunas de dados no modal quebrem linha e não comprimam tudo */
    body[data-app="admin"] .overlay .modal td:not(:last-child){ white-space: normal; word-break: break-word; min-width: 0; }
    /* Inputs/selects dentro das células devem ocupar a largura disponível */
    body[data-app="admin"] .overlay .modal td input,
    body[data-app="admin"] .overlay .modal td select{ max-width: 100%; width: 100%; }
    /* Listas (ex.: Graduação/Matrículas) dentro do modal seguem o mesmo padrão dos cards */
    /* GRID para itens no modal, sem coluna de índice no mobile: [conteúdo] [ações] */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item{ 
      display: grid; grid-template-columns: 1fr minmax(120px, max-content);
      align-items: center; gap: 8px; padding-right: 12px; overflow: visible;
    }
    /* Conteúdo elástico com quebra agressiva se necessário */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item > :nth-child(1){
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal;
      overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
    }
    /* Esconde a antiga coluna de índice no mobile (
       se existir como primeiro filho) para liberar largura */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item > :first-child:has(+ *){
      display: none;
    }
    /* Ações na 2ª coluna, alinhadas à direita */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item .actions{ grid-column: 2; justify-self: end; display: inline-flex; gap: 8px; }
    /* Inputs/Selects dentro do item ocupam a largura disponível sem estourar */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item input,
    body[data-app="admin"] .overlay .modal .list-group .list-group-item select{ max-width: 100%; width: 100%; }
    /* Ações: tentam ficar à direita; se faltar espaço, vão para a linha de baixo ocupando 100% */
    /* Quando houver quebra vertical, as ações continuam na coluna 3 e alinhadas à direita */
    /* Quebras seguras em estruturas .row/.col dentro do modal */
    body[data-app="admin"] .overlay .modal .row{ flex-wrap: wrap; }
    body[data-app="admin"] .overlay .modal .row > [class*="col"]{ min-width: 0; flex: 1 1 auto; }
    body[data-app="admin"] .overlay .modal .row > [class*="col"]:last-child{ flex: 0 0 auto; }
    /* Botão vermelho direto dentro do item: empurra para a direita */
    body[data-app="admin"] .overlay .modal .list-group .list-group-item > .btn-danger{ margin-left: auto; }
    body[data-app="admin"] .overlay .modal .list-group .list-group-item .actions .btn{ white-space: nowrap; padding: 5px 8px; font-size: 12px; }
    /* Coluna de ações um pouco maior no modal para evitar compressão */
    body[data-app="admin"] .overlay .modal td:last-child{ width: 150px; text-align: right; padding-right: 8px; }
    body[data-app="admin"] .overlay .modal td:last-child .btn{ padding: 5px 8px; font-size: 12px; white-space: nowrap; }
    /* Respira entre linhas */
    body[data-app="admin"] .overlay .modal table tbody tr > td{ padding-top: 10px; padding-bottom: 10px; }

    /* Layout "card" para tabelas do modal em telas estreitas: empilha as células */
    body[data-app="admin"] .overlay .modal table thead{ display: none; }
    /* TR em GRID no modal, sem coluna de índice no mobile: [conteúdo] [ações] */
    body[data-app="admin"] .overlay .modal table tbody tr{
      display: grid; grid-template-columns: 1fr minmax(130px, max-content);
      align-items: center; column-gap: 8px; row-gap: 6px; border-bottom: 1px solid #f0f0f0; padding: 6px 0;
    }
    body[data-app="admin"] .overlay .modal table tbody td{ white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
    /* Oculta o primeiro td (índice) no mobile para liberar largura */
    body[data-app="admin"] .overlay .modal table tbody td:first-child{ display: none; }
    /* Última coluna (ações) alinhada à direita */
    body[data-app="admin"] .overlay .modal table tbody td:last-child{ justify-self: end; display: inline-flex; gap: 8px; }

    /* Modal-body ocupa a largura total do modal para não "estreitar" conteúdo */
    body[data-app="admin"] .overlay .modal-body{ width: 100%; max-width: 100%; padding-left: 12px; padding-right: 12px; }
  }
}

/* Forçar contêineres da tabela a usarem 100% no mobile e remover espaçamento à direita */
@media (max-width: 900px){
  body[data-app="admin"] .table-container,
  body[data-app="admin"] .table-wrapper,
  body[data-app="admin"] .card:has(table),
  body[data-app="admin"] .card .table{ width: 100% !important; }
  body[data-app="admin"] .table-container{ padding-right: 0 !important; margin-right: 0 !important; }
  /* Card da lista: reduzir padding lateral para alinhar com os botões do topo */
  body[data-app="admin"] .card:has(table){ padding-left: 12px; padding-right: 0; }
  /* Alinhar a coluna Ações com o botão Buscar do topo (mesma borda direita) */
  body[data-app="admin"] .table{ margin-right: 0 !important; }
}

/* ===== Layout tabular responsivo no celular (sem quebrar visual) ===== */
@media (max-width: 600px){
  /* Layout tabular com colunas enxutas */
  body[data-app="admin"] .table{ table-layout: fixed; width: 100% !important; border-collapse: collapse; border-spacing: 0; }
  /* Oculta header no mobile para evitar sobreposição e ganhar espaço */
  body[data-app="admin"] .table thead{ display: none; }
  body[data-app="admin"] .table tbody tr{ display: table-row; }
  body[data-app="admin"] .table th, 
  body[data-app="admin"] .table td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 8px; vertical-align: middle; }
  body[data-app="admin"] .table td a{ display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* Esconde a 1ª coluna (ordem) para abrir espaço */
  body[data-app="admin"] .table thead th:nth-child(1),
  body[data-app="admin"] .table tbody td:nth-child(1){ display: none; }

  /* Redistribui larguras: Nome auto, CI 80px, Ações 140px */
  body[data-app="admin"] .table thead th:nth-child(2),
  body[data-app="admin"] .table tbody td:nth-child(2){ width: auto; }
  body[data-app="admin"] .table thead th:nth-child(3),
  body[data-app="admin"] .table tbody td:nth-child(3){ width: 70px; padding-right: 12px; text-align: right; }
  body[data-app="admin"] .table thead th:last-child{ padding-right: 0; }
  body[data-app="admin"] .table tbody td:last-child{
    width: 160px; text-align: right; padding-right: 0; 
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  }

  /* Botões de ação mais compactos */
  body[data-app="admin"] .table tbody td:last-child .btn{ padding: 6px 10px; font-size: 13px; line-height: 1.2; flex: 0 0 auto; white-space: nowrap; min-width: 72px; }
  body[data-app="admin"] .table tbody td:last-child .btn.btn-danger{ padding: 6px 10px; font-size: 12.5px; flex: 0 0 auto; }
  body[data-app="admin"] .table tbody td:last-child .btn + .btn{ margin-left: 6px; }
}
/* Evitar sobreposição do título com o botão ☰ e descer a linha de ações */
@media (max-width: 992px){
  body[data-app="admin"] .content-title{ padding-left: 52px; } /* botão ~40px + espaçamento */
  body[data-app="admin"] .content-header .header-actions{ margin-top: 12px; }
}

/* Admin: grids para 1 coluna no mobile */
@media (max-width: 700px){
  body[data-app="admin"] .grid-2,
  body[data-app="admin"] .grid-3{ grid-template-columns: 1fr !important; }
  body[data-app="admin"] .main-content{ padding: 12px !important; }
  body[data-app="admin"] .card{ padding: 12px; }
  /* Botões do topo: manter 3 por linha com calc (descontando gaps) */
  body[data-app="admin"] .content-header .header-actions{ gap: 6px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  body[data-app="admin"] .content-header .header-actions > *{ min-width: 0 !important; width: 100% !important; }
  body[data-app="admin"] .content-header .header-actions .btn{ padding: 8px 10px; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* (removido) bloco temporário de prova de vida */

/* ===== M8: Tipografia otimizada para mobile ===== */
@media (max-width: 700px){
  /* Base font e line-height um pouco maiores para leitura */
  body[data-app="admin"],
  body[data-app="aluno"],
  body[data-app="saas"],
  body[data-app="home"]{ font-size: 15px; line-height: 1.5; }

  /* Títulos */
  body[data-app="admin"] .content-title,
  body[data-app="saas"] .content-title{ font-size: 22px; }
  body[data-app="home"] .hero-section h1{ font-size: 2.1rem; }
}

@media (max-width: 480px){
  /* Texto levemente menor para caber em telas mu ito estreitas */
  body[data-app="admin"],
  body[data-app="aluno"],
  body[data-app="saas"],
  body[data-app="home"]{ font-size: 14px; line-height: 1.5; }

  /* Títulos */
  body[data-app="admin"] .content-title,
  body[data-app="saas"] .content-title{ font-size: 20px; }
  body[data-app="home"] .hero-section h1{ font-size: 1.9rem; }
  /* Subtítulos e labels mais legíveis */
  body[data-app="admin"] .filter-label,
  body[data-app="saas"] .label{ font-size: 12px; }
}

/* ===== M5: Foco/ativo acessível no mobile (outline visível) ===== */
@media (max-width: 900px){
  /* Botões, inputs e links clicáveis */
  body[data-app="admin"] .btn:focus-visible,
  body[data-app="admin"] button:focus-visible,
  body[data-app="admin"] a:focus-visible,
  body[data-app="admin"] input:focus-visible,
  body[data-app="admin"] select:focus-visible,
  body[data-app="aluno"] .btn:focus-visible,
  body[data-app="aluno"] button:focus-visible,
  body[data-app="aluno"] a:focus-visible,
  body[data-app="aluno"] input:focus-visible,
  body[data-app="aluno"] select:focus-visible,
  body[data-app="saas"] .btn:focus-visible,
  body[data-app="saas"] button:focus-visible,
  body[data-app="saas"] a:focus-visible,
  body[data-app="saas"] input:focus-visible,
  body[data-app="saas"] select:focus-visible{
    outline: 2px solid #3b82f6; /* azul da marca */
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
  }
  /* Itens de navegação (admin/saas) */
  body[data-app="admin"] .nav-item:focus-visible,
  body[data-app="saas"] .nav-item:focus-visible{
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  /* Estado ativo sutil para feedback tátil/visual */
  body[data-app="admin"] .btn:active,
  body[data-app="aluno"] .btn:active,
  body[data-app="saas"] .btn:active{ filter: brightness(0.98); }
}

/* ===== M4: Modais em telas muito pequenas (<=360px) ===== */
@media (max-width: 360px){
  /* Admin: overlay/modal mais compactos */
  body[data-app="admin"] .overlay .modal{ width: 96vw; max-width: none; padding: 10px; border-radius: 10px; }
  body[data-app="admin"] .overlay .modal-body{ max-height: calc(92vh - 90px); }

  /* Aluno: caixas de modal e áreas internas */
  body[data-app="aluno"] .modal .box{ width: 96vw; padding: 10px; border-radius: 10px; }
  body[data-app="aluno"] #cardBody{ max-height: calc(92vh - 56px); }
  body[data-app="aluno"] .code{ font-size: 11px; }

  /* Home: modal-content mais estreito e com margens menores */
  body[data-app="home"] .modal-content{ width: 94vw; margin: 6% auto; border-radius: 12px; }
  body[data-app="home"] .modal-header{ padding: 14px; }
}

/* ===== M3: Tap targets e inputs mais confortáveis em <=480px ===== */
@media (max-width: 480px){
  /* Botões maiores (admin/aluno/saas) */
  body[data-app="admin"] .btn,
  body[data-app="aluno"] .btn,
  body[data-app="saas"] .btn{ min-height: 40px; padding: 10px 12px; }

  /* Inputs/Selects com altura melhor para toque */
  body[data-app="admin"] input,
  body[data-app="admin"] select,
  body[data-app="aluno"] input,
  body[data-app="aluno"] select,
  body[data-app="saas"] input,
  body[data-app="saas"] select{ min-height: 40px; padding: 10px 12px; }

  /* Espaçamento entre botões de ações em tabela */
  body[data-app="admin"] .action-buttons{ gap: 10px; }

  /* Títulos um pouco menores para caber melhor */
  body[data-app="admin"] .content-title,
  body[data-app="saas"] .content-title{ font-size: 20px; }
}
body[data-app="admin"] .header-actions { flex-wrap: wrap; }

/* Aba Mensalidades: manter botões visíveis */
body[data-app="admin"] #view-mensalidades .content-header { align-items: flex-start; }
body[data-app="admin"] #view-mensalidades .header-actions { justify-content: flex-start; padding-right: 0; }
body[data-app="admin"] #view-mensalidades .header-actions .btn { flex: 0 1 auto; }

/* Filtros da aba Mensalidades: Buscar (texto) deve ser o maior */
body[data-app="admin"] #view-mensalidades .filters-section .filters-row{
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(120px, 180px) 1fr; /* Competência | Status | Buscar (flex) */
  gap: 12px;
  align-items: end;
}
body[data-app="admin"] #view-mensalidades .filters-section .filter-group.flex-1{ grid-column: 3; }
body[data-app="admin"] #view-mensalidades .filters-section .filter-group.flex-1 input{ width: 100%; }
@media (max-width: 820px){
  body[data-app="admin"] #view-mensalidades .filters-section .filters-row{ grid-template-columns: 1fr 1fr; }
  body[data-app="admin"] #view-mensalidades .filters-section .filter-group.flex-1{ grid-column: 1 / -1; }
}
@media (max-width: 520px){
  body[data-app="admin"] #view-mensalidades .filters-section .filters-row{ grid-template-columns: 1fr; }
}

/* Desktop (>=901px): TABELA padrão (como antes) */
@media (min-width: 901px){
  body[data-app="admin"] #view-mensalidades table.table{ display: table !important; }
  body[data-app="admin"] #view-mensalidades #m_list{ display: none !important; }
  body[data-app="admin"] #view-mensalidades #m_sel_box{ display: flex !important; }
  /* Garantir que a linha ocupe 100% e os botões encostem no lado direito */
  body[data-app="admin"] #view-mensalidades .table-container{ padding-right: 0; }
  body[data-app="admin"] #view-mensalidades .card{ padding-right: 0; }
  body[data-app="admin"] #view-mensalidades table.table{ width: 100% !important; table-layout: auto; }
  body[data-app="admin"] #view-mensalidades table.table th#m_col_acoes{ text-align: right; }
  body[data-app="admin"] #view-mensalidades table.table td:last-child{ text-align: right; padding-right: 0; }
  /* Reversão: pager segue estilo padrão do sistema */
  body[data-app="admin"] #view-mensalidades .table-container{ display: block; }
  body[data-app="admin"] #view-mensalidades #pager.pagination{
    margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0;
    display: flex; justify-content: flex-end; gap: 8px;
  }
}

/* Mensalidades: somente LISTA no mobile (tabela oculta) */
@media (max-width: 900px){
  body[data-app="admin"] #view-mensalidades table.table{ display: none !important; }
  body[data-app="admin"] #view-mensalidades #m_list{ display: block !important; }
  body[data-app="admin"] #view-mensalidades #m_sel_box{ display: none !important; }

  body[data-app="admin"] #view-mensalidades .mobile-list{ display: flex; flex-direction: column; gap: 10px; }
  body[data-app="admin"] #view-mensalidades .mobile-list .empty{ text-align: center; color: #6b7280; padding: 12px; white-space: normal; }
  body[data-app="admin"] #view-mensalidades .m-item{
    display: grid; grid-template-columns: 1fr; gap: 6px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  }
  /* Mobile: mostrar só Nome, Competência e Status; esconder Usuário e Atualizado */
  body[data-app="admin"] #view-mensalidades .m-main .m-sub:first-of-type{ display:none !important; } /* Usuário */
  /* Exibir Atualizado e Valor (linha única como na referência) */
  body[data-app="admin"] #view-mensalidades .m-main .m-sub:last-of-type{ display:inline !important; }
  body[data-app="admin"] #view-mensalidades .m-tags span{ display:inline-block !important; }
  body[data-app="admin"] #view-mensalidades .m-title{ font-size:12px; line-height:1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-app="admin"] #view-mensalidades .m-sub{ font-size:12px; }
  /* Badge padrão do card – igual ao modal */
  body[data-app="admin"] #view-mensalidades .m-tags .badge{ font-size:11.5px; padding:3px 8px; border-radius:999px; }
  body[data-app="admin"] #view-mensalidades .m-tags .badge.warning{ background:#fef3c7; color:#b45309; }
  body[data-app="admin"] #view-mensalidades .m-tags .badge.success{ background:#dcfce7; color:#166534; }
  /* Esconder ações no mobile (vamos trocar por botão Abrir via HTML em seguida) */
  body[data-app="admin"] #view-mensalidades .m-actions{ display:none !important; }
  /* Botão Abrir injetado via JS */
  /* Linha de valor + status lado a lado, com pouco espaço vertical */
  body[data-app="admin"] #view-mensalidades .m-tags{ display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; }
  body[data-app="admin"] #view-mensalidades .m-main{ display:grid; gap:4px; }
  body[data-app="admin"] #view-mensalidades .m-open{ display:flex; justify-content:flex-end; margin-top:4px; }
  body[data-app="admin"] #view-mensalidades .m-open .btn{ padding:4px 8px; font-size:12px; line-height:1.2; min-height:26px; border-radius:10px; }
  /* Reversão: pager mobile volta ao padrão */
  body[data-app="admin"] #view-mensalidades #m_pager.pagination{
    margin-top: 6px; padding: 6px 8px; background: transparent; border: 0; border-radius: 0; display: flex; align-items: center; gap: 8px; position: relative;
  }
  /* Barra fina de progresso visual */
  body[data-app="admin"] #view-mensalidades #m_pager.pagination::before{
    content: ""; display: block; height: 8px; background: #9ca3af; border-radius: 999px; flex: 1 1 auto;
  }
  /* Compactar botões do pager e mostrar apenas setas */
  body[data-app="admin"] #view-mensalidades #m_pager .btn{ font-size: 0; padding: 6px; min-width: 28px; }
  body[data-app="admin"] #view-mensalidades #m_pager .btn:nth-child(1)::after{ content: '◄'; font-size: 14px; }
  body[data-app="admin"] #view-mensalidades #m_pager .btn:nth-child(2)::after{ content: '‹'; font-size: 14px; }
  body[data-app="admin"] #view-mensalidades #m_pager .btn:nth-last-child(2)::after{ content: '›'; font-size: 14px; }
  body[data-app="admin"] #view-mensalidades #m_pager .btn:nth-last-child(1)::after{ content: '►'; font-size: 14px; }

  /* Layout em linha: título em cima; abaixo, valor+status+atualizado na mesma linha */
  body[data-app="admin"] #view-mensalidades .m-main{ display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; }
  body[data-app="admin"] #view-mensalidades .m-title{ flex: 1 1 100%; }
  body[data-app="admin"] #view-mensalidades .m-tags{ display: inline-flex; align-items: center; gap: 8px; }
  body[data-app="admin"] #view-mensalidades .m-main .m-sub:last-of-type::before{ content: '—'; margin: 0 8px; color: #9ca3af; }
  body[data-app="admin"] #view-mensalidades .m-main{ display: grid; gap: 4px; }
  body[data-app="admin"] #view-mensalidades .m-title{ font-weight: 600; color: #111827; font-size: 15px; line-height: 1.3; }
  body[data-app="admin"] #view-mensalidades .m-sub{ font-size: 12px; color: #6b7280; line-height: 1.35; }
  body[data-app="admin"] #view-mensalidades .m-tags{ display:flex; gap:6px; align-items:center; flex-wrap: wrap; }
  body[data-app="admin"] #view-mensalidades .m-tags span{ font-weight:600; color:#111827; }
  /* Override global .btn grande: diminuir apenas nesta aba */
  body[data-app="admin"] #view-mensalidades .btn{ min-height: 32px; padding: 6px 10px; font-size: 13px; }
  /* Ações em grid auto-ajustável: botões menores e responsivos */
  body[data-app="admin"] #view-mensalidades .m-actions{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px; align-items: stretch;
  }
  body[data-app="admin"] #view-mensalidades .m-actions .btn{ padding: 5px 8px; font-size: 12px; line-height: 1.15; min-width: 0; border-radius: 8px; min-height: 30px; }
  body[data-app="admin"] #view-mensalidades .m-actions .btn.btn-danger{ padding: 5px 8px; font-size: 12px; min-height: 30px; }
  body[data-app="admin"] #view-mensalidades .mobile-list{ margin-bottom: 10px; }
  /* Pager compacto e centralizado */
  body[data-app="admin"] #view-mensalidades #m_pager{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top: 6px; }
  body[data-app="admin"] #view-mensalidades #m_pager .btn{ min-width: 34px; padding: 5px 8px; font-size: 12px; border-radius: 8px; min-height: 30px; }

  /* Badges menores dentro da lista */
  body[data-app="admin"] #view-mensalidades .m-item .badge{ font-size: 11px; padding: 2px 6px; border-radius: 999px; }
}

/* Filtros: linhas quebram, grupos flexíveis e inputs sem estourar a largura */
body[data-app="admin"] .filters-section { overflow-x: hidden; }
body[data-app="admin"] .filters-row { flex-wrap: wrap; }
body[data-app="admin"] .filter-group { flex: 1 1 180px; min-width: 160px; }
body[data-app="admin"] .filter-group.flex-1 { flex: 1 1 240px; }

/* Inputs/Selects/Botões mais flexíveis e sem estourar a largura */
body[data-app="admin"] .filters-section .filter-group input,
body[data-app="admin"] .filters-section .filter-group select,
body[data-app="admin"] .filters-section .filter-group button { max-width: 100%; width: 100%; flex: 1 1 auto; }

/* Grupos especiais (checkbox Agrupar por aluno e botão Filtrar) não esticam */
body[data-app="admin"] #m_group_wrap.filter-group,
body[data-app="admin"] .filters-section .filter-group:has(> button.btn.btn-primary) { flex: 0 0 auto; min-width: max-content; }

/* Breakpoints seguros */
@media (max-width: 1200px) {
  body[data-app="admin"] .content-header .header-actions { width: 100%; justify-content: flex-start; }
  /* Sidebar mais enxuta e conteúdo ajustado */
  body[data-app="admin"] .sidebar { width: 220px; }
  body[data-app="admin"] .main-content { margin-left: 220px; }
}

@media (max-width: 992px) {
  body[data-app="admin"] .filters-section .filter-group { flex: 1 1 45%; min-width: 220px; }
  body[data-app="admin"] .sidebar { width: 200px; }
  body[data-app="admin"] .main-content { margin-left: 200px; }
}

@media (max-width: 768px) {
  body[data-app="admin"] .content-header { flex-direction: column; align-items: flex-start; }
  body[data-app="admin"] .content-header .header-actions { width: 100%; justify-content: flex-start; }
  body[data-app="admin"] .content-header .header-actions .btn { flex: 1 1 auto; }

  body[data-app="admin"] .filters-section .filter-group { flex: 1 1 100%; min-width: 220px; }
  body[data-app="admin"] #m_group_wrap.filter-group { flex: 0 0 auto; }
  body[data-app="admin"] .filters-section .filter-group:has(> button.btn.btn-primary) { align-self: flex-end; }

  /* Sidebar compacta para sobrar espaço de conteúdo */
  body[data-app="admin"] .sidebar { width: 180px; }
  body[data-app="admin"] .main-content { margin-left: 180px; }

  /* Tabela: não quebrar nomes verticalmente; use scroll horizontal no container */
  body[data-app="admin"] .table { table-layout: fixed; }
  body[data-app="admin"] .table th,
  body[data-app="admin"] .table td { white-space: nowrap; }
  /* Colunas mínimas */
  body[data-app="admin"] #m_col_aluno, body[data-app="admin"] .table td.col-nome { min-width: 180px; }
  body[data-app="admin"] #m_col_comp { min-width: 120px; }
  body[data-app="admin"] #m_col_valor { min-width: 110px; text-align: left; }
  body[data-app="admin"] #m_col_status { min-width: 110px; }
  body[data-app="admin"] #m_col_upd { min-width: 150px; }
  body[data-app="admin"] #m_col_acoes, body[data-app="admin"] .table td.actions-col { min-width: 160px; text-align: right; }
}

@media (max-width: 480px) {
  body[data-app="admin"] .table .btn { padding: 6px 10px; }
  body[data-app="admin"] .pagination { justify-content: center; }
  body[data-app="admin"] .content-title { font-size: 20px; }
  body[data-app="admin"] input,
  body[data-app="admin"] select { padding: 8px 10px; }
  body[data-app="admin"] .btn { padding: 6px 10px; }
}

/* Botão hambúrguer (mobile) */
body[data-app="admin"] .mobile-menu-btn{
  position: fixed; top: 12px; left: 12px; z-index: 1100;
  width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid #d1d5db; background: #ffffffcc; backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
}

/* Overlay da sidebar (mobile) */
body[data-app="admin"] .sidebar-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 1050; display: none;
}

/* Estados quando aberto + animação suave*/
body[data-app="admin"] .sidebar-overlay{ opacity: 0; transition: opacity .25s ease; }
body[data-app="admin"].sidebar-open .sidebar-overlay{ display: block; opacity: 1; }

/* Sidebar off-canvas no mobile (forçado) */
@media (max-width: 992px){
  body[data-app="admin"] .mobile-menu-btn{ display: inline-flex !important; }
  body[data-app="admin"] .sidebar{
    position: fixed !important; top:0; left:0; height:100vh; width:250px;
    transform: translateX(-100%) !important; transition: transform .25s ease; z-index: 1101; will-change: transform;
  }
  body[data-app="admin"].sidebar-open .sidebar{ transform: translateX(0) !important; }
  body[data-app="admin"] .main-content{ margin-left: 0 !important; }
  /* Evita rolagem do fundo quando o menu está aberto */
  body.sidebar-open{ overflow: hidden !important; }
}

/* ===== Regras mobile extraidas de resources/views/admin_panel.blade.php ===== */
@media (max-width: 900px){
  body[data-app="admin"] .content-header { flex-direction: column; align-items: stretch; gap: 8px; }
  /* Grid resolve estouro com cálculo automático */
  body[data-app="admin"] .content-header .header-actions{
    width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; align-items: stretch;
  }
  body[data-app="admin"] .content-header .header-actions > *{
    min-width: 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box; margin: 0 !important;
  }
  body[data-app="admin"] .content-header .header-actions .btn{
    padding: 8px 10px; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100% !important; display: inline-flex; align-items: center; justify-content: center;
  }
  body[data-app="admin"] .content-header .header-actions .btn svg{ flex: 0 0 auto; }
}
@media (max-width: 900px){
  /* Filtros em 1 coluna e sem estouro */
  body[data-app="admin"] .filters-section{ display: grid; grid-template-columns: 1fr; gap: 10px; }
  body[data-app="admin"] .filters-row{ display: grid; grid-template-columns: 1fr; gap: 10px; }
  body[data-app="admin"] .filters-section .filter-group{ min-width: 0 !important; width: 100% !important; }
  body[data-app="admin"] .filters-section input,
  body[data-app="admin"] .filters-section select,
  body[data-app="admin"] .filters-section .btn{ width: 100%; }

  /* Status + Buscar na mesma linha (quando houver botão na mesma row) */
  body[data-app="admin"] .filters-row:has(button),
  body[data-app="admin"] .filters-row:has(.btn){
    grid-template-columns: 1fr minmax(120px, 160px);
    align-items: end;
  }
  body[data-app="admin"] .filters-row:has(button) .btn,
  body[data-app="admin"] .filters-row:has(.btn) .btn{ width: auto; }

  /* 3 na mesma linha (60/20/20): [input busca 60%][status 20%][botão 20%] */
  body[data-app="admin"] .filters-row:has(input):has(select):has(.btn){
    grid-template-columns: 3fr 1fr 1fr; /* equivalente a ~60/20/20 e não estoura com gap */
    align-items: end;
  }
  body[data-app="admin"] .filters-row:has(input):has(select):has(.btn) input{ min-width: 0; }
  body[data-app="admin"] .filters-row:has(input):has(select):has(.btn) .btn{ width: auto; }
}
/* Removido min-width forçado da tabela no mobile para não estourar */
@media (max-width: 900px){
  /* Sidebar mantida visível, mas mais estreita */
  body[data-app="admin"] .sidebar{ width: 220px; padding: 14px 0; }
  body[data-app="admin"] .logo{ padding: 0 12px 16px; }
  body[data-app="admin"] .logo-img{ max-width: 120px; height: 48px; }
  body[data-app="admin"] .logo-title{ display:block; }
  body[data-app="admin"] .nav-item{ justify-content: flex-start; padding: 10px 12px; }
  body[data-app="admin"] .nav-item .label{ display: inline; }
  body[data-app="admin"] .nav-item .icon{ margin-right: 10px; }
  body[data-app="admin"] .main-content{ margin-left: 220px; padding: 14px; }
  body[data-app="admin"] .content-header{ gap: 10px; }
  body[data-app="admin"] .header-actions .btn{ flex: 1 1 100%; }
}
@media (max-width: 600px){
  body[data-app="admin"] .main-content{ padding: 12px; }
  body[data-app="admin"] .content-title{ font-size: 20px; }
  body[data-app="admin"] .btn{ padding: 8px 12px; font-size: 14px; }
  body[data-app="admin"] .btn-primary{ width: 100%; }
}
@media (max-width: 600px){
  body[data-app="admin"] .overlay .modal{ width: 96vw; padding: 12px; }
  body[data-app="admin"] .overlay .modal-body{ max-height: calc(92vh - 100px); }
}

/* ===== Regras mobile extraidas de resources/views/aluno_panel.blade.php ===== */
@media (max-width: 700px){
  body[data-app="aluno"] .grid{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  body[data-app="aluno"] #cardBrickContainer iframe{ transform: scale(.94); width:108%; }
  body[data-app="aluno"] .modal .box{ width:94vw; padding:12px; max-height:92vh; }
  body[data-app="aluno"] #cardBody{ max-height: calc(92vh - 64px); }
  body[data-app="aluno"] #cardModal .box > .row:first-child strong{ font-size:16px; }
}
/* Topbar responsiva no aluno */
@media (max-width: 700px){
  body[data-app="aluno"] .topbar{ gap:8px; flex-wrap: wrap; justify-content: space-between; }
  body[data-app="aluno"] .topbar .title{ font-size:22px; }
  body[data-app="aluno"] .table-actions .btn{ flex: 1 1 auto; }
}
@media (max-width: 480px){
  body[data-app="aluno"] .table-actions .btn{ width:100%; }
  body[data-app="aluno"] .btn-icon{ justify-content:center; }
}

/* ===== Regras mobile extraídas de resources/views/saas_client_panel.blade.php ===== */
@media (max-width: 800px){
  body[data-app="saas"] .grid-2{ grid-template-columns: 1fr; }
}

/* ===== Regras mobile extraídas de resources/views/saas_panel.blade.php ===== */
@media (max-width: 1000px){
  body[data-app="saas"] .grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px){
  body[data-app="saas"] .grid-2,
  body[data-app="saas"] .grid-3{ grid-template-columns: 1fr; }
}

/* ===== Regras mobile extraídas de resources/views/home.blade.php ===== */
@media (max-width: 768px){
  body[data-app="home"] .container{ grid-template-columns: 1fr; width: 95vw; margin: 20px 0; }
  body[data-app="home"] .hero-section h1{ font-size: 2rem; }
  body[data-app="home"] .options-section{ padding: 30px 20px; }
}

/* ===== UX de rolagem horizontal no mobile (tabelas/listas) ===== */
@media (max-width: 900px){
  /* Admin: container de tabelas */
  body[data-app="admin"] .table-container{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
  }
  body[data-app="admin"] .table-container::-webkit-scrollbar{ height: 8px; }
  body[data-app="admin"] .table-container::-webkit-scrollbar-track{ background: #f3f4f6; }
  body[data-app="admin"] .table-container::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 8px; }

  /* Fallback: quando tabela não está dentro de .table-container */
  body[data-app="admin"] table.table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-app="aluno"] #mensalidadesOut::-webkit-scrollbar,
  body[data-app="aluno"] #gradHistorico::-webkit-scrollbar{ height: 8px; }
  body[data-app="aluno"] #mensalidadesOut::-webkit-scrollbar-track,
  body[data-app="aluno"] #gradHistorico::-webkit-scrollbar-track{ background: #f3f4f6; }
  body[data-app="aluno"] #mensalidadesOut::-webkit-scrollbar-thumb,
  body[data-app="aluno"] #gradHistorico::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 8px; }
}

/* ===== M7: Refinos de tabelas no mobile (truncamento com ellipsis) ===== */
@media (max-width: 900px){
  /* Garantia adicional no mobile */
  body[data-app="admin"] .table{ table-layout: fixed; width: 100%; border-collapse: collapse; }
  /* Admin: aplica ellipsis em células, exceto coluna de ações */
  body[data-app="admin"] .table th,
  body[data-app="admin"] .table td:not(.col-acoes){
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* permite truncar sem comprimir a linha inteira */
  }
  /* Mantém ações visíveis */
  body[data-app="admin"] .table td.col-acoes{ white-space: nowrap; }
  /* Alinhar coluna de ações ao padrão do topo e reservar espaço mínimo */ 
  body[data-app="admin"] .table th.col-acoes,
  body[data-app="admin"] .table td.col-acoes{ width: 140px; text-align: right; padding-right: 6px; }
  body[data-app="admin"] .table th.col-acoes{ width: 140px; text-align: right; padding-right: 6px; }
 
  /* Tipografia e espaçamento menores para caber melhor */
  body[data-app="admin"] .table th,
  body[data-app="admin"] .table td{ padding: 6px 8px; font-size: 12.5px; }
  /* Links dentro da célula com truncamento e largura relativa */
  body[data-app="admin"] .table td a{
    display: inline-block; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Botões de ação levemente menores para caber melhor */
  body[data-app="admin"] .table td.col-acoes .btn{ padding: 5px 9px; font-size: 12.5px; line-height: 1.2; margin-right: 0; }
  /* Aluno: nas mensalidades, aplica ellipsis nas 3 primeiras colunas */
  body[data-app="aluno"] #mensalidadesOut table td:nth-child(-n+3),
  body[data-app="aluno"] #mensalidadesOut table th:nth-child(-n+3){
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body[data-app="aluno"] #gradHistorico table td,
  body[data-app="aluno"] #gradHistorico table th{
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}






/* ===== FINALIZAÇÃO (mobile/tablet) – regras específicas ===== */

/* 1) Filtros (Alunos): 50% | 30% | 20% somente na linha .compact (600–900px) */
@media (min-width: 600px) and (max-width: 900px){
    body[data-app="admin"] .filters-section .filters-row.compact{
      display: grid !important;
      grid-template-columns: minmax(300px, 50%) minmax(200px, 30%) minmax(160px, 20%) !important;
      gap: 8px; align-items: end; width: 100%;
    }
    body[data-app="admin"] .filters-section .filters-row.compact > .filter-group{ min-width: 0 !important; }
    body[data-app="admin"] .filters-section .filters-row.compact input,
    body[data-app="admin"] .filters-section .filters-row.compact select,
    body[data-app="admin"] .filters-section .filters-row.compact .btn{
      width: 100%; max-width: 100%; box-sizing: border-box;
    }
    body[data-app="admin"] .filters-section .filters-row.compact .btn{
      white-space: nowrap; min-width: 160px;
    }
  }
  
  /* 2) Detalhes do aluno > Gerar mensalidade pendente (linha com 4 blocos) */
  @media (max-width: 1400px){
    /* Linha onde estão Mês, Ano, Valor, Botões (em admin_panel.blade.php linhas 2664–2680) */
    body[data-app="admin"] #modalDetalhes .card .row{
      display: flex !important; flex-wrap: wrap; gap: 12px; align-items: end;
    }
    /* Mês e Ano lado a lado (35% + 35%), com mínimo para não “apertar” */
    body[data-app="admin"] #modalDetalhes .card .row > div:nth-child(1),
    body[data-app="admin"] #modalDetalhes .card .row > div:nth-child(2){
      flex: 0 0 calc(35% - 6px) !important; max-width: calc(35% - 6px) !important;
      min-width: 140px; box-sizing: border-box;
    }
    /* Valor ocupa 100% na linha seguinte */
    body[data-app="admin"] #modalDetalhes .card .row > div:nth-child(3){
      flex: 0 0 100% !important; max-width: 100% !important;
    }
    /* Botões ocupam 100% na linha seguinte (lado a lado, mesma altura) */
    body[data-app="admin"] #modalDetalhes .card .row > div:nth-child(4){
      flex: 0 0 100% !important; max-width: 100% !important;
      display: inline-flex !important; gap: 8px; flex-wrap: nowrap;
    }
    body[data-app="admin"] #modalDetalhes #qg_mes,
    body[data-app="admin"] #modalDetalhes #qg_ano,
    body[data-app="admin"] #modalDetalhes #qg_valor{
      width: 100% !important; max-width: 100% !important;
    }
  }
  
  /* 3) Consolidação: ações em listas/cards (empurra à direita e compacta) */
  @media (max-width: 900px){
    body[data-app="admin"] .card .list .item > .btn,
    body[data-app="admin"] .card .list .item > .btn-danger,
    body[data-app="admin"] .card .list-group .list-group-item > .btn,
    body[data-app="admin"] .card .list-group .list-group-item > .btn-danger{
      margin-left: auto; flex: 0 0 auto;
    }
    body[data-app="admin"] .card .list .item .actions .btn,
    body[data-app="admin"] .card .list-group .list-group-item .actions .btn{
      white-space: nowrap; min-width: 68px; padding: 6px 10px; flex: 0 0 auto;
    }
  }

  /* ===== Modal Detalhes: expandir Matrículas e Graduação (mobile) ===== */
@media (max-width: 900px){
    /* Contêineres ocupam toda a largura útil */
    body[data-app="admin"] #modalDetalhes #qd_matriculas,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes{
      width: 100% !important; max-width: 100% !important;
    }
  
    /* Tabelas desses blocos: layout auto e SEM grid/card */
    body[data-app="admin"] #modalDetalhes #qd_matriculas table,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes table{
      table-layout: auto !important; width: 100% !important; border-collapse: collapse;
    }
    /* Garante que o thead apareça (desfaz ocultação global do mobile) */
    body[data-app="admin"] #modalDetalhes #qd_matriculas thead,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes thead{
      display: table-header-group !important;
    }
    /* Desfaz conversão para grid/“cartões” nessas linhas específicas */
    body[data-app="admin"] #modalDetalhes #qd_matriculas tbody tr,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes tbody tr{
      display: table-row !important;
    }
  
    /* Células com quebra normal: mostram o conteúdo inteiro */
    body[data-app="admin"] #modalDetalhes #qd_matriculas th,
    body[data-app="admin"] #modalDetalhes #qd_matriculas td,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes th,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes td{
      white-space: normal !important;
      word-break: break-word;
      overflow: visible;
      min-width: 0;
    }
  
    /* Links nessas tabelas: sem limite de largura */
    body[data-app="admin"] #modalDetalhes #qd_matriculas td a,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes td a{
      max-width: none !important; white-space: normal !important;
    }
  
    /* Coluna de ações: mantém botões numa linha, sem esmagar as outras colunas */
    body[data-app="admin"] #modalDetalhes #qd_matriculas td:last-child,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes td:last-child{
      white-space: nowrap; text-align: right;
    }
    body[data-app="admin"] #modalDetalhes #qd_matriculas td:last-child .btn,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes td:last-child .btn{
      white-space: nowrap; min-width: 72px;
    }
  }

  /* ===== Modal Detalhes: garantir largura TOTAL só para Matrículas e Graduação ===== */
@media (max-width: 900px){
    /* Se estiverem dentro de .row/.col: força a coluna desses blocos a ocupar 100% */
    body[data-app="admin"] #modalDetalhes .row:has(#qd_matriculas) > *,
    body[data-app="admin"] #modalDetalhes .row:has(#qd_graduacoes) > *{
      flex: 1 1 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      min-width: 0 !important;
    }
  
    /* Se o pai for grid, faz o bloco atravessar todas as colunas (1 até o fim) */
    body[data-app="admin"] #modalDetalhes *:has(> #qd_matriculas),
    body[data-app="admin"] #modalDetalhes *:has(> #qd_graduacoes){
      grid-column: 1 / -1 !important;
      width: 100% !important;
      max-width: 100% !important;
    }
  
    /* O próprio container dos dados ocupa 100% e não herda limites */
    body[data-app="admin"] #modalDetalhes #qd_matriculas,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes{
      width: 100% !important;
      max-width: 100% !important;
      align-self: stretch !important;
    }
  
    /* Tabelas desses blocos: largura total, sem compressão */
    body[data-app="admin"] #modalDetalhes #qd_matriculas table,
    body[data-app="admin"] #modalDetalhes #qd_graduacoes table{
      table-layout: auto !important;
      width: 100% !important;
      max-width: 100% !important;
    }
  }
  
/* ===== Modo Tabela -> Lista (cards) no mobile ===== */
/* Aplique a classe .responsive-list na <table> e defina data-label nos <td> */
@media (max-width: 900px){
  /* Neutraliza estilos herdados (ex.: min-width locais) */
  table.responsive-list{ width:100% !important; min-width:0 !important; table-layout:auto !important; border-collapse: separate !important; border-spacing: 0 !important; }
  table.responsive-list thead{ display:none !important; }
  table.responsive-list tbody{ display: grid !important; gap: 10px !important; }
  table.responsive-list tbody tr{ display:block !important; padding:10px 12px !important; border:1px solid #e5e7eb !important; border-radius:10px !important; background:#fff !important; box-shadow:0 1px 2px rgba(0,0,0,.04) !important; }
  table.responsive-list tbody tr:hover{ background:#fff !important; }
  table.responsive-list tbody td{ display:grid !important; grid-template-columns: 130px 1fr !important; align-items:center !important; gap:8px !important; padding:6px 0 !important; border:0 !important; white-space: normal !important; word-break: break-word !important; overflow-wrap:anywhere !important; }
  table.responsive-list tbody td:first-child{ padding-top:0 !important; }
  table.responsive-list tbody td:last-child{ padding-bottom:0 !important; }
  table.responsive-list tbody td::before{ content: attr(data-label) !important; font-size:12px !important; font-weight:600 !important; color:#6b7280 !important; }
  table.responsive-list tbody td.actions{ display:flex !important; justify-content:flex-end !important; gap:8px !important; align-items:center !important; }
  table.responsive-list tbody td.actions::before{ content:'' !important; display:none !important; }
  table.responsive-list .btn{ white-space:nowrap !important; }
}

/* ===== Layout especial: Lista de Alunos (mobile) ===== */
@media (max-width: 900px){
  /* Rows lineares: Nome | Status | Ações */
  table.responsive-list.rsp-alunos tbody{ display: block !important; }
  table.responsive-list.rsp-alunos tbody tr{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important; /* Nome | Ações */
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid #eceff3 !important;
  }
  table.responsive-list.rsp-alunos tbody tr:last-child{ border-bottom: 0 !important; }

  /* Neutraliza o display:grid herdado dos TDs no modo genérico */
  table.responsive-list.rsp-alunos tbody td{ display:block !important; padding-top: 0 !important; padding-bottom: 0 !important; }

  /* Some quaisquer labels à esquerda */
  table.responsive-list.rsp-alunos tbody td::before{ display:none !important; }

  /* Oculta tudo que não seja Nome e Ações (Status será exibido dentro de .actions) */
  table.responsive-list.rsp-alunos tbody td:not([data-label="Nome"]):not(.actions){ display:none !important; }
  /* Mantém regra para esconder vazios por segurança */
  table.responsive-list.rsp-alunos tbody td[data-label="ID"],
  table.responsive-list.rsp-alunos tbody td.is-empty{ display:none !important; }

  /* Nome ocupa a coluna flexível (sem quebras) */
  table.responsive-list.rsp-alunos tbody td[data-label="Nome"]{
    grid-column: 1 / 2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  table.responsive-list.rsp-alunos tbody td[data-label="Nome"] a{
    font-weight:600; color:#1f2937; text-decoration: underline; font-size:12px;
    display:block !important; max-width:100% !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    letter-spacing:.1px; word-break: normal !important; text-transform: none !important;
  }
  body[data-app="admin"] table.responsive-list.rsp-alunos td[data-label="Nome"] a{ display:block !important; }

  /* Esconde qualquer célula de Status fora das ações */
  table.responsive-list.rsp-alunos tbody td[data-label="Status"]{ display:none !important; }

  /* Ações coladas à direita */
  table.responsive-list.rsp-alunos tbody td.actions{ grid-column: 2 / 3 !important; justify-self: end !important; display:inline-flex !important; gap:6px !important; align-items:center !important; white-space: nowrap; }
  table.responsive-list.rsp-alunos tbody td.actions::before{ display:none !important; }
  table.responsive-list.rsp-alunos tbody td.actions .btn{ min-width: 64px; padding: 5px 9px; font-size: 12px; line-height: 1.2; }
  /* Status dentro da área de ações (injetado via JS) */
  table.responsive-list.rsp-alunos tbody td.actions .status-inline{ color:#6b7280; font-size:12px; margin-right:6px; display:inline-block; white-space:nowrap; }

  /* Neutralizar estilos de tabela que cortam no mobile */
  table.responsive-list.rsp-alunos tbody td{ word-break: break-word !important; overflow: visible !important; }
  table.responsive-list.rsp-alunos thead{ display: none !important; }
}