/* Painel da Pauta Automática — pensado primeiro para o celular. */

:root {
  --fundo: #f4f5f7;
  --cartao: #ffffff;
  --texto: #1d2330;
  --suave: #5b6475;
  --borda: #d9dde5;
  --acento: #1f4fd1;
  --acento-texto: #ffffff;
  --ok-fundo: #e6f4ea;
  --ok-texto: #1e6b34;
  --erro-fundo: #fdecea;
  --erro-texto: #a1251b;
  --raio: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14171c;
    --cartao: #1d2128;
    --texto: #e8eaee;
    --suave: #a3abb9;
    --borda: #323844;
    --acento: #7397ff;
    --acento-texto: #0d1220;
    --ok-fundo: #183224;
    --ok-texto: #8fd6a5;
    --erro-fundo: #3a1d1b;
    --erro-texto: #f3a39b;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
}

main { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* Topo fixo com o nome do portal e as abas */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cartao);
  border-bottom: 1px solid var(--borda);
  padding: 8px 16px 0;
}
.topo-linha, .seletor-cliente, .abas { max-width: 1100px; margin: 0 auto; }
.topo-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.topo-linha form { margin: 0; }
.marca { font-size: 1.05rem; }
.seletor-cliente { margin-top: 6px; }
.seletor-cliente label { margin: 0; }
.abas { display: flex; gap: 4px; margin-top: 4px; overflow-x: auto; }
.abas a {
  padding: 10px 14px;
  color: var(--suave);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.abas a[aria-current="page"] { color: var(--texto); border-color: var(--acento); font-weight: 600; }

h1 { font-size: 1.3rem; margin: 0 0 8px; }
h2 { font-size: 1rem; margin: 24px 0 8px; color: var(--suave); font-weight: 600; }

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
}
.dica { color: var(--suave); margin: 0 0 12px; font-size: .95rem; }
.vazio { color: var(--suave); }

/* Formulários: campos largos e alvos de toque de pelo menos 44px */
label { display: block; margin-bottom: 12px; font-weight: 600; font-size: .9rem; }
label small { font-weight: 400; color: var(--suave); }
input, textarea, select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 400;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
}
textarea { resize: vertical; }
input[type="file"] { padding: 8px; }

.botao {
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--cartao);
  color: var(--texto);
  cursor: pointer;
}
.botao.principal { width: 100%; background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.botao.perigo { color: var(--erro-texto); }
.link { background: none; border: none; color: var(--acento); font: inherit; cursor: pointer; padding: 10px 4px; }
.htmx-request .botao.principal { opacity: .6; }

.aviso { padding: 10px 12px; border-radius: 8px; margin: 0 0 12px; }
.aviso-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro-texto); }

/* Grade de imagens: 1 coluna no celular, 2 no tablet, 3 no computador */
.grade { display: grid; gap: 16px; grid-template-columns: 1fr; }
.card {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--borda); }
.card.inativa img { opacity: .4; }
.card-corpo { padding: 12px; }
.selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.selo {
  font-size: .78rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fundo);
  color: var(--suave);
  border: 1px solid var(--borda);
}
.selo-padrao { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.selo-inativa { color: var(--erro-texto); }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.acoes form { margin: 0; }

.catalogo { margin-top: 24px; }
.catalogo summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.catalogo pre {
  white-space: pre-wrap;
  font-size: .85rem;
  background: var(--fundo);
  padding: 12px;
  border-radius: 8px;
  margin: 0;
}

.login { max-width: 380px; margin: 10vh auto 0; }

@media (min-width: 640px) {
  .grade { grid-template-columns: repeat(2, 1fr); }
  .botao.principal { width: auto; }
}
@media (min-width: 960px) {
  .grade { grid-template-columns: repeat(3, 1fr); }
}