/* /guias — fórum de guias. Em cima dos componentes do site (chips, cards, data-table, form-card). */
.gu-topo { align-items: flex-start; flex-wrap: wrap; }
.gu-usuario { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gu-usuario .primary, .gu-usuario .secondary, .gu-acoes .primary, .gu-acoes .secondary { margin: 0; padding: 8px 12px; font-size: 11px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.gu-discord { display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; padding: 8px 14px; background: #5865f2; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; }
.gu-discord:hover { background: #4752c4; }
.gu-discord svg { width: 18px; height: 14px; fill: currentColor; }
.gu-discord-off { opacity: .5; cursor: not-allowed; }
.gu-dev { color: #858b95; font-size: 11px; }
.gu-dev a { color: var(--cyan); }
.gu-eu { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; }
.gu-avatar { width: 24px; height: 24px; border-radius: 50%; background: #20242c; object-fit: cover; flex: none; }
.gu-papel { font-style: normal; border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 800; background: #2a2f3a; color: #aab0ba; }
.gu-papel-autor { background: rgba(102, 114, 237, .2); color: #9aa3f7; }
.gu-papel-admin { background: rgba(244, 175, 37, .18); color: var(--yellow); }
/* Quantos pedidos de guia estão abertos: no botão "💬 Pedidos" da barra e na aba. */
.gu-contador { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: var(--yellow); color: #262008; font-size: 10px; font-weight: 800; line-height: 1; }
.gu-contador[hidden] { display: none; }

.gu-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 12px; }
.gu-barra input[type=search] { height: 36px; min-width: 240px; border: 1px solid #373c46; border-radius: 6px; padding: 0 10px; background: #222630; color: #ebeef0; font-size: 12px; }
/* Sozinhos, os chips separam-se do que vem embaixo (Pedidos, Auditoria); numa barra ou num campo, quem espaça é o pai. */
.gu-chips { margin: 0 0 12px; flex-wrap: wrap; }
.gu-barra .gu-chips, .field .gu-chips { margin: 0; }
.gu-chips .chip { cursor: pointer; }
.gu-chips .chip small { color: #858b95; margin-left: 3px; }
.gu-chips .chip.active small { color: #dfe2ff; }
.gu-barra .gu-ordenar { flex: none; margin-left: auto; padding: 8px 12px; font-size: 11px; cursor: pointer; }
.gu-barra.gu-travada input, .gu-barra.gu-travada .chip { opacity: .45; pointer-events: none; }

/* Cada card com a própria altura: sem a capa, o card termina nas tags em vez de esticar até o vizinho com capa. */
.gu-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.gu-card { border: 1px solid #2f343d; border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color .12s, transform .12s; }
.gu-card:hover { border-color: #4a5160; transform: translateY(-1px); }
.gu-card-link { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px; color: inherit; text-decoration: none; }
.gu-card-topo { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.gu-card-topo small { color: #858b95; }
.gu-autor { color: var(--yellow); font-weight: 700; }
.gu-card h3 { font-size: 15px; line-height: 1.3; color: #fff; }
/* O resumo é o subtítulo: dá para saber do que o guia trata sem abrir; até 3 linhas. */
.gu-card-resumo { margin: -2px 0 0; color: #a5a9b2; font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gu-card-capa { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #11141b; }
.gu-card-semcapa { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 8px; padding: 12px; background: linear-gradient(135deg, #1e222a, #15181e); color: #858b95; font-size: 12px; text-align: center; }
.gu-card-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: #858b95; font-size: 11px; }
.gu-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.gu-tag { font-style: normal; border-radius: 4px; padding: 2px 7px; background: #262a33; color: #aab0ba; font-size: 10px; font-weight: 700; }
.gu-rascunho { border-style: dashed; }
.gu-apagado { opacity: .65; }
.gu-badge-rascunho { background: #8a8f9e; color: #15181e; }
.gu-badge-apagado { background: #ff6675; color: #15181e; }
.gu-mais { display: block; margin: 16px auto 0; }
.gu-total { margin-top: 10px; text-align: center; }
.gu-total a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.gu-total a:hover { text-decoration: underline; }
.gu-vazio { border: 1px dashed #343a46; border-radius: 12px; padding: 40px 16px; color: #858b95; text-align: center; }
.gu-vazio a { color: var(--cyan); }

/* Modo "Editar" da lista: cards arrastáveis, com a posição e as setas para teclado e celular. */
.gu-ordem-dica { margin: 0 0 12px; }
.gu-ordenando .gu-card { border-style: dashed; cursor: grab; }
.gu-ordenando .gu-card:active { cursor: grabbing; }
.gu-card-ordem { display: flex; flex-direction: column; }
.gu-card-ordem .gu-card-link { height: auto; flex: 1; padding-top: 6px; }
.gu-card-ordem-barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; color: #858b95; font-size: 11px; }
.gu-pega { font-size: 16px; line-height: 1; color: #6b717c; }
.gu-pos { font-weight: 800; color: var(--yellow); }
.gu-card-ordem-setas { margin-left: auto; display: inline-flex; gap: 4px; }
.gu-card-ordem-setas .secondary { flex: none; margin: 0; padding: 4px 9px; font-size: 12px; line-height: 1; cursor: pointer; }
.gu-card-ordem-setas .secondary:disabled { opacity: .35; cursor: default; }
.gu-arrastado { opacity: .4; }
.gu-ordem-acoes { margin-top: 16px; }

.gu-voltar { display: inline-block; margin: 8px 0 12px; color: var(--cyan); font-size: 12px; font-weight: 700; text-decoration: none; }
.gu-post { max-width: 880px; }
.gu-titulo { margin: 4px 0 8px; font-size: 26px; }
.gu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; color: #858b95; font-size: 12px; }
.gu-resumo { margin-bottom: 14px; color: #c7cad0; font-size: 14px; }
.gu-capa { width: 100%; margin-bottom: 18px; border-radius: 12px; background: #11141b; }
.gu-corpo { color: #c7cad0; font-size: 14px; line-height: 1.7; }
.gu-corpo h1, .gu-corpo h2, .gu-corpo h3 { margin: 22px 0 8px; color: #f0f1f3; }
.gu-corpo h1 { font-size: 22px; } .gu-corpo h2 { font-size: 18px; } .gu-corpo h3 { font-size: 15px; }
.gu-corpo p { margin: 0 0 12px; }
.gu-corpo img { max-width: 100%; border-radius: 8px; }
.gu-corpo a { color: var(--cyan); }
.gu-corpo code { border-radius: 4px; padding: 1px 5px; background: #20242c; font-size: 13px; }
.gu-corpo pre { overflow: auto; border-radius: 8px; padding: 12px; background: #11141b; }
.gu-corpo blockquote { margin: 0 0 12px; border-left: 3px solid #7180f5; border-radius: 4px; padding: 6px 12px; background: #191d26; }
.gu-corpo ul, .gu-corpo ol { margin: 0 0 12px; padding-left: 22px; }
.gu-corpo table { margin-bottom: 12px; border-collapse: collapse; }
.gu-corpo th, .gu-corpo td { border: 1px solid #30343c; padding: 6px 10px; }
.gu-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.gu-confirmar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #c7cad0; font-size: 12px; }

.gu-editor { max-width: 880px; }
.gu-editor h2 { margin-bottom: 14px; }
.gu-editor .field { margin-bottom: 14px; }
.gu-editor .field label small { color: #737984; font-weight: 500; letter-spacing: 0; text-transform: none; }
.gu-editor textarea { width: 100%; min-height: 280px; border: 1px solid #373c46; border-radius: 5px; padding: 10px; background: #222630; color: #ebeef0; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.gu-editor textarea.gu-arrastando { border-color: var(--cyan); }
.gu-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.gu-previa { min-height: 120px; border: 1px dashed #373c46; border-radius: 5px; padding: 12px; }
.gu-tag-nova { display: flex; gap: 6px; margin-top: 8px; }
.gu-tag-nova input { width: 180px; }
.gu-capa-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gu-capa-previa { width: 240px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #11141b; }
.gu-publicar { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; color: #c7cad0; font-size: 12px; }
.gu-publicar small { color: #737984; }
.gu-erro { border-left-color: #ff6675; }
.gu-aviso { border-left-color: var(--yellow); }
.gu-erro-form { margin-bottom: 12px; }
.gu-h2 { margin: 4px 0 6px; }

.gu-tabela { min-width: 900px; }
.gu-tabela td { white-space: normal; }
.gu-detalhes { max-width: 420px; color: #aab0ba; font-size: 12px; }
.gu-quem { display: inline-flex; align-items: center; gap: 6px; }
.gu-quem small { color: #858b95; }
.gu-acao { border-radius: 4px; padding: 3px 8px; background: #2a2f3a; color: #aab0ba; font-size: 10px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.gu-acao-criou { background: rgba(34, 214, 86, .15); color: var(--green); }
.gu-acao-editou { background: rgba(102, 114, 237, .2); color: #9aa3f7; }
.gu-acao-apagou { background: rgba(255, 55, 110, .18); color: #ff6675; }
.gu-acao-restaurou { background: rgba(48, 217, 211, .15); color: var(--cyan); }
.gu-acao-reordenou { background: rgba(102, 114, 237, .2); color: #9aa3f7; }
.gu-acao-enviou_imagem { background: rgba(244, 175, 37, .15); color: var(--yellow); }
.gu-paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }

@media (max-width: 580px) {
  .gu-grade { grid-template-columns: 1fr; }
  .gu-barra input[type=search] { min-width: 0; width: 100%; }
  .gu-titulo { font-size: 20px; }
  .gu-capa-previa { width: 100%; }
}
.gu-tabela a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.gu-tabela a:hover { text-decoration: underline; }

/* Abas Guias | Pedidos: o tabbar do site, com links no lugar dos botões. */
.gu-abas { height: 46px; margin: 0 0 4px; gap: 26px; }
.gu-abas a { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; color: #a6abb4; font-size: 15px; font-weight: 600; text-decoration: none; }
.gu-abas a:hover { color: #dfe2e8; }
.gu-abas a.active { color: var(--text); }
.gu-abas a.active:after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--yellow); content: ''; }

/* Pedidos de guia: formulário curto para quem está logado e uma lista densa, um pedido por linha. */
.gu-pedidos-intro { margin: 12px 0 14px; max-width: 880px; font-size: 12px; }
.gu-pedir { max-width: 880px; margin: 0 0 18px; }
.gu-pedir textarea { width: 100%; min-height: 120px; border: 1px solid #373c46; border-radius: 5px; padding: 10px; background: #222630; color: #ebeef0; font: 13px/1.5 Inter, system-ui, sans-serif; resize: vertical; }
.gu-pedir textarea:focus { outline: none; border-color: #7984f4; box-shadow: 0 0 0 2px rgba(121, 132, 244, .25); }
.gu-pedir .field label small { color: #737984; font-weight: 500; letter-spacing: 0; text-transform: none; }
.gu-pedir .gu-acoes { margin-top: 4px; }
.gu-pedir-login { margin: 0 0 18px; max-width: 880px; }
.gu-pedir-login a { color: var(--cyan); font-weight: 700; }
.gu-pedidos { display: flex; flex-direction: column; gap: 10px; }
.gu-pedido { border: 1px solid #2f343d; border-left: 3px solid #6b717c; border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.gu-pedido-aberto { border-left-color: var(--yellow); }
.gu-pedido-em_andamento { border-left-color: var(--blue); }
.gu-pedido-atendido { border-left-color: var(--green); }
.gu-pedido-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gu-pedido-topo h3 { font-size: 15px; line-height: 1.3; color: #fff; }
.gu-status { border-radius: 4px; padding: 3px 8px; background: #2a2f3a; color: #aab0ba; font-size: 10px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.gu-status-aberto { background: rgba(244, 175, 37, .18); color: var(--yellow); }
.gu-status-em_andamento { background: rgba(102, 114, 237, .2); color: #9aa3f7; }
.gu-status-atendido { background: rgba(34, 214, 86, .15); color: var(--green); }
.gu-pedido-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; color: #858b95; font-size: 12px; }
.gu-pedido-meta small { color: #6b717c; }
.gu-pedido-meta b { color: #c7cad0; }
.gu-pedido-meta .gu-autor { color: var(--yellow); }
.gu-pedido-desc { color: #c7cad0; font-size: 13px; line-height: 1.55; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gu-pedido-desc.gu-aberta { display: block; -webkit-line-clamp: none; }
.gu-ver-tudo { margin-top: 4px; border: 0; padding: 2px 0; background: none; color: var(--cyan); font-size: 12px; font-weight: 700; cursor: pointer; }
.gu-pedido-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.gu-pedido-rodape .secondary { margin: 0; padding: 7px 10px; font-size: 11px; text-decoration: none; cursor: pointer; }
.gu-pedido-guia { color: var(--cyan); font-size: 12px; font-weight: 700; text-decoration: none; }
.gu-pedido-guia:hover { text-decoration: underline; }
.gu-pedido-staff { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.gu-pedido-staff label { display: inline-flex; align-items: center; gap: 6px; color: #858b95; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.gu-pedido-staff select { max-width: 220px; font-size: 11px !important; }
.gu-pedido-origem blockquote { margin: 8px 0 0; border-left: 3px solid #7180f5; border-radius: 4px; padding: 6px 10px; background: #15181e; color: #aab0ba; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.gu-acao-pediu_guia { background: rgba(244, 175, 37, .15); color: var(--yellow); }
.gu-acao-mudou_pedido { background: rgba(102, 114, 237, .2); color: #9aa3f7; }
.gu-acao-apagou_pedido { background: rgba(255, 55, 110, .18); color: #ff6675; }

@media (max-width: 580px) {
  .gu-abas { gap: 18px; }
  .gu-pedido-staff { margin-left: 0; width: 100%; }
  .gu-pedido-staff select { max-width: 100%; flex: 1; }
  .gu-pedido-rodape .gu-pedido-guia { width: 100%; }
}