/* Banco de Fórmulas — MR Company.
   Identidade: preto, vermelho #D50C1F, cromado. Escuro por padrão.
   Hierarquia da ficha: NICHO (faixa) > produto > FÁBRICA > ativos. */
:root{
  --papel:#0a0a0b; --ficha:#16161a; --ficha-alta:#1c1c21; --tinta:#f4f4f5; --tinta-media:#a8a8b2;
  --tinta-fraca:#7c7c87; --linha:#2a2a31; --linha-forte:#3a3a44;
  --mr:#e8192c; --mr-forte:#ff2d40; --mr-fundo:#2a0d11; --sobre-mr:#fff;
  --ouro:#e0a955; --ouro-fundo:#2d2415;
  --alerta:#ff8a7a; --ok:#51cf87;
  --sombra:0 1px 2px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.35);
  --sombra-alta:0 2px 4px rgba(0,0,0,.55),0 14px 36px rgba(0,0,0,.45);
  --f-display:"Archivo",'Helvetica Neue',Arial,sans-serif;
  --f-corpo:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-dado:"IBM Plex Mono",ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --papel:#f4f4f6;--ficha:#fff;--ficha-alta:#fafafb;--tinta:#101013;--tinta-media:#55555f;
  --tinta-fraca:#76767f;--linha:#e3e3e8;--linha-forte:#d2d2da;
  --mr:#c90a1b;--mr-forte:#a80816;--mr-fundo:#fdecee;--ouro:#8a5a11;--ouro-fundo:#fbf1e2;
  --alerta:#c0392b;--ok:#1f7a45;
  --sombra:0 1px 2px rgba(10,10,12,.07),0 4px 14px rgba(10,10,12,.06);
  --sombra-alta:0 2px 6px rgba(10,10,12,.1),0 14px 34px rgba(10,10,12,.12);color-scheme:light;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--papel);color:var(--tinta);font-family:var(--f-corpo);line-height:1.45;font-size:14px}
[hidden]{display:none!important}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1240px;margin:0 auto}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px max(16px,env(safe-area-inset-left,0px));gap:18px;
  background:radial-gradient(1200px 620px at 50% -12%, #1d1d22 0%, var(--papel) 62%)}
.cartao-login{background:var(--ficha);border:1px solid var(--linha);border-radius:16px;box-shadow:var(--sombra-alta);
  padding:32px 28px;width:100%;max-width:390px;display:flex;flex-direction:column;gap:2px}
.logo-login{width:54px;height:auto;margin-bottom:14px}
.cartao-login h1{font-family:var(--f-display);font-size:26px;margin:0;letter-spacing:-.015em}
.sub-login{color:var(--tinta-fraca);font-size:13px;margin:3px 0 20px}
.rodape-login{color:var(--tinta-fraca);font-size:11.5px;margin:0;letter-spacing:.05em}
.btn.largo{width:100%;margin-top:8px;padding:12px}

/* ---------- campos e botões ---------- */
.campo{margin-bottom:12px}
.campo label{display:block;font-family:var(--f-display);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:14px;padding:10px 12px;
  border:1px solid var(--linha);border-radius:9px;background:var(--papel);color:var(--tinta)}
.campo textarea{font-family:var(--f-dado);font-size:12.5px;line-height:1.5;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--mr);outline-offset:1px;border-color:transparent}
.campo small{color:var(--tinta-fraca);font-size:11.5px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:430px){.dupla{grid-template-columns:1fr}}
.btn{font:inherit;font-weight:600;font-size:13.5px;padding:10px 16px;border-radius:9px;border:1px solid var(--mr);
  background:var(--mr);color:var(--sobre-mr);cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.1)}
.btn.vazado{background:transparent;color:var(--tinta);border-color:var(--linha-forte)}
.btn:disabled{opacity:.55;cursor:default}
.btn:focus-visible,.chip:focus-visible,.mini:focus-visible{outline:2px solid var(--mr);outline-offset:2px}
.erro{color:var(--alerta);font-size:12.5px;margin:8px 0 0}
.mini{font:inherit;font-size:11.5px;background:none;border:1px solid var(--linha-forte);color:var(--tinta-fraca);
  border-radius:6px;padding:4px 9px;cursor:pointer}
.mini:hover{border-color:var(--mr);color:var(--mr)}

/* ---------- cabeçalho ---------- */
header.topo{padding-block:24px 12px}
.marca{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{width:44px;height:auto;flex:0 0 auto}
h1{font-family:var(--f-display);font-size:clamp(26px,5vw,36px);letter-spacing:-.018em;margin:0;text-wrap:balance}
.quem{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tinta-fraca)}
.placar{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.placar b{font-family:var(--f-dado);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;color:var(--tinta)}
.placar span{background:var(--ficha);border:1px solid var(--linha);border-radius:8px;padding:6px 11px;
  font-size:11.5px;color:var(--tinta-fraca);display:flex;gap:7px;align-items:baseline}

/* ---------- filtros ---------- */
.filtros{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--papel);
  border-bottom:1px solid var(--linha);padding-block:12px 13px;margin-bottom:20px}
.linha-busca{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#busca{flex:1 1 240px;min-width:0;font:inherit;font-size:14.5px;padding:11px 14px;border:1px solid var(--linha-forte);
  border-radius:10px;background:var(--ficha);color:var(--tinta)}
#busca:focus{outline:2px solid var(--mr);outline-offset:1px;border-color:transparent}
.grupos{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.grupo{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0;flex:1}
.rotulo{font-family:var(--f-display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-fraca);flex:0 0 66px}
.chip{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:20px;border:1px solid var(--linha);
  background:var(--ficha);color:var(--tinta-media);cursor:pointer}
.chip:hover{border-color:var(--linha-forte);color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--mr);border-color:var(--mr);color:var(--sobre-mr);font-weight:600}
.chip .n{opacity:.6;font-family:var(--f-dado);font-size:11px}
/* a fábrica parceira também se destaca no filtro */
.chip.parceira{border-color:var(--mr);color:var(--mr)}
.chip.parceira[aria-pressed="true"]{color:var(--sobre-mr)}

/* ---------- faixa de recomendadas ---------- */
.recomendadas{margin-bottom:22px}
.rec-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rec-cab h2{font-family:var(--f-display);font-size:15px;letter-spacing:.02em;margin:0;color:var(--tinta)}
.rec-cab .pq{font-size:11.5px;color:var(--tinta-fraca)}
.rec-trilho{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:13px}

/* ---------- grade e fichas ---------- */
#grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;padding-bottom:48px}
.ficha{background:var(--ficha);border:1px solid var(--linha);border-radius:12px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.ficha:hover{border-color:var(--linha-forte);box-shadow:var(--sombra-alta)}

/* FAIXA DE NICHO — primeira coisa que se lê */
.faixa-nicho{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 15px;
  background:var(--ficha-alta);border-bottom:1px solid var(--linha)}
.nicho-prin{font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mr)}
.nicho-sec{font-family:var(--f-display);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-fraca);padding-left:8px;border-left:1px solid var(--linha-forte)}
.selo-rec{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;background:var(--mr);color:var(--sobre-mr);white-space:nowrap}

.selo-pend{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;background:var(--ouro-fundo);color:var(--ouro);white-space:nowrap}

.corpo{padding:14px 15px 13px;display:flex;flex-direction:column;gap:10px;flex:1}
.ficha h3{font-family:var(--f-display);font-size:19px;margin:0;line-height:1.15;text-wrap:balance;
  min-width:0;word-break:break-word;letter-spacing:-.01em}

/* FÁBRICA — segundo ponto de leitura */
.fabrica{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fabrica .nome{font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta)}
.fabrica .ponto{width:5px;height:5px;border-radius:50%;background:var(--linha-forte);flex:0 0 auto}
.fabrica .tipo{font-size:11.5px;color:var(--tinta-fraca)}
.ficha.parceira .fabrica .nome{color:var(--mr)}
.ficha.parceira{border-color:var(--mr-fundo)}
.ficha.parceira .faixa-nicho{background:var(--mr-fundo)}

.apres{font-size:12.5px;color:var(--tinta-media);font-family:var(--f-dado);line-height:1.35}
.selos{display:flex;gap:5px;flex-wrap:wrap}
.selo{font-size:10px;font-weight:600;padding:3px 8px;border-radius:5px;letter-spacing:.03em;white-space:nowrap}
.selo.anv{background:var(--ouro-fundo);color:var(--ouro)}
table.ativos{width:100%;border-collapse:collapse;font-size:13px;margin-top:2px}
table.ativos td{padding:3px 0;vertical-align:baseline}
table.ativos tr+tr td{border-top:1px solid color-mix(in srgb, var(--linha) 55%, transparent)}
table.ativos td.n{padding-right:10px;min-width:0;word-break:break-word;color:var(--tinta-media)}
table.ativos td.q{text-align:right;font-family:var(--f-dado);font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--tinta);font-size:12.5px;font-weight:500}
.mais{font-size:11.5px;color:var(--tinta-fraca);font-style:italic}
.sem-ativos{font-size:12.5px;color:var(--tinta-fraca);font-style:italic;padding:9px 0;
  border-top:1px dashed var(--linha-forte);border-bottom:1px dashed var(--linha-forte)}
.obs{font-size:11.5px;background:var(--ouro-fundo);color:var(--ouro);padding:8px 10px;border-radius:7px;line-height:1.4}
.ficha-pe{display:flex;gap:9px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--linha);padding:10px 15px;margin-top:auto;background:var(--ficha-alta)}
.cod{font-family:var(--f-dado);font-size:11px;color:var(--tinta-fraca)}
.acoes{display:flex;gap:5px}

/* ---------- estados ---------- */
.estado{grid-column:1/-1;text-align:center;padding:58px 20px;color:var(--tinta-fraca)}
.estado h2{font-family:var(--f-display);font-size:22px;color:var(--tinta);margin:0 0 8px}
.estado p{margin:0 auto;max-width:46ch;font-size:14px}

/* ---------- diálogos ---------- */
dialog{border:none;border-radius:14px;padding:0;background:var(--ficha);color:var(--tinta);
  max-width:640px;width:calc(100% - 28px);box-shadow:0 18px 56px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(4,4,6,.76)}
.dlg-corpo{padding:22px}
.dlg-corpo h2{font-family:var(--f-display);font-size:22px;margin:0 0 3px}
.dlg-corpo .dica{color:var(--tinta-fraca);font-size:12.5px;margin:0 0 18px}
.sub-sec{font-family:var(--f-display);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-fraca);margin:20px 0 10px;padding-top:15px;border-top:1px solid var(--linha)}
.previa{font-family:var(--f-dado);font-size:12px;color:var(--mr);min-height:17px;margin-top:5px}
.dlg-pe{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.lista-users{display:flex;flex-direction:column;gap:8px}
.linha-user{display:flex;gap:9px;align-items:center;justify-content:space-between;background:var(--papel);
  border:1px solid var(--linha);border-radius:9px;padding:10px 12px;flex-wrap:wrap}
.linha-user .nome{font-weight:600}
.linha-user .det{font-size:11.5px;color:var(--tinta-fraca);font-family:var(--f-dado)}
.papel{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--mr-fundo);color:var(--mr);
  letter-spacing:.04em;text-transform:uppercase}
.papel.leitor{background:var(--linha);color:var(--tinta-fraca)}
.inativo{opacity:.5}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---- valores (só aparece para quem tem permissão) ---- */
.precos{margin-top:.7rem;border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.precos-cab{background:var(--mr-fundo);color:var(--mr-forte);font:600 .66rem/1 'Archivo',sans-serif;
  letter-spacing:.09em;text-transform:uppercase;padding:.42rem .6rem}
.precos table{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:.74rem}
.precos td{padding:.26rem .6rem;border-top:1px solid var(--linha)}
.precos tr:first-child td{border-top:0}
.precos td.q{color:var(--tinta-fraca)}
.precos td.v{text-align:right;font-weight:600;color:var(--tinta);white-space:nowrap}
.papel.valores{background:#143021;color:#6ee7a0;border-color:#1d4a32}
.papel.sem-valores{background:#2e2a16;color:#e3c55a;border-color:#4a4420}

/* ---- rótulo: informação nutricional e demais dados ---- */
.porcao,.uso,.ingr,.advert,.conserv{font-size:.74rem;line-height:1.45;color:var(--tinta-fraca);margin-top:.5rem}
.porcao b,.uso b,.ingr b,.advert b,.conserv b{color:var(--tinta);font-weight:600}
.rotulo-cab{display:flex;justify-content:space-between;align-items:baseline;margin:.7rem 0 .25rem;
  font:600 .63rem/1 'Archivo',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-fraca)}
.vd-cab{font-size:.6rem;letter-spacing:.06em}
.ativos td.vd{text-align:right;width:3.2rem;white-space:nowrap;color:var(--tinta-fraca);
  font-family:'IBM Plex Mono',monospace;font-size:.7rem}
.aleg{display:inline-block;margin-top:.5rem;padding:.2rem .5rem;border-radius:99px;
  background:var(--mr-fundo);color:var(--mr-forte);font-size:.66rem;font-weight:600}
.advert{border-left:2px solid var(--linha-forte);padding-left:.55rem}
.corpo-pe{padding-top:0}
.ficha .precos{margin:.7rem 1rem 0}

/* ---- botao de copiar para o WhatsApp ---- */
.mini.copiar{border-color:var(--mr);color:var(--mr);font-weight:600}
.mini.copiar:hover{background:var(--mr-fundo)}
.mini.copiar.ok{background:#143021;color:#6ee7a0;border-color:#1d4a32}
.ficha-pe .acoes{display:flex;gap:.3rem;flex-wrap:wrap}