/* ═══════════════════════════════════════════════════════════════════════════
   PAINEL /adminhostcel — nas cores da marca do provedor.
   #000088 e #00005c são trocadas na geração do site.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --cor: #000088;
  --cor-escura: #00005c;
  --fundo: #f1f5f9;
  --painel: #ffffff;
  --borda: #e2e8f0;
  --texto: #1e293b;
  --texto-suave: #64748b;
  --texto-fraco: #94a3b8;
  --raio: 12px;
  --barra: 268px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* O display:flex das faixas de aviso vence o [hidden] do navegador.
   Sem esta linha os avisos aparecem sempre, mesmo escondidos por JS. */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  background: var(--fundo);
  color: var(--texto);
  -webkit-text-size-adjust: 100%;
}

/* ─── LOGIN ─────────────────────────────────────────────────────────────── */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
  background: linear-gradient(140deg, var(--cor-escura), #0f172a 70%);
}
.login-card {
  background: #fff; border-radius: 20px; padding: 38px 34px;
  width: 100%; max-width: 390px; box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.login-logo { font-size: 21px; font-weight: 700; color: var(--cor); text-align: center; }
.login-sub { font-size: 13px; color: var(--texto-fraco); text-align: center; margin: 5px 0 24px; }
.login-card input[type=password] {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--borda);
  border-radius: 11px; font-size: 16px; outline: none; transition: border-color .2s;
}
.login-card input[type=password]:focus { border-color: var(--cor); }
.login-card input[type=password]:disabled { background: #f8fafc; color: var(--texto-fraco); }
.login-card button {
  width: 100%; margin-top: 14px; padding: 14px; background: var(--cor); color: #fff;
  border: 0; border-radius: 11px; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .2s;
}
.login-card button:hover:not(:disabled) { background: var(--cor-escura); }
.login-card button:disabled { opacity: .5; cursor: not-allowed; }
.login-rodape { margin-top: 22px; text-align: center; font-size: 12px; color: var(--texto-fraco); }
.login-rodape a { color: var(--cor); text-decoration: none; font-weight: 600; }
.erro {
  background: #fee2e2; color: #b91c1c; padding: 11px 14px;
  border-radius: 9px; margin-bottom: 16px; font-size: 13px;
}

/* ─── ESTRUTURA ─────────────────────────────────────────────────────────── */
.admin-body { min-height: 100vh; }

.topo {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; height: 62px; padding: 0 18px;
  background: #fff; border-bottom: 1px solid var(--borda);
}
.topo-marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
.topo-marca img { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; }
.topo-nome { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.topo-nome strong { font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-nome span { font-size: 11.5px; color: var(--texto-fraco); }

.topo-acoes { display: flex; align-items: center; gap: 9px; }
.status { font-size: 13px; font-weight: 500; color: #16a34a; }
.status.erro { color: #dc2626; }

#btn-salvar {
  background: var(--cor); color: #fff; border: 0; padding: 11px 20px;
  border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .2s; min-height: 44px; white-space: nowrap;
}
#btn-salvar:hover:not(:disabled) { background: var(--cor-escura); }
#btn-salvar:disabled { opacity: .6; cursor: wait; }
#btn-salvar.pulsando { animation: pulsa 2s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 6px rgba(0,0,0,.06); } }

.btn-linha {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--fundo); color: var(--texto-suave); border: 1px solid var(--borda);
  padding: 10px 15px; border-radius: 10px; font-size: 13px; text-decoration: none;
  transition: background .2s; min-height: 44px;
}
.btn-linha:hover { background: var(--borda); }

#btn-menu {
  display: none; background: none; border: 0; font-size: 22px;
  cursor: pointer; color: var(--texto); padding: 6px 10px;
}

.corpo { display: flex; align-items: flex-start; }

/* ─── MENU LATERAL ──────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 62px; width: var(--barra); flex-shrink: 0;
  height: calc(100vh - 62px); overflow-y: auto;
  background: #fff; border-right: 1px solid var(--borda); padding: 16px 12px 30px;
}
.barra-titulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-fraco); padding: 8px 12px 10px;
}
#menu { display: flex; flex-direction: column; gap: 2px; }
.menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border: 0; background: none; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--texto-suave);
  text-align: left; cursor: pointer; transition: background .15s, color .15s;
}
.menu-item:hover { background: var(--fundo); color: var(--texto); }
.menu-item.ativo { background: color-mix(in srgb, var(--cor) 12%, transparent); color: var(--cor-escura); font-weight: 600; }
.menu-icone { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }

/* ─── CONTEÚDO ──────────────────────────────────────────────────────────── */
#conteudo { flex: 1; min-width: 0; padding: 26px 26px 80px; }
#conteudo > * { max-width: 760px; margin-inline: auto; }

.secao-cabecalho { margin-bottom: 22px; }
.secao-cabecalho h1 { font-size: 21px; font-weight: 700; color: #0f172a; }
.secao-cabecalho p { margin-top: 7px; font-size: 13.5px; line-height: 1.6; color: var(--texto-suave); }
.secao-aviso {
  margin-top: 12px !important; background: #fffbeb; border: 1px solid #fde68a;
  color: #92400e !important; padding: 11px 14px; border-radius: 10px; font-size: 13px !important;
}

.faixa-aviso {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  font-size: 13px; line-height: 1.5;
}
.faixa-sujo { background: #eff6ff; color: #1e40af; border-bottom: 1px solid #bfdbfe; }

.form { display: flex; flex-direction: column; gap: 18px; }

/* ─── CAMPOS ────────────────────────────────────────────────────────────── */
.campo { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 15px 16px; }
.campo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.campo-label { display: block; font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 7px; }
.campo-topo .campo-label { margin-bottom: 0; }
.campo-topo + .entrada { margin-top: 7px; }
.campo-ajuda { margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--texto-fraco); }
.contador { font-size: 11.5px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.contador.estourou { color: #dc2626; font-weight: 700; }

.entrada {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--borda); border-radius: 9px;
  font-size: 14.5px; font-family: inherit; color: var(--texto); background: #fcfcfd;
  outline: none; transition: border-color .15s, background .15s;
}
.entrada:focus { border-color: var(--cor); background: #fff; }
textarea.entrada { min-height: 84px; resize: vertical; line-height: 1.55; }
select.entrada { cursor: pointer; }

.linha-cor { display: flex; gap: 9px; align-items: center; }
.entrada-cor {
  width: 46px; height: 44px; padding: 3px; border: 1.5px solid var(--borda);
  border-radius: 9px; background: #fff; cursor: pointer; flex-shrink: 0;
}

/* switch */
.campo-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.campo-lado { min-width: 0; }
.campo-lado .campo-label { margin-bottom: 0; }
.switch {
  position: relative; width: 48px; height: 28px; flex-shrink: 0;
  border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer;
  transition: background .2s;
}
.switch.on { background: var(--cor); }
.switch-bolinha {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch.on .switch-bolinha { transform: translateX(20px); }

/* ─── LISTAS ────────────────────────────────────────────────────────────── */
.lista-texto { display: flex; flex-direction: column; gap: 8px; }
.linha-item { display: flex; gap: 8px; align-items: center; }

.lista-obj { display: flex; flex-direction: column; gap: 9px; }
.item { border: 1px solid var(--borda); border-radius: 11px; overflow: hidden; background: #fcfcfd; }
.item-linha { display: flex; align-items: stretch; gap: 4px; padding-right: 8px; }
.item-cabecalho {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 13px 14px; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--texto); text-align: left;
}
.item-seta { color: var(--texto-fraco); transition: transform .2s; font-size: 17px; line-height: 1; }
.item-cabecalho.aberto .item-seta { transform: rotate(90deg); }
.item-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-acoes { display: flex; align-items: center; gap: 3px; }
.item-corpo {
  display: flex; flex-direction: column; gap: 13px;
  padding: 4px 14px 16px; border-top: 1px solid var(--borda); background: #fff;
}
.item-corpo .campo { border: 0; padding: 0; background: none; }

.btn-icone {
  width: 34px; height: 34px; border: 1px solid var(--borda); border-radius: 8px;
  background: #fff; color: var(--texto-suave); cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.btn-icone:hover { background: var(--fundo); color: var(--texto); }
.btn-icone.perigo:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

.btn-add {
  width: 100%; padding: 11px; border: 1.5px dashed var(--borda); border-radius: 10px;
  background: #fff; color: var(--cor); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.btn-add:hover { background: var(--fundo); border-color: var(--cor); }

.erro-caixa {
  background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca;
  padding: 18px; border-radius: var(--raio); font-size: 14px;
}

:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; border-radius: 6px; }

/* ─── CELULAR ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #btn-menu { display: block; }
  .barra {
    position: fixed; top: 62px; left: 0; z-index: 35;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 12px 40px rgba(0,0,0,.18); width: min(84vw, var(--barra));
  }
  .menu-aberto .barra { transform: translateX(0); }
  .menu-aberto::after {
    content: ""; position: fixed; inset: 62px 0 0; background: rgba(15,23,42,.45); z-index: 30;
  }
  #conteudo { padding: 20px 16px 90px; }
  .topo { padding: 0 12px; }
  .topo-nome span { display: none; }
  .btn-linha span { display: none; }
}

/* ─── campo tipo "imagem" — upload com miniatura ───────────────────────────
   O provedor troca o print do app pelo painel, sem republicar o site. */
.campo-imagem {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 8px;
}
.previa-caixa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  min-height: 120px;
  padding: 6px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  flex: 0 0 auto;
}
.previa-img { max-width: 100%; max-height: 160px; border-radius: 6px; display: block; }
.previa-vazia { font-size: 11px; color: #94a3b8; text-align: center; line-height: 1.35; }
.campo-imagem-acoes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.btn-texto {
  background: none;
  border: 0;
  padding: 4px 2px;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  text-decoration: underline;
}
.btn-texto:hover { color: #0f172a; }

/* ═══ TABELA DE APPS (SVAs) ═══════════════════════════════════════════════
   Substitui 46 sanfonas fechadas. Preço é o dado que mais muda num provedor:
   tem que estar visível e editável na mesma tela, sem abrir nada.
   Uma linha por app; no celular a linha vira um cartão de duas faixas. */
.svas-resumo {
  margin: 2px 0 12px;
  font-size: 12.5px;
  color: var(--texto-suave);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.svas-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--borda);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--texto-suave);
}
.svas-tag.on { background: color-mix(in srgb, var(--cor) 14%, transparent); color: var(--cor); }
.svas-tag.alerta { background: #fef3c7; color: #92400e; }

.svas-barra { margin-bottom: 8px; }
.svas-busca { max-width: 320px; }

.svas-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.svas-chip {
  padding: 5px 11px;
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.svas-chip:hover { border-color: var(--cor); }
.svas-chip.on { border-color: var(--cor); background: var(--cor); color: #fff; }

/* A seção do catálogo estoura os 760px do #conteudo: 8 colunas não cabem, e a
   última a cair fora era o remover — o botão existia e não dava para clicar. */
#conteudo > .form-largo { max-width: 1120px; }

.svas-tabela-wrap {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--painel);
  /* rede de segurança em tela estreita: rola na horizontal em vez de cortar */
  overflow-x: auto;
}

/* As colunas: switch · logo · nome · nível · 2 preços · economia · remover.
   Nome e nível são os elásticos; os preços têm largura fixa porque número
   pulando de largura entre as linhas atrapalha a conferência de cima a baixo. */
.svas-cabecalho, .svas-linha {
  display: grid;
  grid-template-columns: 52px 44px minmax(150px, 1.7fr) minmax(124px, 1fr) 118px 118px 96px 38px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-width: 780px;   /* abaixo disso a linha rola em vez de esmagar as colunas */
}
.svas-cabecalho {
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  position: sticky; top: 0; z-index: 1;
}
/* Dentro de um plano entra a coluna "Neste plano" na frente das outras oito. */
.svas-tabela-wrap.com-plano .svas-cabecalho,
.svas-tabela-wrap.com-plano .svas-linha {
  grid-template-columns: 76px 52px 44px minmax(140px, 1.6fr) minmax(112px, 1fr) 114px 114px 92px 38px;
  min-width: 840px;
}

.svas-linha { border-bottom: 1px solid var(--borda); }
.svas-linha:last-child { border-bottom: 0; }
.svas-linha:hover { background: color-mix(in srgb, var(--cor) 4%, transparent); }
/* app que ESTE plano oferece: faixa na marca, para achar de relance na lista */
.svas-linha.marcada { background: color-mix(in srgb, var(--cor) 7%, transparent); }
.svas-linha.marcada:hover { background: color-mix(in srgb, var(--cor) 11%, transparent); }

.svas-marca {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 2px solid var(--borda);
  border-radius: 8px;
  background: var(--painel);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.svas-marca:hover { border-color: var(--cor); }
.svas-marca .svas-marca-check { font-size: 14px; font-weight: 800; color: transparent; line-height: 1; }
.svas-marca.on { background: var(--cor); border-color: var(--cor); }
.svas-marca.on .svas-marca-check { color: #fff; }
.svas-cel-marca { justify-content: center; }
/* app desligado continua legível — some do site, não da tela de quem edita */
.svas-linha.desligada { background: color-mix(in srgb, var(--texto-fraco) 7%, transparent); }
.svas-linha.desligada .svas-cel-logo,
.svas-linha.desligada .svas-cel-nome { opacity: .55; }

.svas-cel { min-width: 0; display: flex; align-items: center; gap: 5px; }
.svas-cel-eco { justify-content: flex-end; }
.svas-cel-acao { justify-content: center; }

.svas-logo {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 3px;
  border: 1.5px dashed transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
.svas-logo:hover { border-color: var(--cor); }
.svas-logo.enviando { opacity: .4; }
.svas-logo img { width: 100%; height: 100%; object-fit: contain; }
.svas-sem-logo {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--borda);
  color: var(--texto-fraco);
  font-weight: 700;
}

/* Os campos da tabela são mais baixos que os do formulário: numa lista de 46
   linhas, a altura de campo normal empurra metade do catálogo para fora da tela. */
.svas-linha .entrada { padding: 6px 8px; font-size: 13px; border-radius: 8px; }
.svas-nome { font-weight: 600; }
.svas-preco { text-align: right; font-variant-numeric: tabular-nums; }
.svas-prefixo { font-size: 11px; font-weight: 700; color: var(--texto-fraco); }

.svas-eco {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
.svas-eco.boa { color: #15803d; }

.svas-vazio { padding: 22px 14px; text-align: center; color: var(--texto-suave); font-size: 13px; }
.svas-rodape { margin-top: 10px; }

/* No celular a grade de 8 colunas não cabe: a linha vira um cartão com o app
   em cima e os dois preços embaixo, lado a lado. */
@media (max-width: 760px) {
  .svas-cabecalho { display: none; }
  .svas-tabela-wrap { overflow-x: visible; }
  .svas-linha {
    min-width: 0;   /* derruba o piso de 780px: no cartão as colunas empilham */
    grid-template-columns: 52px 44px 1fr 40px;
    grid-template-areas:
      "sw logo nome acao"
      "cat cat cat cat"
      "p1 p1 p2 p2"
      "eco eco eco eco";
    row-gap: 7px;
    padding: 12px 10px;
  }
  .svas-cel-switch { grid-area: sw; }
  .svas-cel-logo   { grid-area: logo; }
  .svas-cel-nome   { grid-area: nome; }
  .svas-cel-acao   { grid-area: acao; }
  .svas-cel-cat    { grid-area: cat; }
  .svas-cel-p1     { grid-area: p1; }
  .svas-cel-p2     { grid-area: p2; }
  .svas-cel-eco    { grid-area: eco; justify-content: flex-start; }

  /* ⚠️ No celular a tabela dentro de um plano fica no fundo de cinco caixas
     aninhadas (main → campo → item-corpo → campo → galeria-painel), e só de
     padding elas comiam 136px dos 394px da tela: a coluna do NOME sobrava com
     45px. Aqui as caixas dessa cadeia afinam para devolver a largura ao nome. */
  .campo-apps-plano { padding-left: 6px; padding-right: 6px; }
  .campo-apps-plano .galeria-painel { padding: 8px 5px; }
  .campo-apps-plano .svas-linha { padding-left: 7px; padding-right: 7px; }

  /* ⚠️ Dentro de um plano o NOME fica em linha própria. Dividindo a primeira
     faixa com marca + switch + logo + remover, sobravam 75px para ele: dava
     para ler "HBO Max" e não "SKY+ Light com canal Globo", que é justamente o
     nome que o dono precisa conferir antes de marcar. Os controles ficam numa
     faixa e o nome na seguinte, inteiro. */
  .svas-tabela-wrap.com-plano .svas-linha {
    min-width: 0;
    grid-template-columns: 32px 44px 38px 1fr 34px;
    grid-template-areas:
      "marca sw   logo .    acao"
      "nome  nome nome nome nome"
      "cat   cat  cat  cat  cat"
      "p1    p1   p1   p2   p2"
      "eco   eco  eco  eco  eco";
  }
  .svas-cel-marca  { grid-area: marca; }
  /* sem cabeçalho de coluna, cada preço precisa dizer o que é.
     ⚠️ O rótulo vai em LINHA PRÓPRIA (flex-basis 100%). Ao lado do campo ele
     comia a largura e o valor aparecia cortado — "34," no lugar de "34,90". */
  .svas-cel-preco { flex-wrap: wrap; }
  .svas-cel-preco::before {
    flex: 0 0 100%;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: var(--texto-fraco); white-space: nowrap;
  }
  .svas-cel-preco .svas-preco { flex: 1; min-width: 0; }
  .svas-cel-p1::before { content: "Original"; }
  .svas-cel-p2::before { content: "No plano"; }
  .svas-cel-eco::before {
    content: "Economia:";
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: var(--texto-fraco);
  }
}

/* ── galeria de apps (escolher os SVAs de um plano clicando) ──────────────
   Substitui a lista onde o dono digitava o nome do app. Digitar não
   funcionava: o nome tinha que bater caractere por caractere com o cadastro,
   e um acento a mais fazia o app sumir do site sem erro nenhum na tela.
   ⚠️ Nasce FECHADA: 46 apps × 9 planos abertos viravam uma parede de 414
   ícones e o campo de preço do plano se perdia no meio. */
.galeria-resumo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--painel);
}
.galeria-tiras { display: flex; align-items: center; gap: 4px; }
.galeria-tira {
  width: 26px; height: 26px;
  object-fit: contain;
  border-radius: 7px;
  background: var(--fundo);
}
.galeria-tira-txt {
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  color: var(--texto-suave);
}
.galeria-contador { flex: 1; font-size: 12.5px; color: var(--texto-suave); }
.galeria-abrir {
  padding: 6px 13px;
  border: 1.5px solid var(--cor);
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cor);
  cursor: pointer;
}
.galeria-abrir:hover { background: color-mix(in srgb, var(--cor) 10%, transparent); }
.galeria-abrir.aberto { background: var(--cor); color: #fff; }
.galeria-painel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
}
/* app marcado no plano mas desligado no catálogo: não vai ao ar, e a miniatura
   precisa dizer isso sem depender de o dono passar o mouse em cima */
.galeria-tira.oculta { opacity: .35; filter: grayscale(1); }
.galeria-aviso {
  margin-top: 8px;
  padding: 8px 11px;
  border: 1px solid #fde68a;
  border-radius: 9px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12.5px;
  font-weight: 600;
}

/* A tabela dentro do plano não repete a moldura branca do .campo */
.svas-bloco { min-width: 0; }
.svas-bloco .svas-resumo { margin-top: 0; }

.galeria-titulo {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.galeria-svas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.galeria-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1.5px solid var(--borda);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.galeria-item:hover { border-color: var(--cor); }
.galeria-item:active { transform: scale(0.97); }
.galeria-item.on {
  border-color: var(--cor);
  background: color-mix(in srgb, var(--cor) 14%, transparent);
}
.galeria-item img,
.galeria-vazio {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 9px;
}
.galeria-vazio { background: var(--borda); }
.galeria-nome {
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--texto);
  /* nome longo ("SKY+ Light com canal Globo") quebra em duas linhas e para */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.galeria-item.on .galeria-nome { font-weight: 700; }

/* botão discreto, usado no bloco de credenciais */
.btn-sutil {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}