:root {
  --marinho: #101e4b;
  --dourado: #e0a83c;
  --creme: #f5f2ea;
  --papel: #ffffff;
  --tinta: #1c1f2a;
  --mudo: #6b7080;
  --linha: #e4e1d8;
  --erro: #b3261e;
  --ok: #1b8a4c;
  --aviso: #8a6100;
  --raio: 10px;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body { font: 15px/1.45 Inter, "Segoe UI", system-ui, sans-serif; color: var(--tinta); background: var(--creme); }
h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -0.01em; }
h3 { margin: 0 0 8px; font-size: 16px; }
h4 { margin: 18px 0 8px; font-size: 14px; display: flex; gap: 10px; align-items: center; }
p { margin: 0 0 10px; }
a { color: var(--marinho); }
.mudo { color: var(--mudo); }
.pequeno { font-size: 12.5px; }
.mono { font-family: Consolas, ui-monospace, monospace; font-size: 12.5px; word-break: break-all; }
.erro { color: var(--erro); }
.ok { color: var(--ok); }
.aviso { background: #fff4d6; border: 1px solid #f0d58a; color: #6a4b00; padding: 10px 12px; border-radius: 6px; font-size: 13px; }
.aviso ul { margin: 6px 0; padding-left: 18px; }
.aviso-inline { color: var(--aviso); font-weight: 600; }
.chip { font-size: 11px; background: var(--creme); border: 1px solid var(--linha); border-radius: 999px; padding: 2px 9px; color: var(--mudo); margin-left: 6px; vertical-align: middle; }

.centro { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 24px; }
.login { width: 360px; display: grid; gap: 14px; }

.marca { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marca .iris { font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: 0.02em; color: var(--marinho); }
.marca .sub { color: var(--mudo); font-size: 13px; }
.marca.grande .iris { font-size: 40px; }

label { display: grid; gap: 6px; font-size: 13px; color: var(--mudo); }
label.check { display: flex; align-items: center; gap: 8px; color: var(--tinta); font-size: 14px; }
input, select { font: inherit; color: var(--tinta); padding: 8px 10px; border: 1px solid var(--linha); border-radius: 7px; background: #fff; }
input:focus, select:focus { outline: 2px solid var(--dourado); outline-offset: 1px; border-color: var(--dourado); }
fieldset { border: 1px solid var(--linha); border-radius: 7px; padding: 8px 12px; display: grid; gap: 6px; }
legend { font-size: 13px; color: var(--mudo); padding: 0 4px; }
button { font: inherit; cursor: pointer; }
button.primario, a.botao { background: var(--marinho); color: #fff; border: 0; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; display: inline-block; }
button.primario:disabled { opacity: 0.45; cursor: default; }
button.secundario, a.botao.secundario { background: #fff; color: var(--marinho); border: 1.5px solid var(--marinho); padding: 9px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; display: inline-block; }
button.secundario:disabled { opacity: 0.45; cursor: default; }
button.link { background: none; border: 0; color: var(--marinho); text-decoration: underline; padding: 0 4px; }
button.link.ativo { font-weight: 700; text-decoration: none; }
button.link.perigo { color: var(--erro); }
.linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.linha-entre { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 12px 0; }
@media (max-width: 800px) { .duas-colunas { grid-template-columns: 1fr; } }

/* Primeiro e ultimo dia lado a lado: sao um campo so, e separados a
   pessoa nao le que o segundo e opcional. */
.validade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.app { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.topo { display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: var(--papel); border-bottom: 1px solid var(--linha); }
.nav { flex: 1; display: flex; gap: 16px; }
.nav a { text-decoration: none; color: var(--mudo); font-weight: 600; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a.ativo { color: var(--marinho); border-color: var(--dourado); }
.usuario { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.papel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; background: var(--creme); color: var(--mudo); }
.papel-admin { background: var(--marinho); color: #fff; }
.conteudo { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }
.rodape { padding: 10px 24px; font-size: 12px; border-top: 1px solid var(--linha); }

/* inicio */
.inicio { display: grid; gap: 28px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 12px 0; }
.card-categoria { text-align: left; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; display: grid; gap: 6px; }
.card-categoria:hover:not(:disabled) { border-color: var(--dourado); box-shadow: 0 4px 16px rgba(16, 30, 75, 0.08); }
.card-categoria:disabled { opacity: 0.5; cursor: default; }
.card-categoria .titulo { font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 800; font-size: 24px; color: var(--marinho); }
.card-categoria .desc { color: var(--mudo); font-size: 13.5px; }
.card-categoria .meta { font-size: 12px; color: var(--mudo); }
.vazio { background: var(--papel); border: 1px dashed var(--linha); border-radius: var(--raio); padding: 24px; text-align: center; }
.tabela { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); font-size: 13.5px; }
.tabela th, .tabela td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela th { font-size: 12px; color: var(--mudo); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.tabela tr:last-child td { border-bottom: 0; }
.status { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--creme); }
.status-pronta { background: #dff3e6; color: var(--ok); }
.status-erro { background: #fbe1df; color: var(--erro); }
.status-gerando { background: #fff4d6; color: var(--aviso); }

/* campanha */
.campanha { display: grid; gap: 16px; }
.cabecalho-campanha { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.nome-campanha { cursor: text; margin: 6px 0 0; font-size: 22px; }
.acoes-topo { display: flex; gap: 12px; align-items: center; }
.passos { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; }
.passos li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--papel); border: 1px solid var(--linha); border-radius: 8px; font-size: 13px; color: var(--mudo); }
.passos li .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--creme); font-weight: 700; font-size: 12px; }
.passos li.atual { color: var(--marinho); border-color: var(--marinho); font-weight: 600; }
.passos li.atual .num { background: var(--marinho); color: #fff; }
.passos li.feito { cursor: pointer; }
.passos li.feito .num { background: var(--ok); color: #fff; }
.passo { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; display: grid; gap: 12px; }
.barra-passo { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--linha); padding-top: 14px; margin-top: 6px; }
.barra-passo > div { display: flex; gap: 10px; }
.solta { border: 2px dashed var(--linha); border-radius: var(--raio); padding: 28px; text-align: center; cursor: pointer; background: var(--creme); }
.solta.ativa { border-color: var(--dourado); background: #fff8e6; }
.acoes { white-space: nowrap; }
.rolagem { overflow-x: auto; }
.tabela.mapa th { min-width: 150px; }
.tabela.mapa select { width: 100%; font-size: 12.5px; padding: 5px; }
.tabela.itens td { vertical-align: middle; }
.foto-cel { width: 56px; }
.foto-cel img { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid var(--linha); border-radius: 4px; }
.foto-status { font-size: 11px; color: var(--mudo); }
.foto-status.ausente, .foto-status.erro { color: var(--erro); font-weight: 600; }
.editavel { cursor: text; border-bottom: 1px dashed transparent; }
.editavel:hover { border-bottom-color: var(--dourado); }
.editavel.destaque { font-weight: 700; font-size: 15px; }
.edit-inline { padding: 4px 6px; font-size: 13.5px; min-width: 120px; }
.preco-cel { white-space: nowrap; }
.alerta { display: inline-block; font-size: 11px; background: #fff4d6; color: var(--aviso); border-radius: 4px; padding: 2px 6px; margin: 2px 4px 2px 0; }
tr.com-alerta td:first-child { box-shadow: inset 3px 0 0 var(--dourado); }
.grupo-itens { display: grid; gap: 4px; }
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card-tema { text-align: left; background: var(--creme); border: 2px solid var(--linha); border-radius: var(--raio); padding: 10px; display: grid; gap: 6px; }
.card-tema.escolhido { border-color: var(--dourado); background: #fff8e6; }
.card-tema img { width: 100%; border-radius: 6px; background: #fff; }
.card-tema img.banner { aspect-ratio: 16 / 9; object-fit: cover; }
/* A folha do tabloide e A4 retrato: cabe inteira no cartao, sem cortar. */
.card-tema img.pagina { aspect-ratio: 1240 / 1754; object-fit: contain; }

/* Arte do topo do tabloide: a previa vem na proporcao da faixa, para a
   pessoa ver na hora se mandou o arquivo errado. */
.arte-topo { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; margin: 12px 0; display: grid; gap: 8px; }
.topos-tema { margin-top: 8px; display: grid; gap: 8px; }
/* Uma coluna por marca; dentro dela as duas artes que formam o tabloide. */
.artes-topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.grupo-artes { display: grid; gap: 10px; align-content: start; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 10px; }
.titulo-grupo { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); }
.slot-topo { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; }
.slot-topo img { width: 150px; aspect-ratio: var(--proporcao); object-fit: cover; border-radius: 4px; background: #fff; border: 1px solid var(--linha); }
.slot-topo .sem-arte { width: 150px; aspect-ratio: var(--proporcao); display: grid; place-items: center; border: 1px dashed var(--linha); border-radius: 4px; color: var(--mudo); font-size: 12px; }
.arte-topo .slot-topo { grid-template-columns: 260px 1fr; }
.arte-topo .slot-topo img, .arte-topo .slot-topo .sem-arte { width: 260px; }
.link.como-botao { cursor: pointer; }
.lista-medidas { margin: 4px 0 10px; padding-left: 18px; display: grid; gap: 2px; }
.opcao-topo { display: flex; align-items: flex-start; gap: 8px; max-width: 260px; }
.opcao-topo > span { display: grid; gap: 2px; }
.cor-topo { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.cor-topo input[type=color] { width: 34px; height: 22px; padding: 0; border: 1px solid var(--linha); border-radius: 4px; background: none; cursor: pointer; }
.novo-topo input { flex: 1; }
.cartao-topo { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; margin-top: 10px; display: grid; gap: 10px; }
.cartao-topo.inativo { opacity: 0.62; background: var(--creme); }
/* Cada topo mostra a arte de cada marca da campanha: a escolha e visual,
   nao por nome - e a arte que vai sair na peca. */
.escolha-topo { display: grid; gap: 6px; margin-top: 8px; }
.galeria-topos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
.card-topo { text-align: left; background: var(--creme); border: 2px solid var(--linha); border-radius: var(--raio); padding: 8px; display: grid; gap: 4px; cursor: pointer; }
.card-topo.escolhido { border-color: var(--dourado); background: #fff8e6; }
.card-topo img { width: 100%; aspect-ratio: 2480 / 960; object-fit: cover; border-radius: 4px; background: #fff; }
.card-topo .sem-arte { display: grid; place-items: center; aspect-ratio: 2480 / 960; border: 1px dashed var(--linha); border-radius: 4px; color: var(--mudo); font-size: 12px; }
.card-tema .titulo { font-weight: 700; }
.card-tema .desc { font-size: 12.5px; color: var(--mudo); }
.progresso .barra { height: 10px; background: var(--creme); border-radius: 999px; overflow: hidden; }
.progresso .barra div { height: 100%; background: var(--dourado); transition: width 0.3s; }
.grade-pecas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.grade-pecas figure { margin: 0; display: grid; gap: 4px; }
.grade-pecas figure.banner { grid-column: span 2; }
.grade-pecas img { width: 100%; border: 1px solid var(--linha); border-radius: 6px; background: #fff; }
.grade-pecas figcaption { font-size: 11px; color: var(--mudo); word-break: break-all; }

/* diagnostico */
.grade-diag { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .grade-diag { grid-template-columns: 1fr; } }
.lista { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; }
.lista dt { color: var(--mudo); }
.lista dd { margin: 0; }
.sinal { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.sinal.ok { background: var(--ok); }
.sinal.falha { background: var(--erro); }
.resultado { margin-top: 14px; }
.previa { width: 100%; max-width: 360px; border: 1px solid var(--linha); border-radius: 6px; margin-top: 8px; }

/* galeria (mobile-first) */
.galeria { max-width: 560px; margin: 0 auto; padding: 0 0 40px; background: #fff; min-height: 100%; }
.galeria-topo { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--marinho); color: #fff; }
.galeria-topo a { color: var(--dourado); }
.galeria-filtros { display: flex; gap: 10px; padding: 10px 14px; align-items: center; flex-wrap: wrap; }
.segmentos { display: flex; border: 1px solid var(--linha); border-radius: 999px; overflow: hidden; }
.segmentos button { border: 0; background: #fff; padding: 6px 12px; font-size: 13px; }
.segmentos button.ativo { background: var(--marinho); color: #fff; }
.galeria-lista { list-style: none; margin: 0; padding: 0 14px; display: grid; gap: 22px; }
.galeria-lista img { width: 100%; border-radius: 8px; background: var(--creme); display: block; }
/* Reserva a altura antes de a imagem carregar: sem isso a lista "pula" e a rolagem passa do fim. */
.galeria-lista li.stories img { aspect-ratio: 1080 / 1920; }
.galeria-lista li.banner img { aspect-ratio: 1920 / 1080; }
.grade-pecas figure.stories img { aspect-ratio: 1080 / 1920; }
.grade-pecas figure.banner img { aspect-ratio: 1920 / 1080; }
/* A vitrine do site ocupa duas colunas, como o banner. */
.grade-pecas figure.vitrine { grid-column: span 2; }
.grade-pecas figure.vitrine img { aspect-ratio: 2430 / 1518; }
.galeria-lista li.vitrine img { aspect-ratio: 2430 / 1518; }
.galeria-acoes { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px; }
.galeria-acoes .nome { font-size: 11px; color: var(--mudo); }

/* documentos da campanha (grade PDF, textos TXT) */
.documentos { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.doc { display: flex; align-items: center; gap: 12px; background: var(--creme); border: 1px solid var(--linha); border-radius: 8px; padding: 12px 16px; text-decoration: none; color: var(--tinta); }
.doc:hover { border-color: var(--dourado); }
.doc .icone { font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.06em; background: var(--marinho); color: #fff; border-radius: 4px; padding: 4px 8px; }
.doc span span { display: block; }
.alerta.sem_conta_corrente { background: #fbe1df; color: var(--erro); }

/* administração */
.admin { display: grid; gap: 16px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); }
.abas a { padding: 8px 14px; text-decoration: none; color: var(--mudo); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a.ativo { color: var(--marinho); border-color: var(--dourado); }
.relatorio { border-radius: 8px; padding: 12px 16px; margin: 10px 0; border: 1px solid; }
.relatorio.ok { background: #eff8f2; border-color: #b9e0c8; }
.relatorio.falha { background: #fdf1f0; border-color: #f0c4c0; }
.checagens { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.checagens li { padding-left: 22px; position: relative; }
.checagens li::before { position: absolute; left: 0; font-weight: 700; }
.checagens li.sim::before { content: '✓'; color: var(--ok); }
.checagens li.nao::before { content: '✕'; color: var(--erro); }
.checagens li.aviso-item::before { content: '!'; color: var(--aviso); }
.grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: end; margin: 10px 0; }
.modelo-texto { border: 1px solid var(--linha); border-radius: 8px; padding: 12px 14px; margin: 10px 0; display: grid; gap: 8px; }
.modelo-texto textarea { font: 13.5px/1.45 Consolas, ui-monospace, monospace; padding: 10px; border: 1px solid var(--linha); border-radius: 6px; resize: vertical; }
.modelo-texto textarea:focus { outline: 2px solid var(--dourado); outline-offset: 1px; }
.campos-disponiveis { background: var(--creme); border-radius: 6px; padding: 8px 12px; font-family: Consolas, ui-monospace, monospace; line-height: 1.6; }
.sugestao { background: #f4f8ff; border: 1px solid #c9dcf7; border-radius: 6px; padding: 10px 12px; }
.sugestao pre { margin: 6px 0 0; white-space: pre-wrap; font: 13px/1.45 Consolas, ui-monospace, monospace; }
pre.exemplo { background: var(--marinho); color: #eaf0ff; border-radius: 8px; padding: 14px 16px; overflow-x: auto; font: 12.5px/1.6 Consolas, ui-monospace, monospace; }
pre.token { background: #fff; color: var(--tinta); border: 1px dashed var(--dourado); border-radius: 6px; padding: 10px 12px; word-break: break-all; white-space: pre-wrap; font: 12.5px Consolas, ui-monospace, monospace; margin: 8px 0; }

/* Briefing do tema novo: o formulario que preenche o prompt do Cowork. */
.briefing { border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; margin-top: 18px; background: #fff; }
.campos-briefing { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.campos-briefing .largo { grid-column: 1 / -1; }
.campos-briefing fieldset { grid-column: 1 / -1; }
@media (max-width: 800px) { .campos-briefing { grid-template-columns: 1fr; } }

/* Ver o modelo do tema em tamanho real, antes de escolher. */
.tema-item { display: grid; gap: 4px; justify-items: start; }
.tema-item > .card-tema { width: 100%; }
.lightbox { position: fixed; inset: 0; background: rgba(16, 30, 75, 0.72); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50; }
.lightbox-caixa { background: #fff; border-radius: 12px; padding: 16px; max-width: min(920px, 92vw); max-height: 92vh; overflow: auto; display: grid; gap: 10px; }
.lightbox-caixa img { max-width: 100%; max-height: 68vh; object-fit: contain; border: 1px solid var(--linha); border-radius: 8px; background: #fff; justify-self: center; }

/* Diálogo do sistema, no lugar do confirm()/prompt() do navegador. */
.dialogo { background: #fff; border-radius: 12px; padding: 20px; width: min(460px, 92vw); display: grid; gap: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); }
.dialogo b { font-size: 17px; }
button.primario.perigo { background: var(--erro); }

/* ── publicar a vitrine no site ───────────────────────────────────────────
   Publicar poe preco na frente do cliente num site publico. O painel mostra
   o que vai subir ANTES de subir, e a confirmacao acontece dentro dele - o
   Iris nao usa dialogo do navegador. */
.painel-site { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: grid; gap: 10px; background: var(--creme); }
.painel-site > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.painel-site h4 { margin: 0; font-size: 14px; }
.painel-site .resumo { font-size: 13px; color: var(--mudo); }
.painel-site .confirmar { background: #fff4d6; border: 1px solid #f0d58a; color: #6a4b00; border-radius: 8px; padding: 12px 14px; display: grid; gap: 10px; font-size: 13.5px; }
.painel-site .confirmar .linha { margin: 0; }
.painel-site .alvos { max-height: 280px; overflow: auto; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); }
.painel-site .alvos .tabela { border: 0; border-radius: 0; }
.estado-publicada { color: var(--ok); font-weight: 600; }
.estado-despublicada { color: var(--mudo); }
.estado-erro { color: var(--erro); font-weight: 600; }