/* Preços e margem: leitura de produto, valores e saúde na lista Shopee. */
#shopee-lista table.precos {
  border-collapse:separate;
  border-spacing:0 var(--space-2);
}
#shopee-lista table.precos col.c-anuncio { width:28%; }
#shopee-lista table.precos col.c-custo { width:10%; }
#shopee-lista table.precos col.c-preco { width:13%; }
#shopee-lista table.precos col.c-margem { width:25%; }
#shopee-lista table.precos col.c-acao { width:24%; }

#shopee-lista table.precos thead th {
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border);
  color:var(--mut);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:normal;
  text-transform:none;
}
#shopee-lista table.precos th.num,
#shopee-lista table.precos td.num { padding-inline:var(--space-1); }
#shopee-lista table.precos th:nth-child(2),
#shopee-lista table.precos td:nth-child(2),
#shopee-lista table.precos th:nth-child(3),
#shopee-lista table.precos td:nth-child(3) { text-align:center; }
#shopee-lista table.precos tbody tr:not(.det) > td {
  padding-block:var(--space-2);
  border-block:1px solid var(--border);
  background:var(--surface2);
}
#shopee-lista table.precos tbody tr:not(.det) > td:first-child {
  border-left:1px solid var(--border);
  border-radius:var(--radius-card) 0 0 var(--radius-card);
}
#shopee-lista table.precos tbody tr:not(.det) > td:last-child {
  border-right:1px solid var(--border);
  border-radius:0 var(--radius-card) var(--radius-card) 0;
}
#shopee-lista table.precos tbody tr:not(.det):hover > td { background:var(--surface3); }
#shopee-lista table.precos tbody tr.open > td { border-block-color:var(--pri); }
#shopee-lista table.precos tbody tr.det > td {
  padding:var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--surface);
}

#shopee-lista table.precos tbody tr:not(.det) > td:first-child .t {
  display:grid;
  gap:var(--space-1);
  color:var(--tx);
  font-family:var(--font-ui);
  font-size:var(--fs-md);
  font-weight:700;
  line-height:1.35;
}
#shopee-lista table.precos tbody tr:not(.det) > td:first-child .mut.s {
  display:inline-flex;
  width:fit-content;
  max-width:100%;
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--border);
  border-radius:var(--radius-control);
  background:var(--surface);
  color:var(--mut);
  font-size:var(--fs-xs);
  font-weight:600;
  overflow-wrap:anywhere;
}
#shopee-lista table.precos tbody tr:not(.det) > td:first-child .shopee-tags .tag {
  max-width:100%;
  overflow-wrap:anywhere;
}
.shopee-identificacao { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); color:var(--mut); font-size:var(--fs-xs); font-weight:500; }
.shopee-variacao-rotulo { color:var(--mut); font-size:var(--fs-xs); font-weight:500; }
#shopee-lista table.precos td:nth-child(2),
#shopee-lista table.precos td:nth-child(3) {
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#shopee-lista table.precos td:nth-child(3) .mut.s {
  display:block;
  margin-top:var(--space-1);
  font-size:var(--fs-xs);
  white-space:normal;
}
#shopee-lista table.precos tbody tr:not(.det) > td.col-margem > .shopee-celula {
  align-items:flex-start;
  width:fit-content;
  max-width:100%;
  margin-inline:0;
  text-align:left;
}
@media (min-width:701px) {
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem > .shopee-celula { flex-direction:row; align-items:flex-start; justify-content:space-between; gap:var(--space-4); width:100%; }
  #shopee-lista .shopee-margem, #shopee-lista .shopee-lucro { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-1); }
  #shopee-lista .shopee-lucro { align-items:flex-end; text-align:right; white-space:nowrap; }
  #shopee-lista .shopee-lucro .neg { color:var(--bad); }
  #shopee-lista table.precos th.col-margem { text-align:left; padding-inline:var(--space-3); }
  #shopee-lista table.precos th.col-acao { text-align:right; padding-inline:var(--space-3); }
}

#shopee-lista table.precos .sobra {
  position:relative;
  flex-wrap:wrap;
  justify-content:flex-end;
  width:100%;
  gap:var(--space-1);
  font-variant-numeric:tabular-nums;
}
#shopee-lista table.precos tbody tr:not(.det) > td:last-child { position:relative; }
#shopee-lista table.precos .sobra .v {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:var(--fs-md);
  font-weight:800;
}
#shopee-lista table.precos .sobra .mut.s { color:var(--mut); font-size:var(--fs-xs); }
#shopee-lista table.precos tbody tr:not(.det) > td:last-child > .s.badtxt,
#shopee-lista table.precos tbody tr:not(.det) > td:last-child > .s.warntxt,
#shopee-lista table.precos tbody tr:not(.det) > td:last-child > .s.oktxt {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-1);
  width:fit-content;
  margin:var(--space-1) 0 0 auto;
  padding:var(--space-1) var(--space-2);
  border:1px solid color-mix(in srgb,currentColor 30%,var(--border));
  border-radius:var(--radius-control);
  background:color-mix(in srgb,currentColor 10%,var(--surface));
  font-weight:700;
  line-height:1.3;
}
#shopee-lista table.precos tbody tr[data-sit] > td:last-child > .s.badtxt::before,
#shopee-lista table.precos tbody tr[data-sit] > td:last-child > .s.warntxt::before,
#shopee-lista table.precos tbody tr[data-sit] > td:last-child > .s.oktxt::before {
  display:inline-grid;
  width:var(--space-5);
  height:var(--space-5);
  flex:none;
  place-items:center;
  border-radius:var(--radius-control);
  background:color-mix(in srgb,currentColor 16%,var(--surface));
  content:"?";
  font-size:var(--fs-sm);
  font-weight:800;
  line-height:1;
}
#shopee-lista table.precos tbody tr[data-sit="prejuizo"] > td:last-child > .s.badtxt::before { content:"×"; }
#shopee-lista table.precos tbody tr[data-sit="abaixo"] > td:last-child > .s.warntxt::before { content:"!"; }
#shopee-lista table.precos tbody tr[data-sit="ok"] > td:last-child > .s.oktxt::before { content:"✓"; }
#shopee-lista table.precos tbody tr:not(.det) > td:last-child > .s:not(.badtxt):not(.warntxt):not(.oktxt) {
  margin-top:var(--space-1);
  color:var(--mut);
  font-size:var(--fs-xs);
  overflow-wrap:anywhere;
}
#shopee-lista table.precos button.link.ver-shopee {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-1);
  width:fit-content;
  min-height:var(--space-6);
  margin:var(--space-1) 0 0 auto;
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--border);
  border-radius:var(--radius-control);
  background:var(--surface);
  color:var(--link);
  text-decoration:none;
}
#shopee-lista table.precos button.link.ver-shopee:hover {
  border-color:var(--border2);
  background:var(--surface3);
}

#shopee-lista tr.det .conta2 > div { min-width:0; }
#shopee-lista tr.det .conta2 > div > p.mut {
  margin:0 0 var(--space-2);
  padding-inline:var(--space-1);
  font-size:var(--fs-sm);
}
#shopee-lista tr.det .conta2 > div > table.mini {
  width:100%;
  border:1px solid var(--border);
  border-collapse:separate;
  border-spacing:0;
  border-radius:var(--radius-card);
  background:var(--surface2);
  overflow:hidden;
}
#shopee-lista tr.det .conta2 > div > table.mini td {
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
#shopee-lista tr.det .conta2 > div > table.mini td:first-child {
  width:62%;
  color:var(--mut);
}
#shopee-lista tr.det .conta2 > div > table.mini td.num {
  width:38%;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:normal;
}
#shopee-lista tr.det .conta2 > div > table.mini tr:last-child td { border-bottom:0; }
#shopee-lista tr.det .conta2 > div > table.mini tr.tot td {
  padding-block:var(--space-3);
  background:var(--surface3);
  color:var(--tx);
  font-weight:700;
}
#shopee-lista tr.det .conta2 > div > table.mini tr.tot td:first-child {
  border-radius:var(--radius-control) 0 0 var(--radius-control);
}
#shopee-lista tr.det .conta2 > div > table.mini tr.tot td:last-child {
  border-radius:0 var(--radius-control) var(--radius-control) 0;
}
#shopee-lista tr.det .conta2 > div > table.mini tr.tot td.num b {
  font-family:var(--font-ui);
  font-size:var(--fs-lg);
  font-variant-numeric:tabular-nums;
}
#shopee-lista tr.det .conta2 > div > table.mini tr.tot + tr td {
  background:color-mix(in srgb,var(--info) 8%,var(--surface2));
  color:var(--tx);
}
#shopee-lista tr.det .conta2 > div > table.mini tr.tot + tr td:first-child { font-weight:700; }
#shopee-lista tr.det .conta2 > div > table.mini tr.tot + tr td.num { font-weight:700; }
#shopee-lista tr.det .conta2 > div > table.mini tr.tot + tr td.num .mut {
  display:block;
  margin-top:var(--space-1);
  font-size:var(--fs-xs);
  font-weight:400;
}
#shopee-lista tr.det .conta2 > div > table.mini tr.tot + tr ~ tr td {
  padding-block:var(--space-1);
  font-size:var(--fs-sm);
}
#shopee-lista tr.det .conta2 > div > table.mini tr.tot + tr ~ tr td:first-child { color:var(--mut); }

@media (min-width:701px) {
  #shopee-lista table.precos tbody tr:not(.det) > td { vertical-align:middle; }
  #shopee-lista table.precos .shopee-acao {
    display:grid;
    grid-template-columns:max-content max-content;
    justify-content:center;
    align-items:center;
    gap:var(--space-1) var(--space-2);
  }
  #shopee-lista table.precos .shopee-acao > :first-child {
    grid-column:1;
    grid-row:1;
    justify-self:start;
    text-align:left;
  }
  #shopee-lista table.precos .shopee-acao > .v {
    grid-column:2;
    grid-row:1;
    justify-self:end;
    white-space:nowrap;
  }
  #shopee-lista table.precos .shopee-acao > .btn,
  #shopee-lista table.precos button.link.ver-shopee {
    grid-column:2;
    grid-row:2;
    justify-self:center;
    width:auto;
    min-width:0;
    margin:0;
    padding-inline:var(--space-1);
    white-space:normal;
  }
  #shopee-lista table.precos .shopee-acao > .btn {
    grid-column:1;
    text-align:center;
  }
  #shopee-lista table.precos .shopee-acao > .mut.s:nth-child(3) {
    grid-column:1/-1;
    grid-row:2;
    text-align:left;
  }
  #shopee-lista table.precos .shopee-acao > .mut.s:nth-child(3) ~ .btn,
  #shopee-lista table.precos .shopee-acao > .mut.s:nth-child(3) ~ button.link.ver-shopee {
    grid-row:3;
  }
  #shopee-lista table.precos .shopee-acao > .mut.s:first-child + button.link.ver-shopee {
    grid-column:2;
    grid-row:1;
  }
}

#shopee-panel .shopee-modelo-acoes {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-3);
}
#shopee-panel .shopee-modelo-acoes p { margin:0; }
#shopee-panel .shopee-meta-controle {
  display:grid;
  grid-template-columns:minmax(15rem, 22rem) minmax(0, auto);
  align-items:end;
  gap:var(--space-2) var(--space-3);
  margin-bottom:var(--space-3);
  padding:var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--surface2);
}
#shopee-panel .shopee-meta-controle .field { min-width:0; margin:0; }
#shopee-panel .shopee-meta-acoes {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
#shopee-panel #shopee-meta-status {
  grid-column:1 / -1;
  margin:0;
  overflow-wrap:anywhere;
}
#shopee-panel .shopee-simulador {
  min-width:0;
  padding:var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  background:var(--surface2);
}
#shopee-panel .shopee-simulador h3 {
  margin:0 0 var(--space-2);
  font-size:var(--fs-md);
}
#shopee-panel .shopee-simulador .field { max-width:22rem; }
#shopee-panel .shopee-sim-acoes {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}
#shopee-panel .shopee-sim-resultado {
  margin-top:var(--space-3);
  overflow-wrap:anywhere;
  line-height:1.5;
}
#shopee-panel .shopee-sim-resultado .mut { margin-top:var(--space-1); }
#shopee-panel .shopee-sim-resumo {
  margin-top:var(--space-1);
  color:var(--info);
  font-size:var(--fs-xs);
  white-space:normal;
}
#shopee-panel .shopee-export-ignoradas {
  width:100%;
  color:var(--mut);
  font-size:var(--fs-sm);
}
#shopee-panel .shopee-export-ignoradas summary { cursor:pointer; color:var(--warn); }
#shopee-panel .shopee-export-ignoradas ul { margin:var(--space-2) 0; padding-left:var(--space-5); }
#shopee-panel .shopee-export-ignoradas li { margin:var(--space-1) 0; overflow-wrap:anywhere; }

@media (max-width:700px) {
  #shopee-lista table.precos { display:block; border-spacing:0; }
  #shopee-lista table.precos thead {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  #shopee-lista table.precos tbody { display:grid; gap:var(--space-2); }
  #shopee-lista table.precos tbody tr:not(.det) {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"produto produto" "custo preco" "planilha planilha" "margem lucro" "novo novo";
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    background:var(--surface2);
  }
  #shopee-lista table.precos tbody tr:not(.det)[data-sit="prejuizo"] { box-shadow:inset var(--space-1) 0 0 var(--bad); }
  #shopee-lista table.precos tbody tr:not(.det)[data-sit="abaixo"] { box-shadow:inset var(--space-1) 0 0 var(--warn); }
  #shopee-lista table.precos tbody tr:not(.det)[data-sit="sem_custo"],
  #shopee-lista table.precos tbody tr:not(.det)[data-sit="sem_vinculo"] { box-shadow:inset var(--space-1) 0 0 var(--border2); }
  #shopee-lista table.precos tbody tr:not(.det)[data-sit] > td:first-child { box-shadow:none; }
  #shopee-lista table.precos tbody tr:not(.det) > td {
    display:block;
    min-width:0;
    padding:var(--space-2) var(--space-3);
    border:0;
    border-radius:0;
    background:transparent;
    text-align:left;
    white-space:normal;
  }
  #shopee-lista table.precos tbody tr:not(.det) > td:first-child {
    grid-area:produto;
    min-width:0;
    border:0;
    border-bottom:1px solid var(--border);
    border-radius:0;
  }
  #shopee-lista table.precos tbody tr:not(.det) > td:nth-child(2) { grid-area:custo; }
  #shopee-lista table.precos tbody tr:not(.det) > td:nth-child(3) { grid-area:preco; }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-planilha { grid-area:planilha; }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem { grid-area:margem; }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-acao { grid-area:novo; }
  #shopee-lista table.precos tbody tr:not(.det) > td:nth-child(2)::before,
  #shopee-lista table.precos tbody tr:not(.det) > td:nth-child(3)::before,
  #shopee-lista table.precos tbody tr:not(.det) > td.col-planilha::before,
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem::before,
  #shopee-lista table.precos tbody tr:not(.det) > td.col-acao::before {
    display:block;
    margin-bottom:var(--space-1);
    color:var(--mut);
    font-size:var(--fs-xs);
    font-weight:600;
  }
  #shopee-lista table.precos tbody tr:not(.det) > td:nth-child(2)::before { content:"Seu custo"; }
  #shopee-lista table.precos tbody tr:not(.det) > td:nth-child(3)::before { content:"Preço no WeDrop"; }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-planilha::before { content:"Preço na planilha"; }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem::before { content:"Margem"; }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-acao::before { content:"Ações"; }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem,
  #shopee-lista table.precos tbody tr:not(.det) > td.col-acao {
    border:0;
    border-top:1px solid var(--border);
    border-radius:0;
  }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem > .shopee-celula {
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    width:100%;
    margin-inline:0;
    text-align:left;
  }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-acao > .shopee-acao {
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    text-align:left;
  }
  #shopee-lista table.precos .sobra { position:static; width:auto; justify-content:flex-start; }
  #shopee-lista table.precos .sobra .v { position:static; transform:none; font-size:var(--fs-lg); }
  #shopee-panel .shopee-modelo-acoes { align-items:flex-start; }
  #shopee-panel .shopee-modelo-acoes .btn { width:100%; }
  #shopee-panel .shopee-meta-controle { grid-template-columns:minmax(0,1fr); }
  #shopee-panel .shopee-meta-acoes { display:grid; grid-template-columns:minmax(0,1fr); }
  #shopee-panel .shopee-meta-acoes .btn { width:100%; }
  #shopee-panel .shopee-sim-acoes .btn { flex:1 1 100%; }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem > .s.badtxt,
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem > .s.warntxt,
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem > .s.oktxt { margin:0; }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-margem > .s:not(.badtxt):not(.warntxt):not(.oktxt) { margin:0; }
  #shopee-lista table.precos button.link.ver-shopee { margin:0; }
  #shopee-lista table.precos tbody tr.det { display:block; }
  #shopee-lista table.precos tbody tr.det > td { display:block; }
}

/* Preço da planilha da Shopee: coluna própria; vermelho quando difere do preço de venda do WeDrop. */
#shopee-lista table.precos.com-planilha col.c-anuncio { width:24%; }
#shopee-lista table.precos.com-planilha col.c-custo { width:9%; }
#shopee-lista table.precos.com-planilha col.c-preco { width:12%; }
#shopee-lista table.precos.com-planilha col.c-planilha { width:13%; }
#shopee-lista table.precos.com-planilha col.c-margem { width:22%; }
#shopee-lista table.precos.com-planilha col.c-acao { width:20%; }
#shopee-lista table.precos th.col-planilha,
#shopee-lista table.precos td.col-planilha { text-align:center; font-variant-numeric:tabular-nums; }
#shopee-lista .planilha-difere { color:var(--bad); font-weight:700; }
@media (min-width:701px) {
  #shopee-lista table.precos .shopee-acao { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2); }
  #shopee-lista table.precos .shopee-acao > * { grid-column:auto; grid-row:auto; justify-self:auto; text-align:right; }
}

/* Anúncio principal e opções com valores independentes. */
#shopee-lista table.precos tbody tr.shopee-grupo > td {
  padding:var(--space-3);
  border:1px solid var(--border2);
  border-radius:var(--radius-card);
  background:var(--surface);
}
#shopee-lista table.precos tbody tr.shopee-grupo .t { flex:1; }
#shopee-lista table.precos tbody tr.shopee-grupo > td:first-child .t > .mut.s { padding:0; border:0; border-radius:0; background:transparent; }
#shopee-lista table.precos tbody tr.shopee-grupo [data-shopee-variacoes] { align-self:center; flex-shrink:0; }
@media (max-width:700px) {
  #shopee-lista table.precos tbody tr.shopee-grupo { display:block; }
  #shopee-lista table.precos tbody tr.shopee-grupo > td { border:0; }
  #shopee-lista table.precos tbody tr.shopee-grupo button { width:100%; }
}

/* Colunas independentes para comparar custo, preco, margem e lucro. */
.shopee-leitura-precos { margin:0 0 var(--space-3); max-width:80ch; }
#shopee-lista .planilha-difere { color:var(--tx); }
#shopee-lista .col-planilha .planilha-difere.s { color:var(--mut); font-weight:400; }
#shopee-lista table.precos tbody tr:not(.det) > td:first-child .t { font-size:var(--fs-sm); font-weight:600; }
#shopee-lista .shopee-margem { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-1); text-align:left; min-width:0; }
#shopee-lista .shopee-margem .pill { border-radius:var(--radius-control); font-size:var(--fs-xs); white-space:normal; }
#shopee-lista .shopee-margem .v, #shopee-lista .col-lucro .v { font-size:var(--fs-md); font-variant-numeric:tabular-nums; white-space:nowrap; }
#shopee-lista .col-lucro .neg { color:var(--bad); }
#shopee-lista table.precos td.col-planilha > b { color:var(--tx); }
@media (min-width:701px) {
  #shopee-lista table.precos col.c-anuncio { width:30%; }
  #shopee-lista table.precos col.c-custo { width:9%; }
  #shopee-lista table.precos col.c-preco { width:12%; }
  #shopee-lista table.precos col.c-margem { width:18%; }
  #shopee-lista table.precos col.c-lucro { width:12%; }
  #shopee-lista table.precos col.c-acao { width:19%; }
  #shopee-lista table.precos.com-planilha col.c-anuncio { width:24%; }
  #shopee-lista table.precos.com-planilha col.c-custo { width:8%; }
  #shopee-lista table.precos.com-planilha col.c-preco { width:11%; }
  #shopee-lista table.precos.com-planilha col.c-planilha { width:13%; }
  #shopee-lista table.precos.com-planilha col.c-margem { width:16%; }
  #shopee-lista table.precos.com-planilha col.c-lucro { width:11%; }
  #shopee-lista table.precos.com-planilha col.c-acao { width:17%; }
  #shopee-lista table.precos tbody tr:not(.det) > td { padding-block:var(--space-3); }
  #shopee-lista table.precos td.col-margem, #shopee-lista table.precos th.col-margem { padding-inline:var(--space-3); text-align:left; }
  #shopee-lista table.precos td.col-lucro, #shopee-lista table.precos th.col-lucro { padding-inline:var(--space-3); text-align:right; }
}
@media (max-width:700px) {
  #shopee-lista table.precos tbody tr:not(.det) > td.col-lucro { grid-area:lucro; border-top:1px solid var(--border); }
  #shopee-lista table.precos tbody tr:not(.det) > td.col-lucro::before { content:attr(data-label); display:block; margin-bottom:var(--space-1); color:var(--mut); font-size:var(--fs-xs); font-weight:600; }
}