/* ============================================================================
   bp-mobile.css  -  Legibilidade + robustez de layout no CELULAR
   ----------------------------------------------------------------------------
   App bp_web (Tailwind CDN + Alpine, ~49 paginas). Injetado GLOBALMENTE via
   Send-FileResponse (apos <head>), igual aos bp-*.js.

   PRINCIPIOS (producao / conservador):
   - So atua em <=640px (mobile). Desktop fica INTOCADO.
   - Bump MODERADO das fontes minusculas: piso confortavel ~12-13px, sem inflar.
     Nao mexe em text-sm/base/lg pra nao estourar cabecalhos/cards.
   - !important e OBRIGATORIO: as classes-alvo sao utilitarias do Tailwind CDN
     (mesma especificidade de classe) e muitas vem com sm:/md: a vencer no mobile.
   - Escaping Tailwind arbitrario: a classe HTML `text-[10px]` vira o seletor
     CSS `.text-\[10px\]` (colchetes escapados com barra invertida).
   - KILL-SWITCH: remover a linha de injecao do server.ps1 desliga tudo, sem
     tocar em nenhuma das 49 paginas.
   ============================================================================ */

/* ==========================================================================
   BLOCO 0 - Base segura (qualquer largura, custo ~zero)
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }
/* (01/08) celular: scroll dentro de popups/iframes NAO encadeia p/ a pagina de tras — o encadeamento
   esconde/mostra a barra do Chrome Android e o viewport fica "se re-encaixando" (relato Paulo:
   janelas aumentando e diminuindo com popups aninhados abertos). Contain e inofensivo no desktop. */
html, body { overscroll-behavior-y: contain; }

/* ==========================================================================
   ============  @media (max-width: 640px) - MOBILE  ========================
   ========================================================================== */
@media (max-width: 640px) {

  /* ---- BLOCO 1: BUMP DAS FONTES MINUSCULAS (problema no 1) ---- */
  .text-\[7px\],
  .text-\[8px\]        { font-size: 11px !important; line-height: 1.35 !important; }
  .text-\[9px\],
  .text-\[9\.5px\]     { font-size: 11px !important; line-height: 1.4  !important; }
  .text-\[10px\],
  .text-\[10\.5px\]    { font-size: 12px !important; line-height: 1.4  !important; }
  .text-\[11px\],
  .text-\[11\.5px\]    { font-size: 13px !important; line-height: 1.4  !important; }
  .text-\[12px\]       { font-size: 13px !important; line-height: 1.45 !important; }
  .text-\[13px\]       { font-size: 13px !important; line-height: 1.45 !important; }
  .text-xs             { font-size: 13px !important; line-height: 1.45 !important; }

  /* ---- BLOCO 2: TRACKING (letter-spacing) de rotulos uppercase ---- */
  .tracking-widest     { letter-spacing: 0.04em !important; }
  .tracking-wider      { letter-spacing: 0.03em !important; }
  .tracking-wide       { letter-spacing: 0.02em !important; }

  /* ---- BLOCO 3: GUARDAS DE OVERFLOW ---- */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
  }
  .overflow-x-auto, .table-wrapper { -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }
  thead th, tbody td { padding-top: 0.45rem !important; padding-bottom: 0.45rem !important; }

  /* ---- BLOCO 4: min-w fixo (200-350px) em inputs/flex-containers ---- */
  .min-w-\[200px\], .min-w-\[220px\], .min-w-\[240px\], .min-w-\[250px\],
  .min-w-\[260px\], .min-w-\[280px\], .min-w-\[300px\], .min-w-\[320px\],
  .min-w-\[350px\], .min-w-\[360px\] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ---- BLOCO 5: HEADER respirando (sticky) ---- */
  header.sticky { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
  header.sticky + * { margin-top: 0.25rem; }

  /* ---- BLOCO 6: MODAIS (fixed inset-0) com padding/largura mobile ---- */
  .fixed.inset-0 { padding: 0.5rem !important; }
  .fixed.inset-0 > div { max-width: 100% !important; margin-top: 0.5rem !important; }
  /* barra de titulo injetada pelo bp-janelas.js (data-bpjan) encolhe no mobile */
  [data-bpjan] { height: 30px !important; font-size: 12px !important; }

  /* ---- BLOCO 7: GRIDS 2/3/4-col sem breakpoint -> empilha (1 coluna) ----
     So pega grid-cols-N SEM prefixo (grid-cols-1 sm:grid-cols-2 fica intacto,
     porque o base ja e grid-cols-1). Empilhar no celular e o comportamento certo. */
  .grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid-cols-3 { grid-template-columns: 1fr !important; }
  .grid-cols-4 { grid-template-columns: 1fr !important; }

  /* ---- BLOCO 8: TAP TARGETS + inputs sem zoom-ao-focar (iOS) ---- */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="number"], input[type="password"],
  input[type="date"], input[type="datetime-local"],
  select, textarea { font-size: 16px !important; }
  button, a[role="button"], .btn { min-height: 36px; }
}

/* ==========================================================================
   BLOCO 9 - CABECALHO PADRAO (bp-cabecalho.js) NO CELULAR  (11/10/2026, Paulo:
   "ainda esta feio" - teste do app do celular). O cabecalho de 11/09 nasceu para
   o PC: logo de 132px no meio, cartao do advogado por cima dela e os 5 botoes
   redondos numa grade 2x3 de 24px (pequenos para o dedo). Aqui, so <=640px:
   linha 1 = logo a esquerda + foto + Voltar/Inicio (36px); Tema, Cor e Sair saem
   do celular (ficam na porta do app, /app.html). Fita: menu com area de toque e
   titulo centrado com reticencias. O bp-cabecalho.js NAO foi tocado (as regras
   dele vem depois no <head>: por isso html body + seletor mais forte + !important).
   ========================================================================== */
@media (max-width: 640px) {
  html body #bpx-topo { height: 60px !important; padding: 0 10px !important; }
  html body #bpx-topo::before { width: 280px !important; }
  html body #bpx-topo .bpx-logo { left: 10px !important; transform: translateY(-50%) !important; height: 40px !important; }
  html body #bpx-topo .bpx-logo img { height: 40px !important; }
  html body #bpx-id { padding: 0 !important; border: 0 !important; background: none !important; gap: 0 !important; margin-right: 86px !important; }
  html body #bpx-id .t { display: none !important; }
  html body #bpx-id .f { width: 34px !important; height: 34px !important; border-width: 1.5px !important; }
  html body #bpx-topo > #bp-hdr-actions.bp-corner,
  html body #bpx-topo > #bp-hdr-actions.bp-corner.bp-hdr-2col {
    position: absolute !important; top: 50% !important; right: 8px !important; bottom: auto !important; left: auto !important;
    transform: translateY(-50%) !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 6px !important; grid-template-columns: none !important; width: auto !important; height: auto !important;
  }
  html body #bpx-topo #bp-hdr-actions .bp-hdr-btn { width: 36px !important; height: 36px !important; min-height: 36px !important; }
  html body #bpx-topo #bp-hdr-actions .bp-hdr-btn svg { width: 16px !important; height: 16px !important; }
  html body #bpx-topo #bp-hdr-tema, html body #bpx-topo #bp-hdr-cores, html body #bpx-topo #bp-hdr-sair { display: none !important; }
  html body #bpx-fita { height: 38px !important; padding: 0 6px !important; gap: 4px !important; }
  html body #bpx-fita .tt { position: static !important; left: auto !important; transform: none !important; flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; font-size: 11px !important; letter-spacing: .06em !important; text-align: center; padding-right: 40px; }
  html body #bpx-menu-bt { width: 40px !important; height: 38px !important; padding: 0 9px !important; flex: none; }
}
/* ==========================================================================
   ============  @media (max-width: 420px) - CELULAR PEQUENO  ===============
   ========================================================================== */
@media (max-width: 420px) {
  /* nowrap combinado com fonte maior estoura em telas minusculas: libera quebra */
  .whitespace-nowrap { white-space: normal !important; overflow-wrap: break-word; }
  .gap-6 { gap: 0.75rem !important; }
  .gap-8 { gap: 0.9rem  !important; }
  .px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .px-8 { padding-left: 0.9rem  !important; padding-right: 0.9rem  !important; }
}