/*
 * Rottads · Gerenciador Meta no mesmo desenho do resto da plataforma (01/11/2026).
 * Somente apresentação: abas iguais às de Pedidos, filtros, formulário de regras, painel e relatórios.
 * Carregado por último; remover o <link> volta estes detalhes ao visual anterior.
 */

/* ---------------------------------------------------------------- abas (mesmas medidas de Pedidos) */
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasMenu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--ta-line); border-radius: 18px;
  padding: 18px 20px; margin: 0 0 18px;
}
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasMenu .roas-menu-item {
  display: inline-flex; align-items: center; gap: 8px; min-height: 41px; padding: 9px 18px;
  border: 1px solid #cfdcd6; border-radius: 999px; background: var(--surface); color: var(--ta-ink2);
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasMenu .roas-menu-item:hover:not(.ativa):not(.em-breve) { border-color: #9fcdb9; background: #f6fbf8; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasMenu .roas-menu-item:active:not(.em-breve) { transform: scale(.97); }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasMenu .roas-menu-item.ativa { background: var(--v2-teal); border-color: var(--v2-teal); color: #fff; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasMenu .roas-menu-item.em-breve { color: var(--ta-mut); cursor: not-allowed; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasMenu .selo-em-breve {
  padding: 3px 8px; border-radius: 999px; background: var(--v2-acs); color: var(--v2-ac);
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}

/* A aba marcada já diz o nome da parte: o título repetido sai só da vista. */
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasRelatorios > h2,
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasPublicos > h2,
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasCompartilhar > h2,
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas > h2#contasAnuncio,
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas .dlg-automacao-topo { display: none; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas :is(#roasRelatorios, #roasPublicos) h3 {
  font-family: 'Outfit', 'Nunito Sans', sans-serif; font-weight: 700; color: var(--ta-ink); text-transform: none; letter-spacing: normal;
}

/* ---------------------------------------------------------------- filtros em cima, ações embaixo */
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas .roas-quebra { flex: 0 0 100%; height: 0; margin-top: -12px; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas > .row > .pill.spacer { margin-left: auto; align-self: center; }
/* Relatórios não usam a situação, as colunas nem a exportação da tabela, que fica escondida nesta vista. */
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas[data-vista="relatorios"] > .row > :is(#roasSituacao, .act[onclick^="abrirColunasAds"], .act[onclick^="exportarAds"]) { display: none; }

/* ---------------------------------------------------------------- automação: formulário e lista de regras */
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #dlgAutomacaoAds > .bloco-dobra {
  background: var(--surface); border: 1px solid var(--ta-line); border-radius: 18px; box-shadow: none; overflow: visible; padding: 0;
}
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #dlgAutomacaoAds .dobra-corpo { display: grid; gap: 18px; padding: 22px; border-top: 0; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #dlgAutomacaoAds .dobra-corpo > .note {
  background: #e9f1ed; border: 1px solid #dbe8e1; border-radius: 14px; padding: 14px 18px; font-size: 14px; line-height: 1.6; margin: 0;
}
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #formAutomacaoAds { display: grid; gap: 16px; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #formAutomacaoAds .grupo-campos {
  border: 1px solid var(--ta-line); border-radius: 16px; padding: 18px 20px 20px; margin: 0; background: var(--surface); min-width: 0;
}
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #formAutomacaoAds .grupo-campos legend {
  font-family: 'Outfit', 'Nunito Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--ta-ink);
  padding: 0 8px; text-transform: none; letter-spacing: normal;
}
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #formAutomacaoAds label { font-size: 13.5px; font-weight: 800; color: var(--ta-ink); }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #formAutomacaoAds label.inline { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #formAutomacaoAds .linha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #formAutomacaoAds .linha-acoes .spacer { flex: 1 1 auto; }

html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) :is(#formAutomacaoAds, #painelEditarAds) :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: 46px; height: 46px; border-radius: 12px; border: 1px solid #c6d6cf; background-color: var(--surface);
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14.5px; font-weight: 600; color: var(--ta-ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) :is(#formAutomacaoAds, #painelEditarAds) :is(input:not([type="checkbox"]):not([type="radio"]), select):hover:not(:disabled) { border-color: var(--ta-ac); }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) :is(#formAutomacaoAds, #painelEditarAds) :is(input:not([type="checkbox"]):not([type="radio"]), select):focus-visible { outline: none; border-color: var(--ta-ac); box-shadow: var(--ta-ring); }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) :is(#formAutomacaoAds, #painelEditarAds) select {
  -webkit-appearance: none; appearance: none; padding: 0 42px 0 16px; cursor: pointer;
  background-repeat: no-repeat; background-size: 15px; background-position: right 15px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b65' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) :is(#formAutomacaoAds, #painelEditarAds) .act:not(.mini) { min-height: 46px; padding: 0 20px; border-radius: 12px; font-size: 14.5px; font-weight: 700; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) :is(#formAutomacaoAds, #painelEditarAds) .act.primary { background: var(--ta-grad); border-color: var(--ta-ac2); color: #fff; }

/* Uma regra: nome e ações em cima, a explicação inteira embaixo, sem quebrar botão. */
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #listaAutomacaoAds .painel-fonte {
  background: var(--surface); border: 1px solid var(--ta-line); border-radius: 14px; padding: 12px 16px; box-shadow: none; margin: 0 0 8px;
}
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #listaAutomacaoAds .row { flex-wrap: wrap; align-items: center; gap: 8px 10px; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #listaAutomacaoAds .row > .spacer { order: 5; flex: 0 0 100%; margin: 0; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #listaAutomacaoAds .row > button:first-of-type { margin-left: auto; }

/* Uma conta: identificação em cima, botões embaixo. */
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #listaContasAds .row { flex-wrap: wrap; align-items: center; gap: 10px; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #listaContasAds .row > .spacer { margin-left: auto; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #listaContasAds .roas-quebra { margin-top: -10px; }

/* ---------------------------------------------------------------- painel lateral de edição */
html body.rottads-interface #painelEditarAds { animation: none; }
html body.rottads-interface #painelEditarAds .pea-fundo { z-index: var(--z-drawer); }
html body.rottads-interface #painelEditarAds .pea-caixa { z-index: var(--z-modal); }
html body.rottads-interface #painelEditarAds #peaTitulo { font-family: 'Outfit', 'Nunito Sans', sans-serif; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- relatórios */
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roasRelatorios .rel-card { border-color: var(--ta-line); border-radius: 18px; padding: 18px 20px; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roasRelatorios .rel-card strong { font-family: 'Outfit', 'Nunito Sans', sans-serif; font-size: 24px; font-weight: 800; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roasRelatorios :is(.rel-compara, .rel-tabela-wrap, .rel-barras) { border-color: var(--ta-line); border-radius: 18px; }
html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roasRelatorios .rel-tabela th { background: var(--bg); color: var(--ta-mut); }

/* ---------------------------------------------------------------- celular */
@media (max-width: 760px) {
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasMenu { gap: 8px; padding: 14px; }
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #roasMenu .roas-menu-item { padding: 8px 14px; }
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas > .row > .pill.spacer { margin-left: 0; }
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas > .row > .act { flex: 1 1 calc(50% - 6px); width: auto; min-width: 0; padding-left: 10px; padding-right: 10px; }
  /* O nome fixo não pode ocupar a tela do celular: sobra lugar para os números correrem ao lado. */
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #tabelaRoas :is(th, td).col-nome { min-width: 196px !important; max-width: 196px !important; }
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #roas #tabelaRoas td.col-nome .act { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #dlgAutomacaoAds .dobra-corpo { padding: 14px; }
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #formAutomacaoAds .grupo-campos { padding: 14px; }
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #listaAutomacaoAds .row > button:first-of-type { margin-left: 0; }
  html body.rottads-interface:has(#inicio[hidden]):not(.ta-1):not(.ta-2) #listaContasAds .row > .spacer { margin-left: 0; }
}