em vez de popover em JavaScript: funciona sem
script, e no celular um balão flutuante ou sai da tela ou
cobre o que a pessoa quer comparar. Balão no computador,
painel embaixo no celular — mesmo HTML. */
.mesa-quem{ position:relative; flex:0 0 auto; }
.mesa-quem > summary{
list-style:none; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
width:42px; height:38px; border-radius:8px;
border:1px solid var(--linha); background:#fff; color:var(--terracota);
}
.mesa-quem > summary::-webkit-details-marker{ display:none; }
.mesa-quem > summary svg{ margin:0; }
.mesa-quem[open] > summary{ border-color:var(--terracota); background:var(--papel); }
.mesa-quem-bal{
position:absolute; z-index:40; top:calc(100% + 6px); left:0;
width:290px; max-width:78vw;
padding:11px 13px; border-radius:10px;
background:#fff; border:1px solid var(--linha);
box-shadow:0 10px 30px rgba(30,22,14,.18);
font-size:13px; line-height:1.45;
}
.mesa-quem-bal ul{ margin:8px 0 0; padding-left:17px; }
.mesa-quem-bal li{ margin-bottom:6px; }
.mesa-quem-bal .legenda{ font-size:12px; margin:0; }
/* O mesmo balão dentro da tabela Por mesa. Ali o gatilho é um
ícone no meio do texto, não um botão de 42px — ele acompanha
o nome do núcleo. */
.mesa-quem-linha{ display:inline-block; vertical-align:middle; margin-left:6px; }
.mesa-quem-linha > summary{
width:auto; height:auto; padding:3px 5px; border:0; background:none;
}
.mesa-quem-linha > summary svg{ width:15px; height:15px; }
.mesa-quem-linha[open] > summary{ background:none; }
@media (max-width:760px){
/* Dentro de tabela que rola na horizontal, um balão absoluto
some atrás do corte. No celular ele vira bloco no fluxo:
empurra o conteúdo, mas aparece inteiro. */
.mesa-quem-linha{ display:block; margin:4px 0 0; }
.mesa-quem-bal{
position:static; width:auto; max-width:none;
box-shadow:none; background:var(--papel);
}
}
/* Tranco curto: diz "não dá" sem mensagem no topo da página. */
@keyframes mesaTrava{
0%,100%{ transform:translateX(0); }
25%{ transform:translateX(-4px); }
75%{ transform:translateX(4px); }
}
.mesa-trava{ animation:mesaTrava .3s; border-color:var(--terracota); }
@media (max-width:640px){
/* No celular o cartão vira três faixas empilhadas: identidade,
setas e campos. As setas ganham a largura inteira porque são
o controle mais usado desta tela. */
.mesa-org{ gap:8px; }
.mesa-org-id{ flex:1 1 100%; }
.mesa-org-setas{ flex:1 1 100%; }
.mesa-org-setas form{ flex:1 1 0; }
.mesa-org-setas .bt{ width:100%; min-height:44px; }
.mesa-org-campos{ flex:1 1 100%; }
.mesa-org-campos input[name="setor"],
.mesa-org-campos input[name="obs"]{ flex:1 1 100%; }
.mesa-org-campos .bt{ flex:1 1 100%; }
}
/* ---------------- quem vem: pessoas do convite ----------------
Fica dentro da célula do convite, na lista. Fechado por padrão
porque 24 convites com 79 subitens abertos é uma parede. */
.pessoas-cx{ margin-top:6px; }
.pessoas-cx > summary{
cursor:pointer; font-size:12.5px; color:var(--terracota);
list-style:none; display:inline-block;
border-bottom:1px dotted currentColor; padding-bottom:1px;
}
.pessoas-cx > summary::-webkit-details-marker{ display:none; }
.pessoas-cx > summary::before{ content:"▸ "; }
.pessoas-cx[open] > summary::before{ content:"▾ "; }
.pessoas-cx[open] > summary{ margin-bottom:8px; }
/* Cada pessoa é um formulário próprio: salvar uma não mexe nas
outras, e sem JavaScript continua funcionando. */
.pessoa-linha{
display:inline-flex; flex-wrap:wrap; gap:5px; align-items:center;
margin:0 0 5px;
}
.pessoa-linha input[type="text"]{ width:165px; }
.pessoa-linha input[type="number"]{ width:64px; }
.pessoa-linha input, .pessoa-linha select{
padding:5px 7px; font-size:15px; border:1px solid var(--linha);
border-radius:6px; background:#fff; color:var(--marrom);
}
.pessoa-nova{ margin-top:4px; padding-top:7px; border-top:1px dashed var(--linha); }
.pessoa-nova input, .pessoa-nova select{ background:var(--papel-2); }
@media (max-width:640px){
/* No celular a linha da pessoa ocupa a largura toda, e o nome
ganha a primeira linha inteira — é o campo que se lê. */
.pessoa-linha{ display:flex; width:100%; }
.pessoa-linha input[type="text"]{ flex:1 1 100%; width:auto; }
.pessoa-linha select{ flex:1 1 120px; }
}
/* ---------------- o croqui do salão ----------------
Duas camadas de grid, uma em cima da outra, com o MESMO
template. Atrás as células, que são os alvos de toque; na
frente as peças, cada uma declarando grid-column e grid-row.
É isso que tira a conta de pixel do caminho: a peça diz "da
coluna 4, ocupando 2" e o navegador resolve. Girar o celular,
mudar o zoom ou mudar o tamanho da grade não exigem recalcular
nada — só trocar --cc e --cl. */
.croqui-area{
position:relative;
display:grid;
grid-template-columns:repeat(var(--cc), 1fr);
grid-template-rows:repeat(var(--cl), 1fr);
/* A proporção da grade vira a proporção da caixa. Sem isto a
célula não seria quadrada e um salão de 20×14 apareceria
achatado — o croqui inteiro mentiria sobre as distâncias que
ele existe para mostrar. */
aspect-ratio:var(--cc) / var(--cl);
width:100%;
border:1px solid var(--linha);
border-radius:8px;
background:var(--papel-2);
overflow:hidden;
/* A grade é o chão do salão: quem toca aqui está escolhendo
lugar, não rolando a página. */
touch-action:manipulation;
}
.croqui-cel{
border:0; padding:0; margin:0; background:transparent;
box-shadow:inset 0 0 0 .5px rgba(0,0,0,.055);
cursor:default;
}
/* A planta do salão, por baixo de tudo.
------------------------------------------------------------
Camada própria, e não background da .croqui-area: separada,
a opacidade desbota a IMAGEM sem levar as linhas da grade e
as peças junto. --fop vem do banco, porque o ponto certo
depende da imagem — planta escura engole as peças, clara
demais não mostra parede. */
.croqui-planta{
position:absolute; inset:0;
background-size:contain;
background-position:center;
background-repeat:no-repeat;
opacity:var(--fop, .35);
pointer-events:none;
}
/* Com planta, a grade fica branca e as linhas somem quase de
todo: elas existem para orientar o dedo, e por cima de um
desenho de arquiteto virariam ruído sobre ruído. */
.croqui-area.com-planta{ background:#fff; }
.croqui-area.com-planta .croqui-cel{
box-shadow:inset 0 0 0 .5px rgba(0,0,0,.03);
}
/* A planta na caixa de ajustes, para conferir o que foi enviado. */
.croqui-planta-cx{
display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start;
padding:12px; margin-bottom:4px;
border:1px solid var(--linha); border-radius:8px;
background:var(--papel-2);
}
.croqui-planta-cx img{
width:200px; max-width:100%; height:auto; display:block;
border:1px solid var(--linha); border-radius:6px; background:#fff;
}
.croqui-planta-cx input[type="range"]{ display:block; width:190px; }
/* A célula só acende quando há peça escolhida: antes disso o
destaque prometeria uma ação que não existe. A classe entra no
container, não em cada célula — 280 toggles por seleção seriam
280 recálculos de estilo. */
.croqui-area.armada .croqui-cel{ cursor:pointer; }
.croqui-area.armada .croqui-cel:hover{ background:rgba(176,82,44,.14); }
.croqui-pecas{
position:absolute; inset:0;
display:grid;
grid-template-columns:repeat(var(--cc), 1fr);
grid-template-rows:repeat(var(--cl), 1fr);
/* A camada não intercepta o toque; só as peças dentro dela.
Sem isto a camada cobriria as células e nenhum toque na
grade chegaria ao destino. */
pointer-events:none;
}
.croqui-peca{
pointer-events:auto;
grid-column:calc(var(--c) + 1) / span var(--w);
grid-row:calc(var(--l) + 1) / span var(--h);
margin:1px; padding:2px;
display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:1px;
border:1px solid rgba(0,0,0,.18); border-radius:6px;
font-size:11.5px; line-height:1.15; font-weight:600;
overflow:hidden; cursor:grab;
/* Sem isto o arrastar no celular rolaria a página em vez de
mover a peça. */
touch-action:none;
transition:box-shadow .12s, transform .12s;
}
.croqui-peca.e-mesa{
background:#fff; color:var(--marrom);
border-color:var(--linha);
}
.croqui-peca.e-item{
background:var(--pc); color:#fff; opacity:.9;
border-color:rgba(0,0,0,.25);
}
.croqui-peca .croqui-rot{
max-width:100%; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap;
}
/* O elemento mostra o NOME INTEIRO — "Pista", "Mesa do bolo" — e
não a sigla: a sigla é dos núcleos, e abreviar "Pista" para "P"
foi um erro meu. Como o retângulo do elemento é grande (a pista
nasce 5×4) o nome cabe; quando não cabe, quebra em duas linhas
em vez de virar reticências, porque "Mesa do…" não identifica
nada. O title tem o nome completo de qualquer forma. */
.croqui-peca.e-item .croqui-rot{
white-space:normal; text-align:center;
line-height:1.1; word-break:break-word;
padding:0 2px;
}
/* O rótulo do elemento se edita no lugar.
------------------------------------------------------------
Sem affordance nenhuma ninguém descobre que dá para clicar e
escrever. Mas afford*ance* permanente (moldura, fundo branco)
poluiria o mapa, que é feito para ser lido de relance. Então o
convite aparece no hover e a moldura só no foco — o estado em
que ela de fato informa algo.
min-width porque rótulo apagado vira um alvo de zero pixel, e
aí não há como clicar para escrever de novo. */
.croqui-peca.e-item .croqui-rot[data-editavel]{
min-width:18px; cursor:text; border-radius:3px;
}
@media (hover:hover){
.croqui-peca.e-item .croqui-rot[data-editavel]:hover{
background:rgba(255,255,255,.22);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
}
.croqui-peca.e-item .croqui-rot[data-editavel]:focus{
outline:none;
background:#fff; color:var(--marrom);
box-shadow:0 0 0 2px var(--terracota);
/* Editando, o texto precisa caber: deixa de ser cortado e
passa a quebrar, ainda que transborde a peça por um
instante. Nome que não se lê não se corrige. */
white-space:normal; overflow:visible;
position:relative; z-index:6;
}
.croqui-peca .croqui-qtd{
font-weight:400; font-size:10.5px; opacity:.72;
}
.croqui-peca.sel{
box-shadow:0 0 0 2px var(--terracota);
transform:scale(1.04); z-index:3;
}
.croqui-peca.arrastando{ opacity:.55; cursor:grabbing; }
/* As iniciais dos núcleos, dentro da peça.
------------------------------------------------------------
É o que torna o mapa legível de relance: "Mesa 7" não diz
nada, "7 · BS JM" diz que ali estão os Souza e os Martins.
Menor e mais clara que o número da mesa, porque a hierarquia
é essa — primeiro qual mesa, depois quem. */
.croqui-peca .croqui-inis{
font-weight:400; font-size:9.5px; letter-spacing:.3px;
opacity:.72; line-height:1.1;
max-width:100%; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap;
}
/* O ícone de ver quem senta ali.
Canto superior direito, fora do caminho do rótulo, e com área
de toque maior que o desenho — 13px de ícone com 20px de alvo,
que é o mínimo tolerável para dedo em peça pequena. */
.croqui-quem-bt{
position:absolute; top:0; right:0;
width:20px; height:20px; padding:0;
display:flex; align-items:center; justify-content:center;
border:0; border-radius:0 5px 0 5px;
background:rgba(0,0,0,.07); color:inherit;
cursor:pointer; opacity:.65;
}
.croqui-quem-bt:hover{ opacity:1; background:rgba(0,0,0,.14); }
.croqui-peca{ position:relative; }
/* A alça de redimensionar, canto inferior direito.
------------------------------------------------------------
Eu havia recusado alça de canto, e a recusa valia para o
DEDO: em 40 pixels de peça ela é alvo pequeno demais, e o dedo
que erra arrasta a peça inteira. Com ponteiro o argumento se
inverte — o mouse acerta 10 pixels sem esforço, e esticar o
canto é mais rápido que contar cliques no ±.
Por isso ela só existe onde há ponteiro de verdade. No celular
ficam o ± e o Tamanho padrão, que acertam sempre. */
.croqui-tam{ display:none; }
@media (hover:hover) and (pointer:fine){
.croqui-tam{
display:block; position:absolute; right:0; bottom:0;
width:11px; height:11px; cursor:nwse-resize;
/* Dois riscos na diagonal, o desenho que todo canto de
redimensionar tem — sem imagem e sem ícone a manter. */
background:
linear-gradient(135deg, transparent 42%, currentColor 42%,
currentColor 54%, transparent 54%),
linear-gradient(135deg, transparent 68%, currentColor 68%,
currentColor 80%, transparent 80%);
opacity:.35;
}
.croqui-peca:hover .croqui-tam,
.croqui-peca.sel .croqui-tam{ opacity:.85; }
}
/* Enquanto mede, a peça não transiciona: a transição de 120ms
faria o retângulo correr atrás do ponteiro em vez de acompanhá-lo. */
.croqui-peca.medindo{
transition:none;
box-shadow:0 0 0 2px var(--terracota);
z-index:4;
}
/* O laço: o retângulo que escolhe várias de uma vez.
Tracejado e translúcido para não esconder o que está laçando —
o ponto do gesto é ver quem vai entrar. */
.croqui-laco{
position:absolute; z-index:5; pointer-events:none;
border:1.5px dashed var(--terracota);
background:rgba(176,82,44,.10);
border-radius:3px;
}
/* O interruptor de escolher várias, quando ligado. */
#croquiVarias.ligado{
background:var(--terracota); color:#fff; border-color:var(--terracota);
}
/* ---- a gaveta: mesas ainda fora do mapa ---- */
.croqui-gaveta{
display:flex; flex-wrap:wrap; gap:6px; align-items:center;
padding:10px 12px; margin-bottom:12px;
border:1px dashed var(--linha); border-radius:8px;
}
/* Vermelho porque é trabalho que falta, igual ao grupo "sem
mesa" da lista — e verde-neutro quando acabou, para o fim do
trabalho ser visível de relance. */
.croqui-gaveta.tem{ border-color:var(--terracota); background:rgba(176,82,44,.05); }
.croqui-gaveta.vazia{ opacity:.75; }
.croqui-gaveta-rot{ font-size:12.5px; color:var(--suave); margin-right:4px; }
/* O chip da gaveta. Virou pelo mesmo motivo da peça: tem
um botão dentro (o ícone de quem senta). */
.croqui-fora{
display:inline-flex; align-items:center; gap:5px;
background:#fff; border:1px solid var(--linha); border-radius:6px;
padding:5px 5px 5px 10px; font-size:13.5px; color:var(--marrom);
cursor:pointer; min-height:36px;
touch-action:none;
}
.croqui-fora-nome{ font-weight:600; }
.croqui-fora small{ opacity:.6; letter-spacing:.3px; }
.croqui-fora.sel{ box-shadow:0 0 0 2px var(--terracota); }
/* Aqui o ícone fica no fluxo, não no canto: o chip tem largura
para ele, ao contrário da peça apertada do mapa. */
.croqui-fora .croqui-quem-bt{
position:static; border-radius:5px;
}
/* ---- a barra da peça escolhida ---- */
.croqui-barra{
display:flex; flex-wrap:wrap; gap:10px; align-items:center;
margin-top:12px; padding:10px 12px;
border:1px solid var(--terracota); border-radius:8px;
background:var(--papel-2);
}
.croqui-grupo{ display:inline-flex; align-items:center; gap:5px; }
.croqui-grupo small{ color:var(--suave); font-size:12px; }
.croqui-grupo b{ min-width:16px; text-align:center; }
/* ---- quem senta ali: o balão ----
------------------------------------------------------------
position:fixed porque o mesmo balão atende às peças do mapa e
aos chips da gaveta, que estão fora da grade: a âncora é o
retângulo do ícone na tela, venha ele de onde vier. O JS põe
left/top e --seta; o CSS só desenha.
Era um painel fixo abaixo da barra, e a resposta aparecia
longe da pergunta — quem toca o ícone da mesa 7 está olhando
para a mesa 7. */
.croqui-quem{
position:fixed; z-index:60;
width:min(270px, calc(100vw - 20px));
max-height:min(320px, 60vh); overflow:auto;
padding:11px 13px;
border:1px solid var(--linha); border-radius:10px;
background:#fff;
box-shadow:0 6px 24px rgba(0,0,0,.18);
}
/* A seta, apontando o ícone. --seta é a distância a partir da
borda esquerda do balão, já aparada pelo JS: sem o aparo ela
sairia pela quina quando o balão é empurrado para dentro da
tela por estar perto da borda. */
.croqui-quem::before,
.croqui-quem::after{
content:""; position:absolute; left:var(--seta, 50%);
margin-left:-7px; border:7px solid transparent;
}
.croqui-quem::before{ top:-14px; border-bottom-color:var(--linha); }
.croqui-quem::after{ top:-13px; border-bottom-color:#fff; }
.croqui-quem.acima::before{
top:auto; bottom:-14px; border-bottom-color:transparent;
border-top-color:var(--linha);
}
.croqui-quem.acima::after{
top:auto; bottom:-13px; border-bottom-color:transparent;
border-top-color:#fff;
}
/* O X existe para o dedo: clicar fora também fecha, mas num
celular "fora" costuma ser outra peça, e aí o toque viraria
uma seleção que ninguém pediu. */
.croqui-quem-x{
position:absolute; top:4px; right:6px;
width:26px; height:26px; padding:0;
border:0; background:none; cursor:pointer;
font-size:21px; line-height:1; color:var(--suave);
}
.croqui-quem-x:hover{ color:var(--marrom); }
.croqui-quem-rot{
display:block; font-size:12.5px; color:var(--suave);
margin:0 26px 7px 0; /* espaço para o X */
}
/* A lista é por NÚCLEO, com as pessoas aninhadas: a mesa 7 não
tem "oito pessoas", tem a família Souza, os Martins e a Ana.
Uma coluna: o balão é estreito por natureza (ele acompanha o
ícone, não a largura da página), e duas colunas de 120px
cortariam "Maria Aparecida (7)" no meio. */
.croqui-quem > ul{
margin:0; padding:0; list-style:none;
font-size:14px; line-height:1.5;
}
.croqui-quem > ul > li{ break-inside:avoid; margin-bottom:7px; }
.croqui-quem .croqui-sigla{
display:inline-block; min-width:24px; margin-right:5px;
padding:1px 4px; border-radius:4px;
background:var(--papel-2); border:1px solid var(--linha);
font-size:11px; letter-spacing:.5px; text-align:center;
}
.croqui-quem ul ul{
margin:2px 0 0 29px; padding:0; list-style:none;
font-size:13px; color:var(--suave);
}
.croqui-quem small{ display:block; margin-left:29px; opacity:.7; }
/* ---- a paleta ---- */
.croqui-paleta{
display:flex; flex-wrap:wrap; gap:6px; align-items:center;
margin-top:16px; padding-top:14px; border-top:1px dashed var(--linha);
}
.croqui-novo{
background:var(--pc); color:#fff; border:0; border-radius:6px;
padding:7px 11px; font-size:13px; cursor:pointer; min-height:36px;
opacity:.92;
}
.croqui-novo:hover{ opacity:1; }
/* ---- ajustes ---- */
.croqui-ajustes > summary{
cursor:pointer; font-size:13.5px; color:var(--terracota);
list-style:none; display:inline-block;
border-bottom:1px dotted currentColor; padding-bottom:1px;
}
.croqui-ajustes > summary::-webkit-details-marker{ display:none; }
.croqui-ajustes > summary::before{ content:"▸ "; }
.croqui-ajustes[open] > summary::before{ content:"▾ "; }
.croqui-grade-frm{
display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
margin-top:12px;
}
.croqui-grade-frm label{ font-size:12.5px; color:var(--suave); }
.croqui-grade-frm input[type="number"]{
display:block; width:84px; padding:6px 8px; font-size:15px;
border:1px solid var(--linha); border-radius:6px; background:#fff;
}
.croqui-grade-frm p{ flex:1 1 100%; margin:0; }
.croqui-digitar{ display:flex; flex-wrap:wrap; gap:8px; }
.croqui-digitar form{
display:inline-flex; align-items:center; gap:4px;
border:1px solid var(--linha); border-radius:6px; padding:4px 7px;
}
.croqui-dig-nome{ font-size:13px; font-weight:600; min-width:34px; }
.croqui-digitar input[type="number"]{
width:56px; padding:4px 6px; font-size:14px;
border:1px solid var(--linha); border-radius:5px; background:#fff;
}
@media (max-width:640px){
/* No celular a grade cresce em altura: largura total e a
proporção mantida pelo aspect-ratio. A peça perde o rótulo
longo e fica com fonte menor — o que se lê de relance é o
número da mesa, não o nome do grupo. */
.croqui-peca{ font-size:10px; margin:.5px; }
.croqui-peca .croqui-qtd{ display:none; }
/* A barra da peça escolhida gruda no fim da tela: com a grade
ocupando a altura toda, uma barra no fluxo ficaria fora da
vista justamente quando a peça está selecionada. */
.croqui-barra{
position:sticky; bottom:0; z-index:4;
background:#fff; box-shadow:0 -2px 10px rgba(0,0,0,.12);
}
.croqui-barra .bt{ min-height:40px; }
.croqui-digitar form{ flex:1 1 100%; }
/* Uma coluna de nomes no celular: duas de 160px cortariam
"Maria Aparecida (7)" no meio. */
.croqui-planta-cx img{ width:100%; }
/* No celular as iniciais somem da peça: em 10 pixels de altura
elas viram borrão, e o número da mesa é o que se lê. Quem
senta ali continua a um toque, no ícone. */
.croqui-peca .croqui-inis{ display:none; }
}
/* ---------------- faixa da rede ----------------
Os outros produtos, no fim de tudo. Tom mais escuro que o
rodapé de propósito: marca o fim da página e separa o que é
deste site do que é de fora dele. */
.rede{
border-top:1px solid var(--linha);
background:var(--papel-2);
padding:30px 0 34px;
}
.rede-titulo{
margin:0 0 20px; text-align:center;
font-size:14.5px; color:var(--suave); line-height:1.6;
}
.rede-titulo b{ color:var(--marrom); }
.rede-itens{
display:flex; justify-content:center; align-items:stretch;
gap:14px; flex-wrap:wrap;
}
.rede-item{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:9px; text-decoration:none; min-width:186px;
padding:18px 22px; border-radius:12px;
border:1px solid var(--linha); background:#fff;
transition:border-color .18s, transform .18s;
}
.rede-item:hover{ border-color:var(--terracota); transform:translateY(-2px); }
/* Altura fixa e largura livre: os três logos têm proporções
diferentes, e travar a largura esmagaria dois deles. */
.rede-item img{
height:30px; width:auto; max-width:160px; object-fit:contain;
}
.rede-nome{
font-family:var(--serif); font-size:21px; font-weight:600;
color:var(--terracota); line-height:1.1;
}
.rede-para{
font-size:12px; text-transform:uppercase; letter-spacing:.07em;
font-weight:600; color:var(--suave);
}
@media (max-width:560px){
.rede{ padding:24px 0 28px; }
.rede-itens{ flex-direction:column; gap:10px; }
.rede-item{
width:100%; min-width:0;
flex-direction:row; justify-content:space-between; padding:14px 16px;
}
.rede-item img{ height:26px; }
.rede-para{ font-size:11px; text-align:right; }
}
/* Link "continuar de onde parei" dentro do aviso do topo.
Não é um botão: é um atalho para quem quer, e não pode competir
com a leitura da mensagem em si. */
.aviso-ir{
display:inline-block; margin-left:10px; white-space:nowrap;
font-weight:600; font-size:14px; text-decoration:none;
border-bottom:1px solid currentColor; padding-bottom:1px;
}
.aviso-ir:hover{ opacity:.75; }
/* ---------------- conferência da importação ----------------
Sete colunas de campos editáveis. No desktop é uma tabela
normal; no celular o .lista empilha cada linha num cartão, e
sem estas regras cada convite vira sete linhas de altura — uma
lista de 90 ficaria com uns dez metros de rolagem. */
.imp-tabela input[type="text"],
.imp-tabela input[type="number"]{
padding:6px 8px; font-size:15px; border:1px solid var(--linha);
border-radius:6px; background:#fff; color:var(--marrom);
}
.imp-tabela input:focus{ outline:2px solid var(--terracota); outline-offset:-1px; }
.imp-tabela input[type="checkbox"]{ width:19px; height:19px; accent-color:var(--terracota); }
.imp-tabela td{ vertical-align:middle; }
@media (max-width:760px){
/* Rótulo e campo na mesma linha, em vez de um por cima do
outro: o ::before do .lista já diz o que é cada campo. */
.imp-tabela td[data-r]{
display:flex; align-items:center; gap:10px;
padding:4px 12px; border:0;
}
.imp-tabela td[data-r]::before{
flex:0 0 86px; margin:0; text-align:left;
}
.imp-tabela td[data-r] input{ flex:1 1 auto; min-width:0 !important; }
.imp-tabela td[data-r="Importar"]{ padding-top:10px; }
.imp-tabela td[data-r="Observação"]{ align-items:flex-start; }
.imp-tabela tbody tr{ padding:6px 0 10px; }
/* O nome é o campo que importa: ganha a linha inteira. */
.imp-tabela td[data-r="Nome"]{ display:block; padding:8px 12px 4px; }
.imp-tabela td[data-r="Nome"]::before{ display:block; margin-bottom:3px; }
.imp-tabela td[data-r="Nome"] input{ width:100% !important; }
}
/* ---------------- ajuda do parceiro ---------------- */
.ajuda-grupo{ margin-bottom:26px; }
.ajuda-grupo h2{
font-family:var(--serif); font-size:21px; font-weight:600;
margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--linha);
}
.ajuda-item:target summary{ color:var(--terracota); }
.ajuda-item:target{ box-shadow:0 0 0 2px var(--terracota); border-radius:8px; }
/* respeita quem prefere menos animação */
@media (prefers-reduced-motion:reduce){
.bt{ transition:none; }
.bt:hover{ transform:none; }
.tour-furo{ transition:none; }
}