/* ═══════════════════════════════════════════════════════════════════
   Camada MOBILE do CDL Nexus — regra: toda tela funciona a 360 px.
   Documento da regra, checklist e auditoria: docs/MOBILE.md.

   O que mora aqui: só o que vale para QUALQUER tela e que o Tailwind
   (por tela) não cobre — alvo de toque, tamanho mínimo de texto e
   controles de formulário. Layout de uma tela específica continua nas
   classes dela (grid-cols-1 sm:grid-cols-2, flex-wrap, overflow-x-auto…).

   Carregado por último no layout, de propósito: ganha dos utilitários
   por ordem, e por isso evite !important fora do tamanho mínimo de fonte.
   Abaixo de 1024 px a sidebar já é gaveta (shell.css).
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  html { -webkit-text-size-adjust: 100%; }

  /* Campos: 16 px evita o zoom automático do iOS ao focar; 44 px de altura é o alvo de toque. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
  select,
  textarea {
    font-size: 1rem;
    min-height: 2.75rem;
  }
  input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; }

  /* Botões e links com cara de botão. */
  button:not(.menu-grip):not(.menu-estrela):not(.tour-card__x),
  .btn-primary, .btn-secondary,
  [role="button"] {
    min-height: 2.75rem;
  }

  /* Links soltos em tabelas, trilha e linhas de ação (Editar, Excluir, Desativar…): área de toque
     maior sem mudar o visual do texto. */
  table a, table button,
  .app-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding-inline: .25rem;
  }
  .app-breadcrumb { padding: .25rem 1rem; }

  /* Link/resumo de ação solto no conteúdo ("Voltar", "Ver ranking completo →", "Editar tarefa"): o texto fica
     como está, a área de toque sobe para 40 px. Fora de parágrafo, para não quebrar link no meio de frase. */
  #conteudo-principal :is(a, summary):not(p a):not(.card):not([class*="btn-"])[class*="font-"] {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
  }
  #conteudo-principal a.block[class*="font-"] { display: flex; }
  .app-breadcrumb a { padding-inline: .5rem; margin-inline: -.5rem; }

  /* Rótulo clicável de checkbox/radio ocupa a linha inteira. */
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem;
  }

  /* Texto pequeno demais para o celular (utilitários text-[9px]/[10px]): sobe para 11 px, o piso de leitura. */
  [class*="text-[9px]"], [class*="text-[10px]"] { font-size: .6875rem !important; }

  /* Abas: 44 px de altura de toque (as classes das telas dão ~38 px). */
  nav[aria-label^="Abas"] a { min-height: 2.75rem; }

  /* Tabela que rola dentro do cartão: sombra nas bordas avisa que há mais conteúdo para o lado. */
  .overflow-x-auto:has(> table) {
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 0 / 2.5rem 100% no-repeat local,
      linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) 100% 0 / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,30,64,.22), rgba(0,30,64,0)) 0 0 / .75rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,30,64,.22), rgba(0,30,64,0)) 100% 0 / .75rem 100% no-repeat scroll;
  }

  /* Filtros em "pílula" e links curtos de ação ("Abrir"). */
  .pt-chip { min-height: 2.5rem; display: inline-flex; align-items: center; }
  /* Largura mínima de toque por padding (com margem negativa para o texto não sair do alinhamento). Nunca por min-width:
     ele deixa o item de uma linha flex encolher abaixo do conteúdo e o texto se sobrepõe. */
  #conteudo-principal :is(a, summary):not(p a):not(.card):not([class*="btn-"])[class*="font-"] { padding-inline: .375rem; margin-inline: -.375rem; }
  #conteudo-principal nav[aria-label^="Abas"] a { padding-inline: 1rem; margin-inline: 0; flex-shrink: 0; }

  /* Ícone-link redondo (WhatsApp/LinkedIn no Networking) e linha de lista clicável. */
  a.z-10.w-7.h-7 { width: 2.5rem; height: 2.5rem; }
  .nuc-linha-hover { padding-top: .75rem; padding-bottom: .75rem; }
}