/*
 * D.E.P.K01.10 - CSS/lp-ui.css
 * DEP-ID: LP-4E86D4C5EB
 */
/* ==========================================================================
   lp-ui — kit de componentes do Lojas Próximas (claro/escuro + tokens + temas)
   Uso em qualquer página (veja CSS/aparencia/LEIA-ME.md):
     <?php $lpCss = '../CSS/'; include __DIR__ . '/../CSS/aparencia/head.php'; ?>   ← tokens + este arquivo + lp-legacy.css + styles_global.css
     <html data-tema="claro|escuro">  ← o head.php define; o botão antigo (body.dark-mode) continua valendo
   Regra: aqui só existem var(--lp-*). Nenhuma cor, raio, tamanho ou espaço fixo.
   Classes: lp-btn (+ --comum --primario --cta --especial --salvar --perigo --fantasma --voltar --fechar, --sm --block)
            lp-input lp-select lp-textarea lp-check lp-label lp-field · lp-card lp-item · lp-modal · lp-media
            lp-chip lp-seg lp-badge lp-alert (+ --erro --ok) lp-toast · lp-h1 lp-h2 lp-title lp-small lp-muted lp-link
   ========================================================================== */
.lp-page{background:var(--lp-bg);color:var(--lp-ink);}
.lp-page,.lp-modal,.lp-card,.lp-text,.lp-btn,.lp-input,.lp-select,.lp-textarea,.lp-chip,.lp-seg button,.lp-alert,.lp-toast{font-family:var(--lp-font)}
.lp-page,.lp-modal,.lp-card,.lp-text{font-size:var(--lp-fs-base);line-height:var(--lp-lh)}
.lp-h1,.lp-h2,.lp-title{color:var(--lp-heading);letter-spacing:-.015em;line-height:1.15;margin:0}
.lp-h1{font-size:var(--lp-fs-title);font-weight:var(--lp-h-fw)}
.lp-h2{font-size:calc(var(--lp-fs-title) * .78);font-weight:var(--lp-h-fw)}
.lp-title{font-weight:calc(var(--lp-h-fw) - 50)}
.lp-small,.lp-help{font-size:var(--lp-fs-small);color:var(--lp-muted)}
.lp-muted{color:var(--lp-muted)}
.lp-link{color:var(--lp-link);text-underline-offset:3px}
.lp-stack{display:grid;gap:var(--lp-gap)}
.lp-row{display:flex;flex-wrap:wrap;gap:var(--lp-gap);align-items:center}
.lp-btn:focus-visible,.lp-input:focus-visible,.lp-select:focus-visible,.lp-textarea:focus-visible,.lp-chip:focus-visible,.lp-link:focus-visible{outline:var(--lp-ring-w) solid var(--lp-ring);outline-offset:2px}

/* ---- botões ---- */
.lp-btn{--_bg:var(--lp-btn-comum-bg);--_fg:var(--lp-btn-comum-fg);--_bd:var(--lp-btn-comum-bd);
  --_r:var(--lp-r-btn);--_h:var(--lp-btn-h);--_px:var(--lp-btn-px);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--_h);padding:0 var(--_px);
  border:var(--lp-bw) solid var(--_bd);border-radius:var(--_r);background:var(--_bg);color:var(--_fg);
  font-size:var(--lp-btn-fs);font-weight:var(--lp-btn-fw);line-height:1.1;text-decoration:none;cursor:pointer;transition:filter var(--lp-dur),transform var(--lp-dur),background var(--lp-dur)}
.lp-btn:hover:not(:disabled){filter:brightness(calc(var(--lp-hover-b) / 100));transform:translateY(calc(var(--lp-hover-y) * -1px))}
.lp-btn:disabled,.lp-btn[aria-disabled=true]{opacity:var(--lp-dis-op);cursor:not-allowed;filter:none}
.lp-btn--comum{--_bg:var(--lp-btn-comum-bg);--_fg:var(--lp-btn-comum-fg);--_bd:var(--lp-btn-comum-bd);--_r:var(--lp-btn-comum-r);--_h:var(--lp-btn-comum-h);--_px:var(--lp-btn-comum-px)}
.lp-btn--primario{--_bg:var(--lp-btn-primario-bg);--_fg:var(--lp-btn-primario-fg);--_bd:var(--lp-btn-primario-bd);--_r:var(--lp-btn-primario-r);--_h:var(--lp-btn-primario-h);--_px:var(--lp-btn-primario-px)}
.lp-btn--cta{--_bg:var(--lp-btn-cta-bg);--_fg:var(--lp-btn-cta-fg);--_bd:var(--lp-btn-cta-bd);--_r:var(--lp-btn-cta-r);--_h:var(--lp-btn-cta-h);--_px:var(--lp-btn-cta-px)}
.lp-btn--especial{--_bg:var(--lp-btn-especial-bg);--_fg:var(--lp-btn-especial-fg);--_bd:var(--lp-btn-especial-bd);--_r:var(--lp-btn-especial-r);--_h:var(--lp-btn-especial-h);--_px:var(--lp-btn-especial-px)}
.lp-btn--salvar{--_bg:var(--lp-btn-salvar-bg);--_fg:var(--lp-btn-salvar-fg);--_bd:var(--lp-btn-salvar-bd);--_r:var(--lp-btn-salvar-r);--_h:var(--lp-btn-salvar-h);--_px:var(--lp-btn-salvar-px)}
.lp-btn--perigo{--_bg:var(--lp-btn-perigo-bg);--_fg:var(--lp-btn-perigo-fg);--_bd:var(--lp-btn-perigo-bd);--_r:var(--lp-btn-perigo-r);--_h:var(--lp-btn-perigo-h);--_px:var(--lp-btn-perigo-px)}
.lp-btn--fantasma{--_bg:var(--lp-btn-fantasma-bg);--_fg:var(--lp-btn-fantasma-fg);--_bd:var(--lp-btn-fantasma-bd);--_r:var(--lp-btn-fantasma-r);--_h:var(--lp-btn-fantasma-h);--_px:var(--lp-btn-fantasma-px)}
.lp-btn--voltar{--_bg:var(--lp-btn-voltar-bg);--_fg:var(--lp-btn-voltar-fg);--_bd:var(--lp-btn-voltar-bd);--_r:var(--lp-btn-voltar-r);--_h:var(--lp-btn-voltar-h);--_px:var(--lp-btn-voltar-px)}
.lp-btn--fechar{--_bg:var(--lp-btn-fechar-bg);--_fg:var(--lp-btn-fechar-fg);--_bd:var(--lp-btn-fechar-bd);
  width:var(--lp-btn-fechar-size);height:var(--lp-btn-fechar-size);min-height:0;padding:0;--_r:var(--lp-r-close);font-size:calc(var(--lp-btn-fechar-size) * .58);line-height:1;font-weight:400}
.lp-btn--sm{min-height:calc(var(--_h) - 8px);padding:0 calc(var(--_px) * .65);font-size:calc(var(--lp-btn-fs) - 2px)}
.lp-btn--block{display:flex;width:100%}

/* ---- campos ---- */
.lp-label{display:block;font-weight:var(--lp-label-fw);margin-bottom:6px;color:var(--lp-campo-lb)}
.lp-field{display:grid;gap:6px}
.lp-field small{color:var(--lp-muted);font-size:var(--lp-fs-small)}
.lp-input,.lp-select,.lp-textarea{width:100%;min-height:var(--lp-input-h);padding:0 var(--lp-input-px);border:var(--lp-bw) solid var(--lp-campo-bd);border-radius:var(--lp-r-input);
  background:var(--lp-campo-bg);color:var(--lp-campo-fg);font-size:var(--lp-input-fs)}
.lp-textarea{padding:calc(var(--lp-input-px) * .8) var(--lp-input-px);min-height:var(--lp-textarea-h);resize:vertical}
.lp-input::placeholder,.lp-textarea::placeholder{color:var(--lp-campo-ph);opacity:1}
.lp-input--auto,.lp-select--auto{width:auto}
.lp-check{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--lp-ink)}
.lp-check input{width:var(--lp-check-size);height:var(--lp-check-size);margin:1px 0 0;accent-color:var(--lp-check-ac);flex:none}

/* ---- blocos ---- */
.lp-card{background:var(--lp-card-bg);border:var(--lp-bw) solid var(--lp-card-bd);border-radius:var(--lp-r-card);padding:var(--lp-pad-card);
  color:var(--lp-ink);box-shadow:0 var(--lp-shadow-y) var(--lp-shadow-blur) rgba(var(--lp-shadow-rgb),var(--lp-shadow-a))}
.lp-card--flat{box-shadow:none}
.lp-item{border:var(--lp-bw) solid var(--lp-item-bd);border-radius:var(--lp-r-item);background:var(--lp-item-bg);padding:calc(var(--lp-pad-card) * .5)}
.lp-media{margin:0;padding:var(--lp-pad-img);background:var(--lp-img-bg);border:var(--lp-bw) solid var(--lp-img-bd);border-radius:var(--lp-r-img);overflow:hidden}
.lp-media>img,.lp-media>picture,.lp-media>svg,.lp-media>.lp-media__in{display:block;width:100%;height:auto;border-radius:max(0px,calc(var(--lp-r-img) - var(--lp-pad-img)))}
.lp-media figcaption{padding:calc(var(--lp-pad-img) + 4px) 4px 2px;color:var(--lp-muted);font-size:var(--lp-fs-small)}

/* ---- modal: <dialog class="lp-modal"> ou <div class="lp-modal"> dentro de um overlay ---- */
.lp-modal{border:var(--lp-bw) solid var(--lp-modal-bd);padding:0;border-radius:var(--lp-r-modal);background:var(--lp-modal-bg);color:var(--lp-modal-fg);
  box-shadow:0 var(--lp-shadow-modal-y) var(--lp-shadow-modal-blur) rgba(var(--lp-shadow-rgb),var(--lp-shadow-modal-a))}
.lp-modal::backdrop{background:color-mix(in srgb,var(--lp-modal-ov) calc(var(--lp-backdrop) * 100%),transparent);backdrop-filter:blur(var(--lp-blur))}
.lp-modal__body{padding:var(--lp-pad-modal)}
.lp-modal__head,.lp-modal__foot{display:flex;align-items:center;gap:var(--lp-gap)}
.lp-modal__head{justify-content:space-between;margin-bottom:calc(var(--lp-gap) * .7)}
.lp-modal__foot{padding-top:var(--lp-gap);border-top:var(--lp-bw) solid var(--lp-line);margin-top:var(--lp-gap)}

/* ---- chips, abas, segmentado, selo, avisos ---- */
.lp-chip{display:inline-flex;align-items:center;border:var(--lp-bw) solid var(--lp-chip-bd);background:var(--lp-chip-bg);color:var(--lp-chip-fg);
  border-radius:var(--lp-r-chip);padding:var(--lp-chip-py) var(--lp-chip-px);font-size:var(--lp-chip-fs);font-weight:var(--lp-chip-fw);cursor:pointer;transition:filter var(--lp-dur),transform var(--lp-dur)}
.lp-chip:hover{filter:brightness(calc(var(--lp-hover-b) / 100));transform:translateY(calc(var(--lp-hover-y) * -1px))}
.lp-chip[aria-pressed=true],.lp-chip.is-on{background:var(--lp-chip-on-bg);border-color:var(--lp-chip-on-bd);color:var(--lp-chip-on-fg)}
.lp-seg{display:inline-flex;border:var(--lp-bw) solid var(--lp-seg-bd);border-radius:var(--lp-r-seg);padding:3px;background:var(--lp-seg-bg)}
.lp-seg button{border:0;background:none;padding:calc(var(--lp-chip-py) + 2px) calc(var(--lp-chip-px) + 4px);border-radius:var(--lp-r-seg);font-size:var(--lp-chip-fs);font-weight:var(--lp-chip-fw);color:var(--lp-seg-fg);cursor:pointer;transition:background var(--lp-dur),color var(--lp-dur)}
.lp-seg button[aria-pressed=true]{background:var(--lp-chip-on-bg);color:var(--lp-chip-on-fg)}
.lp-badge{display:inline-block;background:var(--lp-badge-bg);color:var(--lp-badge-fg);font-weight:var(--lp-badge-fw);font-size:var(--lp-fs-small);padding:calc(var(--lp-chip-py) - 1px) calc(var(--lp-chip-px) - 2px);border-radius:var(--lp-r-badge)}
.lp-alert{padding:var(--lp-alert-pad) calc(var(--lp-alert-pad) + 4px);border:var(--lp-bw) solid var(--lp-alerta-bd);border-radius:var(--lp-r-alert);background:var(--lp-alerta-bg);color:var(--lp-alerta-fg)}
.lp-alert--erro{background:var(--lp-alerta-erro-bg);border-color:var(--lp-alerta-erro-bd);color:var(--lp-alerta-erro-fg)}
.lp-alert--ok{background:var(--lp-alerta-ok-bg);border-color:var(--lp-alerta-ok-bd);color:var(--lp-alerta-ok-fg)}
.lp-toast{background:var(--lp-toast-bg);color:var(--lp-toast-fg);padding:var(--lp-toast-py) var(--lp-toast-px);border-radius:var(--lp-r-toast);font-size:var(--lp-fs-base)}
@media (prefers-reduced-motion:reduce){.lp-btn,.lp-chip,.lp-seg button{transition:none}.lp-btn:hover,.lp-chip:hover{transform:none}}
.lp-btn.is-off{opacity:var(--lp-dis-op);cursor:not-allowed;filter:none;pointer-events:none}

/* ---- barra de rolagem de TODO o sistema (item "Barra de rolagem" do painel Aparência) ---- */
::-webkit-scrollbar{width:var(--lp-scroll-w);height:var(--lp-scroll-w)}
::-webkit-scrollbar-track{background:var(--lp-scroll-bg);border-radius:var(--lp-r-scroll)}
::-webkit-scrollbar-thumb{background:var(--lp-scroll-fg);border-radius:var(--lp-r-scroll);border:2px solid var(--lp-scroll-bg)}
::-webkit-scrollbar-thumb:hover{background:var(--lp-scroll-hv)}
::-webkit-scrollbar-corner{background:var(--lp-scroll-bg)}
@supports not selector(::-webkit-scrollbar){:root{scrollbar-width:thin;scrollbar-color:var(--lp-scroll-fg) var(--lp-scroll-bg)}}