/* Telas de uso do GLCP Forms: entrar, painel, editor e o formulário público.
   Mesmas cores da landing (base.css), com menos cena: aqui o trabalho é o protagonista. */

/* ── Barra do topo do painel e do editor ── */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .8rem 1.2rem; flex-wrap: wrap;
  padding: 12px max(16px, calc((100% - 1180px) / 2));
  background: var(--folha); border-bottom: 1.5px solid var(--pauta);
}
.barra .marca { margin-right: auto; }
.barra-conta { color: var(--suave); font-size: .95rem; }
.barra .botao { min-height: 40px; padding-block: .35em; }

.pagina { width: min(1180px, 100% - 32px); margin: 0 auto; padding: 28px 0 80px; }
/* O painel usa a tela larga: a tabela de respostas precisa do espaço. */
.pagina-larga { width: min(1680px, 100% - 48px); }
.barra-larga { padding-inline: max(24px, calc((100% - 1680px) / 2)); }
@media (max-width: 700px) { .pagina-larga { width: calc(100% - 32px); } .barra-larga { padding-inline: 16px; } }

/* ── Abas ── */
.abas { display: flex; gap: .3rem; border-bottom: 1.5px solid var(--pauta); margin-bottom: 1.6rem; }
.aba {
  padding: .7rem 1rem; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1.5px;
  background: none; color: var(--suave); font: 700 1rem/1 var(--letra); cursor: pointer;
}
.aba[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }

.cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.cabeca h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.cabeca p { margin: .3rem 0 0; color: var(--suave); }

/* ── Lista de formulários ── */
.lista-forms { list-style: none; margin: 0; padding: 0; background: var(--folha); border-radius: var(--raio); box-shadow: var(--sombra-folha); }
.form-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem 1.5rem; align-items: center;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--pauta);
}
.form-item:last-child { border-bottom: 0; }
.form-titulo { font: 700 1.15rem/1.25 var(--titulo); color: var(--grafite); text-decoration: none; }
.form-titulo:hover { color: var(--tinta); }
.form-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .3rem; color: var(--suave); font-size: .9rem; }
.form-total { text-align: right; }
.form-total strong { display: block; font: 700 1.5rem/1 var(--titulo); }
.form-total span { color: var(--suave); font-size: .85rem; }
.form-acoes { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.form-acoes .botao { min-height: 38px; padding: .3em .8em; font-size: .92rem; }

.selo { display: inline-block; padding: .15em .6em; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.selo-no-ar { background: var(--ok-fundo); color: var(--ok); }
.selo-rascunho { background: var(--tinta-clara); color: var(--suave); }

.vazio { text-align: center; padding: 3.5rem 1.5rem; background: var(--folha); border: 2px dashed var(--pauta-forte); border-radius: var(--raio); }
.vazio h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.vazio p { color: var(--suave); margin: 0 auto 1.3rem; max-width: 46ch; }

/* ── Respostas ── */
.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; margin-bottom: 1.2rem; }
.filtros .campo { margin: 0; }
.filtros .campo > label { font-size: .88rem; }
.filtros .entrada { height: 44px; min-height: 44px; min-width: 150px; }
.filtros .empurra { margin-left: auto; }

/* A tabela: as cinco colunas principais ficam sempre à vista, e o cabeçalho gruda no topo
   ao rolar. As demais respostas abrem ao clicar na linha. */
.respostas { background: var(--folha); border-radius: var(--raio); box-shadow: var(--sombra-folha); }
.respostas-cabeca, .resposta > summary {
  display: grid; align-items: center; gap: 1rem; padding: .75rem 1.2rem;
  grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.35fr) 11rem 1rem;
}
.respostas-cabeca {
  position: sticky; top: 65px; z-index: 5;
  font-weight: 700; font-size: .85rem; color: var(--tinta-escura);
  background: var(--tinta-clara); border-radius: var(--raio) var(--raio) 0 0;
}
.resposta { border-top: 1px solid var(--pauta); }
.resposta > summary { cursor: pointer; list-style: none; }
.resposta > summary::-webkit-details-marker { display: none; }
.resposta > summary:hover { background: var(--papel); }
.resposta[open] > summary { background: var(--tinta-clara); }

.r-cel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-vazio { color: var(--pauta-forte); }
.r-quando strong { display: block; font-weight: 700; line-height: 1.2; }
.r-hora { display: block; color: var(--suave); font-size: .85rem; font-variant-numeric: tabular-nums; }
.r-form { color: var(--suave); font-size: .95rem; }
.r-nome { font-weight: 700; }
.r-zap { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.r-seta::before {
  content: ""; display: block; width: .55rem; height: .55rem; margin-left: auto;
  border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave);
  transform: rotate(45deg); transition: transform .15s;
}
.resposta[open] .r-seta::before { transform: rotate(-135deg); }

.r-detalhe {
  display: grid; gap: 1rem; padding: 1rem 1.2rem 1.3rem calc(1.2rem + 7.5rem);
  background: var(--papel); border-top: 1px dashed var(--pauta-forte);
}
.r-detalhe dl { margin: 0; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .45rem 1.2rem; }
.r-detalhe dt { color: var(--suave); font-size: .92rem; }
.r-detalhe dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.r-detalhe .r-meta { padding-top: .8rem; border-top: 1px solid var(--pauta); font-size: .92rem; }
.r-sem-mais { margin: 0; color: var(--suave); }
.r-contato { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.r-contato .botao { min-height: 38px; padding: .3em .9em; font-size: .92rem; }
.mais { display: flex; justify-content: center; padding: 1rem; border-top: 1px solid var(--pauta); }

/* ── Entrar ── */
.entrar { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.entrar-lado {
  padding: clamp(2rem, 5vw, 4rem); background: var(--tinta); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.entrar-lado .marca { color: #fff; }
.entrar-lado .marca span { color: var(--marca-texto); }
.entrar-lado h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); max-width: 16ch; }
.entrar-lado p { color: #d4dcfb; max-width: 40ch; }
.entrar-caixa { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 4rem) 16px; }
.entrar-form { width: min(420px, 100%); }
.entrar-form h2 { font-size: 1.8rem; margin-bottom: 1.4rem; }
.entrar-form .botao { width: 100%; margin-top: .4rem; }
.entrar-troca { margin-top: 1.4rem; color: var(--suave); text-align: center; }
.entrar-troca button { border: 0; background: none; padding: 0; color: var(--tinta); font: 700 1rem var(--letra); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* ── Editor ── */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.editor-painel { display: grid; gap: 1.4rem; }
.bloco { background: var(--folha); border-radius: var(--raio); box-shadow: var(--sombra-folha); padding: 1.3rem 1.3rem .4rem; }
.bloco > h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.bloco-nota { color: var(--suave); font-size: .92rem; margin: -.6rem 0 1rem; }

.link-campo { display: flex; align-items: stretch; }
.link-campo span { display: grid; place-items: center; padding: 0 .7rem; border: 1.5px solid var(--pauta-forte); border-right: 0; border-radius: 8px 0 0 8px; background: var(--papel); color: var(--suave); font-size: .9rem; white-space: nowrap; }
.link-campo .entrada { border-radius: 0 8px 8px 0; }

.lista-campos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .8rem; }
.cartao-campo { border: 1.5px solid var(--pauta); border-left: 4px solid var(--tinta); border-radius: 8px; padding: .8rem .9rem .2rem; background: var(--folha); }
.cartao-topo { display: flex; align-items: center; gap: .4rem; margin-bottom: .7rem; }
.cartao-tipo { font-weight: 700; font-size: .88rem; color: var(--tinta); margin-right: auto; }
.cartao-topo button { min-width: 36px; min-height: 36px; border: 1px solid var(--pauta); border-radius: 6px; background: var(--folha); color: var(--suave); font: 700 1rem/1 var(--letra); cursor: pointer; }
.cartao-topo button:hover:not([disabled]) { border-color: var(--tinta); color: var(--tinta); }
.cartao-topo button[disabled] { opacity: .35; cursor: default; }
.cartao-topo .remover:hover { border-color: var(--erro); color: var(--erro); }
.cartao-campo .campo { margin-bottom: .8rem; }
.cartao-campo .campo > label { font-size: .88rem; }
.cartao-campo .entrada { min-height: 40px; }
.cartao-campo textarea.entrada { min-height: 84px; }

.adicionar { display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: 1rem; }
.adicionar button { min-height: 38px; padding: .3em .8em; border-radius: 999px; border: 1.5px dashed var(--pauta-forte); background: transparent; color: var(--tinta); font: 700 .9rem/1 var(--letra); cursor: pointer; }
.adicionar button:hover:not([disabled]) { border-style: solid; border-color: var(--tinta); background: var(--tinta-clara); }
.adicionar button[disabled] { opacity: .4; cursor: default; }

.editor-previa { position: sticky; top: 84px; }
.previa-rotulo { margin: 0 0 .6rem; font-weight: 700; font-size: .9rem; color: var(--suave); }
.previa-folha { max-height: calc(100vh - 140px); overflow: auto; }

.estado-salvo { color: var(--suave); font-size: .9rem; }
.estado-salvo.sujo { color: var(--erro); font-weight: 700; }

/* ── O formulário (público e prévia) ── */
.folha-form { background: var(--folha); border-radius: var(--raio-folha); box-shadow: var(--sombra-folha); padding: clamp(1.4rem, 4vw, 2.4rem); border-top: 6px solid var(--tinta); }
.folha-form h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: .6rem; }
.folha-form .descricao { color: var(--suave); white-space: pre-line; margin: 0 0 1.6rem; }
.folha-form .botao { width: 100%; margin-top: .4rem; }
.folha-form .campo.com-erro .entrada { border-color: var(--erro); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.responder { width: min(640px, 100% - 32px); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) 0 3rem; }
.responder-rodape { text-align: center; color: var(--suave); font-size: .88rem; margin-top: 1.4rem; }
.responder-rodape a { color: var(--suave); }
.obrigado { text-align: center; padding: 2rem 0 1rem; }
.obrigado-marca { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fundo); color: var(--ok); font-size: 2rem; font-weight: 700; }
.obrigado p { font-size: 1.15rem; white-space: pre-line; }

/* ── Celular ── */
@media (max-width: 900px) {
  .editor { grid-template-columns: 1fr; }
  .editor-previa { position: static; }
  .previa-folha { max-height: none; }
  .entrar { grid-template-columns: 1fr; }
  .entrar-lado { padding-block: 1.6rem; }
  .entrar-lado h1, .entrar-lado p { display: none; }
}
@media (max-width: 700px) {
  .form-item { grid-template-columns: minmax(0, 1fr) auto; }
  .form-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .respostas-cabeca { display: none; }
  .resposta > summary { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; }
  .r-quando { grid-column: 2; grid-row: 1; text-align: right; }
  .r-nome { grid-column: 1; grid-row: 1; font-size: 1.05rem; }
  .r-form, .r-email, .r-zap { grid-column: 1 / -1; }
  .r-email.r-vazio, .r-zap.r-vazio { display: none; }
  .r-seta { display: none; }
  .r-detalhe { padding-left: 1.2rem; }
  .r-detalhe dl { grid-template-columns: 1fr; gap: .1rem; }
  .r-detalhe dd { margin-bottom: .6rem; }
  .filtros .empurra { margin-left: 0; }
  .barra-conta { display: none; }
}

/* ── Painel master ── */
.barra-master { border-bottom: 3px solid var(--grafite); }
.selo-master { background: var(--grafite); color: var(--marca-texto); margin-right: auto; }
.barra-master .marca { margin-right: 0; }
.sub-titulo { font-size: 1.3rem; margin: 2.4rem 0 1rem; }

.tabela-rolagem { overflow-x: auto; background: var(--folha); border-radius: var(--raio); box-shadow: var(--sombra-folha); }
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th {
  position: sticky; top: 0; text-align: left; padding: .75rem 1rem;
  background: var(--tinta-clara); color: var(--tinta-escura); font-size: .85rem; font-weight: 700; white-space: nowrap;
}
.tabela td { padding: .7rem 1rem; border-top: 1px solid var(--pauta); vertical-align: top; }
.tabela tbody tr:hover { background: var(--papel); }
.tabela strong { font-weight: 700; }
.tabela .r-hora { display: block; }
.tabela td .botao { min-height: 36px; padding: .25em .7em; font-size: .9rem; white-space: nowrap; }
.bloco-linha { display: block; }
.num { font-variant-numeric: tabular-nums; }

/* Visitas com uma barra proporcional à maior origem */
.tabela-origens td:nth-child(2) { width: 40%; }
.com-barra { display: flex; align-items: center; gap: .8rem; }
.com-barra .num { min-width: 3ch; }
.barra-proporcao { display: block; height: 10px; min-width: 2px; border-radius: 99px; background: var(--tinta); }

/* Ações que pedem atenção no registro */
.acao { display: inline-block; padding: .1em .55em; border-radius: 6px; background: var(--tinta-clara); color: var(--tinta-escura); font-size: .88rem; font-weight: 700; white-space: nowrap; }
.acao-senha_errada, .acao-excluiu_formulario { background: var(--erro-fundo); color: var(--erro); }
.acao-publicou_formulario, .acao-criou_conta { background: var(--ok-fundo); color: var(--ok); }
.acao-abriu_tela { background: transparent; color: var(--suave); font-weight: 400; padding-left: 0; }
.entrar-legal { margin-top: .8rem; text-align: center; }
.quem-coleta { margin: .4rem 0 1rem; padding: .75rem .9rem; border-radius: 8px; background: var(--papel); color: var(--suave); font-size: .9rem; }
.quem-coleta strong { color: var(--grafite); }
.r-contato .r-excluir { margin-left: auto; }
.acao-excluiu_resposta, .acao-excluiu_conta { background: var(--erro-fundo); color: var(--erro); }

/* ── Minha conta ── */
.conta-dados { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; }
.conta-dados dt { color: var(--suave); }
.conta-dados dd { margin: 0; font-weight: 700; }
.bloco-perigo { border-top: 4px solid var(--erro); }
.bloco p { max-width: 64ch; }

/* ── Tema do formulário ───────────────────────────────────────────────────
   O "palco" (a página no link público, a moldura da prévia no editor) recebe as
   variáveis --f-* de montar-form.js. Sem palco, valem as cores da casa. */
.palco-tema { background: var(--f-fundo); }
.palco-tema .folha-form { border-top-color: var(--f-cor); }
.palco-tema .folha-form .botao { background: var(--f-cor); border-color: var(--f-cor); color: var(--f-cor-texto); }
.palco-tema .folha-form .botao:hover { filter: brightness(.9); }
.palco-tema .folha-form a, .palco-tema .data-extenso { color: var(--f-cor-legivel); }
.palco-tema .folha-form .opcao input { accent-color: var(--f-cor); }
.palco-tema .folha-form .entrada:focus { border-color: var(--f-cor); outline-color: color-mix(in srgb, var(--f-cor) 28%, transparent); }
.palco-tema .folha-form :focus-visible { outline-color: var(--f-cor-legivel); }

/* Capa: faixa no topo do cartão, de borda a borda. Bloco de imagem: entre as perguntas. */
.folha-form { --pad: clamp(1.4rem, 4vw, 2.4rem); padding: var(--pad); }
.capa { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad); }
.capa img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.bloco-imagem { margin: 0 0 1.4rem; }
.bloco-imagem img { display: block; width: 100%; height: auto; border-radius: 8px; }
.bloco-imagem figcaption { margin-top: .45rem; color: var(--suave); font-size: .9rem; }

/* Obsidiana: céu animado atrás, cartão de vidro escuro na frente. */
.tema-obsidiana {
  background: radial-gradient(120% 80% at 50% -10%, #0b1622 0%, transparent 60%), #05080c;
  color-scheme: dark;
}
body.tema-obsidiana { background-attachment: fixed; }
.ceu { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
body > .ceu { position: fixed; }
.tema-obsidiana > :not(.ceu) { position: relative; z-index: 1; }
.tema-obsidiana .folha-form {
  background: rgba(16, 27, 38, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(190, 225, 245, .14); border-top: 6px solid var(--f-cor);
  color: #eef5fa; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}
.tema-obsidiana .folha-form .descricao, .tema-obsidiana .folha-form .ajuda,
.tema-obsidiana .bloco-imagem figcaption, .tema-obsidiana .quem-coleta,
.tema-obsidiana .responder-rodape, .tema-obsidiana .responder-rodape a { color: #9fb3c4; }
.tema-obsidiana .entrada { background: rgba(5, 8, 12, .55); border-color: rgba(190, 225, 245, .24); color: #eef5fa; }
.tema-obsidiana .entrada::placeholder, .tema-obsidiana .entrada[type="date"].vazia { color: #6f8698; }
.tema-obsidiana .quem-coleta { background: rgba(255, 255, 255, .05); }
.tema-obsidiana .quem-coleta strong { color: #eef5fa; }
.tema-obsidiana .obrigatorio, .tema-obsidiana .erro-campo { color: #ff8a9a; }
.tema-obsidiana .aviso-erro { background: rgba(255, 51, 85, .14); color: #ffb3be; }
.tema-obsidiana .obrigado p { color: #eef5fa; }

/* ── Editor: aparência e imagens ── */
.previa-palco { position: relative; overflow: hidden; border-radius: var(--raio); padding: 14px; }
.previa-palco .previa-folha { max-height: calc(100vh - 170px); }
.paletas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.paleta-cor {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .3em .8em .3em .35em;
  border: 1.5px solid var(--pauta); border-radius: 999px; background: var(--folha); color: var(--grafite);
  font: 700 .9rem/1 var(--letra); cursor: pointer;
}
.paleta-cor span { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--folha); box-shadow: 0 0 0 1px var(--pauta-forte); }
.paleta-cor[aria-pressed="true"] { border-color: var(--grafite); }
.cores-livres { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; }
.cores-livres .campo { margin-bottom: 1rem; }
.cor-campo { display: flex; align-items: center; gap: .6rem; }
.cor-campo input[type="color"] { width: 48px; height: 40px; padding: 2px; border: 1.5px solid var(--pauta-forte); border-radius: 8px; background: var(--folha); cursor: pointer; }
.cor-campo code { font-size: .9rem; color: var(--suave); }
.efeitos { display: grid; gap: .5rem; margin-bottom: 1rem; }
.efeito-opcao { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border: 1.5px solid var(--pauta); border-radius: 8px; cursor: pointer; }
.efeito-opcao:has(input:checked) { border-color: var(--grafite); background: var(--papel); }
.efeito-opcao input { margin-top: .2rem; accent-color: var(--tinta); }
.efeito-opcao > span { display: grid; gap: .1rem; font-size: .9rem; color: var(--suave); }
.efeito-opcao strong { color: var(--grafite); font-size: .95rem; }
.miniatura { display: block; width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; border: 1px solid var(--pauta); margin-bottom: .7rem; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.linha-botoes .botao { min-height: 38px; padding: .3em .9em; font-size: .92rem; }
.enviando { color: var(--suave); font-size: .9rem; }