/* Identidade Manjerona: bordô + verde-erva + dourado (mesma base do app de cotação) */
:root{
  --bordo:#7A1600; --bordo-2:#5A0F00; --bordo-tint:#F6E7E3; --gold:#9C9466; --gold-2:#C2B98C; --gold-tint:#F1EEE2;
  --verde:#1E6F41; --verde-2:#175634; --verde-tint:#E3EFE7;
  --bg:#FAF6F2; --card:#FFFFFF; --card-2:#F3ECE6; --line:#E8DCD4;
  --ink:#24191B; --ink-2:#5E4F52; --muted:#8C7B7E;
  --pos:#3A8A4E; --pos-bg:#E4EFE6; --neg:#8E2434; --neg-bg:#F5E6E8;
  --warn:#8A6A1F; --warn-bg:#F7EFDC;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{
  font-family:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);font-size:15px;line-height:1.45;
  font-variant-numeric:tabular-nums;
  padding-block:0 48px;
}
body.largo{padding-bottom:16px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body.largo main.wrap{max-width:1400px}

h1,h2,h3{font-family:"Libre Baskerville",Georgia,"Times New Roman",serif;color:var(--bordo);text-wrap:balance}
h1{font-size:24px;letter-spacing:-.01em}
h2{font-size:18px;margin-bottom:10px}
h3{font-size:15px}
a{color:var(--verde-2)}

/* topo — bordô chapado: mesma cor do fundo da logo, a imagem funde sem emenda */
.topo{background:var(--bordo);color:#FFF7F3;padding-block:12px;margin-bottom:18px;border-bottom:2px solid var(--gold)}
.topo .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topo .marca{display:flex;align-items:center;gap:16px;min-width:0;text-decoration:none}
.topo .marca img{height:50px;width:auto;display:block;flex:none}
.topo .sistema{
  font-family:"Libre Baskerville",Georgia,serif;font-size:21px;color:var(--gold);
  border-left:1px solid rgba(255,247,243,.32);padding-left:16px;white-space:nowrap
}
.topo .quem{font-size:12.5px;color:var(--gold);margin-left:auto;text-align:right}
.topo .quem b{color:#FFF7F3;display:block;font-size:13.5px}
nav{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}
nav a{
  color:#FFF7F3;text-decoration:none;font-size:13.5px;font-weight:600;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,247,243,.28)
}
nav a:hover{background:rgba(255,247,243,.14)}
nav a[aria-current="page"]{background:#FFF7F3;color:var(--bordo);border-color:#FFF7F3}

/* blocos */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.card.destaque{border-left:4px solid var(--verde)}
.sub{color:var(--muted);font-size:12.5px}
.grade{display:grid;gap:12px}
.grade.c2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grade.c3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.linha{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.direita{margin-left:auto}

/* cartões da página inicial */
a.cartao{display:block;text-decoration:none;color:inherit;border-top:3px solid var(--gold);transition:transform .12s,box-shadow .12s}
a.cartao:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(36,25,27,.08)}
a.cartao h2{margin-bottom:6px}
a.cartao p{color:var(--ink-2);font-size:14px;margin-bottom:10px}

/* páginas embutidas (iframe) */
.embutido .barra-emb{margin-bottom:10px}
.embutido iframe{width:100%;height:calc(100vh - 175px);min-height:480px;border:1px solid var(--line);border-radius:12px;background:#fff;display:block}
@media(max-width:520px){ .embutido iframe{height:calc(100vh - 150px)} }

/* KPIs */
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:12px 14px}
.kpi b{font-family:"Libre Baskerville",Georgia,serif;font-size:24px;display:block;color:var(--bordo);line-height:1.2}
.kpi span{color:var(--muted);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
.kpi small{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px}

/* abas internas de uma página */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.abas button{font:inherit;font-weight:700;font-size:14px;background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;color:var(--muted);cursor:pointer;white-space:nowrap}
.abas button.on{color:var(--bordo);border-bottom-color:var(--gold)}

/* tabela */
.rolagem{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--verde);font-weight:700;white-space:nowrap;position:sticky;top:0;background:var(--card)}
td.num,th.num{text-align:right;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tr.melhor td{background:var(--verde-tint)}
tr.tap{cursor:pointer} tr.tap:hover td{background:var(--bg)}
tr.grupo td{background:var(--card-2);font-weight:700;color:var(--ink-2);font-size:12px;text-transform:uppercase;letter-spacing:.05em}

/* barra de progresso / proporção */
.barra{height:8px;background:var(--card-2);border-radius:999px;overflow:hidden;min-width:80px}
.barra i{display:block;height:100%;background:var(--verde);border-radius:999px}
.barra i.warn{background:var(--warn)} .barra i.neg{background:var(--neg)}

/* formulário */
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  font:inherit;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink)
}
.linha input[type=search],.linha select{width:auto;min-width:160px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--verde);outline-offset:2px
}
.campo{margin-bottom:12px}

.btn{
  font:inherit;font-weight:700;font-size:14px;cursor:pointer;
  padding:9px 16px;border-radius:10px;border:1px solid var(--bordo);
  background:var(--bordo);color:#FFF7F3;text-decoration:none;display:inline-block
}
.btn:hover{background:var(--bordo-2)}
.btn.secundario{background:transparent;color:var(--bordo)}
.btn.secundario:hover{background:var(--bordo-tint)}
.btn.verde{background:var(--verde);border-color:var(--verde)}
.btn.pequeno{padding:5px 11px;font-size:13px}

/* etiquetas */
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.tag.ok{background:var(--pos-bg);color:var(--pos)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.neg{background:var(--neg-bg);color:var(--neg)}
.tag.neutro{background:var(--card-2);color:var(--ink-2)}
.tag.gold{background:var(--gold-tint);color:#6E6840}

.aviso{padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:14px;font-weight:600}
.aviso.ok{background:var(--pos-bg);color:var(--pos)}
.aviso.erro{background:var(--neg-bg);color:var(--neg)}
.aviso.atencao{background:var(--warn-bg);color:var(--warn)}

.vazio{text-align:center;padding:30px 16px;color:var(--muted)}
.vazio h3{color:var(--ink-2);margin-bottom:6px}
.vazio::before{
  content:"";display:block;width:54px;height:45px;margin:0 auto 12px;
  background:url(folha.png) center/contain no-repeat;opacity:.38
}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)}
.mono{font-variant-numeric:tabular-nums}

/* fichas: lista + detalhe */
.duas{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
@media(max-width:760px){ .duas{grid-template-columns:1fr} }
.lista-f{max-height:70vh;overflow:auto;padding:6px}
.lista-f .grp{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:10px 6px 4px}
.lista-f button{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;padding:7px 10px;border-radius:8px;cursor:pointer;color:var(--ink)}
.lista-f button:hover{background:var(--bg)}
.lista-f button.on{background:var(--bordo-tint);color:var(--bordo);font-weight:700}
.lista-f button .st{float:right;font-size:11px;color:var(--muted)}

@media(max-width:520px){
  .topo .marca{gap:11px}
  .topo .marca img{height:40px}
  .topo .sistema{font-size:17px;padding-left:11px}
  .topo .quem{margin-left:0;text-align:left;width:100%}
}

/* rodapé: logo para fundo claro */
.rodape{text-align:center;margin-top:36px;padding-block:10px}
.rodape img{height:46px;width:auto;opacity:.8}
@media(max-width:520px){ .rodape img{height:38px} }