/* ---------------------------------------------------------------------------
   Lista de Compras (/lista-de-compras) — dashboard estilo SaaS.
   Estrutura: menu lateral fixo + área de trabalho com vistas (Início, Listas,
   Compras, Métricas, Ajustes). Paleta quente: areia, terracota e âmbar.
   Tudo com prefixo .lc- para não vazar para o resto do site.
   --------------------------------------------------------------------------- */

.lc-app {
  /* Paleta quente */
  --areia:   #fbf7f0;   /* fundo da área de trabalho */
  --areia2:  #f4ecdf;   /* blocos suaves */
  --branco:  #ffffff;
  --linha:   #ece1d1;
  --tinta:   #2b2018;   /* texto forte */
  --tinta2:  #7d6b5b;   /* texto secundário */
  --fogo:    #e2571e;   /* primária (terracota) */
  --fogo2:   #b8420f;
  --fogo10:  #fdeee7;
  --ambar:   #f5a524;
  --ambar10: #fdf0d8;
  --escuro:  #3b2a1e;   /* bloco escuro do modo compras */
  --escuro2: #4d382a;
  --verde:   #6b7f2b;   /* confirmação (oliva quente) */
  --verde10: #f2f5e4;
  --perigo:  #c0392b;
  --sh:      0 1px 2px rgba(43,32,24,.05), 0 8px 24px rgba(43,32,24,.05);
  --sh2:     0 12px 32px rgba(43,32,24,.14);
  --menu:    268px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tinta);
  background: var(--areia);
  min-height: 100vh;
}
.lc-app *, .lc-app *::before, .lc-app *::after { box-sizing: border-box; }
.lc-app :where(button) { font: inherit; cursor: pointer; }
.lc-app :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; }
.lc-app :where(ul) { list-style: none; padding: 0; }
.lc-app a { color: inherit; }

/* ==========================================================================
   Menu lateral
   ========================================================================== */
.lc-menu {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--menu); z-index: 60;
  background: var(--branco); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; overflow-y: auto;
}
.lc-marca { display: flex; align-items: center; gap: 10px; padding: 22px 20px; border-bottom: 1px solid var(--linha); }
.lc-marca-ico {
  width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--fogo); color: #fff;
}
.lc-marca b { display: block; font-size: .92rem; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.lc-marca span { display: block; font-size: .72rem; color: var(--tinta2); letter-spacing: .12em; text-transform: uppercase; }

.lc-nav { padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.lc-nav-tit {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta2); padding: 18px 12px 8px;
}
.lc-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 0; background: none; color: var(--tinta); font-size: .95rem; font-weight: 500;
  padding: 11px 14px; border-radius: 12px; transition: background .15s, color .15s;
}
.lc-nav button:hover { background: var(--areia2); }
.lc-nav button svg { flex: none; color: var(--tinta2); }
.lc-nav button.ativo { background: var(--escuro); color: #fff; font-weight: 600; }
.lc-nav button.ativo svg { color: var(--ambar); }
.lc-nav button .lc-tag {
  margin-left: auto; background: var(--fogo10); color: var(--fogo2);
  font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.lc-nav button.ativo .lc-tag { background: rgba(255,255,255,.16); color: #fff; }

.lc-menu-pe { margin-top: auto; padding: 16px; border-top: 1px solid var(--linha); }
.lc-perfil { display: flex; align-items: center; gap: 10px; }
.lc-perfil i {
  width: 38px; height: 38px; flex: none; border-radius: 999px; display: grid; place-items: center;
  background: var(--escuro); color: #fff; font-style: normal; font-weight: 700;
}
.lc-perfil b { display: block; font-size: .88rem; font-weight: 700; }
.lc-perfil span { display: block; font-size: .75rem; color: var(--tinta2); }
.lc-voltar { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .78rem; color: var(--tinta2); }
.lc-voltar:hover { color: var(--fogo); }

/* ==========================================================================
   Área de trabalho
   ========================================================================== */
.lc-obra { margin-left: var(--menu); min-height: 100vh; display: flex; flex-direction: column; }
.lc-topo-mob { display: none; }
.lc-vista { flex: 1; padding: 34px 40px 60px; max-width: 1180px; width: 100%; }

.lc-cabeca h1 { font-size: 2.35rem; font-weight: 800; letter-spacing: -.8px; line-height: 1.1; }
.lc-cabeca p { color: var(--tinta2); font-size: 1.05rem; margin-top: 6px; }
.lc-cabeca { margin-bottom: 26px; }

/* Botões */
.lc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; border-radius: 14px; padding: 15px 24px;
  font-size: .98rem; font-weight: 700; transition: filter .15s, background .15s, border-color .15s;
}
.lc-btn--forte { background: var(--escuro); color: #fff; }
.lc-btn--forte:hover { background: var(--escuro2); }
.lc-btn--fogo { background: var(--fogo); color: #fff; }
.lc-btn--fogo:hover { background: var(--fogo2); }
.lc-btn--ambar { background: var(--ambar); color: var(--tinta); }
.lc-btn--ambar:hover { filter: brightness(.96); }
.lc-btn--calmo { background: var(--branco); color: var(--tinta); border-color: var(--linha); }
.lc-btn--calmo:hover { border-color: var(--fogo); color: var(--fogo2); }
.lc-btn--peq { padding: 9px 16px; font-size: .85rem; border-radius: 10px; }
.lc-btn:disabled { opacity: .45; cursor: not-allowed; }
.lc-acoes-topo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }

/* Cartões */
.lc-cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 18px; padding: 22px; box-shadow: var(--sh); }
.lc-cartao + .lc-cartao { margin-top: 20px; }
.lc-cartao-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lc-cartao-cabeca .ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--fogo10); color: var(--fogo); }
.lc-cartao-cabeca h2 { font-size: 1.2rem; font-weight: 800; }
.lc-cartao-cabeca p { font-size: .85rem; color: var(--tinta2); }
.lc-cartao-cabeca .lc-btn { margin-left: auto; }

/* Painel bege (como o bloco de sugestões da referência) */
.lc-painel { background: var(--areia2); border: 1px solid var(--linha); border-radius: 20px; padding: 22px; }
.lc-painel + .lc-painel, .lc-cartao + .lc-painel, .lc-painel + .lc-cartao { margin-top: 20px; }

/* KPIs */
.lc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.lc-kpi { background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; padding: 18px; }
.lc-kpi span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta2); }
.lc-kpi strong { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.5px; margin-top: 4px; }
.lc-kpi em { display: block; font-style: normal; font-size: .8rem; color: var(--tinta2); margin-top: 2px; }
.lc-kpi--fogo strong { color: var(--fogo); }
.lc-kpi--estourou strong { color: var(--perigo); }

/* Barra de progresso */
.lc-barra { height: 8px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.lc-barra i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--fogo); transition: width .4s; }
.lc-barra i.estourou { background: var(--perigo); }

/* ==========================================================================
   Cartões de lista
   ========================================================================== */
.lc-listas { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.lc-lista-cartao {
  position: relative; text-align: left; width: 100%;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 18px; padding: 20px;
  box-shadow: var(--sh); transition: transform .18s, border-color .18s, box-shadow .18s;
}
.lc-lista-cartao:hover { transform: translateY(-3px); border-color: var(--fogo); box-shadow: var(--sh2); }
.lc-lista-cartao.ativa { border-color: var(--fogo); box-shadow: 0 0 0 3px var(--fogo10); }
.lc-lista-topo { display: flex; align-items: center; gap: 12px; }
.lc-lista-ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--ambar10); color: var(--ambar); }
.lc-lista-cartao b { display: block; font-size: 1.05rem; font-weight: 800; }
.lc-lista-cartao small { display: block; color: var(--tinta2); font-size: .82rem; margin-top: 1px; }
.lc-lista-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.lc-lista-rodape span { font-size: .78rem; color: var(--tinta2); }
.lc-lista-rodape b { font-size: 1.05rem; color: var(--fogo); }
.lc-selo-ativa { position: absolute; top: 14px; right: 14px; background: var(--fogo); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; }

/* ==========================================================================
   Sugestões / modelos (linhas do painel)
   ========================================================================== */
.lc-linhas { display: flex; flex-direction: column; gap: 10px; }
.lc-linha {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--branco); border: 1px solid transparent; border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(43,32,24,.04); transition: border-color .15s, transform .15s;
}
.lc-linha:hover { border-color: var(--fogo); transform: translateX(2px); }
.lc-linha-ico { width: 34px; height: 34px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--fogo10); color: var(--fogo); }
.lc-linha-txt { flex: 1; min-width: 0; }
.lc-linha-txt b { display: block; font-weight: 700; font-size: .98rem; }
.lc-linha-txt small { display: block; color: var(--tinta2); font-size: .82rem; margin-top: 1px; }
.lc-linha-fim { flex: none; text-align: right; font-size: .85rem; font-weight: 700; color: var(--fogo); }

/* ==========================================================================
   Modo compras — bloco escuro + itens
   ========================================================================== */
.lc-compras-topo { background: var(--escuro); color: #fff; padding: 26px 40px 30px; }
.lc-compras-topo .voltar { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: rgba(255,255,255,.72); font-size: .88rem; padding: 0; margin-bottom: 14px; }
.lc-compras-topo .voltar:hover { color: #fff; }
.lc-compras-topo h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; }
.lc-orc {
  background: rgba(255,255,255,.08); border-radius: 14px; padding: 16px 18px; margin-top: 18px;
}
.lc-orc-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lc-orc-linha span { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.lc-orc-linha b { font-size: 1.35rem; font-weight: 800; }
.lc-orc-linha b em { font-style: normal; font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.6); }
.lc-orc .lc-barra { background: rgba(255,255,255,.16); margin: 12px 0 10px; }
.lc-orc .lc-barra i { background: var(--ambar); }
.lc-orc .lc-barra i.estourou { background: #ff8a65; }
.lc-orc-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .85rem; color: rgba(255,255,255,.75); }
.lc-orc-pe b { color: var(--ambar); }
.lc-orc-pe b.estourou { color: #ffab91; }

.lc-busca { position: relative; margin-top: 16px; }
.lc-busca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.55); }
.lc-busca input {
  width: 100%; font: inherit; color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 13px 16px 13px 44px; outline: none;
}
.lc-busca input::placeholder { color: rgba(255,255,255,.5); }
.lc-busca input:focus { border-color: var(--ambar); }

.lc-compras-corpo { background: var(--branco); border-radius: 22px 22px 0 0; margin-top: -14px; padding: 26px 40px 130px; flex: 1; }
.lc-grupo + .lc-grupo { margin-top: 26px; }
.lc-grupo-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.lc-grupo-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--areia2); font-size: 19px; }
.lc-grupo-cabeca h3 { font-size: 1.1rem; font-weight: 800; }
.lc-grupo-cabeca span { color: var(--tinta2); font-size: .9rem; font-weight: 600; }
.lc-grupo-cabeca .soma { margin-left: auto; font-size: .9rem; font-weight: 700; color: var(--tinta2); }

.lc-item { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--linha); }
.lc-item:last-child { border-bottom: 0; }
.lc-check {
  width: 28px; height: 28px; flex: none; padding: 0; border-radius: 999px;
  border: 2px solid var(--linha); background: var(--branco); color: transparent;
  display: grid; place-items: center; transition: background .15s, border-color .15s, color .15s;
}
.lc-check:hover { border-color: var(--fogo); }
.lc-item.ok .lc-check { background: var(--verde); border-color: var(--verde); color: #fff; }
.lc-item-txt { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0; -webkit-user-select: none; user-select: none; }
.lc-item-txt b { display: block; font-size: 1.02rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-item-txt small { display: block; color: var(--tinta2); font-size: .82rem; margin-top: 1px; }
.lc-item-txt small.sem { color: var(--fogo); font-weight: 600; }
.lc-item.ok .lc-item-txt b { text-decoration: line-through; color: var(--tinta2); }
.lc-item-val { flex: none; font-size: 1.02rem; font-weight: 800; }
.lc-item.ok .lc-item-val { color: var(--tinta2); font-weight: 600; }
.lc-lixo { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--tinta2); }
.lc-lixo:hover { background: #fbeae8; color: var(--perigo); }

/* Barra fixa de ações do modo compras */
.lc-barra-baixo {
  position: fixed; left: var(--menu); right: 0; bottom: 0; z-index: 50;
  padding: 16px 40px 20px;
  background: linear-gradient(to top, var(--branco) 62%, rgba(255,255,255,0));
  display: flex; gap: 14px; justify-content: center;
}
.lc-barra-baixo .lc-btn { flex: 1; max-width: 330px; border-radius: 999px; box-shadow: var(--sh2); }
.lc-barra-baixo .lc-btn small { display: block; font-weight: 500; font-size: .74rem; opacity: .8; }
.lc-barra-baixo .lc-btn span { display: block; text-align: left; }

/* ==========================================================================
   Métricas
   ========================================================================== */
.lc-graf { display: flex; flex-direction: column; gap: 14px; }
.lc-graf-linha { display: grid; grid-template-columns: 170px 1fr 96px; gap: 14px; align-items: center; }
.lc-graf-linha span { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-graf-linha b { text-align: right; font-size: .92rem; font-weight: 800; }
.lc-graf-barra { height: 12px; border-radius: 999px; background: var(--areia2); overflow: hidden; }
.lc-graf-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ambar), var(--fogo)); }

/* ==========================================================================
   Formulários
   ========================================================================== */
.lc-campo { display: block; margin-bottom: 14px; }
.lc-campo span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta2); margin-bottom: 6px; }
.lc-campo input, .lc-campo select {
  width: 100%; font: inherit; color: var(--tinta); background: var(--branco);
  border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lc-campo input:focus, .lc-campo select:focus { border-color: var(--fogo); box-shadow: 0 0 0 3px var(--fogo10); }
.lc-linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lc-linha-campos--3 { grid-template-columns: 1fr 90px 110px; }

/* ==========================================================================
   Modais e painel deslizante
   ========================================================================== */
.lc-modal[hidden], .lc-sheet[hidden], .lc-menu-fundo[hidden] { display: none; }
.lc-modal {
  position: fixed; inset: 0; z-index: 200; background: rgba(43,32,24,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lc-modal-cx { background: var(--branco); border-radius: 20px; box-shadow: var(--sh2); width: 100%; max-width: 430px; overflow: hidden; }
.lc-modal-topo { background: var(--escuro); color: #fff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lc-modal-topo h3 { font-size: 1.1rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-modal-topo button { border: 0; background: none; color: rgba(255,255,255,.8); padding: 4px; border-radius: 999px; display: grid; place-items: center; }
.lc-modal-topo button:hover { background: rgba(255,255,255,.14); color: #fff; }
.lc-modal-corpo { padding: 20px; }
.lc-modal-corpo .lc-btn { width: 100%; }
.lc-dica { font-size: .8rem; color: var(--tinta2); margin-top: -4px; margin-bottom: 14px; }

.lc-sheet { position: fixed; inset: 0; z-index: 210; background: rgba(43,32,24,.55); display: flex; align-items: flex-end; justify-content: center; }
.lc-sheet-cx { background: var(--branco); width: 100%; max-width: 620px; height: 92vh; border-radius: 24px 24px 0 0; box-shadow: var(--sh2); display: flex; flex-direction: column; }
@media (min-width: 700px) { .lc-sheet { align-items: center; padding: 20px; } .lc-sheet-cx { height: auto; max-height: 86vh; border-radius: 22px; } }
.lc-sheet-topo { padding: 20px 22px; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lc-sheet-topo h2 { font-size: 1.25rem; font-weight: 800; }
.lc-sheet-topo p { font-size: .86rem; color: var(--tinta2); margin-top: 2px; }
.lc-sheet-topo button { border: 0; background: none; color: var(--tinta2); padding: 8px; border-radius: 999px; display: grid; place-items: center; }
.lc-sheet-topo button:hover { background: var(--areia2); color: var(--tinta); }
.lc-abas { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px; background: var(--areia); border-bottom: 1px solid var(--linha); }
.lc-abas::-webkit-scrollbar { display: none; }
.lc-abas button { white-space: nowrap; border: 1px solid var(--linha); background: var(--branco); color: var(--tinta2); border-radius: 999px; padding: 8px 16px; font-size: .86rem; font-weight: 700; }
.lc-abas button:hover { border-color: var(--fogo); color: var(--fogo2); }
.lc-abas button.ativa { background: var(--fogo); color: #fff; border-color: var(--fogo); }
.lc-sheet-corpo { flex: 1; overflow-y: auto; padding: 20px; background: var(--areia); }
.lc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.lc-sug {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
  background: var(--branco); border: 2px solid transparent; border-radius: 14px; padding: 14px;
  box-shadow: 0 1px 2px rgba(43,32,24,.05); font-weight: 600; color: var(--tinta);
}
.lc-sug:hover { border-color: var(--linha); }
.lc-sug.sel { background: var(--fogo10); border-color: var(--fogo); color: var(--fogo2); }
.lc-sug i { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--areia2); color: var(--tinta2); display: grid; place-items: center; }
.lc-sug.sel i { background: var(--fogo); color: #fff; }
.lc-sheet-pe { padding: 18px 20px; border-top: 1px solid var(--linha); background: var(--branco); border-radius: 0 0 22px 22px; }
.lc-sheet-pe .lc-btn { width: 100%; }

/* ==========================================================================
   Estado vazio, aviso e toast
   ========================================================================== */
.lc-vazio { text-align: center; padding: 40px 20px; }
.lc-vazio-ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; background: var(--areia2); color: var(--tinta2); }
.lc-vazio h3 { font-size: 1.15rem; font-weight: 800; }
.lc-vazio p { color: var(--tinta2); margin: 6px auto 18px; max-width: 380px; }

.lc-aviso[hidden] { display: none; }
.lc-aviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--ambar10); border: 1px solid #f2d9a6; color: #8a5a12;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; font-size: .9rem; font-weight: 600;
}
.lc-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  background: var(--tinta); color: #fff; font-weight: 600; font-size: .9rem;
  padding: 12px 20px; border-radius: 999px; z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: calc(100vw - 32px); text-align: center;
}
.lc-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Conteúdo de apoio (SEO), no fim do Início
   ========================================================================== */
.lc-texto { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linha); max-width: 760px; }
.lc-texto h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
.lc-texto h2 { font-size: 1.3rem; font-weight: 800; margin: 26px 0 10px; }
.lc-texto h3 { font-size: 1rem; font-weight: 700; margin: 14px 0 4px; }
.lc-texto p { color: var(--tinta2); margin-bottom: 10px; line-height: 1.65; }
.lc-texto ul { list-style: disc; padding-left: 20px; color: var(--tinta2); }
.lc-texto li { margin-bottom: 6px; line-height: 1.6; }
.lc-texto details { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; }
.lc-texto details summary { font-weight: 700; cursor: pointer; }
.lc-texto details summary::marker { color: var(--fogo); }
.lc-texto details p:first-of-type { margin-top: 10px; }
.lc-leia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.lc-leia a { display: block; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 16px; transition: border-color .2s, transform .2s; }
.lc-leia a:hover { border-color: var(--fogo); transform: translateY(-2px); }
.lc-leia span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fogo); font-weight: 800; }
.lc-leia b { display: block; margin: 4px 0; }
.lc-leia p { margin: 0; font-size: .86rem; color: var(--tinta2); }
.lc-rodape { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--linha); font-size: .8rem; color: var(--tinta2); }
.lc-rodape a:hover { color: var(--fogo); }

/* ==========================================================================
   Responsivo
   ========================================================================== */
.lc-menu-fundo { position: fixed; inset: 0; background: rgba(43,32,24,.5); z-index: 55; }

@media (max-width: 1023px) {
  .lc-menu { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--sh2); }
  .lc-app.menu-aberto .lc-menu { transform: translateX(0); }
  .lc-obra { margin-left: 0; }
  .lc-barra-baixo { left: 0; }

  .lc-topo-mob {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--linha); padding: 12px 16px;
  }
  .lc-topo-mob button { border: 0; background: none; color: var(--tinta); padding: 6px; display: grid; place-items: center; }
  .lc-topo-mob b { font-size: .95rem; font-weight: 800; }
  .lc-topo-mob .lc-marca-ico { width: 32px; height: 32px; border-radius: 9px; }

  .lc-vista { padding: 22px 18px 60px; }
  .lc-cabeca h1 { font-size: 1.7rem; }
  .lc-cabeca p { font-size: .95rem; }
  .lc-compras-topo { padding: 20px 18px 26px; }
  .lc-compras-topo h1 { font-size: 1.5rem; }
  .lc-compras-corpo { padding: 20px 16px 140px; border-radius: 20px 20px 0 0; }
  .lc-barra-baixo { padding: 12px 16px 16px; }
  .lc-graf-linha { grid-template-columns: 116px 1fr 84px; gap: 10px; }
}

@media (max-width: 560px) {
  .lc-acoes-topo { grid-template-columns: 1fr; }
  .lc-kpis { grid-template-columns: 1fr 1fr; }
  .lc-linha-campos, .lc-linha-campos--3 { grid-template-columns: 1fr; }
  .lc-grade { grid-template-columns: 1fr 1fr; }
  /* Empilhados, os dois botões comiam meia tela do celular: viram uma linha só. */
  .lc-barra-baixo { gap: 10px; }
  .lc-barra-baixo .lc-btn { max-width: none; padding: 13px 12px; font-size: .88rem; gap: 8px; }
  .lc-barra-baixo .lc-btn small { display: none; }
  .lc-compras-corpo { padding-bottom: 104px; }
  .lc-item-val { font-size: .95rem; }
}

/* A barra de cookies é global (cookie-consent.js) e nasce verde do style.css.
   Aqui ela veste a paleta quente — o botão verde destoava do painel. */
body:has(.lc-app) .cookie-bar { border-color: #ece1d1; }
body:has(.lc-app) .cookie-accept { background: #e2571e; }
body:has(.lc-app) .cookie-accept:hover { background: #b8420f; }
body:has(.lc-app) .cookie-bar a { color: #b8420f; }

/* ==========================================================================
   Impressão — só a lista
   ========================================================================== */
@media print {
  .lc-menu, .lc-topo-mob, .lc-barra-baixo, .lc-busca, .lc-modal, .lc-sheet,
  .lc-toast, .lc-aviso, .lc-lixo, .lc-texto, .lc-menu-fundo, .lc-acoes-topo,
  .lc-compras-topo .voltar, .ad-slot, .back-to-top { display: none !important; }
  .lc-app { background: #fff; }
  .lc-obra { margin-left: 0; }
  .lc-compras-topo { background: #fff !important; color: #000 !important; padding: 0 0 12px; }
  .lc-orc { background: #f4f4f4; }
  .lc-orc-linha span, .lc-orc-linha b em, .lc-orc-pe { color: #444 !important; }
  .lc-orc-pe b { color: #000 !important; }
  .lc-compras-corpo { margin-top: 0; padding: 0; border-radius: 0; }
  .lc-item { break-inside: avoid; }
  .lc-check { border-color: #666 !important; background: #fff !important; color: #fff !important; }
  .lc-item.ok .lc-item-txt b { text-decoration: line-through; }
}