/* ═══════════════════════════════════════════════════════════════════════════ O SGP NUM APARELHO DE MÃO Vale dentro da casca do aplicativo (o ganha `corpo-aplicacao--com-barra-app`) E em qualquer tela estreita, porque os dois defeitos que este arquivo conserta foram medidos em 390 pontos de largura e não têm nada a ver com quem serviu a página. Entra DEPOIS de 14_tela_mestre.css na ordem das folhas: ele especializa aquele esqueleto, não o substitui. ═══════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────────── 1. OS RÓTULOS DOS FILTROS QUE SE SOBREPUNHAM (defeito, não estilo) Medido em /pessoas a 390px: quatro pares de rótulos ocupando a MESMA linha e a mesma faixa horizontal — "Qualificação" por cima de "Termômetro de voto", que por sua vez cobria "Áreas de interesse". Ilegível. A causa: abaixo de 1100px a barra vira `flex-wrap: nowrap` com rolagem lateral (14_tela_mestre.css:258), mas `.barra-filtros__grupo` só recebeu `min-width: 0`. Item de flex com `min-width: 0` e sem `flex: none` encolhe abaixo do próprio conteúdo — e o texto, que não encolhe junto, transborda por cima do vizinho. Em `nowrap` o grupo tem de recusar o encolhimento. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1099px) { .barra-filtros__grupo, .barra-filtros__gaveta, .barra-filtros__chips { flex: none; } /* Com os grupos firmes, a rolagem lateral é o que salva a linha — e ela precisa parar em cada grupo, senão o dedo passa três filtros de uma vez. */ .barra-filtros__conteudo { scroll-snap-type: x proximity; scroll-padding-inline-start: var(--esp-4); } .barra-filtros__grupo { scroll-snap-align: start; } /* A barra do topo não some da tela ao rolar a lista: ela é o "onde estou". */ .tela-mestre__area--filtros { position: sticky; top: 0; z-index: 3; background: var(--cor-fundo-elevado); } } /* ────────────────────────────────────────────────────────────────────────── 2. MESTRE-DETALHE VIRA LISTA → FICHA O desenho de três colunas do desktop sobrevivia empilhado no aparelho: a lista, e logo abaixo uma área que dizia "Escolha alguém na lista AO LADO" — num aparelho que não tem lado. Pior: a lista ficava numa caixa de altura fixa com rolagem própria, dentro da rolagem da página, cortando registros pela metade. O conserto não muda uma linha de ERB nem de controller: o esqueleto F09 é um só, as fichas vazias agora se declaram com `data-ficha-vazia`, e o `:has()` faz a tela escolher entre dois estados — LISTA (nada escolhido) e FICHA (alguém escolhido). É o comportamento de todo aplicativo de lista que existe, e continua sendo a mesma página, com a mesma URL, servida pelo mesmo controller. `:has()` é seguro aqui: o portão de navegador do SGP já recusa motores abaixo do Chrome 120 (`allow_browser versions: :modern`), e `:has()` existe desde o 105. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1099px) { /* ESTADO "LISTA": a ficha está vazia → ela e o histórico saem da frente, e a lista fica com a tela inteira. */ .tela-mestre:has(.tela-mestre__area--ficha [data-ficha-vazia]) .tela-mestre__area--ficha, .tela-mestre:has(.tela-mestre__area--ficha [data-ficha-vazia]) .tela-mestre__area--historico { display: none; } /* ESTADO "FICHA": há registro escolhido → a lista sai, a ficha ocupa tudo. A volta para a lista é o botão de voltar do aparelho e o "Voltar" que o Rails desenha abaixo — a URL de cada estado é diferente, então o histórico do navegador já sabe o caminho de volta sem nada de novo. A BARRA DE FILTROS SAI JUNTO, e isso não é detalhe: ela filtra a LISTA, e no estado ficha a lista não está na tela. Deixá-la ali é oferecer um controle que não governa nada do que se vê — flagrado no primeiro print da ficha, com "Todas 13 · Conquistado" pairando sobre a ficha de uma pessoa só. */ .tela-mestre:not(:has(.tela-mestre__area--ficha [data-ficha-vazia])) .tela-mestre__area--lista, .tela-mestre:not(:has(.tela-mestre__area--ficha [data-ficha-vazia])) .tela-mestre__area--filtros { display: none; } /* Sem coluna vizinha, nada rola por dentro: quem rola é a página. */ .tela-mestre__area { max-height: none; } .tela-mestre__area--historico { max-height: none; border-top: 1px solid var(--cor-borda); } } /* A tira "voltar para a lista" — só aparece no estado FICHA, e só no estreito. Ela é irmã da ficha e não entra no fluxo de leitura da página no desktop. */ .voltar-para-lista { display: none; } @media (max-width: 1099px) { .tela-mestre:not(:has(.tela-mestre__area--ficha [data-ficha-vazia])) .voltar-para-lista { display: inline-flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-3); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-pilula, 999px); background: var(--cor-fundo-afundado); color: var(--cor-texto-suave); font-size: var(--texto-sm); font-weight: var(--peso-semi, 600); text-decoration: none; min-height: 2.5rem; } } /* ────────────────────────────────────────────────────────────────────────── 3. ALVOS DE TOQUE Medido: 33 alvos com menos de 40px de altura na tela de Pessoas. A régua das duas plataformas é 44-48px. Isto não redesenha nada — só garante o mínimo onde o dedo vai. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1099px) { .menu__link, .lista-navegacao__item, .barra-filtros__conteudo .chip { min-height: 2.75rem; } .menu__link { padding-block: var(--esp-3); } } /* ────────────────────────────────────────────────────────────────────────── 4. A FAIXA "ESTA TELA É DO COMPUTADOR" Quem chega por um link a uma tela de escritório dentro do aplicativo não pode bater numa porta fechada — a rota continua aberta (a regra é esconder do menu, nunca bloquear), e a faixa diz o que está acontecendo. ────────────────────────────────────────────────────────────────────────── */ .faixa-escritorio { display: flex; align-items: flex-start; gap: var(--esp-3); margin-bottom: var(--esp-4); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-left: 3px solid var(--cor-acao); border-radius: var(--raio-md, 8px); background: var(--cor-acao-suave); color: var(--cor-texto); font-size: var(--texto-md); } .faixa-escritorio__icone { flex: none; line-height: 0; color: var(--cor-acao); } .faixa-escritorio__texto { margin: 0; } .faixa-escritorio__texto strong { display: block; } /* ────────────────────────────────────────────────────────────────────────── 5. OS CARTÕES DO PAINEL, DUAS A DUAS Medido: cada indicador do painel ocupava a largura inteira e ~300 pontos de altura no aparelho — quatro números viravam quatro telas de rolagem. Eles são números curtos: cabem dois por linha com folga, e a tela inteira passa a ser lida de uma vez. O recorte é 640px e não 900px (o do desktop) de propósito: entre 640 e 900 ainda há largura para a coluna dupla do layout original. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* `.grade--4` é a fileira dos quatro indicadores de voto (painel/base). */ .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); } .grade--4 .indicador { padding: var(--esp-4); } /* O número não precisa do tamanho de painel de parede num aparelho. */ .grade--4 .indicador__valor { font-size: var(--texto-3xl, 1.75rem); } } /* ────────────────────────────────────────────────────────────────────────── 6. A LEGENDA DA AGENDA VIRA UMA LINHA O quadro "Tipo do evento" é uma coluna lateral no computador; empilhado no aparelho ele virava um cartão de ~300 pontos com duas bolinhas e um link, entre o cabeçalho e o dia. As mesmas informações cabem numa linha. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1099px) { .agenda__facetas .cartao__corpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); padding: var(--esp-3) var(--esp-4); } .agenda__facetas .cartao__titulo { margin: 0; font-size: var(--texto-xs); color: var(--cor-texto-fraco); } .agenda-legenda { margin: 0; } }