/* Identidade Manjerona: bordô + verde-erva + dourado */
:root{
  --bordo:#7A1600; --bordo-2:#5A0F00; --bordo-tint:#F6E7E3; --gold:#9C9466;
  --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;
}
.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))}

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 de propósito: é a mesma cor do fundo da logo,
   então a imagem funde com a faixa sem emenda visível. */
.topo{background:var(--bordo);color:#FFF7F3;padding-block:14px;margin-bottom:20px}
.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:54px;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 11px;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}

/* tabela */
.rolagem{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 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}
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)}

/* 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=tel],select,textarea{
  font:inherit;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink)
}
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.verde:hover{background:var(--verde-2)}
.btn.pequeno{padding:5px 11px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* etiquetas */
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.tag.pendente{background:var(--warn-bg);color:var(--warn)}
.tag.aprovada,.tag.ok,.tag.aberta{background:var(--pos-bg);color:var(--pos)}
.tag.rejeitada,.tag.erro{background:var(--neg-bg);color:var(--neg)}
.tag.cotada,.tag.fechada{background:var(--card-2);color:var(--ink-2)}

.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}
/* a folha da marca como ilustração dos estados vazios */
.vazio::before{
  content:"";display:block;width:54px;height:45px;margin:0 auto 12px;
  background:url(folha.png) center/contain no-repeat;opacity:.38
}

/* página pública do fornecedor */
.publico{max-width:620px}
.item-linha{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.item-linha:last-of-type{border-bottom:0}
.item-linha .nome{font-weight:600}
.item-linha .qtd{font-size:12.5px;color:var(--muted)}
@media(max-width:520px){
  .topo .marca{gap:11px}
  .topo .marca img{height:40px}
  .topo .sistema{font-size:17px;padding-left:11px}
}
@media(max-width:420px){
  .item-linha{grid-template-columns:1fr 100px}
  .topo .quem{margin-left:0;text-align:left;width:100%}
}

.rodape{text-align:center;color:var(--muted);font-size:12px;margin-top:28px}