/* screens.css — casca (sidebar + topbar) e layout das 4 telas. Mobile first a partir de 320px. */

/* ---------- Casca ---------- */
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: var(--z-sidebar);
  width: min(var(--largura-sidebar), 86vw);
  display: flex; flex-direction: column; gap: var(--esp-5); padding: var(--esp-4);
  background: var(--cor-superficie); border-right: 1px solid var(--cor-borda);
  transform: translateX(-100%); visibility: hidden;
  transition: transform var(--dur-media) var(--ease), visibility 0s linear var(--dur-media);
}
.app[data-menu="aberto"] .sidebar {
  transform: none; visibility: visible; box-shadow: var(--sombra-lg);
  transition: transform var(--dur-media) var(--ease), visibility 0s;
}
.veu {
  position: fixed; inset: 0; z-index: var(--z-veu); background: var(--cor-veu);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-media) var(--ease);
}
.app[data-menu="aberto"] .veu { opacity: 1; pointer-events: auto; }


.nav { display: flex; flex-direction: column; gap: var(--esp-1); }
.nav a {
  display: flex; align-items: center; gap: var(--esp-3); min-height: 2.75rem; padding: 0 var(--esp-3);
  border-radius: var(--raio-md); color: var(--cor-texto-suave); text-decoration: none; font-weight: var(--peso-medio);
  transition: background var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.nav a svg { width: 1.25rem; height: 1.25rem; flex: none; }
.nav a:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.nav a[aria-current="page"] { background: var(--cor-destaque-suave); color: var(--cor-destaque); }
.sidebar__rodape { display: flex; flex-direction: column; gap: var(--esp-3); margin-top: auto; padding: 0 var(--esp-2); }
.sidebar__rodape p { font-size: var(--tam-xs); color: var(--cor-texto-fraco); }
.sidebar__tema { justify-content: flex-start; width: 100%; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--esp-3);
  height: var(--altura-topbar); padding: 0 var(--esp-4);
  background: color-mix(in srgb, var(--cor-superficie) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--cor-borda);
}
.topbar__titulo { flex: 1; min-width: 0; font-weight: var(--peso-forte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conteudo { flex: 1; min-width: 0; padding: var(--esp-5) var(--esp-4) var(--esp-6); }
.conteudo:focus { outline: none; }
.palco { display: contents; } /* um por navegação (router.js); não muda o layout */

@media (min-width: 62rem) {
  .app { grid-template-columns: var(--largura-sidebar) minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: 100vh; transform: none; visibility: visible; width: auto; box-shadow: none; }
  /* no computador a barra do topo só repetia o título da tela: some, e o tema vai para a barra lateral */
  .veu, .botao-menu, .topbar { display: none; }
  .conteudo { padding: var(--esp-6) var(--esp-6) var(--esp-6); }
}

/* ---------- Página ---------- */
.pagina { max-width: var(--largura-conteudo); margin: 0 auto; display: flex; flex-direction: column; gap: var(--esp-5); animation: aparecer var(--dur-media) var(--ease); }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pagina__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-3); }
.pagina__cab h1:focus { outline: none; }
.pagina__sub { color: var(--cor-texto-suave); margin-top: var(--esp-1); max-width: 40rem; }
.barra-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }

.secao { display: flex; flex-direction: column; gap: var(--esp-4); }
.secao__titulo { font-size: var(--tam-lg); font-weight: var(--peso-forte); padding: 0; margin-bottom: var(--esp-1); }
.grade-campos { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.grade-campos > .largo { grid-column: 1 / -1; }

/* ---------- Marca ---------- */
.marca-layout { display: grid; gap: var(--esp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.marca-form { display: flex; flex-direction: column; gap: var(--esp-5); container-type: inline-size; }
/* Grades de campos da Marca com colunas fixas, medidas pela largura do formulário (container query):
   4 campos fecham em 1, 2x2 ou 4 colunas e 2 campos em 1 ou 2, nunca deixando coluna vazia nem 3 + 1. */
.grade-4, .grade-3, .grade-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
.grade-4 > .largo, .grade-3 > .largo, .grade-2 > .largo { grid-column: 1 / -1; }
@container (min-width: 32rem) { .grade-4, .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 40rem) { .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 52rem) { .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* seletor de marca e "Nova marca": duas colunas iguais, controles alinhados pela base */
.marca-seletor { display: grid; grid-template-columns: repeat(2, minmax(0, 11rem)); align-items: end; gap: var(--esp-2); }
/* 2.625rem = altura real de um campo (.entrada: 24px de linha + 16px de respiro + 2px de borda): botão e seletor iguais */
.marca-seletor > .btn { width: 100%; min-height: 2.625rem; }
@media (max-width: 47.99rem) { .marca-seletor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.previa { display: flex; flex-direction: column; gap: var(--esp-3); }
.previa__moldura { display: grid; place-items: center; background: var(--cor-superficie-2); border-radius: var(--raio-md); padding: var(--esp-3); min-height: 12rem; }
.previa__moldura canvas { border-radius: var(--raio-sm); box-shadow: var(--sombra-md); }
@media (min-width: 70rem) {
  .marca-layout { grid-template-columns: minmax(0, 1fr) 24rem; }
  .previa { position: sticky; top: calc(var(--altura-topbar) + var(--esp-5)); }
}
.cor-linha { display: flex; gap: var(--esp-2); align-items: center; }
.cor-linha .entrada[type="text"] { font-family: var(--fonte-mono); text-transform: uppercase; }

/* ---------- Criar ---------- */
/* Criar: quatro blocos numerados separados por linhas finas; grades medidas pela largura do formulário */
.criar-form { display: flex; flex-direction: column; container-type: inline-size; }
.criar-grupo { display: flex; flex-direction: column; gap: var(--esp-4); padding-block: var(--esp-5); border-top: 1px solid var(--cor-borda); }
.criar-grupo:first-child { padding-top: 0; border-top: 0; }
.criar-grupo__titulo { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--tam-md); }
.criar-grupo__num {
  display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--cor-destaque); color: var(--cor-sobre-destaque); font-size: var(--tam-xs); font-weight: var(--peso-forte);
}
.criar-form__acoes { display: flex; justify-content: center; padding-top: var(--esp-5); border-top: 1px solid var(--cor-borda); }
.criar-form__acoes > .btn { width: min(100%, 20rem); min-height: 2.75rem; font-size: var(--tam-md); }
/* opções (rede, tipo, tamanho, emojis) em partes iguais que ocupam a coluna, na altura dos campos ao lado */
.criar-form .opcoes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.criar-form .opcao span { display: flex; justify-content: center; min-height: 2.625rem; height: 100%; padding: var(--esp-1) var(--esp-2); text-align: center; line-height: var(--entrelinha-curta); }
/* seis redes: 3 + 3 no estreito, uma linha só de seis quando o formulário tem largura */
.criar-form .campo--redes > .opcoes { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (min-width: 40rem) { .criar-form .campo--redes > .opcoes { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.grade-cards { display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
/* as 3 propostas ocupam a largura toda (antes sobrava uma 4ª coluna vazia): 1 coluna ou 3 */
.grade-propostas { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .grade-propostas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; overflow: hidden; }
.post-card__arte { display: grid; place-items: center; background: var(--cor-superficie-2); padding: var(--esp-3); }
.post-card__arte canvas { border-radius: var(--raio-sm); box-shadow: var(--sombra-sm); }
.post-card__corpo { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); flex: 1; }
.post-card__titulo { font-size: var(--tam-md); }
.post-card__legenda { font-size: var(--tam-sm); color: var(--cor-texto-suave); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__legenda[data-aberta="true"] { display: block; -webkit-line-clamp: unset; }
.post-card__tags { font-size: var(--tam-xs); color: var(--cor-destaque); overflow-wrap: anywhere; }
.post-card__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); padding: 0 var(--esp-4) var(--esp-4); }

/* ---------- Editor ---------- */
/* desfazer, refazer e o estado do salvamento no cabeçalho; no estreito, os dois botões em metades iguais */
.editor-historico { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--esp-2); }
.editor-historico > .estado-salvo { min-width: 9rem; }
@media (max-width: 47.99rem) {
  .editor-historico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-historico > .estado-salvo { grid-column: 1 / -1; justify-self: center; }
}
.editor-layout { display: grid; gap: var(--esp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.editor-arte { display: grid; place-items: center; background: var(--cor-superficie-2); border-radius: var(--raio-lg); padding: var(--esp-4); }
.editor-arte canvas { box-shadow: var(--sombra-md); border-radius: var(--raio-sm); }
.editor-painel { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.estado-salvo { font-size: var(--tam-sm); color: var(--cor-texto-suave); display: inline-flex; align-items: center; gap: var(--esp-2); }
.estado-salvo::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cor-ok); }
.estado-salvo[data-estado="pendente"]::before, .estado-salvo[data-estado="salvando"]::before { background: var(--cor-aviso); }
.estado-salvo[data-estado="erro"] { color: var(--cor-erro); }
.estado-salvo[data-estado="erro"]::before { background: var(--cor-erro); }
@media (min-width: 62rem) {
  .editor-layout { grid-template-columns: minmax(0, 1fr) 26rem; }
  .editor-vista { position: sticky; top: calc(var(--altura-topbar) + var(--esp-5)); }
}

/* ---------- Biblioteca ---------- */
/* 5 filtros em grades que fecham cheias: 1 coluna; 2 (busca na linha toda + 2x2); 3 (busca + marca / rede, objetivo, situação) */
.filtros { display: grid; gap: var(--esp-3); padding: var(--esp-4); grid-template-columns: minmax(0, 1fr); align-items: end; }
.filtros .busca { grid-column: 1 / -1; }
@media (min-width: 40rem) { .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filtros .busca { grid-column: span 2; } }
.item-lib { display: flex; flex-direction: column; overflow: hidden; }
.item-lib__link { display: block; color: inherit; text-decoration: none; }
.item-lib__link:hover { color: inherit; }
.item-lib__miniatura { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--cor-superficie-2); padding: var(--esp-3); }
.item-lib__miniatura canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--raio-sm); box-shadow: var(--sombra-sm); }
.item-lib__corpo { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); flex: 1; }
.item-lib__titulo { font-size: var(--tam-md); overflow-wrap: anywhere; }
.item-lib__meta { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.item-lib__acoes { display: flex; gap: var(--esp-2); padding: 0 var(--esp-4) var(--esp-4); }

/* ---------- Rodapé simples das telas da ferramenta ---------- */
/* Mesma composição da faixa de baixo do rodapé da página inicial: três terços iguais, com o crédito
   "SocialFlow criado por B20 Conteúdo Digital" no centro exato; ano à esquerda, links à direita. As bordas acompanham as
   da .pagina (mesma largura máxima). No celular, tudo empilhado e centralizado. */
.rodape-app {
  --respiro: var(--esp-4);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: var(--esp-2);
  padding: var(--esp-4) max(var(--respiro), (100% - var(--largura-conteudo)) / 2) calc(var(--esp-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-size: var(--tam-xs); text-align: center;
}
.rodape-app__credito { color: var(--cor-texto); font-size: var(--tam-sm); }
.rodape-app .assinatura { color: var(--cor-destaque); font-weight: 800; letter-spacing: 0.03em; }
.rodape-app__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-4); }
.rodape-app__links a { color: var(--cor-texto-suave); text-decoration: none; }
.rodape-app__links a:hover { color: var(--cor-destaque); text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 48rem) {
  .rodape-app { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape-app > :first-child { justify-self: start; }
  .rodape-app > :last-child { justify-self: end; }
}
/* abaixo de 62rem existe o botão de voltar ao topo: o fim do rodapé fica livre para ele */
@media (max-width: 61.99rem) { .rodape-app { padding-bottom: calc(var(--esp-4) + 3.75rem + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 62rem) { .rodape-app { --respiro: var(--esp-6); } }


/* ---------- Editor: vista (arte / feed), tira do carrossel, páginas ---------- */
.editor-vista { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.editor-vista > .segmentado { align-self: flex-start; }
.tira-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-1); margin-top: var(--esp-3); }
.tira-paginas__item {
  min-width: 2.25rem; height: 2rem; padding: 0 var(--esp-2);
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); background: var(--cor-superficie);
  font-size: var(--tam-xs); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums;
}
.tira-paginas__item:hover { background: var(--cor-superficie-2); }
.tira-paginas__item[aria-pressed="true"] { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }

.paginas-edicao { display: flex; flex-direction: column; gap: var(--esp-3); }
.pagina-edicao fieldset {
  display: block; padding: var(--esp-3) var(--esp-4) var(--esp-4);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-superficie-2);
}
/* legend flutuando fica dentro da caixa, na mesma linha dos botões de ordem */
.pagina-edicao__titulo { float: left; padding: 0; margin-top: var(--esp-2); }
.pagina-edicao__acoes { justify-content: flex-end; gap: var(--esp-1); }
.pagina-edicao .campo { clear: both; margin-top: var(--esp-3); }

/* ---------- Criar: carrossel nos cards ---------- */
.post-card__paginador { display: flex; align-items: center; justify-content: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3) 0; }
.post-card__pg { min-width: 3.75rem; text-align: center; font-size: var(--tam-xs); color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.post-card__tipo { align-self: flex-start; }

/* ---------- Prévia do feed ---------- */
.feed { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); }
.feed__palco { display: flex; flex-direction: column; gap: var(--esp-3); width: 100%; max-width: 30rem; }
.feed__post {
  overflow: hidden; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg); box-shadow: var(--sombra-md); font-size: var(--tam-sm);
}
.feed__cab { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3); }
.feed__avatar {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; overflow: hidden;
  border-radius: 50%; background: var(--cor-superficie-2); font-weight: var(--peso-forte);
}
.feed__avatar img { width: 100%; height: 100%; object-fit: contain; }
.feed__quem { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: var(--entrelinha-curta); }
.feed__quem strong, .feed__quem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__quem span { font-size: var(--tam-xs); color: var(--cor-texto-suave); }
.feed__mais-opcoes { color: var(--cor-texto-suave); letter-spacing: 0.1em; }
.feed__midia { position: relative; display: grid; place-items: center; background: var(--cor-superficie-2); }
.feed__contador {
  position: absolute; top: var(--esp-3); right: var(--esp-3); padding: 0.1rem var(--esp-2);
  border-radius: var(--raio-total); background: var(--cor-midia-veu); color: var(--cor-sobre-midia);
  font-size: var(--tam-xs); font-variant-numeric: tabular-nums;
}
.feed__seta {
  position: absolute; top: 50%; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 0; border-radius: 50%; background: var(--cor-midia-veu); color: var(--cor-sobre-midia); transform: translateY(-50%);
}
.feed__seta svg { width: 1.1rem; height: 1.1rem; }
.feed__seta--esq { left: var(--esp-2); }
.feed__seta--dir { right: var(--esp-2); }
.feed__pontos { display: flex; justify-content: center; gap: 4px; padding-top: var(--esp-2); }
.feed__pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--cor-borda-forte); }
.feed__pontos i[data-atual="true"] { background: var(--cor-destaque); }
.feed__acoes { display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-2) var(--esp-3); color: var(--cor-texto); }
.feed__acoes span { display: inline-flex; align-items: center; gap: var(--esp-1); }
.feed__acoes svg { width: 1.35rem; height: 1.35rem; }
.feed__salvar { margin-left: auto; }
.feed__acoes--facebook, .feed__acoes--linkedin {
  justify-content: space-around; gap: var(--esp-2); margin: 0 var(--esp-3); padding: var(--esp-2) 0;
  border-top: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-size: var(--tam-xs); font-weight: var(--peso-medio);
}
.feed__acoes--facebook svg, .feed__acoes--linkedin svg { width: 1.1rem; height: 1.1rem; }
.feed__legenda { padding: 0 var(--esp-3) var(--esp-2); white-space: pre-line; overflow-wrap: anywhere; }
.feed__legenda--antes { padding-bottom: var(--esp-3); }
.feed__tag { color: var(--cor-destaque); }
.feed__mais { padding: 0; border: 0; background: none; color: var(--cor-texto-suave); font-weight: var(--peso-medio); }
.feed__quando { padding: 0 var(--esp-3) var(--esp-3); font-size: var(--tam-xs); color: var(--cor-texto-fraco); text-transform: uppercase; }
.feed__post--story { position: relative; background: var(--cor-midia-veu); }
.feed__post--story .feed__cab {
  position: absolute; top: var(--esp-3); left: 0; right: 0; z-index: 1;
  background: linear-gradient(var(--cor-midia-veu), transparent); color: var(--cor-sobre-midia);
}
.feed__post--story .feed__quem span, .feed__post--story .feed__mais-opcoes { color: var(--cor-sobre-midia); }
.feed__barras { position: absolute; top: var(--esp-2); left: var(--esp-3); right: var(--esp-3); z-index: 2; display: flex; gap: 3px; }
.feed__barras i { flex: 1; height: 3px; border-radius: 2px; background: var(--cor-midia-veu); }
.feed__barras i[data-feito="true"] { background: var(--cor-sobre-midia); }
/* abas das seis redes: grade de 3 colunas (3 + 3), todas do mesmo tamanho */
.segmentado--grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: stretch; border-radius: var(--raio-lg); }
.segmentado--grade > .segmentado__opcao { border-radius: var(--raio-md); }
/* texto por cima da imagem: status do WhatsApp e tela cheia do TikTok e do Kwai */
.feed__sobre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--esp-1);
  padding: var(--esp-6) var(--esp-3) var(--esp-3); background: linear-gradient(transparent, var(--cor-midia-veu) 40%);
  color: var(--cor-sobre-midia); text-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
}
.feed__sobre .feed__legenda { padding: 0; }
.feed__sobre .feed__tag, .feed__sobre .feed__mais { color: inherit; font-weight: var(--peso-forte); }
.feed__sobre .feed__pontos { justify-content: flex-start; }
.feed__sobre .feed__pontos i { background: var(--cor-midia-veu); box-shadow: 0 0 0 1px var(--cor-sobre-midia); }
.feed__sobre .feed__pontos i[data-atual="true"] { background: var(--cor-sobre-midia); }
.feed__sobre--centro { align-items: center; text-align: center; }
.feed__responder { margin-top: var(--esp-2); font-size: var(--tam-xs); font-weight: var(--peso-medio); }
/* story, status e tela cheia: do tamanho de uma tela de celular, com o texto por cima só da imagem */
.feed__post--story, .feed__post--video { align-self: center; width: min(100%, 22rem); }
/* tela cheia (TikTok, Kwai): quadro 9:16; a imagem cabe inteira nele, botões à direita, descrição embaixo */
.feed__tela { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--cor-tela-video); }
.feed__tela > .feed__midia { position: absolute; inset: 0; background: transparent; }
.feed__post--video .feed__seta { top: 22%; } /* acima da coluna de botões */
.feed__post--video .feed__sobre { padding-right: 4.5rem; }
.feed__lateral {
  position: absolute; right: 0.375rem; bottom: 24%; z-index: 2; display: flex; flex-direction: column; align-items: center;
  gap: var(--esp-4); color: var(--cor-sobre-midia);
}
.feed__lateral svg { width: 1.5rem; height: 1.5rem; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.7)); }
.feed__lateral .feed__avatar { width: 2.5rem; height: 2.5rem; border: 2px solid var(--cor-sobre-midia); }
/* mensagem do WhatsApp: balão com a imagem, a legenda inteira e a hora */
.feed__post--conversa { background: var(--cor-superficie-2); }
.feed__post--conversa .feed__cab { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
.feed__chat { display: flex; padding: var(--esp-4) var(--esp-3); }
.feed__balao {
  display: flex; flex-direction: column; gap: var(--esp-2); width: min(100%, 20rem); padding: var(--esp-1);
  border-radius: var(--raio-md); background: var(--cor-superficie); box-shadow: var(--sombra-sm);
}
.feed__balao > .feed__midia { overflow: hidden; border-radius: var(--raio-sm); }
.feed__legenda--balao { padding: 0 var(--esp-2); }
.feed__hora { align-self: flex-end; padding: 0 var(--esp-2) var(--esp-1); font-size: var(--tam-xs); color: var(--cor-texto-suave); }

/* ---------- Visão geral ---------- */
/* 4 indicadores (2 + 2 no estreito), "Para hoje" e "Próximos" em duas colunas iguais, 4 rascunhos (2 + 2) */
.visao { display: flex; flex-direction: column; gap: var(--esp-5); }
.visao__marca { min-width: 12rem; }
.visao-indicadores { display: grid; gap: var(--esp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 75rem) { .visao-indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.visao-indicador {
  display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-4); color: var(--cor-texto); text-decoration: none;
  border-top: 4px solid var(--cor-destaque); transition: box-shadow var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease);
}
.visao-indicador:hover { box-shadow: var(--sombra-md); transform: translateY(-1px); }
.visao-indicador[data-alerta="true"] { border-top-color: var(--cor-erro); }
.visao-indicador__rotulo { font-size: var(--tam-sm); font-weight: var(--peso-medio); color: var(--cor-texto-suave); }
.visao-indicador__valor { font-size: var(--tam-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.visao-indicador__detalhe { font-size: var(--tam-xs); color: var(--cor-texto-suave); }
.visao-indicador[data-alerta="true"] .visao-indicador__detalhe { color: var(--cor-erro); font-weight: var(--peso-medio); }
.visao-colunas { display: grid; gap: var(--esp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .visao-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* .cal-item (do calendário, mais abaixo neste arquivo) é flex: aqui vira grade de duas colunas */
.cal-item.visao-item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; cursor: default; }
.visao-item > .btn { grid-column: 2; justify-self: start; }
.visao-item__quando { display: flex; flex-direction: column; font-size: var(--tam-sm); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; color: var(--cor-texto-suave); }
.visao-item__quando > span:last-child { font-weight: var(--peso-forte); color: var(--cor-texto); }
.visao-vazio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.visao-mais { align-self: flex-start; font-size: var(--tam-sm); font-weight: var(--peso-medio); }
.visao-rascunhos { display: grid; gap: var(--esp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visao-rascunhos > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* 1 ou 3 rascunhos: o último ocupa a linha */
@media (min-width: 64rem) {
  /* tantas colunas quantos rascunhos (até 4): a linha fecha cheia */
  .visao-rascunhos { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .visao-rascunhos > :last-child:nth-child(odd) { grid-column: auto; }
}
.visao-rascunho__link { display: flex; flex-direction: column; gap: var(--esp-1); height: 100%; color: var(--cor-texto); text-decoration: none; }
.visao-rascunho__link:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.visao-rascunho__link strong { overflow-wrap: anywhere; }
.visao-rascunho__arte { display: grid; place-items: center; height: 10.5rem; padding: var(--esp-2); border-radius: var(--raio-md); background: var(--cor-superficie-2); }
.visao-rascunho__arte canvas { max-width: 100%; border-radius: var(--raio-sm); box-shadow: var(--sombra-sm); }
.visao-passos { display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr); counter-reset: none; }
@media (min-width: 56rem) { .visao-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.visao-passo {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-4);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie);
}
.visao-passo[data-atual="true"] { border-color: var(--cor-destaque); box-shadow: 0 0 0 1px var(--cor-destaque); }
.visao-passo h3 { font-size: var(--tam-md); }
.visao-passo__num {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--cor-superficie-2); font-weight: var(--peso-forte);
}
.visao-passo__num svg { width: 1.1rem; height: 1.1rem; }
.visao-passo[data-feito="true"] .visao-passo__num { background: var(--cor-ok); color: var(--cor-superficie); }
.visao-passo[data-atual="true"] .visao-passo__num { background: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.visao-passo > .btn { margin-top: auto; }

/* ---------- Biblioteca: seleção e exportação em lote ---------- */
.item-lib { position: relative; }
.item-lib__selecao {
  position: absolute; top: var(--esp-2); left: var(--esp-2); z-index: 1; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--raio-md); background: var(--cor-superficie);
  box-shadow: var(--sombra-sm); cursor: pointer;
}
.item-lib__selecao input, .barra-selecao input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--cor-destaque); cursor: pointer; }
.barra-selecao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); }
.barra-selecao__todos { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--tam-sm); font-weight: var(--peso-medio); cursor: pointer; }
.barra-selecao__contagem { padding-right: var(--esp-3); border-right: 1px solid var(--cor-borda); font-size: var(--tam-sm); font-variant-numeric: tabular-nums; }
.barra-selecao > .btn { margin-left: auto; }
.aviso-backup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); }

/* ---------- Calendário ---------- */
.cal-layout { display: grid; gap: var(--esp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.cal-lateral { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
@media (min-width: 80rem) { .cal-layout { grid-template-columns: minmax(0, 1fr) 22rem; } }
.cal__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.cal__mes { min-width: 11rem; text-align: center; font-size: var(--tam-lg); }
.cal__rolagem { overflow-x: auto; }
.cal { width: 100%; min-width: 18rem; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.cal th { padding-bottom: var(--esp-1); font-size: var(--tam-xs); font-weight: var(--peso-medio); color: var(--cor-texto-suave); }
.cal__dia {
  height: 3.25rem; padding: 3px; overflow: hidden; vertical-align: top; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--raio-md); background: var(--cor-superficie-2);
}
.cal__dia[data-fora="true"] { background: transparent; }
.cal__dia[data-fora="true"] .cal__num { color: var(--cor-texto-fraco); }
.cal__dia[data-selecionado="true"] { border-color: var(--cor-destaque); background: var(--cor-destaque-suave); }
.cal__dia[data-sobre="true"] { border-color: var(--cor-destaque); border-style: dashed; }
.cal__num {
  display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 var(--esp-1);
  border: 0; border-radius: var(--raio-total); background: transparent;
  font-size: var(--tam-sm); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums;
}
.cal__dia[data-hoje="true"] .cal__num { background: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.cal__posts { display: none; }
.cal__pontos { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.cal__pontos i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--cor-situacao); }
.cal__chip {
  display: block; padding: 1px var(--esp-1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-left: 3px solid var(--cor-situacao); border-radius: var(--raio-sm); background: var(--cor-superficie);
  font-size: var(--tam-xs); line-height: var(--entrelinha-curta); cursor: grab;
}
/* o horário no chip só cabe com a grade larga; o painel do dia sempre mostra os horários */
.cal__hora { display: none; font-variant-numeric: tabular-nums; color: var(--cor-texto-suave); }
@media (min-width: 96rem) { .cal__hora { display: inline; } }
.cal__mais { padding: 0 var(--esp-1); font-size: var(--tam-xs); color: var(--cor-texto-suave); }
@media (min-width: 48rem) {
  .cal__dia { height: 6.75rem; padding: var(--esp-1); }
  .cal__posts { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
  .cal__pontos { display: none; }
}
.cal__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-3); font-size: var(--tam-xs); color: var(--cor-texto-suave); }
.cal__legenda li { display: inline-flex; align-items: center; gap: var(--esp-1); }
.cal__legenda li::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cor-situacao); }
.cal-itens { display: flex; flex-direction: column; gap: var(--esp-2); }
.cal-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-situacao); border-radius: var(--raio-md);
  background: var(--cor-superficie); cursor: grab;
}
.cal-item__hora { flex: none; width: 7rem; }
.cal-item__texto { display: flex; flex: 1; flex-direction: column; min-width: 9rem; overflow-wrap: anywhere; }
/* "Agendar neste dia" e "Horário" em duas colunas iguais; o botão fecha embaixo, na largura das duas */
.cal-agendar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); align-items: end; }
.cal-agendar .entrada { width: 100%; min-height: 2.75rem; }
.cal-agendar > .btn { grid-column: 1 / -1; justify-content: center; min-height: 2.75rem; }
.cal-semdata[data-sobre="true"] { outline: 2px dashed var(--cor-destaque); outline-offset: -6px; }
.cal__vistas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: center; width: min(100%, 22rem); }
.cal-mesbox[data-vista="lista"] .cal__nav { display: block; }
/* Semana: sete colunas iguais quando a caixa tem largura (medida pela própria caixa); senão, um dia
   embaixo do outro. Na tela larga, a vista Semana ocupa a linha toda e os cartões laterais descem para
   uma linha de três colunas iguais, para cada dia ter espaço para o título sem partir palavra. */
.cal-mesbox { container-type: inline-size; }
.cal-semana { display: grid; gap: var(--esp-2); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 56rem) { .cal-semana { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 80rem) {
  .cal-layout[data-vista="semana"] { grid-template-columns: minmax(0, 1fr); }
  .cal-layout[data-vista="semana"] .cal-lateral { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.cal-semana__dia {
  display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-2);
  border: 2px solid transparent; border-radius: var(--raio-md); background: var(--cor-superficie-2);
}
@container (min-width: 56rem) { .cal-semana__dia { min-height: 16rem; } }
.cal-semana__dia[data-selecionado="true"] { border-color: var(--cor-destaque); background: var(--cor-destaque-suave); }
.cal-semana__dia[data-sobre="true"] { border-color: var(--cor-destaque); border-style: dashed; }
.cal-semana__cab {
  display: flex; align-items: center; gap: var(--esp-2); padding: 0; border: 0; border-radius: var(--raio-sm);
  background: none; color: var(--cor-texto); text-align: left; cursor: pointer;
}
.cal-semana__nome { font-size: var(--tam-xs); font-weight: var(--peso-medio); color: var(--cor-texto-suave); text-transform: uppercase; }
.cal-semana__num { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: var(--raio-total); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.cal-semana__dia[data-hoje="true"] .cal-semana__num { background: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.cal-semana__posts { display: flex; flex-direction: column; gap: var(--esp-1); }
.cal-semana__post {
  display: flex; flex-direction: column; gap: 1px; padding: var(--esp-1) var(--esp-2); overflow-wrap: break-word; hyphens: auto;
  border-left: 3px solid var(--cor-situacao); border-radius: var(--raio-sm); background: var(--cor-superficie);
  font-size: var(--tam-xs); line-height: var(--entrelinha-curta); cursor: grab;
}
.cal-semana__post a { color: var(--cor-texto); font-weight: var(--peso-medio); text-decoration: none; }
.cal-semana__post a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cal-semana__hora, .cal-semana__rede { color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.cal-semana__livre { font-size: var(--tam-xs); color: var(--cor-texto-suave); }
/* Lista: um grupo por dia, de hoje em diante; soltar um post num grupo agenda naquele dia */
.cal-lista { display: flex; flex-direction: column; gap: var(--esp-5); }
.cal-lista__grupo { display: flex; flex-direction: column; gap: var(--esp-2); border-radius: var(--raio-md); }
.cal-lista__grupo[data-sobre="true"] { outline: 2px dashed var(--cor-destaque); outline-offset: 4px; }
.cal-lista__dia { font-size: var(--tam-md); }
.cal-lista__grupo[data-situacao="atrasado"] > .cal-lista__dia { color: var(--cor-erro); }
.cal-lista__hora { flex: none; min-width: 3.5rem; font-size: var(--tam-sm); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; color: var(--cor-texto-suave); }
.cal-avisos__acoes { display: flex; flex-direction: column; gap: var(--esp-2); }
.cal-avisos__acoes > .btn { width: 100%; white-space: normal; text-align: center; line-height: var(--entrelinha-curta); }
[data-arrastando="true"] { opacity: 0.5; }

/* ---------- Backup ---------- */
/* Backup: três cards iguais. Uma coluna até caberem os três lado a lado (nunca 2 + 1); */
/* em linha, mesma altura (stretch), com o botão preso ao pé de cada um. */
.dados-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); align-items: stretch; }
.dados-cartao { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.dados-cartao__cab { display: flex; align-items: center; gap: var(--esp-3); }
.dados-cartao__cab .secao__titulo { margin: 0; }
.dados-cartao__texto { color: var(--cor-texto-suave); font-size: var(--tam-sm); }
.dados-cartao__corpo { display: flex; flex: 1; flex-direction: column; gap: var(--esp-3); }
.dados-cartao__acoes { display: flex; }
.dados-cartao__acoes > .btn { flex: 1; white-space: normal; text-align: center; line-height: var(--entrelinha-curta); min-height: 2.75rem; }
/* depois das regras base dos cards, para o grid valer sobre o flex */
@media (min-width: 75rem) {
  /* subgrid: título, texto, conteúdo e botão de cada card ficam alinhados linha a linha entre os três */
  .dados-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; row-gap: 0; }
  .dados-cartao { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--esp-4); }
}
.opcao-linha { display: flex; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-2) 0; font-size: var(--tam-sm); color: var(--cor-texto-suave); cursor: pointer; }
.opcao-linha input { margin-top: 0.2rem; accent-color: var(--cor-destaque); }
.opcao-linha strong { color: var(--cor-texto); }

/* ---------- Guia passo a passo (alto de cada tela da ferramenta) ---------- */
/* Seis passos por guia: 1, 2 ou 3 colunas conforme a largura do PRÓPRIO guia (container query), */
/* então a grade sempre fecha cheia, com ou sem a barra lateral. */
.guia { overflow: hidden; container-type: inline-size; }
.guia__resumo { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-4); list-style: none; cursor: pointer; }
.guia__resumo::-webkit-details-marker { display: none; }
.guia__resumo:hover .guia__alternar { background: var(--cor-superficie-2); }
.guia__icone { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--raio-md); background: var(--cor-destaque-suave); color: var(--cor-destaque); }
.guia__icone svg { width: 1.3rem; height: 1.3rem; }
.guia__titulos { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.guia__titulo { font-weight: var(--peso-forte); }
.guia__sub { color: var(--cor-texto-suave); font-size: var(--tam-sm); }
.guia__alternar { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; color: var(--cor-texto-suave); transition: transform var(--dur-media) var(--ease), background var(--dur-rapida) var(--ease); }
.guia__alternar svg { width: 1.1rem; height: 1.1rem; }
.guia[open] .guia__alternar { transform: rotate(180deg); }
.guia__passos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); padding: 0 var(--esp-4) var(--esp-4); }
@container (min-width: 36rem) { .guia__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 56rem) { .guia__passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guia__passo { display: flex; gap: var(--esp-3); padding: var(--esp-3); border-radius: var(--raio-md); background: var(--cor-superficie-2); }
.guia__num { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--cor-destaque); color: var(--cor-sobre-destaque); font-size: var(--tam-sm); font-weight: var(--peso-forte); }
.guia__passo-titulo { margin-bottom: 2px; font-size: var(--tam-sm); font-weight: var(--peso-forte); }
.guia__passo p:not(.guia__passo-titulo) { color: var(--cor-texto-suave); font-size: var(--tam-sm); }
.guia__rodape { padding: 0 var(--esp-4) var(--esp-4); color: var(--cor-texto-suave); font-size: var(--tam-sm); }
@media (min-width: 48rem) {
  .guia__resumo { padding: var(--esp-4) var(--esp-5); }
  .guia__passos, .guia__rodape { padding-left: var(--esp-5); padding-right: var(--esp-5); }
}

/* ---------- Ajuda ---------- */
.ajuda-guias { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
@media (min-width: 40rem) { .ajuda-guias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .ajuda-guias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ajuda-guia { display: flex; flex-direction: column; gap: var(--esp-3); }
.ajuda-guia__cab { display: flex; align-items: center; gap: var(--esp-3); }
.ajuda-guia__cab h3 { font-size: var(--tam-md); }
.ajuda-guia__passos { display: flex; flex: 1; flex-direction: column; gap: 2px; padding-left: var(--esp-5); list-style: decimal; color: var(--cor-texto-suave); font-size: var(--tam-sm); }
.ajuda-guia__ir { align-self: flex-start; }
.ajuda-volta { text-align: center; }


/* ---------- Responsividade e simetria nas telas da ferramenta ---------- */
/* ações dos cards em grade de colunas iguais (nada de botões em escadinha) */
.post-card__acoes, .item-lib__acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-card__acoes > .btn, .item-lib__acoes > .btn { white-space: normal; text-align: center; line-height: var(--entrelinha-curta); }
@media (max-width: 47.99rem) {
  /* barra de ações principal (Editor, Marca): 2 colunas iguais; o último botão sozinho ocupa a linha */
  .pagina > .barra-acoes, .marca-form > .barra-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina > .barra-acoes > .btn, .marca-form > .barra-acoes > .btn { white-space: normal; text-align: center; line-height: var(--entrelinha-curta); min-height: 2.75rem; }
  .pagina > .barra-acoes > :last-child:nth-child(odd), .marca-form > .barra-acoes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .marca-form > .barra-acoes:has(> [hidden]) > .btn { grid-column: 1 / -1; } /* marca nova: sem "Excluir", "Salvar" ocupa a linha */
  /* cabeçalho da página: título em cima, ações embaixo, ocupando a largura toda */
  .pagina__cab { flex-direction: column; align-items: stretch; }
  .pagina__cab > .barra-acoes { align-items: flex-end; }
  .pagina__cab > .barra-acoes > .btn, .pagina__cab > .barra-acoes > .campo { flex: 1 1 12rem; }
  .aviso-backup > .btn { flex: 1 1 100%; }
  .cal__nav { gap: var(--esp-1); }
  /* controles segmentados e barra de seleção ocupam a largura toda, com opções do mesmo tamanho */
  .editor-vista > .segmentado { align-self: stretch; display: flex; }
  .editor-vista > .segmentado > .segmentado__opcao { flex: 1 1 0; }
  .barra-selecao > .btn { flex: 1 1 100%; margin-left: 0; }
  .cal__nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .cal__nav > .btn--pequeno { margin-left: var(--esp-1); }
  .cal__mes { min-width: 0; font-size: var(--tam-md); }
  /* avisos ocupam a largura da tela, com a mesma margem dos dois lados */
  .toasts { left: var(--esp-3); right: var(--esp-3); bottom: calc(var(--esp-3) + env(safe-area-inset-bottom, 0px)); align-items: stretch; max-width: none; }
  .toast { max-width: none; }
}
@media (max-width: 35.99rem) {
  /* telas estreitas: guia recolhido só com o título (o respiro menor dos cartões está em components.css) */
  .guia__sub { display: none; }
  /* grupos de opções (rede, tipo, tamanho, emojis, situação): partes iguais, numa linha só */
  .opcoes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .opcao span { justify-content: center; height: 100%; padding: var(--esp-1) var(--esp-2); text-align: center; line-height: var(--entrelinha-curta); }
}