/* ===== DSS 2026 — MODO COMPACTO (celular e tablet estreito) ===== Tudo aqui é escopado em `html.compact`, ligada por matchMedia('(max-width:720px)') no do index.html (antes do 1º paint) e espelhada em pelo app.js. Regra de ouro: NADA neste arquivo pode afetar o desktop — se um seletor não começa com `.compact`, ele está no lugar errado. Diagnóstico e fases em docs/plano-responsivo-mobile.md. */ /* ---- Fase 0: fundação ---- */ :root.compact{ /* respeita notch/curvatura: o padding lateral nunca fica menor que a área segura */ --pad-l:max(16px, env(safe-area-inset-left)); --pad-r:max(16px, env(safe-area-inset-right)); --pad-b:env(safe-area-inset-bottom); } .compact .header-inner, .compact .painel-row, .compact .toolbar, .compact .active-filters, .compact .timeline-wrap, .compact .edit-banner, .compact .tipo-legend, .compact footer.site{padding-left:var(--pad-l);padding-right:var(--pad-r)} .compact footer.site{padding-bottom:calc(9px + var(--pad-b))} /* A rolagem horizontal da grade acontece DENTRO da timeline — nunca no documento. Sem isto o min-width do #tlInner (colunas de sala) alarga o , e aí o header sticky, as pills de tema e a legenda saem da tela junto com a grade (era o pior sintoma no celular). Efeito colateral aceito: a timeline vira contexto de rolagem, então os cabeçalhos de dia/sala deixam de grudar na vertical no compacto — a Fase 3 trata a grade como visão secundária. Em compensação o eixo de horário (.tl-times, sticky left) passa a grudar de verdade. */ .compact .timeline-wrap{min-width:0} .compact .timeline{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} /* Como a timeline virou contexto de rolagem, `top:` de sticky passa a ser medido dentro dela e os cabeçalhos de dia/sala saem do lugar. No compacto eles voltam a ser normais (rolam com a grade); quem continua grudado é o eixo de horário, agora na horizontal — que é o que importa aqui. */ .compact .tl-dayhead,.compact .tl-roomhead{position:static} .compact .tl-corner{top:auto} /* "Por dia" é uma visão de tela larga (3 colunas de ~98px no celular): fora do seletor no compacto, onde as opções são Agenda | Por sala */ .compact #viewSeg .vopt[data-view="dia"]{display:none} /* ---- Fase 3: a grade (timetable) como visão SECUNDÁRIA no celular ---- Quem quer comparar salas lado a lado continua conseguindo — mas dentro de um contêiner que se comporta: coluna mais larga (card estreito demais não vale a pena), rolagem horizontal com encaixe por sala e o eixo de horário grudado à esquerda (isso já vem da Fase 0). */ :root.compact{--room-min:calc(150px * var(--zoom,1))} .compact body:not(.view-agenda) .timeline{scroll-snap-type:x proximity;scroll-padding-left:var(--time-col)} .compact body:not(.view-agenda) .tl-col{scroll-snap-align:start} .compact body:not(.view-agenda) .tl-hint{display:block;margin:2px 0 0;text-align:center; font-size:var(--fs-xs);color:var(--muted-2);font-weight:600;letter-spacing:.02em} /* o overlay do modal também não pode vazar largura */ .compact .overlay{padding:16px 12px} /* FX de fundo: orbs com blur de 64px em elementos fixos custam repaint a cada rolagem no celular. O canvas e a animação de entrada são desligados no fx.js pelo mesmo critério. */ .compact .orb,.compact #fxCanvas,.compact .scanline{display:none} /* Tablet (721–900px): não entra no modo compacto (o cromo do desktop ainda cabe), mas a grade também não pode arrastar a página inteira para os lados — mesma isolação da rolagem. */ @media (min-width:721px) and (max-width:900px){ .timeline-wrap{min-width:0} .timeline{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain} .tl-dayhead,.tl-roomhead{position:static} .tl-corner{top:auto} } /* ---- Fase 1: cromo do topo (699px → ~120px) ---- Linha 1: logo · contador · lupa · Filtros (+ ações do admin). Linha 2: abas de dia (seleção exclusiva — no celular a grade mostra um dia por vez). Linha 3: busca, só quando pedida na lupa. O que sai da página: números grandes, Visão, Zoom, Sala, pills de tema e legenda de tipos — Visão/Sala/legenda são REALOCADAS para dentro do painel "Mais filtros" pelo app.js (relayout). */ .compact .only-compact{display:inline-flex} .compact .header-inner{padding-top:8px;padding-bottom:8px;gap:10px;align-items:center} .compact .brand-logo{height:34px} /* linha 1 não quebra: só contador + lupa + Filtros (+ ações do admin). As abas de dia e a busca são movidas para fora de .filters (viram filhas de .header-inner) para ocuparem a largura toda. */ .compact .filters{flex:1 1 auto;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:nowrap} .compact .brand-tag{display:none} /* ADMIN no celular: cinco ações (Nova/Editar/Exportar/Entrar/Publicar) não cabem na barra do topo — elas saem do header e viram uma BARRA FIXA embaixo, no alcance do polegar, com ícone + rótulo. O topo volta a ter só logo + contador + lupa + Filtros. */ .compact .header-actions{gap:6px} .compact body.admin .header-actions{ position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:6px; padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:rgba(8,10,16,.96);backdrop-filter:blur(12px);border-top:1px solid var(--border-2); box-shadow:0 -10px 30px rgba(0,0,0,.5)} .compact body.admin .header-actions .btn{flex:1 1 0;min-width:0;flex-direction:column;gap:3px; padding:5px 4px;min-height:50px;font-size:11px;font-weight:700;letter-spacing:0} .compact body.admin .header-actions .btn span, .compact body.admin #exportBtn span, .compact body.admin #authBtn span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .compact body.admin .header-actions .btn svg{width:18px;height:18px} /* o conteúdo não pode terminar embaixo da barra */ .compact body.admin footer.site{padding-bottom:calc(66px + env(safe-area-inset-bottom))} /* DOCK (admin) no celular: gaveta inferior, acima da barra de ações. Cuidado herdado: em styles.css o bloco @media(max-width:900px) vem ANTES da definição base de `.dock`/`body.dock-open .app`, então aquelas regras nunca venciam — o dock ficava colado no topo e o `.app` ganhava padding-right:290px (o header inteiro espremido em ~100px no celular). Aqui a definição é completa e com especificidade maior. */ .compact .dock{top:auto;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));width:auto; height:min(46vh,340px);border-left:none;border-top:1px solid var(--border-2);border-radius:16px 16px 0 0; box-shadow:0 -16px 44px rgba(0,0,0,.5);padding-bottom:12px} .compact body.dock-open .app{padding-right:0;padding-bottom:calc(min(46vh,340px) + 74px)} /* recolhida: só o cabeçalho (toque nele para abrir) — meia tela permanente de dock não serve */ .compact .dock-head{cursor:pointer;min-height:44px;margin-bottom:0;padding:10px 6px} .compact .dock-head::after{content:"▾";margin-left:4px;opacity:.7;font-size:14px} .compact body.dock-min .dock{height:auto;padding-bottom:calc(8px + env(safe-area-inset-bottom))} .compact body.dock-min .dock-head{border-bottom:none} .compact body.dock-min .dock-head::after{content:"▴"} .compact body.dock-min .dock-item,.compact body.dock-min .dock-empty{display:none} .compact body.dock-min.dock-open .app{padding-bottom:140px} /* ---- Fase 6: edição no celular é por FORMULÁRIO (sem arraste) ---- */ .compact body.editing .ev,.compact body.editing .ag-item{cursor:pointer;touch-action:auto;outline:none} .compact body.editing .tl-col{cursor:default} .compact .ev-resize,.compact .ev-grip{display:none!important} /* banner de edição curto (o texto longo comia uma tela) */ .compact .edit-banner{padding:9px 12px;gap:8px;font-size:var(--fs-sm);margin-top:10px} .compact .edit-banner>span{display:none} .compact .edit-banner::after{content:"Modo edição — toque na palestra para editar";font-weight:600} .compact .eb-btn{margin-left:auto} /* alvo de toque mínimo (44×44) em qualquer botão da barra — ver Fase 4 para o resto da UI */ .compact .btn{min-height:44px;min-width:44px;justify-content:center} /* fora da tela pequena: números grandes, zoom e as pills de tema (o tema fica no painel de filtros) */ .compact .stats, .compact #zoomWrap, .compact .painel-row{display:none} .compact .st-compact{display:inline-block;flex:none;font-size:var(--fs-sm);font-weight:700;color:var(--muted); font-variant-numeric:tabular-nums;white-space:nowrap} .compact .st-compact b{color:var(--mint)} /* botão "Mais filtros" vira só o ícone (o rótulo cabe mal em 390px) */ .compact #filtrosBtn span{display:none} .compact #filtrosBtn,.compact #searchBtn{padding:0 12px} /* abas de dia: linha própria, largura cheia, alvo de toque cheio */ .compact #diaWrap{flex:1 0 100%;order:5;gap:0} .compact #diaWrap .lbl{display:none} .compact #diaRow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;width:100%} .compact #diaRow .room{min-height:44px;display:flex;align-items:center;justify-content:center; text-align:center;font-size:var(--fs-base);padding:6px 4px;line-height:1.15} /* busca: escondida atrás da lupa; quando aberta, ocupa a linha inteira */ .compact .search{display:none} .compact.search-open .search{display:block;flex:1 0 100%;order:6;width:auto} .compact.search-open .search input{padding-top:13px;padding-bottom:13px} .compact.search-open #searchBtn{border-color:var(--mint);color:var(--mint)} /* painel "Mais filtros": ancorado à direita e largo o suficiente para os blocos realocados */ .compact .popover{width:min(340px,calc(100vw - 32px));left:auto;right:0;max-height:min(72vh,560px)} .compact #popTop .locais{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px;width:100%} .compact #popTop .lbl{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;font-weight:600} .compact #popTop .viewseg,.compact #popTop #fSala{width:100%} .compact #popTop .viewseg .room{flex:1 1 0} .compact #popBottom label{display:block} .compact #popBottom .tipo-legend{padding:0;gap:10px;font-size:var(--fs-xs)} .compact #popBottom .tl-lbl{flex:1 0 100%;line-height:1.4} /* ---- Fase 2: VISÃO AGENDA ---- Exceção consciente à regra do arquivo: os seletores `.ag-*` são escopados pela VISÃO (body.view-agenda), não pelo breakpoint — a agenda é escolhida pelo usuário, não pela largura. Na agenda a timeline não tem conteúdo largo, então ela volta a NÃO ser contexto de rolagem — é isso que faz o cabeçalho de horário voltar a grudar (sticky) na página. */ body.view-agenda .timeline{overflow:visible;background:none;border:none;backdrop-filter:none} body.view-agenda .tl-inner{display:block} .compact body.view-agenda .timeline-wrap{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))} /* cabeçalho de horário: âncora da lista, gruda logo abaixo da barra do topo */ .ag-hourhead{position:sticky;top:var(--header-h);z-index:6;margin:14px 0 8px;padding:5px 12px; display:inline-flex;align-items:center;gap:8px;border-radius:999px; font-size:calc(0.82rem * var(--zoom,1));font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums; color:#04120e;background:var(--mint);box-shadow:0 4px 14px rgba(0,0,0,.5)} .ag-hourhead:first-child{margin-top:2px} /* cabeçalho de dia (quando o filtro deixa mais de um dia visível) */ .ag-dayhead{display:flex;align-items:baseline;gap:10px;margin:22px 0 4px;padding-bottom:8px; border-bottom:1px solid var(--border-2)} .ag-dayhead b{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em} .ag-dayhead span{font-size:var(--fs-sm);color:var(--muted)} /* separadores: almoço e vãos longos viram linha de lista, não bloco pintado */ .ag-sep{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 2px;padding:8px 12px; border:1px dashed var(--border-2);border-radius:11px;color:var(--muted); font-size:var(--fs-sm);font-weight:600} .ag-sep-h{font-variant-numeric:tabular-nums;opacity:.8} .ag-sep.ag-lunch{color:#ffd76a;border-color:rgba(246,200,90,.5);background:rgba(246,200,90,.08)} /* o card da lista: altura pelo CONTEÚDO (título inteiro, sem clamp) e cor do tema na faixa lateral */ .ag-item{position:relative;display:block;margin:0 0 10px;padding:12px 14px 12px 15px; border:1px solid var(--border);border-left:5px solid var(--pc,var(--purple));border-radius:13px; background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .13s,border-color .13s} .ag-item:active{background:rgba(255,255,255,.08)} .ag-item:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .ag-head{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:7px} .ag-hora{font-size:calc(0.8rem * var(--zoom,1));font-weight:800;color:var(--mint);font-variant-numeric:tabular-nums} .ag-tipo{font-size:calc(0.64rem * var(--zoom,1));font-weight:800;text-transform:uppercase;letter-spacing:.05em; padding:2px 8px;border-radius:999px;color:#fff;border:1px solid rgba(255,255,255,.35)} .ag-room{font-size:calc(0.7rem * var(--zoom,1));font-weight:700;color:var(--muted); padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border)} .ag-room.rm-vip{color:#f4cd63;background:rgba(246,200,90,.14);border-color:rgba(246,200,90,.5)} /* título: SEM clamp — é a razão de a agenda existir (na grade 71 de 71 títulos eram cortados) */ .ag-title{margin:0 0 6px;font-size:calc(1rem * var(--zoom,1));font-weight:800;line-height:1.25; letter-spacing:-.015em;overflow-wrap:anywhere} .ag-spk{display:flex;align-items:center;gap:6px;font-size:calc(0.82rem * var(--zoom,1));color:var(--muted);font-weight:600} .ag-spk svg{flex:none;opacity:.8} .ag-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px; padding-top:8px;border-top:1px solid rgba(255,255,255,.07)} .ag-tema{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:calc(0.75rem * var(--zoom,1)); font-weight:700;color:var(--text);opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ag-tema i{width:9px;height:9px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.2)} .ag-ing{flex:none;font-size:calc(0.7rem * var(--zoom,1));font-weight:700;color:var(--muted); padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border)} .ag-ing.restrito{color:#ffe08a;background:rgba(244,205,99,.14);border-color:rgba(244,205,99,.45)} .ag-lock{position:absolute;top:10px;right:12px;font-size:13px;opacity:.85} body.admin .ag-item.locked{border-color:rgba(255,215,106,.55);box-shadow:0 0 0 1px rgba(255,215,106,.35)} .ag-item.locked .ag-lock{display:inline} body:not(.admin) .ag-lock{display:none} /* ---- Fase 4: toque, bottom sheets e acessibilidade ---- Regra: no celular tudo que se toca tem no mínimo 44x44 (WCAG 2.5.5 / HIG). */ .compact .room,.compact .opt,.compact .pnl,.compact .vopt{min-height:44px;padding:9px 14px;font-size:var(--fs-base)} .compact .opt-group{gap:8px} .compact .chip{padding:8px 10px 8px 14px;font-size:var(--fs-sm)} .compact .chip button{width:26px;height:26px;font-size:14px} .compact .di-on{min-height:44px} .compact .modal .close{width:44px;height:44px;font-size:20px} /* véu do bottom sheet (criado pelo app.js) */ .sheet-scrim{position:fixed;inset:0;z-index:110;background:rgba(3,4,8,.6);backdrop-filter:blur(2px); opacity:0;pointer-events:none;transition:opacity .18s} body.sheet-open .sheet-scrim{opacity:1;pointer-events:auto} /* PAINEL DE FILTROS = bottom sheet (sai do

pelo relayout: o backdrop-filter do header criaria bloco contêiner e prenderia o position:fixed lá dentro) */ .compact .popover{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:120; width:auto;max-width:none;max-height:86dvh;display:none; padding:18px 16px calc(14px + env(safe-area-inset-bottom)); border-radius:20px 20px 0 0;border-bottom:none;overscroll-behavior:contain; box-shadow:0 -20px 60px rgba(0,0,0,.6)} .compact .popover.open{display:block;animation:sheetUp .2s ease} @keyframes sheetUp{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}} /* alça (só visual) */ .compact .popover::before{content:"";display:block;width:42px;height:4px;border-radius:99px; background:rgba(255,255,255,.22);margin:-8px auto 14px} /* rodapé fixo do sheet: Limpar + "Ver N palestras" */ .compact .sheet-foot{position:sticky;bottom:calc(-1 * env(safe-area-inset-bottom));z-index:2;display:flex;gap:10px; margin:18px -16px calc(-14px - env(safe-area-inset-bottom)); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(13,18,32,.4),#0d1220 30%);border-top:1px solid var(--border)} .compact .sheet-foot .btn{flex:1 1 0;min-width:0;margin:0;padding:10px;font-size:var(--fs-sm)} .compact .sheet-foot .btn-blue{flex:1.2 1 0} .compact .popover .clear{margin-top:0} /* MODAL DE DETALHES = bottom sheet de altura própria, com rolagem interna. O cabeçalho (selos + título) e as ações ficam fixos; só o miolo (.m-cols) rola. */ .compact .overlay{padding:0;align-items:flex-end;overflow:hidden} .compact .modal{width:100%;max-width:none;margin:0;max-height:92dvh;display:flex;flex-direction:column; border-radius:20px 20px 0 0;padding:18px 16px 0;overflow:hidden;animation:sheetUp .22s ease} .compact .modal::before{content:"";display:block;width:42px;height:4px;border-radius:99px; background:rgba(255,255,255,.22);margin:-8px auto 12px;flex:none} .compact .modal .m-badges,.compact .modal h2{flex:none} .compact .modal h2{font-size:var(--fs-lg);padding-right:46px} .compact .modal .m-cols{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;margin:12px 0;gap:14px} .compact .modal .m-read .m-abstract{max-height:none} .compact .modal .m-actions{flex:none;gap:8px;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(10,14,22,.9);border-top:1px solid var(--border)} .compact .modal .m-actions .btn{flex:1 1 auto;justify-content:center} .compact .mf-grow textarea.mi{min-height:160px} /* legenda de tipos e faixa de filtros ativos não ocupam espaço vertical no topo do celular */ .compact .tipo-legend{display:none} .compact #popBottom .tipo-legend{display:flex} .compact .active-filters{gap:6px} .compact .active-filters .af-label{display:none} .compact .timeline-wrap{margin-top:10px;margin-bottom:16px}