/* ==========================================================
   Laço | painel do anfitrião
   Usa os tokens de style.css; aqui só o que é do painel.
   ========================================================== */

[hidden] { display: none !important; }

.painel-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem);
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.painel-marca { display: flex; align-items: baseline; gap: .6rem; }
.painel-marca .marca { font-size: 1.5rem; }
.painel-rotulo { color: var(--texto-suave); font-size: .95rem; }
.painel-topo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.painel-topo select {
  font: inherit; min-height: 44px; padding: .5rem .8rem;
  border: 1.5px solid var(--linha); border-radius: 10px;
  background: var(--superficie); color: var(--texto);
}
a.btn { display: inline-flex; align-items: center; text-decoration: none; }

.painel-main { max-width: 60rem; margin: 0 auto; padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 4rem; }
.area-evento, .area-usuario { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.usuario-email { font-size: .88rem; color: var(--texto-suave); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Login e criação de lista */
.cartao-login, .cartao-novo { max-width: 28rem; margin: clamp(1.5rem, 6vw, 4rem) auto; }
.cartao-login h1, .cartao-novo h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 5vw, 2.3rem); line-height: 1.1; }
.cartao-login .nota, .cartao-novo .nota { margin-bottom: 1.5rem; }
.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .65rem;
  background: var(--superficie); color: var(--texto); border-color: var(--linha);
}
.btn-google:hover { border-color: var(--texto-suave); }
.divisor { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 1.25rem; font-size: .88rem; color: var(--texto-suave); }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.login-acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .5rem; }
.login-acoes .btn { flex: 1; }
.cartao-novo .so-disponiveis { margin: .25rem 0 .5rem; }

.painel-tipo { margin: 0 0 .3rem; font-weight: 500; color: var(--destaque-escuro); }
.painel-cabecalho h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.015em; }
.painel-data { margin: .5rem 0 0; color: var(--texto-suave); }

.resumo {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.75rem;
  margin: 1.5rem 0 0; padding: 1.1rem 0;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
.resumo div { display: flex; flex-direction: column-reverse; }
.resumo dt { font-size: .88rem; color: var(--texto-suave); }
.resumo dd { margin: 0; font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 600; line-height: 1.2; }

/* Abas */
.abas { display: flex; gap: .25rem; margin: 2rem 0 1.5rem; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.abas button {
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
  min-height: 44px; padding: .7rem 1rem;
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--texto-suave);
}
.abas button:hover { color: var(--texto); }
.abas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--destaque); }

.secao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.secao-topo h2 { margin: 0; font-size: 1.5rem; }

/* Linhas das listas */
.linhas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.linha { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--linha); }
.linha-icone {
  flex: none; position: relative; overflow: hidden;
  width: 3.25rem; height: 3.25rem; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--destaque-suave);
}
.linha-info { flex: 1; min-width: 0; }
.linha-info strong { display: block; font-weight: 600; }
.linha-info > span { display: block; font-size: .9rem; color: var(--texto-suave); }
.linha-info .status { color: var(--texto); }
.linha-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.recado { margin: .35rem 0 0; font-family: var(--fonte-titulo); font-style: italic; }
.vazio-painel { padding: 1.5rem 0; color: var(--texto-suave); }

.selo {
  display: inline-block; margin-right: .35rem;
  padding: .05rem .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  background: var(--destaque-suave); color: var(--destaque-escuro);
}

.btn-texto {
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  min-height: 44px; padding: .5rem .65rem; border-radius: 8px;
  background: none; border: 0; color: var(--destaque-escuro);
}
.btn-texto:hover { background: var(--destaque-suave); }
.btn-texto.perigo { color: var(--erro); }

/* Formulário do evento */
.form-evento { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.form-evento .largo { grid-column: 1 / -1; }
.grupo-titulo { grid-column: 1 / -1; margin: 1rem 0 .75rem; font-family: var(--fonte-titulo); font-size: 1.2rem; font-weight: 600; }
.form-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1rem; margin-top: .5rem; }
.form-rodape .aviso-erro { flex: 1; }

/* Janela de presente */
.modal.modal-largo { width: min(36rem, calc(100% - 2rem)); }
.modal { overflow-x: hidden; }
.rotulo-campo { font-weight: 600; font-size: .95rem; }
.escolha-tipo { display: flex; gap: .5rem; margin: 1rem 0; }
.escolha-tipo label {
  flex: 1; display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .7rem .9rem; border: 1.5px solid var(--linha); border-radius: 10px;
}
.escolha-tipo label:has(input:checked) { border-color: var(--destaque); background: var(--destaque-suave); }
.escolha-tipo label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.escolha-tipo input { accent-color: var(--destaque); }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }

.emojis { display: flex; flex-wrap: wrap; gap: .35rem; }
.emojis button {
  width: 2.6rem; height: 2.6rem; font-size: 1.35rem; cursor: pointer;
  border-radius: 8px; border: 1.5px solid var(--linha); background: var(--superficie);
}
.emojis button[aria-pressed="true"] { border-color: var(--destaque); background: var(--destaque-suave); }

.foto-linha { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .6rem; }
.foto-linha img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 10px; }
.foto-linha .btn { font-size: .92rem; }

.loja-linha { display: grid; grid-template-columns: 1fr 2fr; gap: .5rem; margin-bottom: .5rem; }

@media (max-width: 560px) {
  .painel-topo-acoes, .area-evento { width: 100%; }
  .painel-topo select { flex: 1 1 100%; }
  .painel-topo-acoes .btn { flex: 1; justify-content: center; }
  .linha { flex-wrap: wrap; }
  .linha-acoes { width: 100%; padding-left: 4.25rem; justify-content: flex-start; margin-top: -.5rem; }
  .duas-colunas, .loja-linha { grid-template-columns: 1fr; }
  .escolha-tipo { flex-direction: column; }
}