@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lexend:wght@300;400;500;600&display=swap');

:root{
  --papel:#F4F3EF;
  --superficie:#FFFFFF;
  --tinta:#000000;
  --tinta-2:#5C5B55;
  --linha:#D8D6CE;
  --ouro:#E0A211;
  --ouro-fraco:#FBF0D6;
  --verde:#1F6B4A;
  --ambar:#B4780A;
  --vermelho:#A31E1E;
  --raio:3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:'Lexend',system-ui,sans-serif; font-weight:300;
  font-size:15px; line-height:1.6;
}
a{color:var(--tinta)}
h1,h2,h3{font-weight:500; letter-spacing:-.02em; margin:0}
h1{font-size:1.9rem; line-height:1.15}
h2{font-size:1.2rem}
.rotulo{
  font-family:'Anton',Impact,sans-serif; font-weight:400;
  letter-spacing:.04em; font-size:.72rem; color:var(--tinta-2);
}
.ajuda{color:var(--tinta-2); font-size:.86rem; margin:.35rem 0 0}
.erro{color:var(--vermelho); font-size:.86rem}

/* ---------- estrutura ---------- */
.topo{
  background:var(--tinta); color:#fff;
  display:flex; align-items:center; gap:1.6rem;
  padding:.85rem 1.4rem; flex-wrap:wrap;
}
.topo .marca{font-family:'Anton',sans-serif; font-size:1.2rem; letter-spacing:.18em}
.topo nav{display:flex; gap:1.2rem; flex:1; flex-wrap:wrap}
.topo nav a{color:#B9B8B2; text-decoration:none; font-size:.88rem}
.topo nav a:hover{color:#fff}
.topo nav a.ativo{color:var(--ouro)}
.topo .sair{color:#77766F; font-size:.8rem; text-decoration:none}

.pagina{max-width:1180px; margin:0 auto; padding:1.8rem 1.4rem 4rem}
.cabecalho-pagina{border-bottom:2px solid var(--tinta); padding-bottom:.9rem; margin-bottom:1.6rem}

.colunas{display:grid; grid-template-columns:340px 1fr; gap:1.8rem; align-items:start}
@media (max-width:900px){.colunas{grid-template-columns:1fr}}

.painel{background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio); padding:1.2rem}
.painel + .painel{margin-top:1.1rem}
.painel h2{margin-bottom:.9rem}

/* ---------- formulário ---------- */
label{display:block; font-size:.8rem; color:var(--tinta-2); margin:.9rem 0 .25rem}
input,select,textarea{
  width:100%; padding:.55rem .65rem; font:inherit; font-size:.92rem;
  border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--superficie); color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ouro); outline-offset:1px; border-color:var(--ouro)}
textarea{min-height:80px; resize:vertical}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}

button,.botao{
  font:inherit; font-size:.92rem; font-weight:500; cursor:pointer;
  border:1px solid var(--tinta); border-radius:var(--raio);
  background:var(--tinta); color:#fff; padding:.6rem 1.1rem;
  text-decoration:none; display:inline-block;
}
button:hover,.botao:hover{background:#241F14; border-color:#241F14}
button.principal{background:var(--ouro); border-color:var(--ouro); color:#241C05}
button.principal:hover{background:#C88F0C; border-color:#C88F0C}
button.secundario{background:transparent; color:var(--tinta)}
button.secundario:hover{background:var(--ouro-fraco); border-color:var(--tinta)}
button.largo{width:100%; margin-top:1.1rem}

/* ---------- números ---------- */
.numeros{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--linha); border:1px solid var(--linha)}
.numero{background:var(--superficie); padding:.85rem .9rem}
.numero .valor{font-size:1.5rem; font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1}
.numero .nome{font-size:.74rem; color:var(--tinta-2); margin-top:.2rem}
.numero.destaque{background:var(--ouro-fraco)}
.var{font-size:.74rem; font-variant-numeric:tabular-nums}
.var.boa{color:var(--verde)}
.var.ruim{color:var(--vermelho)}
.var.neutra{color:var(--tinta-2)}

table{width:100%; border-collapse:collapse; font-size:.86rem}
th{text-align:left; font-weight:500; font-size:.74rem; color:var(--tinta-2); border-bottom:1px solid var(--tinta); padding:.4rem .5rem}
td{padding:.5rem; border-bottom:1px solid var(--linha); font-variant-numeric:tabular-nums}
td.texto{font-variant-numeric:normal}

/* ---------- saída de texto ---------- */
.saida{border:1px solid var(--linha); border-radius:var(--raio); background:var(--superficie)}
.saida-topo{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1rem; border-bottom:1px solid var(--linha)}
.saida pre{
  margin:0; padding:1.2rem; white-space:pre-wrap; word-wrap:break-word;
  font-family:'Lexend',sans-serif; font-size:.94rem; line-height:1.7;
}
.saida.interna{background:#FAF9F5}
.saida.interna .saida-topo{background:var(--ouro-fraco)}

.aviso{border-left:3px solid var(--ouro); background:var(--ouro-fraco); padding:.8rem 1rem; font-size:.88rem; margin:1rem 0}
.aviso.ruim{border-left-color:var(--vermelho); background:#FBEDED}
.vazio{color:var(--tinta-2); font-size:.9rem; padding:2.5rem 1rem; text-align:center; border:1px dashed var(--linha); border-radius:var(--raio)}

/* ---------- módulos na home ---------- */
.modulos{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin-top:1.4rem}
.modulo{background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio); padding:1.1rem; text-decoration:none; display:block}
.modulo:hover{border-color:var(--tinta)}
.modulo h3{font-size:1.02rem; margin-bottom:.3rem}
.modulo p{margin:0; font-size:.85rem; color:var(--tinta-2)}
.modulo.futuro{opacity:.5; pointer-events:none}

/* ---------- entrada ---------- */
.tela-entrada{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem}
.cartao-entrada{background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio); padding:2rem; width:100%; max-width:340px}
.marca-entrada{font-family:'Anton',sans-serif; font-size:1.6rem; letter-spacing:.2em}
.cartao-entrada button{width:100%; margin-top:1.2rem}

@media (prefers-reduced-motion:no-preference){
  button,.modulo,.topo nav a{transition:background-color .12s ease, border-color .12s ease, color .12s ease}
}

/* ---------- seleção de contas ---------- */
.selecao{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.4rem}
.item-selecao{display:flex; align-items:center; gap:.5rem; margin:0; font-size:.88rem; color:var(--tinta); padding:.3rem .1rem}
.item-selecao input{width:auto}
button.mini{padding:.3rem .7rem; font-size:.78rem}

tr.nivel-3 td:first-child{box-shadow:inset 3px 0 0 var(--vermelho)}
tr.nivel-2 td:first-child{box-shadow:inset 3px 0 0 var(--ambar)}
tr.nivel-1 td:first-child{box-shadow:inset 3px 0 0 var(--verde)}
tr.nivel-0 td:first-child{box-shadow:inset 3px 0 0 var(--linha)}
tr.nivel-3{background:#FCF2F2}

/* ---------- ranking de campanhas e criativos ---------- */
.ranking{display:flex; flex-direction:column; gap:1.05rem; margin-top:1rem}
.item-ranking{display:flex; flex-direction:column; gap:.35rem}
.linha-ranking{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap}
.nome-ranking{font-size:.9rem; font-weight:400; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.valor-ranking{font-size:.9rem; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; display:flex; align-items:baseline; gap:.4rem}

.barra{height:7px; background:var(--linha); border-radius:1px; overflow:hidden}
.barra-cheia{display:block; height:100%; background:var(--tinta); border-radius:1px}
.barra-cheia.destaque{background:var(--ouro)}

.selo{
  font-family:'Anton',sans-serif; font-size:.6rem; letter-spacing:.06em;
  padding:.14rem .4rem; border-radius:2px; white-space:nowrap;
  background:var(--linha); color:var(--tinta-2);
}
.selo.bom{background:var(--ouro); color:#241C05}
.selo.alerta{background:#F3DADA; color:var(--vermelho)}
.selo.novo{background:#DCEAE2; color:var(--verde)}

.achado{border-left:3px solid var(--tinta); background:#FAF9F5; padding:.85rem 1rem; margin-top:1.4rem}
.achado ul{margin:.5rem 0 0; padding-left:1.1rem}
.achado li{font-size:.88rem; margin-bottom:.35rem}
.achado li:last-child{margin-bottom:0}

details summary{cursor:pointer; padding:.3rem 0}
details summary:hover{color:var(--tinta)}

/* ---------- miniaturas dos criativos ---------- */
.item-ranking.com-miniatura{flex-direction:row; gap:.8rem; align-items:flex-start}
.corpo-ranking{flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem}

.miniatura{
  width:54px; height:54px; flex-shrink:0; object-fit:cover;
  border:1px solid var(--linha); border-radius:var(--raio); background:var(--papel); display:block;
}
.miniatura.pequena{width:34px; height:34px}
.miniatura.vazia{
  width:54px; height:54px; flex-shrink:0; display:block;
  border:1px dashed var(--linha); border-radius:var(--raio); background:var(--papel);
}

/* ---------- conjuntos ---------- */
.acoes-topo{display:flex; gap:.6rem; margin-bottom:1.1rem; flex-wrap:wrap}

.grupo-campanha{margin-top:1.4rem}
.cabecalho-grupo{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--tinta); padding-bottom:.4rem; margin-bottom:.6rem; flex-wrap:wrap;
}
.nome-grupo{font-weight:500; font-size:.98rem}

details.conjunto{border:1px solid var(--linha); border-radius:var(--raio); padding:.7rem .9rem; margin-bottom:.55rem; background:var(--superficie)}
details.conjunto[open]{border-color:var(--tinta-2)}
details.conjunto summary{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; cursor:pointer; list-style:none}
details.conjunto summary::-webkit-details-marker{display:none}
details.conjunto summary::before{content:'+'; font-family:'Anton',sans-serif; color:var(--tinta-2); margin-right:.2rem}
details.conjunto[open] summary::before{content:'–'}

.ficha{border-top:1px solid var(--linha); padding-top:.7rem}
.ficha-linha{display:flex; gap:.9rem; padding:.28rem 0; font-size:.86rem; border-bottom:1px dotted var(--linha)}
.ficha-linha:last-child{border-bottom:0}
.ficha-rotulo{font-family:'Anton',sans-serif; font-size:.66rem; letter-spacing:.04em; color:var(--tinta-2); min-width:120px; padding-top:.18rem}

.anuncios-conjunto{margin-top:.9rem}
.grade-anuncios{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.6rem; margin-top:.5rem}
.cartao-anuncio{display:flex; gap:.55rem; align-items:center; border:1px solid var(--linha); border-radius:var(--raio); padding:.45rem; background:var(--papel)}
.nome-anuncio{font-size:.82rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cartao-anuncio .miniatura{width:40px; height:40px}
.cartao-anuncio .miniatura.vazia{width:40px; height:40px}

/* ---------- impressão ---------- */
@media print{
  body{background:#fff}
  .topo, .nao-imprimir, .acoes-topo, form{display:none !important}
  .pagina{max-width:100%; padding:0}
  .painel{border:1px solid #ccc; break-inside:avoid; page-break-inside:avoid; margin-bottom:.8rem}
  details.conjunto{break-inside:avoid}
  details[open] summary ~ *{display:block}
  details:not([open]) > *:not(summary){display:none}
  .numero.destaque{background:#f3f3f3 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .barra-cheia{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  a[href]:after{content:''}
}