/* ============================================================
   celular.css — rodada do celular (15/09/2026, Diego: "pode seguir com as
   recomendações", página "O sistema no celular").

   Carregado DEPOIS do <style> de cada tela (e da moldura das telas de conta),
   pra ganhar das regras de celular que cada tela já tinha.

   Tudo aqui vale só:
   - até 900 px de largura (celular e tablet em pé) — no computador nada muda;
   - no sistema interno (:root[data-theme="dark"]) — as telas do cliente moram
     dentro do workflow.html, são claras e não pegam nada daqui.
   Fora do @media só existe a regra que esconde as peças do celular.

   1-A menu na gaveta (botão ☰) e barra do topo numa linha, com o resto no ⋯
   2-A janelas em tela cheia, com cabeçalho e botões presos
   3-A área de toque de 40 px (filtros 34) e campos com letra de 16 px (o iPhone
       aproxima a tela sozinho quando o campo tem letra menor que 16)
   5-A espaços do celular: bordas de 14 px, 12 entre blocos, filtros numa linha
   Conserto do Chat IA: conversa na largura toda, lista de conversas no botão.
   As peças (☰, ⋯, véu) são criadas pelo celular.js.
   ============================================================ */
.cel-so{display:none}

@media (max-width:900px){

/* ---- 1-A menu na gaveta ---- */
:root[data-theme="dark"] .app,:root[data-theme="dark"] .app.collapsed{grid-template-columns:1fr!important}
:root[data-theme="dark"] .app .navside{position:fixed;top:0;left:0;bottom:0;height:auto;width:min(280px,82vw);z-index:300;
  transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility .2s;overflow-y:auto}
:root[data-theme="dark"] .app.cel-menu .navside{transform:none;visibility:visible;box-shadow:10px 0 34px rgba(0,0,0,.55)}
:root[data-theme="dark"] .app.collapsed .navside{width:min(280px,82vw)}
:root[data-theme="dark"] .app.collapsed .brand{padding:18px;justify-content:flex-start}
:root[data-theme="dark"] .app.collapsed .brand>div:last-child{display:block}
:root[data-theme="dark"] .app.collapsed .navitem .lbl{display:inline}
:root[data-theme="dark"] .app .navitem,:root[data-theme="dark"] .app.collapsed .navitem{justify-content:flex-start;padding:10px 12px;min-height:40px}
:root[data-theme="dark"] .app .sidetoggle{display:none}
:root[data-theme="dark"] .cel-veu{position:fixed;inset:0;background:rgba(5,6,8,.55);z-index:290}
:root[data-theme="dark"] .cel-so{display:inline-flex;align-items:center;justify-content:center}

/* barra do topo numa linha: ☰, título, ação principal e ⋯ */
:root[data-theme="dark"] :is(.appmain,.main)>:is(.bar,.topbar){flex-wrap:nowrap;gap:6px;padding:8px 10px 8px 6px}
:root[data-theme="dark"] :is(.appmain,.main)>:is(.bar,.topbar) h1{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
:root[data-theme="dark"] :is(.appmain,.main)>:is(.bar,.topbar) .cel-esconde{display:none!important}
:root[data-theme="dark"] :is(.appmain,.main)>:is(.bar,.topbar) :is(button,a){min-height:40px;flex:none}
:root[data-theme="dark"] :is(.appmain,.main)>:is(.bar,.topbar) .icobtn{width:40px;min-width:40px;padding:0}
:root[data-theme="dark"] .cel-maismenu{position:fixed;top:56px;right:8px;z-index:310;min-width:220px;max-width:calc(100vw - 16px);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5);padding:6px;display:flex;flex-direction:column;gap:2px}
:root[data-theme="dark"] .cel-maismenu[hidden]{display:none}
:root[data-theme="dark"] .cel-maismenu button{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:7px;border:0;background:none;
  color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-align:left;width:100%;cursor:pointer}
:root[data-theme="dark"] .cel-maismenu button:active,:root[data-theme="dark"] .cel-maismenu button:hover{background:var(--brand-soft)}

/* ---- 2-A janelas em tela cheia, cabeçalho e botões presos ---- */
:root[data-theme="dark"] :is(.veil,.modal-bg){padding:0;align-items:stretch;justify-content:stretch}
:root[data-theme="dark"] :is(.veil,.modal-bg)>.modal{max-width:none!important;width:100%;height:100%;max-height:none!important;
  border-radius:0;border-left:0;border-right:0;border-bottom:0;overflow-y:auto;overscroll-behavior:contain}
:root[data-theme="dark"] :is(.veil,.modal-bg)>.modal>header{position:sticky;top:0;z-index:3;background:var(--surface);border-radius:0}
:root[data-theme="dark"] :is(.veil,.modal-bg)>.modal>footer{position:sticky;bottom:0;z-index:3;background:var(--surface)}
:root[data-theme="dark"] .modal-bg>.modal{padding-bottom:0}
:root[data-theme="dark"] .modal-bg>.modal .modal-actions{position:sticky;bottom:0;z-index:3;background:var(--surface);padding-bottom:14px}
:root[data-theme="dark"] :is(.veil,.modal-bg)>.modal>header button{min-width:40px;min-height:40px}

/* ---- 3-A toque e campos ---- */
:root[data-theme="dark"] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),select,textarea){font-size:16px!important}
:root[data-theme="dark"] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),select){min-height:40px}
:root[data-theme="dark"] :is(.btn,.modal footer button,.modal-actions button){min-height:40px}
:root[data-theme="dark"] :is(.pill,.pick,.seg button,.views button,.tabgroup button,.tabs button,.qf-btn){min-height:34px}
:root[data-theme="dark"] .side h2 button{min-width:24px;min-height:40px;margin:-12px 0}
:root[data-theme="dark"] :is(.newc,.side .chip){min-height:36px}
:root[data-theme="dark"] :is(.status-btn,.diag-step-btn,.ig-step-btn,.canal-btn,.discard-btn,.edit-btn,.delete-btn,.pill-reset,.qf-toggle){min-height:36px}
:root[data-theme="dark"] :is(.servrow button,.prodcard .del){min-width:32px;min-height:32px}

/* ---- 5-A espaços do celular ---- */
:root[data-theme="dark"] :is(.wrap,.container-top){padding-left:14px!important;padding-right:14px!important}
:root[data-theme="dark"] :is(.kpis,.panels){gap:12px}
:root[data-theme="dark"] .pills,:root[data-theme="dark"] :is(.top,.toolbar) .picks{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
:root[data-theme="dark"] .pills::-webkit-scrollbar,:root[data-theme="dark"] :is(.top,.toolbar) .picks::-webkit-scrollbar{display:none}
:root[data-theme="dark"] .pills>*,:root[data-theme="dark"] :is(.top,.toolbar) .picks>*{flex:none}

/* ---- 16/09/2026 (últimos ajustes, Diego: "pode seguir as recomendações") ----
   CRM e Workflow: filtros num botão (painel que sobe de baixo), ação principal na barra,
   as outras ações da tela no ⋯ (data-cel-mais), abas do cliente numa linha que desliza. */
:root[data-theme="dark"] :is(.cel-some,[data-cel-mais]){display:none!important}
:root[data-theme="dark"] .cel-principal{background:var(--brand)!important;color:var(--on-brand)!important}
:root[data-theme="dark"] .cel-filtros{display:flex;flex-direction:column;gap:12px;position:fixed;left:0;right:0;bottom:0;max-height:82vh;overflow-y:auto;
  background:var(--surface);border-top:1px solid var(--line);border-radius:14px 14px 0 0;padding:14px 14px 22px;z-index:300;
  transform:translateY(105%);visibility:hidden;transition:transform .2s ease,visibility .2s}
:root[data-theme="dark"] .cel-filtros.cel-aberta{transform:none;visibility:visible;box-shadow:0 -12px 34px rgba(0,0,0,.55)}
:root[data-theme="dark"] .cel-filtros .cel-filtros-topo{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700}
:root[data-theme="dark"] .cel-filtros-topo .cel-fecha{min-width:40px;min-height:40px;font-size:20px;color:var(--ink-3)}
:root[data-theme="dark"] .cel-filtros :is(.city-filter-row,.filter-pills){margin:0!important;flex-wrap:wrap}
:root[data-theme="dark"] .cel-cont{min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--brand);color:var(--on-brand);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-left:6px}
:root[data-theme="dark"] .cel-cont[hidden]{display:none}
:root[data-theme="dark"] #crmTabLeads .toolbar{flex-wrap:wrap}
:root[data-theme="dark"] #crmTabLeads .toolbar #search{flex:1 1 100%;min-width:0}
:root[data-theme="dark"] #crmTabLeads .toolbar #ordenacao{flex:1 1 0;min-width:0}
:root[data-theme="dark"] #cards-kanban-tabs button{font-size:0;padding:0 11px}
:root[data-theme="dark"] #cards-kanban-tabs button i{font-size:17px}
:root[data-theme="dark"] main.main .cel-wf-nova{display:none!important}
:root[data-theme="dark"] .clientbar>label{display:none}
:root[data-theme="dark"] .clientbar .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
:root[data-theme="dark"] .clientbar .tabs::-webkit-scrollbar{display:none}
:root[data-theme="dark"] .clientbar .tabs button{flex:none}
:root[data-theme="dark"] .calmain .top>div[style="flex:1"]{display:none}
/* painéis que abrem de um botão (Filtros e mês do Workflow): até 430 px de largura passavam da tela
   do celular e cortavam a direita; aqui cabem na largura e as opções quebram linha em vez de deslizar */
:root[data-theme="dark"] .pop{max-width:calc(100vw - 24px)!important}
:root[data-theme="dark"] .pop .picks{flex-wrap:wrap;overflow-x:visible}
:root[data-theme="dark"] .top>.pop{left:12px!important;right:12px;min-width:0}
/* toque: área maior nos "×" dos cartões do CRM, no ícone do WhatsApp e nas amostras de cor — o desenho fica igual */
:root[data-theme="dark"] :is(.swatch,button[onclick^="removerHistorico"],a[title="Abrir no WhatsApp"]){position:relative}
:root[data-theme="dark"] :is(.swatch,button[onclick^="removerHistorico"],a[title="Abrir no WhatsApp"])::after{content:"";position:absolute;inset:-10px}
:root[data-theme="dark"] button[onclick^="abrirFollowUp"]{min-height:40px}
:root[data-theme="dark"] .servrow .dot{min-width:32px;min-height:32px}
/* "+ Publicação" na barra só quando o calendário do cliente está aberto. Celular antigo sem :has
   não aplica este bloco: o botão da barra fica escondido e o "+ Publicação" continua onde estava. */
@supports selector(:has(a)){
:root[data-theme="dark"] .cel-some-se-has{display:none!important}
:root[data-theme="dark"] main.main:has(>#calArea:not([style*="none"])) .cel-wf-nova{display:inline-flex!important}
}

/* ---- Conserto do Chat IA: lista de conversas abre pelo botão "Conversas" ---- */
:root[data-theme="dark"] .chatsidebar{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(300px,86vw);z-index:300;
  transform:translateX(105%);visibility:hidden;transition:transform .2s ease,visibility .2s;border-left:1px solid var(--line-2)}
:root[data-theme="dark"] .chatsidebar.cel-aberta{transform:none;visibility:visible;box-shadow:-10px 0 34px rgba(0,0,0,.55)}
}

/* ---- 1-A menu em áreas na gaveta (23/09/2026) ----
   Na gaveta a barra tem largura inteira, então a sanfona funciona igual à do
   computador: os cabeçalhos aparecem e a área fechada continua fechada. Sem
   estas quatro linhas, a regra da barra recolhida abriria tudo aqui dentro. */
:root[data-theme="dark"] .app.collapsed .navcab{display:flex}
:root[data-theme="dark"] .app.collapsed .navcab .lbl{display:inline}
:root[data-theme="dark"] .app.collapsed .navarea.fechada>.navfilhos{display:none}
:root[data-theme="dark"] .app.collapsed .navfilhos{padding-left:14px;margin-left:10px;border-left:1px solid rgba(255,255,255,.08)}
:root[data-theme="dark"] .app .navcab{min-height:42px;padding:10px 12px}