/* ═══════════════════════════════════════════════════════════════
   _mobile-app.css — CARA DE APP no celular (padrão ÚNICO do produto)
   ---------------------------------------------------------------
   Por que existe: os painéis foram construídos para computador (3 colunas
   lado a lado) e ganharam remendos de celular ao longo do tempo — só o
   medico.html tinha 13 regras com 6 tamanhos de corte diferentes. Em 390px
   as colunas se atropelam, some função e aparece rolagem lateral.
   A dona testou no iPhone em 2026-07-19: "nenhuma tela está boa no celular,
   está inavegável".

   COMO USAR (é aditivo — não reescreve o painel):
   1. <link rel="stylesheet" href="./_mobile-app.css">  (depois do CSS do painel)
   2. Marque as regiões do painel com data-m:
        data-m="primary"    → o que abre primeiro no celular
        data-m="drawer"     → vira gaveta que sobe de baixo (fechada por padrão)
        data-m="hide"       → não aparece no celular
      Cada painel escolhe seu "primary" (médico = ficha do paciente;
      secretária = fila de atendimento).
   3. Inclua a barra inferior (markup em _mobile-nav.html).

   REGRA DE OURO: só CSS e marcação aditiva. NÃO mexer na lógica (Alpine) —
   o cérebro dos painéis é intocável (ver CLAUDE.md).
   ═══════════════════════════════════════════════════════════════ */

/* Um corte só. 768px = tablet em pé para baixo. Nada de 6 cortes diferentes. */
@media (max-width: 768px) {

  /* ── 1. Base: nada de rolagem lateral, nunca ───────────────────── */
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;   /* iPhone não aumenta fonte sozinho */
  }
  body {
    /* espaço para a barra inferior + área segura do iPhone (notch/barra) */
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  /* Conteúdo largo (tabelas, grades de agenda) rola DENTRO da própria caixa */
  .m-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── 2. Empilhar: qualquer layout de colunas vira uma coluna ───── */
  [data-m-grid],
  .sx-main, .med-layout, .rxlayout, .gestor-grid, .cols-3, .cols-2 {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  /* ── 3. O que aparece e o que vira gaveta ──────────────────────── */
  [data-m="hide"]    { display: none !important; }
  [data-m="primary"] { display: block !important; width: 100% !important; }

  /* Gaveta: sobe de baixo, como app nativo. Fechada por padrão. */
  [data-m="drawer"] {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    width: 100% !important;
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg, #FAFAF7);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(10,14,26,.20);
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.16,1,.3,1);
    z-index: 1200;
    visibility: hidden;
  }
  [data-m="drawer"].m-open { transform: translateY(0); visibility: visible; }
  /* pegador visual da gaveta */
  [data-m="drawer"]::before {
    content: ""; display: block; width: 38px; height: 4px; margin: 10px auto 6px;
    border-radius: 999px; background: var(--border, #E8E6DD);
  }
  .m-scrim {
    position: fixed; inset: 0; background: rgba(10,14,26,.38);
    opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1150;
  }
  .m-scrim.m-open { opacity: 1; pointer-events: auto; }

  /* ── 4. Cabeçalho compacto e grudado ───────────────────────────── */
  [data-m="header"], .sx-header, .med-header, .topbar {
    position: sticky; top: 0; z-index: 900;
    padding: 8px 12px !important;
    min-height: 52px;
    background: var(--bg, #FAFAF7);
    border-bottom: 1px solid var(--border, #E8E6DD);
  }
  /* Cabeçalho não pode roubar meia tela: esconde o supérfluo */
  [data-m="header"] [data-m-opt] { display: none !important; }

  /* ── 5. Dedo: nada menor que 44px ──────────────────────────────── */
  button, .btn, [role="button"], a.btn, .chip, .pill, .tab, select {
    min-height: 44px;
    padding-block: 10px;
  }
  /* botões que são só ícone continuam quadrados, mas grandes */
  /* Teste de Multidão V2.3 (2026-07-31): faltava .btn--icon (hífen duplo) —
     é a classe real do shell .sx (sino, tema, pacientes) e nunca casava com
     .btn-icon (hífen simples), então ficava em 38px, abaixo do alvo de toque. */
  .btn-icon, .icon-btn, .btn--icon { min-width: 44px; min-height: 44px; }

  /* ── 6. Campos: 16px impede o iPhone de dar zoom ao tocar ──────── */
  input, textarea, select { font-size: 16px !important; }

  /* ── 7. Barra inferior (a "cara de app") ───────────────────────── */
  .m-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
    display: flex; align-items: stretch;
    background: var(--bg-elev, #fff);
    border-top: 1px solid var(--border, #E8E6DD);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 14px rgba(10,14,26,.06);
  }
  .m-nav button {
    flex: 1; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border: 0; background: none; cursor: pointer;
    font: 600 10.5px/1.1 var(--font-ui, system-ui, sans-serif);
    letter-spacing: .02em;
    color: var(--fg-soft, #5D5A52);
    padding: 6px 2px;
  }
  .m-nav button svg { width: 21px; height: 21px; stroke-width: 1.9; }
  .m-nav button.on { color: var(--brand, #1B3FE8); }
  .m-nav button.on svg { stroke-width: 2.3; }
  /* selo de pendências (ex.: 3 na fila) */
  .m-nav .m-badge {
    position: absolute; transform: translate(14px, -14px);
    min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 999px; background: var(--danger, #8B2020); color: #fff;
    font: 700 10px/17px var(--font-ui, system-ui, sans-serif); text-align: center;
  }

  /* ── 8. Tipografia: legível de verdade na mão ──────────────────── */
  body { font-size: 15px; line-height: 1.5; }
  h1 { font-size: 22px !important; line-height: 1.25; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 17px !important; }
  /* rótulos minúsculos de interface não podem sumir */
  .label, .lbl, [class*="-label"] { font-size: 11.5px !important; }

  /* ── 9. Modais viram folhas de baixo (padrão de app) ───────────── */
  .modal, .drawer, [data-m-modal] {
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* ── 10. Tabelas: cada linha vira cartão ───────────────────────── */
  table[data-m-cards] thead { display: none; }
  table[data-m-cards], table[data-m-cards] tbody,
  table[data-m-cards] tr, table[data-m-cards] td { display: block; width: 100%; }
  table[data-m-cards] tr {
    border: 1px solid var(--border, #E8E6DD); border-radius: 12px;
    margin-bottom: 10px; padding: 10px 12px; background: var(--bg-elev, #fff);
  }
  table[data-m-cards] td { border: 0; padding: 3px 0; }
  table[data-m-cards] td::before {
    content: attr(data-label) ": ";
    font-weight: 700; color: var(--fg-soft, #5D5A52); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .03em;
  }
}

/* No computador nada muda: a barra inferior só existe no celular. */
@media (min-width: 769px) {
  .m-nav, .m-scrim { display: none !important; }
}

/* Quem prefere menos animação, recebe menos animação. */
@media (prefers-reduced-motion: reduce) {
  [data-m="drawer"] { transition: none; }
}