:root {
  --preto: #0d0c0b;
  --preto-2: #171513;
  --preto-3: #221f1b;
  --borda: #2e2a25;
  --laranja: #ff7a1a;
  --laranja-claro: #ff9a4d;
  --laranja-escuro: #b3500d;
  --laranja-logo: #ff6e00; /* laranja do logo SOAP */
  --texto: #f5f0ea;
  --texto-2: #a89f95;
  --erro: #ff5a5a;
  --raio: 16px;
  --fonte: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* O atributo hidden sempre esconde, mesmo em elementos com display próprio (.btn, .campo, .menu-item…) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: var(--fonte);
  line-height: 1.5;
}

/* Topo */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--preto-2);
  border-bottom: 3px solid var(--laranja);
}
.marca { display: flex; align-items: center; gap: 10px; }
/* Logo SOAP STORE (vertical, versão para fundo escuro) */
.marca-titulo { display: flex; align-items: flex-end; gap: 8px; margin: 0; line-height: 1; }
.logo-img { display: block; height: 72px; width: auto; }
@media (max-width: 600px) { .logo-img { height: 60px; } }
.marca-store {
  margin-bottom: 1px;
  color: var(--laranja-logo); font-size: 20px; font-weight: 800; letter-spacing: 1.5px;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-pri { background: var(--laranja); color: var(--preto); }
.btn-pri:hover { background: var(--laranja-claro); }
.btn-sec { background: transparent; color: var(--texto); border-color: var(--borda); }
.btn-sec:hover { border-color: var(--laranja); color: var(--laranja); }
.btn-perigo:hover { border-color: var(--erro); color: var(--erro); }
.link-btn {
  background: none; border: 0; padding: 4px 0; margin-top: 4px;
  color: var(--laranja); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}

/* Barra de busca */
main { max-width: 1200px; margin: 0 auto; padding: 24px; }
.barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; }
.barra input, .barra select {
  background: var(--preto-2);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
}
.barra input { flex: 1 1 260px; }
.barra input:focus, .barra select:focus { outline: none; border-color: var(--laranja); }
.contador { color: var(--texto-2); font-size: 14px; }

/* Grade de cards */
/* Grade de ferramentas: 4 colunas × 2 linhas por página (8 cards) */
.grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1100px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .grade { grid-template-columns: 1fr; } }
.card {
  display: flex;
  flex-direction: column;
  background: var(--preto-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--laranja); transform: translateY(-2px); }
.card-capa {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--preto-3), #26170d);
  display: flex; align-items: center; justify-content: center;
  color: var(--laranja); font-size: 42px; font-weight: 700;
}
.card-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.card-criador { color: var(--texto-2); font-size: 13px; }
.card-criador strong { color: var(--texto); font-weight: 600; }
.card-comentario {
  margin: 4px 0 0; color: var(--texto-2); font-size: 13px; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-acoes { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.card-acoes .btn { padding: 6px 12px; font-size: 13px; }

/* Estrelas */
.estrelas { color: var(--laranja); font-size: 18px; letter-spacing: 2px; }
.estrelas .apagada { color: #3a3a3a; }
.estrelas small { color: var(--texto-2); font-size: 12px; letter-spacing: 0; margin-left: 6px; }

.estrelas-input { display: flex; gap: 4px; align-items: center; }
.estrelas-input button {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font-size: 32px; line-height: 1; color: #3a3a3a; transition: color .1s, transform .1s;
}
.estrelas-input button.ativa { color: var(--laranja); }
.estrelas-input button:hover { transform: scale(1.15); }
.estrelas-input button:focus-visible { outline: 2px solid var(--laranja); border-radius: 4px; }
.estrelas-input .rotulo { margin-left: 10px; color: var(--texto-2); font-size: 14px; }

/* Diálogo / formulário */
dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  background: var(--preto-2);
  color: var(--texto);
  border: 1px solid var(--laranja);
  border-radius: var(--raio);
}
dialog::backdrop { background: rgba(0, 0, 0, .75); }
dialog > form { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
dialog > form h2 { margin: 0; color: var(--laranja); font-size: 20px; }
dialog > form > p.dica { margin: -6px 0 0; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: 14px; font-weight: 600; }
.campo em { color: var(--laranja); font-style: normal; font-weight: 400; }
.campo input, .campo textarea {
  background: var(--preto);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--laranja); }
.campo input.invalido { border-color: var(--erro); }
.erro { color: var(--erro); font-size: 12px; min-height: 0; }
.erro:empty { display: none; }
.erro a { color: var(--laranja); }

.capa-drop {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 2px dashed var(--borda);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--preto);
  color: var(--texto-2);
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s;
}
.capa-drop:hover, .capa-drop.arrastando { border-color: var(--laranja); color: var(--laranja); }
.capa-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capa-drop > span { padding: 0 16px; text-align: center; }
.dica { color: var(--texto-2); font-size: 12px; }
.dica strong { color: var(--laranja); font-weight: 600; }

.rodape-form { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }

/* Títulos de seção */
.titulo-secao {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; font-size: 18px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.titulo-secao .icone { color: var(--laranja); }

/* Seções da lista: "da sua área", "disponíveis para todos", "outras áreas" */
.secao-ferramentas + .secao-ferramentas { margin-top: 36px; }
.subtitulo-secao {
  margin: 0 0 14px; padding-left: 10px; border-left: 3px solid var(--laranja);
  font-size: 15px; font-weight: 700; color: var(--texto);
}
.subtitulo-total { color: var(--texto-2); font-weight: 400; }

/* Em destaque: carrossel sem moldura, na largura toda da página */
.destaques { padding-top: 28px; }
.rotulo-destaques {
  max-width: 1200px; margin: 0 auto 12px; padding: 0 24px;
  color: var(--texto-2); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
}
/* Carrossel contínuo */
.carrossel {
  overflow: hidden;
  padding: 6px 0;
  /* Bordas esfumaçadas nas laterais */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.carrossel-trilha {
  display: flex;
  width: max-content;
  animation: rolar var(--duracao, 30s) linear infinite;
  will-change: transform;
}
.carrossel:hover .carrossel-trilha,
.carrossel:focus-within .carrossel-trilha { animation-play-state: paused; }
/* Pausa enquanto o popup de detalhes ou o formulário estiver aberto */
body:has(dialog[open]) .carrossel-trilha { animation-play-state: paused; }

.carrossel-grupo {
  list-style: none; margin: 0;
  display: flex; flex: none; gap: 20px;
  padding: 0 20px 0 0; /* mesmo espaço entre os grupos que entre os cards */
}
@keyframes rolar {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Sem animação: rolagem manual */
.carrossel.estatico { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.carrossel.estatico .carrossel-trilha { animation: none; }

/* Item do carrossel: só imagem e texto, sem caixa */
.destaque {
  flex: none; width: 260px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; outline: none;
}
.destaque-capa {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--preto-3), #26170d);
  display: flex; align-items: center; justify-content: center;
  color: var(--laranja); font-size: 32px; font-weight: 700;
}
.destaque-capa img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.82);
  transition: transform .5s ease, filter .3s ease;
}
.destaque:hover .destaque-capa img,
.destaque:focus-visible .destaque-capa img { transform: scale(1.04); filter: brightness(1); }
.destaque:focus-visible .destaque-capa { box-shadow: 0 0 0 2px var(--laranja); }
.destaque-corpo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-width: 0; padding: 0 2px;
}
.destaque-nome {
  font-size: 14px; font-weight: 600; color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.destaque:hover .destaque-nome { color: var(--texto); }
.destaque .estrelas { flex: none; font-size: 12px; letter-spacing: 0; }
.destaque .estrelas small { margin-left: 4px; font-size: 11px; }

@media (max-width: 600px) {
  .rotulo-destaques { padding: 0 16px; }
  .destaque { width: 200px; }
}

/* Estrelas + acessos na mesma linha */
.card-metricas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.acessos { color: var(--texto-2); font-size: 12px; }

/* Card clicável */
.card.clicavel { cursor: pointer; }
.card.clicavel:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* Popup de detalhes */
dialog.detalhes { position: relative; overflow-y: auto; }
.fechar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--borda); background: rgba(11, 11, 11, .8);
  color: var(--texto); font-size: 22px; line-height: 1; cursor: pointer;
}
.fechar:hover { border-color: var(--laranja); color: var(--laranja); }
.detalhes-capa {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--preto-3), #26170d);
  display: flex; align-items: center; justify-content: center;
  color: var(--laranja); font-size: 64px; font-weight: 700;
}
.detalhes-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detalhes-corpo { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.detalhes-corpo h2 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.detalhes-descricao { margin: 4px 0 0; color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }
.detalhes-descricao.sem-texto { color: var(--texto-2); font-style: italic; }
.detalhes-corpo .card-comentario { -webkit-line-clamp: unset; }
.detalhes-avaliar {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px; padding: 14px 16px;
  background: var(--preto); border: 1px solid var(--borda); border-radius: 10px;
}
.detalhes-avaliar > span { font-size: 14px; font-weight: 600; }
.estrelas-input button:disabled { cursor: default; transform: none; }
.btn-acessar { margin-top: 6px; padding: 12px 16px; font-size: 16px; text-decoration: none; }

.vazio { text-align: center; color: var(--texto-2); padding: 60px 16px; }
.vazio strong { color: var(--laranja); }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--laranja); color: var(--preto);
  padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  z-index: 100;
}

@media (max-width: 600px) {
  .topo { padding: 12px 16px; }
  main { padding: 16px; }
  dialog > form { padding: 18px; }
}

/* =====================================================================
   Sessão, configurações, perfis e permissões
   ===================================================================== */

dialog { overflow-y: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.centro { text-align: center; }
.suave { color: var(--texto-2); }

/* Campos extras dos formulários */
.campo select {
  background: var(--preto); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 14px;
}
.campo select:focus { outline: none; border-color: var(--laranja); }
.campo select.invalido { border-color: var(--erro); }
.campo input:disabled { opacity: .6; }
.opcao { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.opcao input { margin-top: 3px; accent-color: var(--laranja); }
.opcao small { display: block; color: var(--texto-2); font-size: 12px; }
p.erro { margin: 0; }

/* Usuário no cabeçalho */
.sessao-area { display: flex; align-items: center; gap: 10px; }

/* Troca de tela: ferramentas x configurações */
body[data-tela="config"] #destaques,
body[data-tela="config"] #principal { display: none !important; }
.configuracoes { max-width: 1200px; margin: 0 auto; padding: 24px; }
.config-topo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.config-topo .link-btn { text-decoration: none; width: fit-content; }

/* Abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 20px; }
.aba {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--texto-2); font: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 14px; margin-bottom: -1px; cursor: pointer;
}
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { color: var(--laranja); border-bottom-color: var(--laranja); }
.aba:focus-visible { outline: 2px solid var(--laranja); outline-offset: -2px; }
.painel-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.painel-topo .dica { margin: 0; max-width: 640px; font-size: 13px; }

/* Tabelas */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--preto-2); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela thead th { color: var(--texto-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; background: var(--preto-3); }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.tabela tr.inativo td { opacity: .55; }
.tabela code { color: var(--texto-2); font-size: 13px; }
/* Célula de ações continua sendo célula de tabela (display: flex quebraria as bordas da linha) */
.tabela .acoes-linha { text-align: right; white-space: nowrap; }
.acoes-linha > * + * { margin-left: 6px; }
.acoes-linha .btn { padding: 6px 12px; font-size: 13px; }
.selo {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--laranja); color: var(--laranja);
  font-size: 11px; font-weight: 600; vertical-align: middle;
}
.situacao { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.situacao.ativa { background: rgba(201, 111, 46, .15); color: var(--laranja-claro); }
.situacao.inativa { background: var(--preto-3); color: var(--texto-2); }

/* "Quem pode ver esta ferramenta" no formulário de projeto */
.visibilidade { margin: 0; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 10px; gap: 8px; }
.visibilidade legend { padding: 0 6px; font-size: 14px; font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-left: 24px; }
.checks.desativado { opacity: .45; }

@media (max-width: 600px) {
  .configuracoes { padding: 16px; }
  .acoes-linha { white-space: normal; }
  .acoes-linha > * { margin: 3px 0 3px 6px; }
}

/* =====================================================================
   Áreas
   ===================================================================== */

/* Ver por área: Todas · Marketing · ... · Sem área */
.filtro-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  background: var(--preto-2); color: var(--texto-2);
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--laranja); color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--laranja); border-color: var(--laranja); color: var(--preto); }
.chip:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* Etiqueta da área no card */
.tag-area {
  align-self: flex-start;
  color: var(--laranja); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}

/* Áreas extras no cadastro do usuário */
.checks.sem-recuo { padding-left: 0; }
.checks .opcao:has(input:disabled) { opacity: .55; cursor: default; }

/* =====================================================================
   Menu lateral (hambúrguer)
   ===================================================================== */

.topo { flex-wrap: nowrap; }
.btn-menu {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0 9px; margin-right: 4px;
  background: transparent; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer;
  transition: border-color .15s;
}
.btn-menu span { display: block; height: 2px; border-radius: 2px; background: var(--texto); transition: background .15s; }
.btn-menu:hover { border-color: var(--laranja); }
.btn-menu:hover span { background: var(--laranja); }
.btn-menu:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

dialog.menu-lateral {
  margin: 0; inset: 0 auto 0 0;
  width: min(300px, 86vw); height: 100vh; max-height: 100vh;
  padding: 0; border: 0; border-right: 2px solid var(--laranja); border-radius: 0;
  background: var(--preto-2);
  display: flex; flex-direction: column;
}
dialog.menu-lateral:not([open]) { display: none; }
dialog.menu-lateral[open] { animation: entrar-menu .22s ease-out; }
dialog.menu-lateral::backdrop { background: rgba(0, 0, 0, .6); }
@keyframes entrar-menu {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.menu-lateral[open] { animation: none; }
}

.menu-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 16px; border-bottom: 1px solid var(--borda);
}
.menu-topo .fechar { position: static; flex: none; }
.menu-usuario { display: flex; align-items: center; gap: 12px; min-width: 0; }
.menu-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--laranja); color: var(--preto); font-weight: 700; font-size: 18px;
}
.menu-identidade { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.menu-identidade strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-identidade small { color: var(--laranja); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-itens { display: flex; flex-direction: column; padding: 10px 8px; gap: 2px; overflow-y: auto; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texto);
  font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--preto-3); color: var(--laranja); outline: none; }
.menu-item .icone { width: 20px; text-align: center; color: var(--laranja); font-size: 16px; }
.menu-item.destaque-item { color: var(--laranja); }
.menu-separador {
  margin: 14px 14px 4px; color: var(--texto-2);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
}

/* =====================================================================
   Barras de rolagem finas (página, janelas, menu, tabelas)
   ===================================================================== */

:root { color-scheme: dark; }

/* Firefox e Chrome/Edge 121+ */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
}

/* Navegadores WebKit mais antigos (Safari, Chrome < 121) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--laranja); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }

/* Aviso de quem pode ver (para quem não escolhe as áreas) */
.aviso-visibilidade {
  margin: 0; padding: 10px 14px;
  border: 1px dashed var(--borda); border-radius: 10px;
  color: var(--texto-2); font-size: 13px;
}
.aviso-visibilidade strong { color: var(--laranja); }

/* =====================================================================
   Perfis: lista e tela de edição
   ===================================================================== */

.link-btn.perigo { color: var(--erro); }

/* Lista de perfis */
.tabela-perfis td { vertical-align: top; }
.tabela-perfis .selo { margin-left: 6px; }
.descricao-linha { display: block; margin-top: 2px; color: var(--texto-2); font-size: 12px; }
.linha-clicavel { cursor: pointer; transition: background .15s; }
.linha-clicavel:hover { background: var(--preto-3); }
.total-permissoes { display: block; font-weight: 600; margin-bottom: 6px; }
.resumo-grupos { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-grupo {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--borda); color: var(--texto-2);
}
.chip-grupo.cheio { background: rgba(201, 111, 46, .18); border-color: var(--laranja-escuro); color: var(--laranja-claro); }
.chip-grupo.parcial { border-color: var(--laranja-escuro); color: var(--texto); }
.chip-grupo.vazio { opacity: .5; }

/* Tela de edição */
.editor-perfil { display: flex; flex-direction: column; gap: 20px; }
.editor-topo { display: flex; flex-direction: column; gap: 8px; }
.editor-topo .link-btn { text-decoration: none; width: fit-content; }
.editor-titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.editor-titulo h2 { margin: 0; font-size: 22px; }
.contador-permissoes { color: var(--laranja); font-weight: 600; font-size: 14px; }
.editor-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.editor-bloco {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; background: var(--preto-2);
  border: 1px solid var(--borda); border-radius: var(--raio);
}
.editor-bloco h3 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--laranja); }
.editor-bloco .dica { margin: 0; }
.editor-rodape {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 0; background: linear-gradient(transparent, var(--preto) 30%);
}

/* Grupos de permissões */
.grupos-permissoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grupo-perm {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; background: var(--preto); border: 1px solid var(--borda); border-radius: 10px;
}
.grupo-perm-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.grupo-perm-topo h4 { margin: 0; font-size: 14px; }
.grupo-perm-contador { color: var(--texto-2); font-size: 12px; }
.grupo-perm-alternar { margin: 0 0 0 auto; padding: 0; font-size: 12px; }

/* Interruptor (liga/desliga) */
.interruptor { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 8px 4px; border-radius: 8px; cursor: pointer; }
.interruptor:hover { background: var(--preto-3); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .trilho {
  position: relative; flex: none; width: 36px; height: 20px; margin-top: 1px;
  background: #3a3a3a; border-radius: 999px; transition: background .15s;
}
.interruptor .trilho::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--texto-2);
  transition: transform .15s, background .15s;
}
.interruptor input:checked + .trilho { background: var(--laranja); }
.interruptor input:checked + .trilho::after { transform: translateX(16px); background: var(--preto); }
.interruptor input:focus-visible + .trilho { outline: 2px solid var(--laranja); outline-offset: 2px; }
.interruptor input:disabled + .trilho { opacity: .4; }
.interruptor:has(input:disabled) { cursor: not-allowed; }
.interruptor .texto { display: flex; flex-direction: column; line-height: 1.35; }
.interruptor .texto strong { font-size: 14px; font-weight: 600; }
.interruptor .texto small { color: var(--texto-2); font-size: 12px; }

@media (max-width: 600px) {
  .editor-bloco { padding: 14px; }
  .grupos-permissoes { grid-template-columns: 1fr; }
}

/* =====================================================================
   Menu de seleção múltipla (caixas de seleção) + lista dos marcados
   ===================================================================== */

.multiselecao { position: relative; max-width: 420px; }
.multiselecao-botao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--preto); color: var(--texto); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  transition: border-color .15s;
}
.multiselecao-botao:hover, .multiselecao-botao[aria-expanded="true"] { border-color: var(--laranja); }
.multiselecao-botao:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.multiselecao-seta { color: var(--texto-2); transition: transform .15s; }
.multiselecao-botao[aria-expanded="true"] .multiselecao-seta { transform: rotate(180deg); color: var(--laranja); }

.multiselecao-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: var(--preto-2); border: 1px solid var(--laranja); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}
.multiselecao-busca {
  padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px;
  background: var(--preto); color: var(--texto); font: inherit; font-size: 13px;
}
.multiselecao-busca:focus { outline: none; border-color: var(--laranja); }
.multiselecao-opcoes { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.multiselecao-opcao {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.multiselecao-opcao:hover { background: var(--preto-3); }
.multiselecao-opcao input { width: 16px; height: 16px; accent-color: var(--laranja); cursor: pointer; }
.multiselecao-opcao:has(input:checked) { color: var(--laranja-claro); }
.multiselecao-acoes { display: flex; justify-content: space-between; padding: 6px 4px 2px; border-top: 1px solid var(--borda); }
.multiselecao-acoes .link-btn { margin: 0; padding: 0; font-size: 12px; }
.multiselecao.desativado .multiselecao-botao { opacity: .45; cursor: not-allowed; }

.chips-escolhidos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-escolhidos.desativado { opacity: .45; }
.chip-escolhido {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 12px; border-radius: 999px;
  background: rgba(201, 111, 46, .15); border: 1px solid var(--laranja-escuro);
  color: var(--laranja-claro); font-size: 13px; font-weight: 600;
}
.chip-escolhido button {
  width: 20px; height: 20px; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: var(--laranja-claro); font-size: 15px; line-height: 1; cursor: pointer;
}
.chip-escolhido button:hover, .chip-escolhido button:focus-visible { background: var(--laranja); color: var(--preto); outline: none; }
.chips-vazio { color: var(--texto-2); font-size: 13px; font-style: italic; }

/* =====================================================================
   Paginação das ferramentas
   ===================================================================== */

.paginacao { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 28px 0 8px; }
.pagina {
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--borda); border-radius: 8px;
  background: var(--preto-2); color: var(--texto);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.pagina:hover:not(:disabled) { border-color: var(--laranja); color: var(--laranja); }
.pagina:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.pagina.atual { background: var(--laranja); border-color: var(--laranja); color: var(--preto); cursor: default; }
.pagina:disabled { opacity: .35; cursor: not-allowed; }
.pagina-reticencias { color: var(--texto-2); padding: 0 4px; }

/* Cards um pouco mais compactos na grade de 4 colunas */
.card-corpo { padding: 12px 14px 14px; }
.card h3 { font-size: 16px; }

/* =====================================================================
   Visão detalhada da ferramenta (administrador)
   ===================================================================== */

.btn-visao { margin-top: 4px; }
#f-visao { padding: 0; margin-top: 4px; font-size: 13px; }

dialog.painel-produto {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0; background: var(--preto);
}
.pp-topo {
  position: sticky; top: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 24px; background: var(--preto-2); border-bottom: 1px solid var(--borda);
}
.pp-sobretitulo { color: var(--laranja); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.pp-topo h2 { margin: 2px 0 0; font-size: 22px; overflow-wrap: anywhere; }
.pp-topo-acoes { display: flex; align-items: center; gap: 10px; }
.pp-topo-acoes .fechar { position: static; }
.pp-conteudo { display: flex; flex-direction: column; gap: 18px; padding: 20px 24px 28px; }
.pp-carregando { color: var(--texto-2); text-align: center; padding: 60px 0; }

/* Ficha */
.pp-ficha {
  display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start;
  padding: 18px; background: var(--preto-2); border: 1px solid var(--borda); border-radius: var(--raio);
}
.pp-capa {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 10px;
  background: linear-gradient(135deg, var(--preto-3), #26170d);
  display: flex; align-items: center; justify-content: center;
  color: var(--laranja); font-size: 48px; font-weight: 700;
}
.pp-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-dados { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; }
.pp-dados dt { color: var(--texto-2); }
.pp-dados dd { margin: 0; overflow-wrap: anywhere; }
.pp-dados a { color: var(--laranja); }
.pp-dados code { color: var(--texto-2); font-size: 13px; }
.pp-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip-escolhido.sem-x { padding: 3px 12px; }
.pp-quem-ve { margin-top: 8px; font-size: 13px; }
.pp-quem-ve summary { cursor: pointer; color: var(--texto-2); }
.pp-quem-ve summary:hover { color: var(--laranja); }
.pp-quem-ve ul { margin: 8px 0 0; padding-left: 18px; color: var(--texto-2); }
.pp-quem-ve li strong { color: var(--texto); }

/* Indicadores (stat tiles) */
.pp-indicadores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pp-tile {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: var(--preto-2); border: 1px solid var(--borda); border-radius: var(--raio);
}
.pp-tile-rotulo { color: var(--texto-2); font-size: 12px; }
.pp-tile-valor { font-size: 26px; font-weight: 700; line-height: 1.15; }
.pp-tile-detalhe { color: var(--texto-2); font-size: 12px; }
.pp-tile-detalhe.sobe { color: #6fcf8e; }
.pp-tile-detalhe.desce { color: #ef7d7d; }

/* Cartões de gráfico */
.pp-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pp-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pp-cartao {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 16px 18px; background: var(--preto-2); border: 1px solid var(--borda); border-radius: var(--raio);
}
.pp-cartao header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pp-cartao h3 { margin: 0; font-size: 15px; }
.pp-cartao header .suave { font-size: 12px; }
.pp-vazio { margin: 0; padding: 18px 0; text-align: center; font-size: 13px; }
.pp-nota { margin: -6px 0 0; font-size: 12px; }

/* Colunas verticais (uma série, laranja) */
.pp-colunas { display: grid; grid-template-columns: auto 1fr; gap: 8px; height: 170px; }
.pp-colunas.alto { height: 210px; }
.pp-eixo-y {
  display: flex; flex-direction: column; justify-content: space-between;
  padding-bottom: 20px; color: var(--texto-2); font-size: 11px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.pp-area { position: relative; display: grid; grid-template-rows: 1fr 20px; min-width: 0; }
.pp-grade-linha { position: absolute; left: 0; right: 0; top: 6px; border-top: 1px solid var(--borda); }
.pp-barras-v { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid #333; }
.pp-coluna {
  flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; justify-content: center;
  cursor: default; outline: none; border-radius: 4px 4px 0 0;
}
.pp-coluna-barra {
  display: block; width: 100%; max-width: 24px; min-height: 0;
  background: var(--laranja); border-radius: 4px 4px 0 0; transition: background .12s;
}
.pp-coluna:hover .pp-coluna-barra, .pp-coluna:focus-visible .pp-coluna-barra { background: var(--laranja-claro); }
.pp-coluna:focus-visible { box-shadow: inset 0 0 0 1px var(--laranja); }
.pp-eixo-x { display: flex; gap: 2px; color: var(--texto-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.pp-eixo-x span { flex: 1 1 0; text-align: center; white-space: nowrap; overflow: visible; padding-top: 4px; }

/* Barras horizontais com valor na ponta */
.pp-barras-h { display: flex; flex-direction: column; gap: 6px; }
.pp-barra-linha {
  display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: 10px;
  padding: 3px 4px; border-radius: 6px; outline: none; font-size: 13px;
}
.pp-barra-linha:hover, .pp-barra-linha:focus-visible { background: var(--preto-3); }
.pp-barra-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto); }
.pp-barra-trilho { display: block; height: 12px; }
.pp-barra { display: block; height: 100%; min-width: 2px; background: var(--laranja); border-radius: 0 4px 4px 0; }
.pp-barra.neutra { background: #555; }
.pp-barra-valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-barra-valor small { color: var(--texto-2); font-weight: 400; }

/* Tabela de dados (alternativa aos gráficos) */
.pp-tabela-dados summary { cursor: pointer; color: var(--texto-2); font-size: 12px; }
.pp-tabela-dados summary:hover { color: var(--laranja); }
.pp-tabela-dados .tabela-rolagem { margin-top: 8px; max-height: 240px; overflow-y: auto; }

/* Tooltip dos gráficos: valor em destaque */
.pp-dica {
  position: fixed; z-index: 10; pointer-events: none;
  padding: 6px 10px; border-radius: 6px;
  background: var(--texto); color: var(--preto);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

@media (max-width: 900px) {
  .pp-ficha { grid-template-columns: 1fr; }
  .pp-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-grade-2, .pp-grade-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pp-topo, .pp-conteudo { padding-left: 14px; padding-right: 14px; }
  .pp-dados { grid-template-columns: 1fr; gap: 2px; }
  .pp-dados dd { margin-bottom: 8px; }
}

/* =====================================================================
   Favoritos
   ===================================================================== */

/* Coração no canto da capa do card */
.card-favorito {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .15); background: rgba(11, 11, 11, .7);
  color: var(--texto); font-size: 18px; line-height: 1; cursor: pointer;
  transition: transform .12s, color .12s, border-color .12s, background .12s;
}
.card-favorito:hover { transform: scale(1.1); color: var(--laranja-logo); border-color: var(--laranja); }
.card-favorito:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.card-favorito.ativo { color: var(--laranja-logo); border-color: var(--laranja-logo); background: rgba(11, 11, 11, .85); }

/* Filtro "Favoritos" na barra de busca */
.filtro-favoritos {
  padding: 10px 14px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--preto-2); color: var(--texto); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.filtro-favoritos:hover { border-color: var(--laranja); color: var(--laranja); }
.filtro-favoritos[aria-pressed="true"] { background: var(--laranja); border-color: var(--laranja); color: var(--preto); }
.filtro-favoritos:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* Botão no popup */
.btn-favorito.ativo { color: var(--laranja-logo); border-color: var(--laranja-logo); }

/* =====================================================================
   Projetos em ZIP
   ===================================================================== */

/* Escolha: link ou arquivo ZIP */
.tipo-acesso { margin: 0; padding: 0; border: 0; }
.tipo-acesso legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.tipo-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tipo-opcao {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--preto); cursor: pointer; transition: border-color .15s;
}
.tipo-opcao:hover { border-color: var(--laranja); }
.tipo-opcao:has(input:checked) { border-color: var(--laranja); background: var(--preto-2); }
.tipo-opcao:has(input:focus-visible) { outline: 2px solid var(--laranja); outline-offset: 2px; }
.tipo-opcao input { margin-top: 3px; accent-color: var(--laranja); }
.tipo-opcao strong { display: block; font-size: 14px; }
.tipo-opcao small { display: block; color: var(--texto-2); font-size: 12px; }
@media (max-width: 480px) { .tipo-opcoes { grid-template-columns: 1fr; } }

.zip-drop { aspect-ratio: auto; min-height: 96px; padding: 14px 0; }
.zip-drop.invalido { border-color: var(--erro); }
.zip-drop.enviado { border-style: solid; border-color: var(--laranja); color: var(--texto); }
.zip-drop.enviando { cursor: progress; opacity: .7; }
.zip-drop strong { color: var(--laranja); }

/* Ferramenta aberta dentro do SOAP STORE */
dialog.visualizador {
  width: calc(100vw - 32px); max-width: none;
  height: calc(100vh - 32px); max-height: none;
  padding: 0; background: var(--preto);
  display: none; flex-direction: column; overflow: hidden;
}
dialog.visualizador[open] { display: flex; }
.v-topo { position: static; padding: 10px 16px; }
.v-topo h2 { font-size: 18px; }
.v-moldura { flex: 1; min-height: 0; background: #fff; }
.v-moldura iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 600px) {
  dialog.visualizador { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .v-topo #v-nova-aba { display: none; }
}
.zip-drop small { display: block; margin-top: 4px; color: var(--texto-2); font-size: 12px; }
.zip-drop small.zip-ignorados { color: var(--laranja); }

/* Análise de segurança do ZIP */
.analise { border: 1px solid var(--borda); border-radius: 10px; background: var(--preto); overflow: hidden; }
.analise-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; font-weight: 600; }
.analise-topo .icone-status { font-size: 16px; line-height: 1; }
.analise.status-nenhum .analise-topo, .analise.status-baixo .analise-topo { color: var(--ok, #4cc38a); }
.analise.status-medio .analise-topo { color: #e2b93b; }
.analise.status-alto { border-color: var(--laranja); }
.analise.status-alto .analise-topo { color: var(--laranja); }
.analise.status-critico { border-color: var(--erro); }
.analise.status-critico .analise-topo { color: var(--erro); }
.analise-resumo { padding: 0 12px 10px; color: var(--texto-2); font-size: 12px; }
.analise-lista { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; border-top: 1px solid var(--borda); }
.analise-lista li { padding: 10px 12px; border-bottom: 1px solid var(--borda); font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.analise-lista li:last-child { border-bottom: 0; }
.analise-item-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.analise-local { color: var(--texto-2); font-size: 12px; overflow-wrap: anywhere; }
.analise-lista code {
  display: block; padding: 4px 6px; border-radius: 6px; background: var(--preto-2);
  color: var(--texto-2); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.analise-lista small { color: var(--texto-2); font-size: 12px; }
.selo-nivel {
  flex: none; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px solid currentColor; text-transform: uppercase; letter-spacing: .4px;
}
.selo-nivel.nivel-critico { color: var(--erro); }
.selo-nivel.nivel-alto { color: var(--laranja); }
.selo-nivel.nivel-medio { color: #e2b93b; }
.selo-nivel.nivel-baixo { color: var(--texto-2); }
.analise-dominios { padding: 8px 12px; border-top: 1px solid var(--borda); font-size: 12px; color: var(--texto-2); overflow-wrap: anywhere; }
.confirmar-riscos { padding: 10px 12px; border: 1px solid var(--laranja); border-radius: 10px; }
.confirmar-riscos.invalido { border-color: var(--erro); }
.bloqueio .opcao small { display: block; }

/* Checklist da análise de segurança */
.analise-topo { justify-content: space-between; }
.analise-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.analise-titulo small { color: var(--texto-2); font-size: 12px; font-weight: 400; }
.btn-analisar { flex: none; padding: 6px 12px; font-size: 13px; }
.analise.status-sem .analise-topo { color: var(--texto); }
.barra-criterios { height: 4px; margin: 0 12px 8px; border-radius: 4px; background: var(--borda); overflow: hidden; }
.barra-criterios span { display: block; height: 100%; border-radius: 4px; background: var(--laranja); }
.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); max-height: 360px; overflow-y: auto; }
.criterio { border-bottom: 1px solid var(--borda); font-size: 13px; }
.criterio:last-child { border-bottom: 0; }
.criterio > .marca, .criterio summary { display: flex; }
.criterio:not(:has(details)) { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; }
.criterio summary { align-items: flex-start; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; }
.criterio summary::-webkit-details-marker { display: none; }
.criterio summary:hover { background: var(--preto-2); }
.criterio summary:focus-visible { outline: 2px solid var(--laranja); outline-offset: -2px; }
.criterio .marca {
  flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: 1px solid currentColor;
}
.criterio-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.criterio-titulo small { color: var(--texto-2); font-size: 12px; }
.criterio-estado { flex: none; font-size: 12px; font-weight: 600; }
.criterio details[open] summary .criterio-estado::after { content: " ▴"; }
.criterio details:not([open]) summary .criterio-estado::after { content: " ▾"; }
.criterio .analise-lista { border-top: 1px dashed var(--borda); max-height: none; margin: 0 12px 8px 42px; border: 1px solid var(--borda); border-radius: 8px; }
.situacao-ok .marca, .situacao-ok .criterio-estado,
.situacao-bloqueado .marca, .situacao-bloqueado .criterio-estado { color: #4cc38a; }
.situacao-atencao .marca, .situacao-atencao .criterio-estado { color: #e2b93b; }
.situacao-pendente .marca, .situacao-pendente .criterio-estado { color: var(--laranja); }
.situacao-reprovado .marca, .situacao-reprovado .criterio-estado { color: var(--erro); }

/* Logo = botão de página inicial */
.marca-link { display: flex; align-items: flex-end; gap: 8px; color: inherit; text-decoration: none; border-radius: 8px; }
.marca-link:hover .marca-store { color: var(--laranja-logo, var(--laranja)); }
.marca-link:focus-visible { outline: 2px solid var(--laranja); outline-offset: 4px; }

/* Configurações > Sem login */
.publicos-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.publicos-barra input[type="search"] {
  flex: 1 1 220px; min-width: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--preto-2); color: var(--texto); font: inherit; font-size: 14px;
}
.publicos-barra input[type="search"]:focus { outline: none; border-color: var(--laranja); }
.publicos-contador { color: var(--texto-2); font-size: 13px; margin-left: auto; }
.publicos-lista {
  list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); border-radius: 10px;
  max-height: 60vh; overflow-y: auto; background: var(--preto);
}
.publicos-lista li { border-bottom: 1px solid var(--borda); }
.publicos-lista li:last-child { border-bottom: 0; }
.publicos-lista label { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.publicos-lista label:hover { background: var(--preto-2); }
.publicos-lista input { accent-color: var(--laranja); width: 16px; height: 16px; flex: none; }
.publicos-lista .pub-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.publicos-lista .pub-nome small { color: var(--texto-2); font-size: 12px; }
.publicos-lista .pub-estado { flex: none; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.publicos-lista li:has(input:checked) .pub-estado { color: var(--laranja); }
.publicos-lista .vazio { padding: 16px; color: var(--texto-2); }
.publicos-rodape { align-items: center; margin-top: 12px; }
.campo-publico small { display: block; color: var(--texto-2); font-size: 12px; }

/* =====================================================================
   Transições e movimento
   Uma curva só para o sistema inteiro (sai rápido, assenta devagar).
   Janelas entram e SAEM animadas (@starting-style + transição de display);
   em navegadores sem suporte, abrem e fecham sem animação, como antes.
   ===================================================================== */
html { scroll-behavior: smooth; }
:root {
  --mov: cubic-bezier(.22, 1, .36, 1);   /* suave: desacelera no fim */
  --mov-saida: cubic-bezier(.4, 0, 1, 1);
  --t-rapido: .16s;
  --t-medio: .28s;
  --t-lento: .45s;
}

/* ---------- Janelas (popup, formulários, login, visão detalhada, ferramenta em ZIP) ---------- */
dialog {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-medio) var(--mov),
    transform var(--t-medio) var(--mov),
    overlay var(--t-medio) allow-discrete,
    display var(--t-medio) allow-discrete;
}
dialog:not([open]) {
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition-timing-function: var(--mov-saida);
  transition-duration: var(--t-rapido);
}
@starting-style {
  dialog[open] { opacity: 0; transform: translateY(14px) scale(.96); }
}

dialog::backdrop {
  transition:
    background-color var(--t-medio) var(--mov),
    backdrop-filter var(--t-medio) var(--mov),
    overlay var(--t-medio) allow-discrete,
    display var(--t-medio) allow-discrete;
  backdrop-filter: blur(2px);
}
dialog:not([open])::backdrop { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0); }
@starting-style {
  dialog[open]::backdrop { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0); }
}

/* Menu lateral: desliza da esquerda (entra e sai) */
dialog.menu-lateral[open] { animation: none; }
dialog.menu-lateral { transform: none; }
dialog.menu-lateral:not([open]) { transform: translateX(-100%); opacity: 1; transition-duration: .22s; }
@starting-style {
  dialog.menu-lateral[open] { transform: translateX(-100%); opacity: 1; }
}
dialog.menu-lateral::backdrop { background-color: rgba(0, 0, 0, .6); }

/* Ferramenta em ZIP: cresce do centro, um pouco mais devagar */
@starting-style {
  dialog.visualizador[open] { opacity: 0; transform: scale(.94); }
}

/* Conteúdo do popup: a capa aproxima de leve ao abrir */
#detalhes[open] .detalhes-capa img { animation: capa-entra var(--t-lento) var(--mov); }
@keyframes capa-entra {
  from { transform: scale(1.06); filter: brightness(.7); }
  to   { transform: scale(1); filter: brightness(1); }
}

/* ---------- Cards: entrada em cascata e hover com brilho ---------- */
.grade .card {
  animation: card-entra var(--t-lento) var(--mov) both;
  transition:
    border-color var(--t-medio) var(--mov),
    transform var(--t-medio) var(--mov),
    box-shadow var(--t-medio) var(--mov);
}
.grade .card:nth-child(1) { animation-delay: 0ms; }
.grade .card:nth-child(2) { animation-delay: 40ms; }
.grade .card:nth-child(3) { animation-delay: 80ms; }
.grade .card:nth-child(4) { animation-delay: 120ms; }
.grade .card:nth-child(5) { animation-delay: 160ms; }
.grade .card:nth-child(6) { animation-delay: 200ms; }
.grade .card:nth-child(7) { animation-delay: 240ms; }
.grade .card:nth-child(8) { animation-delay: 280ms; }
.grade .card.sem-entrada { animation: none; } /* card que já estava na tela não entra de novo */
@keyframes card-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 0 1px rgba(201, 111, 46, .35);
}
.card-capa img { transition: transform var(--t-lento) var(--mov), filter var(--t-medio) var(--mov); }
.card:hover .card-capa img { transform: scale(1.05); }
.card:active { transform: translateY(-1px) scale(.995); transition-duration: var(--t-rapido); }

/* Carrossel: transições do hover mais macias */
.destaque-capa img { transition: transform .6s var(--mov), filter var(--t-medio) var(--mov); }
.destaque-nome { transition: color var(--t-medio) var(--mov); }

/* ---------- Telas, abas e blocos que aparecem ---------- */
main, .configuracoes, .painel, .editor-perfil, .analise, #f-campo-zip, #f-campo-link, .vazio {
  transition: opacity var(--t-medio) var(--mov), transform var(--t-medio) var(--mov);
}
@starting-style {
  main, .configuracoes, .painel, .editor-perfil, .analise, #f-campo-zip, #f-campo-link, .vazio {
    opacity: 0; transform: translateY(8px);
  }
}
.aba { transition: color var(--t-medio) var(--mov), border-color var(--t-medio) var(--mov); }

/* ---------- Botões e controles ---------- */
.btn, .filtro-favoritos, .card-favorito, .tipo-opcao, .menu-item, .btn-menu {
  transition:
    background-color var(--t-medio) var(--mov), border-color var(--t-medio) var(--mov),
    color var(--t-medio) var(--mov), transform var(--t-rapido) var(--mov), box-shadow var(--t-medio) var(--mov);
}
.btn:active:not(:disabled), .filtro-favoritos:active, .menu-item:active { transform: scale(.97); }
.btn-pri:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(201, 111, 46, .35); }
.campo input, .campo textarea, .campo select {
  transition: border-color var(--t-medio) var(--mov), box-shadow var(--t-medio) var(--mov);
}
.campo input:focus, .campo textarea:focus { box-shadow: 0 0 0 3px rgba(201, 111, 46, .18); }
.estrelas-input button { transition: color var(--t-rapido) var(--mov), transform var(--t-medio) var(--mov); }
.criterio summary, .publicos-lista label { transition: background-color var(--t-rapido) var(--mov); }

/* ---------- Aviso (toast): sobe e desce ---------- */
.toast {
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity var(--t-medio) var(--mov), transform var(--t-medio) var(--mov);
  pointer-events: none;
}
.toast.mostrar { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Quem pediu menos movimento no sistema operacional ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog, dialog::backdrop {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .carrossel-trilha { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Convites */
.convite-resultado { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--laranja); border-radius: 10px; background: var(--preto); }
.convite-resultado p { margin: 0; font-size: 14px; }
.convite-link { display: flex; gap: 8px; }
.convite-link input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--preto-2); color: var(--texto); font: inherit; font-size: 13px; font-family: Consolas, monospace;
}
#dialogo-lote { width: min(900px, calc(100vw - 32px)); }
.lote-colunas th, .lote-colunas td, .lote-previa-rolagem .tabela th, .lote-previa-rolagem .tabela td { padding: 8px 12px; }
.lote-previa-rolagem { max-height: 260px; overflow: auto; }
.lote-ok { color: #4cc38a; white-space: nowrap; }
.lote-falha { color: var(--erro); }
.acoes-topo { display: flex; flex-wrap: wrap; gap: 8px; }
.lote-erros {
  margin: 0 0 8px; padding: 10px 12px 10px 28px; max-height: 160px; overflow: auto; font-size: 13px;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--preto-2); color: var(--texto);
}
.convite-links {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; resize: vertical;
  background: var(--preto-2); color: var(--texto); font-size: 13px; font-family: Consolas, monospace;
}
.situacao.pendente { background: rgba(201, 111, 46, .15); color: var(--laranja-claro, var(--laranja)); }
.situacao.usado { background: rgba(76, 195, 138, .14); color: #4cc38a; }
.situacao.expirado, .situacao.revogado { background: var(--preto-3); color: var(--texto-2); }
.campo select {
  background: var(--preto); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 14px;
}

/* =====================================================================
   Refino visual — vitrine quente: preto com tom de brasa, laranja só como sinal
   ===================================================================== */

body {
  background:
    radial-gradient(900px 420px at 18% -80px, rgba(255, 110, 0, .13), transparent 70%),
    radial-gradient(700px 360px at 95% 120px, rgba(255, 154, 77, .06), transparent 70%),
    var(--preto);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { letter-spacing: -.01em; }
::selection { background: var(--laranja); color: var(--preto); }

/* Topo: vidro escuro e um fio de brasa no lugar da faixa grossa */
.topo {
  padding: 10px 28px;
  background: rgba(13, 12, 11, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--borda);
}
.topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--laranja-logo), rgba(255, 110, 0, 0) 55%);
  pointer-events: none;
}
.logo-img { height: 54px; }
@media (max-width: 600px) { .topo { padding: 8px 16px; } .logo-img { height: 46px; } }

/* Botões */
.btn { border-radius: 999px; padding: 10px 20px; letter-spacing: .005em; }
.btn-pri { background: var(--laranja); color: #1a0d02; }
.btn-pri:hover { background: var(--laranja-claro); }
.btn-sec { background: rgba(255, 255, 255, .03); }
.btn-sec:hover { background: rgba(255, 122, 26, .08); }
.btn-menu { border-radius: 12px; }
.card-acoes .btn, .acoes-linha .btn { padding: 7px 14px; }

/* Busca e filtros */
main { padding: 36px 28px 56px; }
.titulo-secao {
  margin: 0 0 18px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700;
  text-transform: none; letter-spacing: -.025em; line-height: 1.1;
}
.configuracoes .titulo-secao { font-size: 30px; }
.barra { gap: 12px; margin-bottom: 28px; }
.barra input, .barra select, .publicos-barra input[type="search"] {
  background: var(--preto-2); border-radius: 999px; padding: 13px 20px; font-size: 15px;
  border-color: var(--borda);
}
.barra select { padding-right: 16px; }
.barra input:focus, .barra select:focus {
  border-color: var(--laranja); box-shadow: 0 0 0 4px rgba(255, 122, 26, .16);
}
.contador { margin-left: auto; font-variant-numeric: tabular-nums; }
.filtro-favoritos { border-radius: 999px; padding: 12px 18px; background: var(--preto-2); }
.chip { border-radius: 999px; padding: 7px 16px; background: transparent; }
.chip:hover { background: rgba(255, 122, 26, .08); }
.chip[aria-pressed="true"] { color: #1a0d02; }

/* Destaques */
.destaques { padding-top: 32px; }
.rotulo-destaques {
  margin-bottom: 14px; color: var(--texto); font-size: 20px; font-weight: 700;
  text-transform: none; letter-spacing: -.01em;
}
.destaque { width: 280px; gap: 10px; }
.destaque-capa { border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.destaque-nome { font-size: 15px; color: var(--texto); }
@media (max-width: 600px) { .destaque { width: 210px; } }

/* Cards: a capa manda, o texto fica quieto */
.grade { gap: 22px; }
.card {
  background: var(--preto-2); border-color: transparent; border-radius: var(--raio);
  box-shadow: 0 0 0 1px var(--borda), 0 8px 24px rgba(0, 0, 0, .3);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255, 122, 26, .55), 0 18px 36px rgba(0, 0, 0, .5), 0 0 40px -12px rgba(255, 110, 0, .35);
}
.card-capa, .destaque-capa, .detalhes-capa, .pp-capa {
  background:
    radial-gradient(120% 120% at 20% 0%, #3a2312, transparent 60%),
    linear-gradient(135deg, var(--preto-3), #20140b);
}
.card-capa::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none;
  background: linear-gradient(transparent, rgba(23, 21, 19, .85));
}
.card-favorito { z-index: 2; backdrop-filter: blur(6px); }
.card-corpo { padding: 14px 18px 18px; gap: 7px; }
.card h3 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.card-criador { font-size: 13px; }
.tag-area {
  padding: 2px 10px; border-radius: 999px; background: rgba(255, 122, 26, .12);
  color: var(--laranja-claro); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.card-comentario { font-style: normal; line-height: 1.45; }

/* Seções da lista */
.secao-ferramentas + .secao-ferramentas { margin-top: 48px; }
.subtitulo-secao {
  padding-left: 0; border-left: 0; margin-bottom: 16px; font-size: 20px; letter-spacing: -.015em;
  display: flex; align-items: baseline; gap: 10px;
}
.subtitulo-secao::before {
  content: ""; align-self: center; width: 10px; height: 10px; border-radius: 50%;
  background: var(--laranja); box-shadow: 0 0 14px rgba(255, 110, 0, .7);
}

/* Paginação */
.pagina { border-radius: 999px; background: transparent; }
.pagina.atual { color: #1a0d02; }

/* Janelas */
dialog {
  border-radius: 22px; border-color: var(--borda);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 122, 26, .12);
}
dialog::backdrop { background: rgba(8, 7, 6, .72); }
dialog > form { padding: 28px; gap: 18px; }
dialog > form h2 { color: var(--texto); font-size: 24px; letter-spacing: -.02em; }
.detalhes-corpo { padding: 24px 28px 28px; }
.detalhes-corpo h2 { font-size: 28px; letter-spacing: -.025em; line-height: 1.15; }
.detalhes-avaliar { border-radius: 14px; }
.btn-acessar { border-radius: 999px; padding: 14px 20px; }
.fechar { background: rgba(13, 12, 11, .75); backdrop-filter: blur(6px); }
.campo input, .campo textarea, .campo select { border-radius: 12px; }
.campo input:focus, .campo textarea:focus { box-shadow: 0 0 0 4px rgba(255, 122, 26, .16); }
.capa-drop { border-radius: 14px; }
.capa-drop:hover, .capa-drop.arrastando { background: rgba(255, 122, 26, .06); }

/* Menu lateral */
dialog.menu-lateral { border-radius: 0 22px 22px 0; border-right: 1px solid var(--borda); }
.menu-avatar { color: #1a0d02; }
.menu-item { border-radius: 12px; }
.menu-item:hover, .menu-item:focus-visible { background: rgba(255, 122, 26, .09); }

/* Configurações */
.configuracoes { padding: 36px 28px 56px; }
.abas { gap: 8px; border-bottom: 0; padding: 4px; background: var(--preto-2); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; }
.aba { margin: 0; border: 0; border-radius: 999px; padding: 9px 18px; }
.aba[aria-selected="true"] { background: var(--laranja); color: #1a0d02; }
.tabela thead th { text-transform: none; letter-spacing: 0; font-size: 13px; }
.tabela tbody tr:hover { background: rgba(255, 255, 255, .02); }
.editor-bloco h3 { text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--texto); }
.pp-sobretitulo { text-transform: none; letter-spacing: 0; font-size: 12px; }
.pp-tile-valor { letter-spacing: -.02em; }
.situacao { padding: 3px 10px; }

/* Aviso */
.toast { border-radius: 999px; padding: 12px 22px; color: #1a0d02; }

/* Fundos que ainda usavam o laranja antigo */
.situacao.ativa, .situacao.pendente, .chip-grupo.cheio { background: rgba(255, 122, 26, .15); }

@media (max-width: 600px) {
  main, .configuracoes { padding: 24px 16px 40px; }
  dialog > form { padding: 20px; }
  .detalhes-corpo { padding: 18px 18px 22px; }
  .contador { margin-left: 0; width: 100%; }
}