/* Celular (22/10/2026, pedido dele: "tenho que conseguir fazer tudo pelo celular").
   Só vale em tela estreita e vem por último no index.html: o computador não muda nada.
   Organizado por tela; cada bloco desfaz a tabela/colunas fixas do desktop e empilha. */
@media (max-width:760px){

/* ---------- Geral ---------- */
/* Campo com fonte menor que 16px faz o iPhone dar zoom ao tocar e a tela "pula". */
:where(#main,dialog) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
/* Tabela larga rola de lado dentro dela, em vez de empurrar a página (baixa especificidade:
   as telas que viram cartões, como Inbox e Tarefas, continuam mandando). */
:where(#main) :where(table):not(:where(.inbox-shell table,.tf-shell table)){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Diálogo ocupa a tela, com rolagem própria. */
:where(dialog[open]){max-width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}
/* Alvo de toque mínimo. */
:where(#main) :where(button,.zd-bt,.cx-btn,.hw-btn){min-height:36px}
/* Tela inicial (print de 01/11): placeholder da tarefa rápida no tamanho do resto (o campo fica em 16px por causa do zoom). */
#main .todo-rapido input::placeholder{font-size:.875rem}
/* Card Acessos: título e resumo vinham em px fixos e apertavam o resumo numa coluna estreita. */
#main .ac-card .ac-cab{flex-wrap:wrap;row-gap:.25rem}
#main .ac-card .ac-cab h2{font-size:1.125rem}
#main .ac-card .ac-cab small{order:3;flex:1 1 100%;font-size:.8125rem}
#main .ac-card .ac-cab a{margin-left:auto;font-size:.8125rem}
/* Marcador de concluir: o alvo de toque de 36px esticava a altura e o círculo virava oval (print de 01/11). */
:where(#main,.fgh-barra-menu) :is(.todo-check,.tp-check,.fb-tf-check){flex:none;flex-shrink:0;width:26px;height:26px;min-height:26px;padding:0;aspect-ratio:1;border-radius:50%}

/* ---------- Inbox: lista ---------- */
/* Visões em fita rolável, com nome e número (antes só o número aparecia). */
.app .inbox-shell.zd .zd-visoes,.app .tf-shell.zd .zd-visoes{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:.375rem;padding:.5rem .625rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.app .inbox-shell.zd .zd-visoes::-webkit-scrollbar,.app .tf-shell.zd .zd-visoes::-webkit-scrollbar{display:none}
.app .inbox-shell.zd .zd-visoes>h2,.app .inbox-shell.zd .zd-grupo,.app .tf-shell.zd .zd-visoes>h2,.app .tf-shell.zd .zd-grupo{display:none}
.app .inbox-shell.zd .zd-visao,.app .tf-shell.zd .zd-visao{flex:none;width:auto;white-space:nowrap;gap:.375rem;padding:.375rem .75rem;border:1px solid var(--zd-linha,#dde2e9);border-radius:62.4375rem;background:#fff;font-size:.8438rem}
.app .inbox-shell.zd .zd-visao .nav-text,.app .tf-shell.zd .zd-visao .nav-text{display:inline!important}
.app .inbox-shell.zd .zd-visao.on,.app .tf-shell.zd .zd-visao.on{background:#1B1F3B;color:#fff;border-color:#1B1F3B}
.app .inbox-shell.zd .zd-visao.on .n,.app .tf-shell.zd .zd-visao.on .n{color:#fff;opacity:.85}

/* Cabeçalho da lista: título, busca larga, Pessoa e Nova lado a lado. */
.app .inbox-shell.zd .zd-topo{flex-wrap:wrap;gap:.5rem;padding:.75rem .75rem .625rem}
.app .inbox-shell.zd .zd-topo h1{font-size:1.375rem}
.app .inbox-shell.zd .zd-topo .zd-busca{order:5;flex:1 1 100%;min-height:42px;font-size:16px}
.app .inbox-shell.zd .zd-topo .zd-bt{min-height:42px}

/* A tabela vira lista de cartões: título inteiro, selos, último recado e hora. */
.app .inbox-shell.zd .zd-tabela thead{display:none}
.app .inbox-shell.zd .zd-tabela table,.app .inbox-shell.zd .zd-tabela tbody{display:block;width:100%}
.app .inbox-shell.zd .inbox-casos>tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"solic quando" "assunto status";gap:2px .625rem;padding:.75rem;border-bottom:1px solid var(--zd-linha,#e3e7ec)}
.app .inbox-shell.zd .inbox-casos>tr>td{display:block;padding:0;border:0;position:static;background:none;min-width:0;width:auto;max-width:none;height:auto;white-space:normal}
.app .inbox-shell.zd .inbox-casos .zd-c-marca,.app .inbox-shell.zd .inbox-casos .zd-c-pessoa,.app .inbox-shell.zd .inbox-casos .zd-c-paciente,.app .inbox-shell.zd .inbox-casos .zd-c-nl,.app .inbox-shell.zd .inbox-casos .zd-c-prazo,.app .inbox-shell.zd .inbox-casos .zd-c-tempo{display:none}
.app .inbox-shell.zd .zd-selos-mob{display:contents}
.app .inbox-shell.zd .inbox-casos .zd-c-assunto{grid-area:assunto}
.app .inbox-shell.zd .inbox-casos .zd-c-solic{grid-area:solic;font-size:.7812rem;color:var(--zd-mut,#5b6573)}
.app .inbox-shell.zd .inbox-casos .zd-c-quando{grid-area:quando;text-align:right;font-size:.7812rem;white-space:nowrap}
.app .inbox-shell.zd .inbox-casos .zd-c-status{grid-area:status;justify-self:end;align-self:end;font-size:.75rem}
.app .inbox-shell.zd .inbox-casos .inbox-item-abrir{display:block;width:100%;text-align:left;padding:0}
.app .inbox-shell.zd .zd-assunto{display:flex;flex-wrap:wrap;gap:.25rem .375rem;align-items:center}
.app .inbox-shell.zd .zd-assunto>b:first-child{flex:1 1 100%;width:auto;overflow:visible;white-space:normal;text-overflow:clip;font-size:.9375rem;line-height:1.3}
.app .inbox-shell.zd .zd-assunto>:not(:first-child){flex:none;width:auto;font-size:.75rem;padding:2px .5rem;line-height:1.4}
.app .inbox-shell.zd .zd-resumo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;margin-top:.25rem;font-size:.8438rem}
.app .inbox-shell.zd .inbox-casos>tr.nao-lido .zd-assunto>b:first-child{font-weight:800}
.app .inbox-shell.zd .zd-lote{position:sticky;bottom:0;flex-wrap:wrap;gap:.375rem;padding:.5rem}

/* ---------- Tarefas ---------- */
.app .tf-shell.zd .zd-topo{flex-wrap:wrap;gap:.5rem;padding:.75rem .75rem .625rem}
.app .tf-shell.zd .zd-topo h1{font-size:1.375rem}
.app .tf-shell.zd .zd-topo .zd-busca{order:5;flex:1 1 100%;min-height:42px;font-size:16px}
.app .tf-shell.zd .zd-topo .zd-bt{min-height:42px}
.app .tf-shell.zd .zd-tabela thead{display:none}
.app .tf-shell.zd .zd-tabela table,.app .tf-shell.zd .zd-tabela tbody{display:block;width:100%}
.app .tf-shell.zd .tp-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"marca titulo estrela" "marca prazo estrela";gap:2px .625rem;align-items:center;padding:.625rem .75rem;border-bottom:1px solid var(--zd-linha,#e3e7ec)}
.app .tf-shell.zd .tp-item>td{display:block;padding:0;border:0;position:static;background:none;min-width:0;width:auto;max-width:none;height:auto;white-space:normal}
.app .tf-shell.zd .tp-item .zd-c-pessoa{display:none}
.app .tf-shell.zd .tp-item .tp-c-sel{display:none}
.app .tf-shell.zd .tp-item .zd-c-marca{grid-area:marca}
.app .tf-shell.zd .tp-item .zd-c-assunto{grid-area:titulo}
.app .tf-shell.zd .tp-item .tp-c-prazo{grid-area:prazo;font-size:.8125rem}
.app .tf-shell.zd .tp-item .tp-c-estrela{grid-area:estrela}
.app .tf-shell.zd .tp-item .tp-abrir{display:block;width:100%;text-align:left;padding:0}
.app .tf-shell.zd .tp-item .zd-assunto>b:first-child{display:block;overflow:visible;white-space:normal;text-overflow:clip;font-size:.9375rem;line-height:1.3}
.app .tf-shell.zd.tp-com-lado .tp-item{grid-template-columns:auto minmax(0,1fr) auto;min-height:64px;box-sizing:border-box}
.app .tf-shell.zd.tp-com-lado .tp-item>td{height:auto}
.app .tf-shell.zd.tp-com-lado .tp-tit{height:auto}
.app .tf-shell.zd.tp-com-lado .tp-tit .tp-abrir{display:flex}
.app .tf-shell.zd.tp-com-lado .tp-nome{font-size:.9375rem}
.app .tf-shell.zd.tp-com-lado .tp-det,.app .tf-shell.zd.tp-com-lado .tp-chip-pj,.app .tf-shell.zd.tp-com-lado .tp-trava{display:none}
.app .tf-shell.zd.tp-com-lado .tp-sub-nova{display:block;min-height:0}
.app .tf-shell.zd.tp-com-lado .tp-sub-form{margin-left:1.875rem}
.app .tf-shell.zd.tp-com-lado .tp-sub .tp-tit{padding-left:1.125rem}
.app .tf-shell.zd.tp-com-lado .tp-ramo{display:none}
.app .tf-shell.zd.tp-com-lado .tp-sub-form{margin-left:.5rem}
.app .tf-shell.zd .tp-item .zd-resumo{white-space:normal}
.app .tf-shell.zd .tp-check,.app .tf-shell.zd .tf-ir{width:1.875rem;height:1.875rem}
}

/* ---------- Escala fluida no celular (31/10/2026, print do Guilherme no iPhone) ---------- */
@media (max-width:760px){
/* Barra do topo: Acessos, Tarefas e Inbox viram icone de 36px com o contador num selo no canto. */
.app-header :is(.fb-acoes .fb-inbox,.fb-inbox.ad-cad):not(.fb-olho){position:relative;width:36px/*px*/;height:36px/*px*/;min-height:36px;padding:0;gap:0;justify-content:center}
.app-header :is(.fb-acoes .fb-inbox,.fb-inbox.ad-cad):not(.fb-olho) b{display:none}
.app-header .fb-acoes .fb-inbox .fb-num{position:absolute;top:-5px/*px*/;right:-5px/*px*/;min-width:16px/*px*/;height:16px/*px*/;padding:0 4px/*px*/;border-radius:8px/*px*/;font-size:10px/*px*/;line-height:16px/*px*/}
.caso-zd .caso-composer textarea{min-height:3.25rem;height:3.25rem}
.caso-zd .caso-composer textarea::placeholder{font-size:.9375rem}
/* Anexo: nome com reticencias e tamanho na mesma linha, menor. */
.caso-anexo.arq{max-width:100%;min-width:0}
.caso-anexo.arq svg{flex:none}
.caso-anexo.arq span{min-width:0}
.caso-anexo.arq small{flex:none;white-space:nowrap;font-size:.6875rem}
/* Rodape de acoes: botoes lado a lado, dividindo a linha, sem cortar na esquerda. */
.caso-zd .zd-barra{flex-wrap:nowrap;justify-content:stretch;gap:.5rem;padding:.5rem .75rem}
.caso-zd .zd-barra>*{min-width:0}
.caso-zd .zd-barra>.zd-espaco{display:none}
.caso-zd .zd-barra>:is(button,.zd-bt,.zd-split){flex:1 1 0}
.caso-zd .zd-barra .zd-split{display:flex}
.caso-zd .zd-barra .zd-split>.zd-bt:not(.zd-seta){flex:1 1 auto;min-width:0}
.caso-zd .zd-barra .zd-split>.zd-seta{flex:none}
.caso-zd .zd-barra :is(button,.zd-bt){font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Lista do Inbox (print do Guilherme, 31/10): cabecalho em 2 linhas (busca; filtros + contagem),
   Novo caso vira botao flutuante, cards mais baixos. */
.app .inbox-shell.zd .zd-topo{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);align-items:center;gap:.375rem;padding:.5rem .625rem;position:static}
.app .inbox-shell.zd .zd-topo .zd-busca{grid-column:1/-1;order:0;min-height:40px;padding-left:2.125rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6f6c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .625rem center/1rem}
.app .inbox-shell.zd .zd-topo .zd-filtro{min-height:36px;padding:0 .5rem;gap:.25rem;font-size:.8125rem;white-space:nowrap}
.app .inbox-shell.zd .zd-topo [data-inbox-situ] .zd-filtro-rot{display:none}
.app .inbox-shell.zd .zd-topo .zd-total{font-size:.6875rem;color:var(--mut);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .inbox-shell.zd .zd-topo .zd-espaco{display:none}
.app .inbox-shell.zd:not(.detalhe-aberto) .zd-topo [data-inbox-nova]{position:fixed;right:16px/*px*/;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;width:52px/*px*/;height:52px/*px*/;min-height:52px;padding:0;border-radius:50%;font-size:0;box-shadow:0 6px 18px rgba(0,0,0,.22);display:grid;place-items:center}
.app .inbox-shell.zd:not(.detalhe-aberto) .zd-topo [data-inbox-nova]>span{font-size:26px/*px*/;line-height:1}
.app .inbox-shell.zd.detalhe-aberto .zd-topo [data-inbox-nova]{display:none}
.app .inbox-shell.zd .inbox-casos{padding-bottom:0}
.app .inbox-shell.zd .zd-lista{overflow-y:auto;-webkit-overflow-scrolling:touch}
.app .inbox-shell.zd .zd-lista>.zd-tabela{flex:none;overflow:visible;padding-bottom:4.5rem}
/* Card: atraso so na cor da borda; status numa linha; "Nao lida" vira ponto azul ao lado do titulo. */
.app .inbox-shell.zd .inbox-casos>tr{padding:.625rem .75rem;gap:2px .5rem}
.app .inbox-shell.zd .inbox-casos>tr.zd-l-atrasada{box-shadow:inset 4px 0 0 #a8251c}
.app .inbox-shell.zd .inbox-casos .zd-status{white-space:nowrap}
.app .inbox-shell.zd .inbox-casos .zd-status.atrasada small{display:none}
.app .inbox-shell.zd .zd-assunto>b:first-child{flex:0 1 auto;max-width:calc(100% - 1rem)}
.app .inbox-shell.zd .zd-assunto>.zd-selos-mob{display:contents}
.app .inbox-shell.zd .zd-assunto>.zd-nl{order:-1;flex:none;width:8px/*px*/;height:8px/*px*/;padding:0;border:0;border-radius:50%;background:#1d5b92;font-size:0;align-self:center}
.app .inbox-shell.zd .zd-assunto>:not(:first-child):not(.zd-nl){font-size:.6875rem;padding:1px .375rem}
.app .inbox-shell.zd .zd-resumo{margin-top:2px}

}