/* =========================================================
   PetFlow Store — módulo interno (Superadmin)
   ---------------------------------------------------------
   Portado do painel "Matilha" (projeto Estilo Pet) a pedido do
   cliente, vivendo como módulo dentro do próprio PetFlow em vez de
   um projeto/HTML à parte.

   Tudo aqui é escopado dentro de #pfstore-overlay E TODA CLASSE
   ESTRUTURAL leva o prefixo "pfstore-" (ex: .pfstore-card, não
   .card) — nunca solto no documento. Isso é de propósito duplo:

   1) O PetFlow já usa nomes de classe genéricos (.card, .btn,
      .field, .chip, .view, .page-head, .topbar...) no restante do
      painel (css/style.css), e essas mesmas classes eram as
      originais do Matilha.
   2) Escopar só o SELETOR (via #pfstore-overlay .card) não bastaria:
      o CSS já existente do admin (ex: ".view{display:none}",
      ".page-head{display:flex}") ainda bateria nesses elementos
      pelo nome da classe sozinho, e venceria em qualquer propriedade
      que a nossa regra escopada não redeclarasse — a especificidade
      maior (#id + .classe) só resolve as propriedades que REALMENTE
      redeclaramos, não protege as que ficaram de fora. Prefixar
      cada classe com "pfstore-" elimina esse risco de vez, sem
      precisar auditar propriedade por propriedade contra o
      css/style.css inteiro.

   Classes de ESTADO (ex: .active, .selected, .loading, .copied,
   .warn, .destaque) continuam sem prefixo porque só aparecem
   encadeadas depois de uma classe-base já prefixada (ex:
   ".pfstore-chip.active"), então não colidem com nada do admin.

   PALETA: em vez de cores fixas (a versão original tinha um tema
   escuro/âmbar, herdado do Matilha, que destoava do resto do
   PetFlow), os "apelidos" abaixo (--void, --panel, --amber...)
   apontam para as MESMAS variáveis de :root que o resto do admin
   usa (--bg, --surface, --ink, --brand-blue...) — ver css/style.css.
   Isso garante que a paleta daqui seja de fato "igual à do PetFlow":
   qualquer ajuste futuro na identidade visual do admin (em :root)
   já reflete aqui também, sem precisar mexer neste arquivo. Os
   nomes locais só existem pra não precisar reescrever cada regra
   abaixo com o nome "oficial" da variável. IMPORTANTE: nenhum nome
   local pode ser IGUAL a um nome já usado em :root (ex: não pode
   existir um "--line" local igual ao "--line" global) — isso criaria
   uma auto-referência circular e a variável local quebraria; por
   isso "--line" em si não é redeclarado aqui (herda de :root
   naturalmente), só os apelidos com nomes diferentes é que recebem
   var(--algo-do-root) como valor. --font-display/--font-body/
   --font-mono também não são redeclarados aqui pelo mesmo motivo
   (herdam de :root, que já usa Sora/Inter/IBM Plex Mono — as mesmas
   fontes carregadas em admin.html).
   ========================================================= */

#pfstore-overlay{
  --void: var(--bg);                      /* fundo da página do módulo */
  --panel: var(--surface);                /* cards, barra lateral, tabela */
  --panel-raised: var(--brand-blue-tint); /* fundo padrão de botões "ghost"/pílulas e hover leve */
  --panel-hover: #D3E7F7;                 /* hover um degrau mais forte que --panel-raised */
  --line-soft: var(--line);               /* divisórias discretas (mesmo tom do --line herdado de :root) */
  --ink-high: var(--ink);                 /* texto principal */
  --ink-mid: var(--ink-soft);             /* texto secundário */
  --ink-low: var(--ink-faint);            /* texto terciário/legendas */

  --amber: var(--brand-blue);             /* accent PRINCIPAL do módulo — CTA, links, seleção, foco, logo */
  --amber-soft: var(--brand-blue-deep);   /* hover/tom mais forte do accent */
  --amber-tint: var(--brand-blue-tint);   /* fundo claro de destaque/seleção */

  --blue: var(--orange);                  /* reaproveitado pro status "Em teste" — mesma linguagem de "pendente/aguardando" que o PetFlow já usa em outras telas (ver .st-pendente/.tag-warn) */
  --blue-tint: #FFF1E2;

  --red: var(--pink-deep);                /* status "Atrasada" — mesmo tom de alerta do resto do admin */
  --red-tint: #FFE7EE;

  --gray: var(--ink-faint);               /* status "Suspensa" */
  --gray-tint: var(--line);

  --r-lg: var(--radius-lg); --r-md: var(--radius-md); --r-sm: var(--radius-sm);

  position:fixed; inset:0; z-index:400; overflow-y:auto;
  margin:0; background:var(--void); color:var(--ink-high); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
#pfstore-overlay[hidden]{display:none;}
#pfstore-overlay *{box-sizing:border-box;}
#pfstore-overlay h1, #pfstore-overlay h2, #pfstore-overlay h3, #pfstore-overlay .pfstore-font-display{font-family:var(--font-display);}
#pfstore-overlay .pfstore-mono, #pfstore-overlay .pfstore-num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
#pfstore-overlay button, #pfstore-overlay input, #pfstore-overlay select{font-family:inherit; color:inherit;}
#pfstore-overlay button{cursor:pointer;}
#pfstore-overlay :focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:4px;}
#pfstore-overlay a{color:inherit;}
#pfstore-overlay ::selection{background:var(--amber-tint); color:var(--ink-high);}

@media (prefers-reduced-motion: reduce){
  #pfstore-overlay *{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important;}
}

/* Some overlay is aberto: esconde por completo o painel administrativo
   por trás (não só visualmente — também tira do foco/teclado), pra
   virar mesmo uma "tela cheia" própria. Fica fora do #pfstore-overlay
   de propósito, porque o alvo (.app-shell) está fora dele. */
body.pfstore-active .app-shell{display:none;}
body.pfstore-active{overflow:hidden;}

/* ---------- barra de retorno (sempre visível, inclusive no mobile —
   o rail (com o botão "Voltar ao painel") some abaixo de 860px, então
   esta barra é o único jeito garantido de sair do módulo em qualquer
   tamanho de tela) ---------- */
#pfstore-overlay .pfstore-backbar{
  display:flex; align-items:center; gap:8px; padding:12px 18px; background:var(--panel);
  border-bottom:1px solid var(--line-soft); position:sticky; top:0; z-index:6;
}
#pfstore-overlay .pfstore-back-btn{
  display:flex; align-items:center; gap:7px; background:none; border:none; color:var(--ink-mid);
  font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:100px;
}
#pfstore-overlay .pfstore-back-btn:hover{background:var(--panel-raised); color:var(--ink-high);}
#pfstore-overlay .pfstore-back-btn svg{width:15px; height:15px;}
#pfstore-overlay .pfstore-backbar-title{font-size:12px; color:var(--ink-low); margin-left:auto; font-family:var(--font-mono);}

/* ---------- shell ---------- */
#pfstore-overlay .pfstore-shell{display:grid; grid-template-columns:236px 1fr; min-height:calc(100vh - 45px);}
/* abaixo de 860px a rail some e vira a .pfstore-mobile-tabs (ver acima,
   logo após a .pfstore-backbar no HTML) — e o min-height acima só
   existia pra bater com a altura da rail (height:calc(100vh - 45px) nela
   mesma, logo abaixo); sem a rail ele deixa de ter função e só força
   .pfstore-main (grid, align-items:stretch por padrão) a ficar mais alto
   que o próprio conteúdo, então zera aqui também.
   A regra que esconde a rail está lá embaixo, DEPOIS da declaração base
   de .pfstore-rail (não aqui) — mesma especificidade pros dois seletores
   (#pfstore-overlay .pfstore-rail), então quem vem por último no arquivo
   é quem manda no cascade, @media não dá prioridade extra sozinho. Até
   agora ela estava aqui em cima, ANTES da base, e por isso nunca tinha
   efeito: a rail ficava sempre visível no celular (inclusive junto com a
   .pfstore-mobile-tabs, as duas barras empilhadas e sobrepostas — esse
   era o "botão desconfigurado" que a cliente via). */
@media (max-width:860px){ #pfstore-overlay .pfstore-shell{grid-template-columns:1fr; min-height:0;} }

/* ---------- barra de abas do celular (ver comentário no HTML, logo
   antes da .pfstore-shell) — fileira horizontal com scroll, mesmo
   visual de pílula dos .pfstore-chip de filtro; só aparece abaixo de
   860px, junto com o breakpoint que esconde a .pfstore-rail acima. Não
   é sticky de propósito: a .pfstore-topbar (dentro de .pfstore-main) já
   é sticky em top:45px, e empilhar dois cabeçalhos sticky em cima um do
   outro exigiria medir a altura exata de um pra deslocar o top do outro
   — mais frágil do que deixar essa barra rolar junto com a página. */
#pfstore-overlay .pfstore-mobile-tabs{
  display:none; gap:8px; padding:12px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--panel); border-bottom:1px solid var(--line-soft);
}
#pfstore-overlay .pfstore-mobile-tabs::-webkit-scrollbar{display:none;}
#pfstore-overlay .pfstore-mobile-tab{
  flex-shrink:0; display:flex; align-items:center; gap:0; white-space:nowrap; text-align:center;
  background:var(--panel-raised); border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; font-size:12.5px; font-weight:600; color:var(--ink-mid);
}
#pfstore-overlay .pfstore-mobile-tab.active{background:var(--amber-tint); border-color:transparent; color:var(--amber-soft);}
#pfstore-overlay .pfstore-mobile-tab svg{display:none;}
@media (max-width:860px){ #pfstore-overlay .pfstore-mobile-tabs{display:flex;} }

#pfstore-overlay .pfstore-rail{
  background:var(--panel); border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:45px; height:calc(100vh - 45px);
}
#pfstore-overlay .pfstore-rail-brand{display:flex; align-items:center; gap:10px; padding:4px 6px 26px;}
#pfstore-overlay .pfstore-mark{width:26px; height:26px; position:relative; flex-shrink:0;}
#pfstore-overlay .pfstore-mark i{position:absolute; inset:0; margin:auto; width:22px; height:5px; background:var(--amber); border-radius:2px;}
#pfstore-overlay .pfstore-mark i:nth-child(1){transform:rotate(45deg);}
#pfstore-overlay .pfstore-mark i:nth-child(2){transform:rotate(-45deg);}
#pfstore-overlay .pfstore-wordmark{font-family:var(--font-display); font-weight:800; font-size:16.5px; letter-spacing:.02em;}
#pfstore-overlay .pfstore-wordmark small{display:block; font-family:var(--font-body); font-weight:500; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-low); margin-top:1px;}

#pfstore-overlay .pfstore-rail-nav{display:flex; flex-direction:column; gap:2px; margin-top:6px;}
#pfstore-overlay .pfstore-rail-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border:none; background:none;
  border-radius:var(--r-sm); font-size:13.5px; font-weight:500; color:var(--ink-mid); text-align:left;
}
#pfstore-overlay .pfstore-rail-link svg{width:17px; height:17px; flex-shrink:0; opacity:.85;}
#pfstore-overlay .pfstore-rail-link:hover{background:var(--panel-raised); color:var(--ink-high);}
#pfstore-overlay .pfstore-rail-link.active{background:var(--amber-tint); color:var(--amber-soft);}
#pfstore-overlay .pfstore-rail-link.active svg{opacity:1;}
#pfstore-overlay .pfstore-rail-cta{
  margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--amber); color:#fff; font-weight:700; font-size:13px; padding:11px 12px;
  border-radius:var(--r-sm); border:none;
}
#pfstore-overlay .pfstore-rail-cta:hover{background:var(--amber-soft);}
#pfstore-overlay .pfstore-rail-cta svg{width:15px; height:15px;}

#pfstore-overlay .pfstore-rail-foot{margin-top:auto; padding-top:18px; border-top:1px solid var(--line-soft);}
#pfstore-overlay .pfstore-rail-operator{display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; text-align:left; padding:0;}
#pfstore-overlay .pfstore-rail-avatar{
  width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--brand-blue), var(--brand-blue-deep));
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:12px; color:#fff; flex-shrink:0;
}
#pfstore-overlay .pfstore-rail-operator-name{font-size:12.5px; font-weight:600;}
#pfstore-overlay .pfstore-rail-operator-role{font-size:10.5px; color:var(--ink-low);}
#pfstore-overlay .pfstore-rail-logout{margin-top:12px; width:100%; text-align:left; background:none; border:none; color:var(--ink-low); font-size:11.5px; padding:4px 2px; display:flex; align-items:center; gap:6px;}
#pfstore-overlay .pfstore-rail-logout svg{width:13px; height:13px;}
#pfstore-overlay .pfstore-rail-logout:hover{color:var(--amber-soft);}

/* Regra que esconde a rail no celular — ver comentário na .pfstore-shell
   lá em cima explicando por que ela PRECISA ficar aqui, depois de toda a
   declaração base de .pfstore-rail, e não antes dela. */
@media (max-width:860px){ #pfstore-overlay .pfstore-rail{display:none;} }

/* ---------- main ---------- */
#pfstore-overlay .pfstore-main{min-width:0;}
#pfstore-overlay .pfstore-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 30px; border-bottom:1px solid var(--line-soft); position:sticky; top:45px; background:rgba(255,255,255,.88); backdrop-filter:blur(10px); z-index:5;
}
#pfstore-overlay .pfstore-search-wrap{position:relative; flex:1; max-width:360px;}
#pfstore-overlay .pfstore-search-wrap svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-low);}
#pfstore-overlay .pfstore-search-wrap input{
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:9px 14px 9px 34px;
  font-size:13px; color:var(--ink-high);
}
#pfstore-overlay .pfstore-search-wrap input::placeholder{color:var(--ink-low);}
#pfstore-overlay .pfstore-search-wrap input:focus{border-color:var(--amber);}
#pfstore-overlay .pfstore-topbar-right{display:flex; align-items:center; gap:14px; flex-shrink:0;}
#pfstore-overlay .pfstore-topbar-tag{font-size:11px; color:var(--ink-low); font-family:var(--font-mono);}
#pfstore-overlay .pfstore-topbar-refresh{background:var(--panel-raised); border:1px solid var(--line); border-radius:100px; padding:7px 14px; font-size:11.5px; font-weight:600; color:var(--ink-high); display:flex; align-items:center; gap:6px;}
#pfstore-overlay .pfstore-topbar-refresh:hover{background:var(--panel-hover);}
#pfstore-overlay .pfstore-topbar-refresh svg{width:13px; height:13px;}
#pfstore-overlay .pfstore-topbar-refresh.loading svg{animation:pfstoreSpin 1s linear infinite;}
@keyframes pfstoreSpin{to{transform:rotate(360deg);}}

#pfstore-overlay .pfstore-view{padding:28px 30px 60px; max-width:1180px; display:block;}
#pfstore-overlay .pfstore-view[hidden]{display:none;}

#pfstore-overlay .pfstore-page-head{margin-bottom:22px; display:block;}
#pfstore-overlay .pfstore-page-head h1{font-size:23px; font-weight:700; margin:0 0 4px;}
#pfstore-overlay .pfstore-page-head p{margin:0; color:var(--ink-mid); font-size:13.5px;}
#pfstore-overlay .pfstore-page-head .pfstore-stat-inline{color:var(--amber-soft); font-weight:600;}

/* ---------- painel: mapa + lateral ---------- */
#pfstore-overlay .pfstore-painel-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:16px;}
@media (max-width:960px){ #pfstore-overlay .pfstore-painel-grid{grid-template-columns:1fr;} }

#pfstore-overlay .pfstore-card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-card);}
#pfstore-overlay .pfstore-card-head{display:flex; align-items:baseline; justify-content:space-between; gap:0; margin-bottom:2px;}
#pfstore-overlay .pfstore-card-head h2{font-size:14.5px; font-weight:700; margin:0; display:block;}
#pfstore-overlay .pfstore-card-head .pfstore-card-sub{font-size:11.5px; color:var(--ink-low); margin-top:0;}

#pfstore-overlay .pfstore-mapa-card{padding:0; overflow:hidden; position:relative;}
#pfstore-overlay .pfstore-mapa-head{padding:20px 22px 6px;}
#pfstore-overlay .pfstore-mapa-legend{display:flex; gap:16px; padding:0 22px 14px; flex-wrap:wrap;}
#pfstore-overlay .pfstore-legend-item{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-mid);}
#pfstore-overlay .pfstore-legend-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
#pfstore-overlay .pfstore-mapa-svg-wrap{padding:0 6px 14px;}
#pfstore-overlay .pfstore-no-select{user-select:none;}

#pfstore-overlay .pfstore-mapa-node{cursor:pointer;}
#pfstore-overlay .pfstore-mapa-node circle.pfstore-ring{transition:r .15s ease;}
#pfstore-overlay .pfstore-mapa-node:hover circle.pfstore-ring{filter:brightness(1.2);}
#pfstore-overlay .pfstore-mapa-node text{font-family:var(--font-body); font-size:9px; fill:var(--ink-mid); pointer-events:none;}
#pfstore-overlay .pfstore-mapa-node:hover text{fill:var(--ink-high);}
@keyframes pfstorePulseRing{
  0%{opacity:.55; r:13;} 70%{opacity:0; r:22;} 100%{opacity:0; r:22;}
}
#pfstore-overlay .pfstore-pulse{animation:pfstorePulseRing 2.4s ease-out infinite;}

#pfstore-overlay .pfstore-side-col{display:flex; flex-direction:column; gap:16px;}
#pfstore-overlay .pfstore-atencao-list{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
#pfstore-overlay .pfstore-atencao-item{
  display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border-radius:var(--r-sm);
  background:var(--panel-raised); border:1px solid var(--line-soft); text-align:left; width:100%; border-left:2.5px solid var(--red);
}
#pfstore-overlay .pfstore-atencao-item.warn{border-left-color:var(--blue);}
#pfstore-overlay .pfstore-atencao-dot{width:6px; height:6px; border-radius:50%; background:var(--red); margin-top:6px; flex-shrink:0;}
#pfstore-overlay .pfstore-atencao-item.warn .pfstore-atencao-dot{background:var(--blue);}
#pfstore-overlay .pfstore-atencao-body b{display:block; font-size:12.5px; font-weight:600;}
#pfstore-overlay .pfstore-atencao-body span{font-size:11.5px; color:var(--ink-mid);}
#pfstore-overlay .pfstore-atencao-empty{font-size:12px; color:var(--ink-low); padding:14px 0;}

#pfstore-overlay .pfstore-kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media (max-width:760px){ #pfstore-overlay .pfstore-kpi-row{grid-template-columns:repeat(2,1fr);} }
#pfstore-overlay .pfstore-kpi-tile{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:16px 17px;}
#pfstore-overlay .pfstore-kpi-tile .pfstore-kpi-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-low); margin-bottom:9px;}
#pfstore-overlay .pfstore-kpi-tile .pfstore-kpi-value{font-family:var(--font-mono); font-size:22px; font-weight:600; letter-spacing:-.01em;}
#pfstore-overlay .pfstore-kpi-tile .pfstore-kpi-delta{font-size:11px; color:var(--ink-mid); margin-top:5px;}

/* ---------- tabela de lojas ---------- */
#pfstore-overlay .pfstore-table-toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
#pfstore-overlay .pfstore-filter-chips{display:flex; gap:6px; flex-wrap:wrap;}
#pfstore-overlay .pfstore-chip{
  border:1px solid var(--line); background:var(--panel); color:var(--ink-mid); font-size:11.5px; font-weight:600;
  padding:6px 12px; border-radius:100px;
}
#pfstore-overlay .pfstore-chip.active{background:var(--amber-tint); border-color:transparent; color:var(--amber-soft);}
#pfstore-overlay .pfstore-table-scroll{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r-lg);}
#pfstore-overlay table{width:100%; border-collapse:collapse; min-width:720px; font-size:13px;}
#pfstore-overlay thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-low);
  font-weight:600; padding:13px 16px; border-bottom:1px solid var(--line-soft); background:var(--panel);
}
#pfstore-overlay tbody td{padding:13px 16px; border-bottom:1px solid var(--line-soft); font-size:13px; vertical-align:middle;}
#pfstore-overlay tbody tr{background:var(--panel); transition:background .12s ease;}
#pfstore-overlay tbody tr:last-child td{border-bottom:none;}
#pfstore-overlay tbody tr:hover{background:var(--panel-raised); cursor:pointer;}
#pfstore-overlay .pfstore-loja-name{font-weight:600;}
#pfstore-overlay .pfstore-loja-sub{font-size:11px; color:var(--ink-low); margin-top:1px;}
#pfstore-overlay .pfstore-status-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px;
}
#pfstore-overlay .pfstore-status-pill .pfstore-dot{width:6px; height:6px; border-radius:50%;}
/* "Ativa" usa o verde de sucesso que o resto do PetFlow já usa
   (ver .vax-status-ok/.tag-service em css/style.css), não o accent
   azul do módulo — assim o azul fica reservado pra marca/ação
   (botões, links, seleção), e o status continua lido de cara. */
#pfstore-overlay .pfstore-status-ativo{background:#E6F7EE; color:var(--green-deep);}
#pfstore-overlay .pfstore-status-ativo .pfstore-dot{background:var(--green);}
#pfstore-overlay .pfstore-status-trial{background:var(--blue-tint); color:var(--orange-deep);}
#pfstore-overlay .pfstore-status-trial .pfstore-dot{background:var(--blue);}
#pfstore-overlay .pfstore-status-atrasado{background:var(--red-tint); color:var(--red);}
#pfstore-overlay .pfstore-status-atrasado .pfstore-dot{background:var(--red);}
#pfstore-overlay .pfstore-status-suspenso{background:var(--gray-tint); color:var(--ink-mid);}
#pfstore-overlay .pfstore-status-suspenso .pfstore-dot{background:var(--gray);}
#pfstore-overlay .pfstore-table-empty{padding:40px 16px; text-align:center; color:var(--ink-low); font-size:12.5px;}

/* ---------- nova loja ---------- */
#pfstore-overlay .pfstore-nova-grid{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start;}
@media (max-width:900px){ #pfstore-overlay .pfstore-nova-grid{grid-template-columns:1fr;} }
#pfstore-overlay .pfstore-field{margin-bottom:16px;}
#pfstore-overlay .pfstore-field label{display:block; font-size:11.5px; font-weight:700; color:var(--ink-mid); margin-bottom:7px; text-transform:uppercase; letter-spacing:.04em;}
#pfstore-overlay .pfstore-field input, #pfstore-overlay .pfstore-field select, #pfstore-overlay .pfstore-field textarea{
  width:100%; background:var(--void); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 13px;
  font-size:13.5px; color:var(--ink-high); font-family:inherit;
}
#pfstore-overlay .pfstore-field textarea{resize:vertical; line-height:1.5;}
#pfstore-overlay .pfstore-field input:focus, #pfstore-overlay .pfstore-field textarea:focus{border-color:var(--amber); outline:none;}
#pfstore-overlay .pfstore-field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ #pfstore-overlay .pfstore-field-row{grid-template-columns:1fr;} }

#pfstore-overlay .pfstore-plano-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media (max-width:640px){ #pfstore-overlay .pfstore-plano-cards{grid-template-columns:1fr;} }
#pfstore-overlay .pfstore-plano-card{
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:14px 14px 15px; background:var(--void); text-align:left;
}
#pfstore-overlay .pfstore-plano-card.selected{border-color:var(--amber); background:var(--amber-tint);}
#pfstore-overlay .pfstore-plano-card b{display:block; font-family:var(--font-display); font-size:15px; margin-bottom:3px;}
#pfstore-overlay .pfstore-plano-card .pfstore-preco{font-family:var(--font-mono); font-size:16px; font-weight:600; color:var(--amber-soft); margin-bottom:6px;}
#pfstore-overlay .pfstore-plano-card .pfstore-preco span{font-size:10.5px; color:var(--ink-low); font-weight:400;}
#pfstore-overlay .pfstore-plano-card p{font-size:11px; color:var(--ink-mid); margin:0; line-height:1.45;}

#pfstore-overlay .pfstore-cor-swatches{display:flex; gap:9px; flex-wrap:wrap;}
#pfstore-overlay .pfstore-swatch{width:30px; height:30px; border-radius:9px; border:2px solid transparent; padding:0;}
#pfstore-overlay .pfstore-swatch.selected{border-color:var(--ink-high);}

#pfstore-overlay .pfstore-link-preview{
  display:flex; align-items:center; gap:8px; background:var(--void); border:1.5px dashed var(--line); border-radius:var(--r-sm);
  padding:10px 12px; font-family:var(--font-mono); font-size:12px; color:var(--ink-mid); margin-top:-2px;
}
#pfstore-overlay .pfstore-link-preview b{color:var(--amber-soft); font-weight:600;}

#pfstore-overlay .pfstore-preview-card{position:sticky; top:130px;}
#pfstore-overlay .pfstore-preview-card .pfstore-card-head{margin-bottom:14px;}
#pfstore-overlay .pfstore-preview-shopcard{border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line-soft);}
#pfstore-overlay .pfstore-preview-shopcard-top{padding:20px 16px; text-align:center;}
#pfstore-overlay .pfstore-preview-shopcard-mark{width:38px; height:38px; border-radius:11px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:15px; color:#fff;}
#pfstore-overlay .pfstore-preview-shopcard-top b{display:block; font-size:14px; font-weight:700;}
#pfstore-overlay .pfstore-preview-shopcard-top span{font-size:10.5px; color:var(--ink-low);}
#pfstore-overlay .pfstore-preview-shopcard-bot{background:var(--void); padding:12px 16px; font-size:11px; color:var(--ink-mid); border-top:1px solid var(--line-soft);}

#pfstore-overlay .pfstore-btn{
  border:none; border-radius:var(--r-sm); padding:11px 20px; font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:8px;
}
#pfstore-overlay .pfstore-btn-primary{background:var(--amber); color:#fff;}
#pfstore-overlay .pfstore-btn-primary:hover{background:var(--amber-soft);}
#pfstore-overlay .pfstore-btn-primary:disabled{opacity:.6; cursor:default;}
#pfstore-overlay .pfstore-btn-ghost{background:var(--panel-raised); color:var(--ink-high); border:1px solid var(--line);}
#pfstore-overlay .pfstore-btn-ghost:hover{background:var(--panel-hover);}
#pfstore-overlay .pfstore-btn-danger{background:transparent; color:var(--red); border:1px solid rgba(255,92,114,.4);}
#pfstore-overlay .pfstore-btn-danger:hover{background:var(--red-tint);}
#pfstore-overlay .pfstore-btn svg{width:15px; height:15px;}

#pfstore-overlay .pfstore-success-panel{border:1px solid var(--amber); background:var(--amber-tint); border-radius:var(--r-lg); padding:24px 26px; margin-top:18px;}
#pfstore-overlay .pfstore-success-panel h3{margin:0 0 4px; font-size:16px;}
#pfstore-overlay .pfstore-success-panel p{margin:0 0 16px; font-size:12.5px; color:var(--ink-mid);}
#pfstore-overlay .pfstore-credential-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--void); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:11px 13px; margin-bottom:9px;
}
#pfstore-overlay .pfstore-credential-row .pfstore-k{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-low); display:block; margin-bottom:2px;}
#pfstore-overlay .pfstore-credential-row .pfstore-v{font-family:var(--font-mono); font-size:13px;}
#pfstore-overlay .pfstore-copy-btn{background:var(--panel-raised); border:1px solid var(--line); border-radius:7px; padding:6px 11px; font-size:11px; font-weight:600; color:var(--ink-high); flex-shrink:0;}
#pfstore-overlay .pfstore-copy-btn:hover{background:var(--panel-hover);}
#pfstore-overlay .pfstore-copy-btn.copied{color:var(--amber-soft); border-color:var(--amber);}
#pfstore-overlay .pfstore-success-note{font-size:11.5px; color:var(--ink-mid); margin-top:10px; line-height:1.5;}

/* ---------- planos view ---------- */
#pfstore-overlay .pfstore-planos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:820px){ #pfstore-overlay .pfstore-planos-grid{grid-template-columns:1fr;} }
#pfstore-overlay .pfstore-plano-full{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:24px 22px; position:relative;}
#pfstore-overlay .pfstore-plano-full.destaque{border-color:var(--amber);}
/* padding-right reserva espaço pro .pfstore-plano-edit-btn (position:
   absolute; top:20px; right:20px — ver mais abaixo), que fica bem nessa
   mesma linha. Sem essa reserva, a etiqueta do plano "destaque" ("Alfa ·
   mais escolhido", o texto mais longo das três) corre por baixo do botão
   assim que o card fica estreito — e card aqui é 1 coluna cheia abaixo
   de 820px, então na prática é sempre mais estreito no celular do que
   cada uma das 3 colunas no desktop (ver pfstore-painel-grid acima). */
#pfstore-overlay .pfstore-plano-full .pfstore-tag-top{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--amber-soft); font-weight:700; margin-bottom:10px; padding-right:92px;}
#pfstore-overlay .pfstore-plano-full h3{font-size:19px; margin:0 0 4px;}
#pfstore-overlay .pfstore-plano-full .pfstore-preco-full{font-family:var(--font-mono); font-size:26px; font-weight:600; margin-bottom:14px;}
#pfstore-overlay .pfstore-plano-full .pfstore-preco-full span{font-size:12px; color:var(--ink-low); font-weight:400;}
#pfstore-overlay .pfstore-plano-full ul{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:9px;}
#pfstore-overlay .pfstore-plano-full li{font-size:12.5px; color:var(--ink-mid); display:flex; gap:8px; align-items:flex-start;}
#pfstore-overlay .pfstore-plano-full li svg{width:14px; height:14px; color:var(--amber); flex-shrink:0; margin-top:2px;}
#pfstore-overlay .pfstore-plano-full .pfstore-count{font-size:11px; color:var(--ink-low); margin-top:10px;}

/* ---------- drawer ---------- */
#pfstore-overlay .pfstore-scrim{position:fixed; inset:0; background:rgba(4,5,7,.6); backdrop-filter:blur(2px); z-index:410;}
#pfstore-overlay .pfstore-drawer{
  position:fixed; top:0; right:0; height:100vh; width:480px; max-width:94vw; background:var(--panel);
  border-left:1px solid var(--line); z-index:411; overflow-y:auto; padding:28px 28px 44px;
  animation:pfstoreSlideIn .22s ease;
}
@keyframes pfstoreSlideIn{from{transform:translateX(24px); opacity:0;} to{transform:none; opacity:1;}}
#pfstore-overlay .pfstore-drawer-close{position:absolute; top:22px; right:22px; width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--panel-raised); display:flex; align-items:center; justify-content:center;}
#pfstore-overlay .pfstore-drawer-close svg{width:14px; height:14px;}
#pfstore-overlay .pfstore-drawer-top{display:flex; align-items:center; gap:14px; margin:6px 0 22px; padding-right:40px;}
#pfstore-overlay .pfstore-drawer-mark{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:18px; color:#fff; flex-shrink:0;}
#pfstore-overlay .pfstore-drawer-top h2{font-size:18px; margin:0 0 5px;}
#pfstore-overlay .pfstore-drawer-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px;}
#pfstore-overlay .pfstore-drawer-stat{background:var(--void); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:14px 16px;}
#pfstore-overlay .pfstore-drawer-stat .pfstore-k{font-size:10.5px; text-transform:uppercase; color:var(--ink-low); letter-spacing:.06em; margin-bottom:7px;}
#pfstore-overlay .pfstore-drawer-stat .pfstore-v{font-family:var(--font-mono); font-size:17px; font-weight:600; line-height:1.3;}
#pfstore-overlay .pfstore-drawer-section{margin-bottom:28px;}
#pfstore-overlay .pfstore-drawer-section h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-low); margin:0 0 13px;}
#pfstore-overlay .pfstore-timeline{display:flex; flex-direction:column; gap:14px;}
#pfstore-overlay .pfstore-timeline-item{display:flex; gap:11px; font-size:13px;}
#pfstore-overlay .pfstore-timeline-dot{width:6px; height:6px; border-radius:50%; background:var(--ink-low); margin-top:6px; flex-shrink:0;}
#pfstore-overlay .pfstore-timeline-item b{display:block; color:var(--ink-high); font-weight:600;}
#pfstore-overlay .pfstore-timeline-item span{color:var(--ink-low); font-size:11.5px;}
#pfstore-overlay .pfstore-drawer-actions{display:flex; flex-direction:column; gap:10px;}
#pfstore-overlay .pfstore-drawer-actions .pfstore-btn{width:100%; justify-content:center;}
#pfstore-overlay .pfstore-drawer-tenant{font-family:var(--font-mono); font-size:11px; color:var(--ink-low); margin:-16px 0 22px;}

/* ---------- botão de editar vencimento, inline no stat do drawer ---------- */
#pfstore-overlay .pfstore-vencimento-edit-btn{
  width:20px; height:20px; border-radius:6px; border:1px solid var(--line); background:var(--panel-raised);
  display:flex; align-items:center; justify-content:center; color:var(--ink-low); flex-shrink:0;
}
#pfstore-overlay .pfstore-vencimento-edit-btn:hover{background:var(--panel-hover); color:var(--ink-high);}
#pfstore-overlay .pfstore-vencimento-edit-btn svg{width:11px; height:11px;}

/* ---------- mensagem de erro de formulário (equivalente ao
   .login-error da versão original, que ficou de fora do porte porque
   a tela de login inteira não existe mais aqui) ---------- */
#pfstore-overlay .pfstore-form-error{font-size:12.5px; color:var(--red); margin:-4px 0 14px; display:none;}
#pfstore-overlay .pfstore-form-error.show{display:block;}

/* ---------- botão "Editar" em cada card da view Planos ---------- */
#pfstore-overlay .pfstore-plano-edit-btn{
  position:absolute; top:20px; right:20px; display:flex; align-items:center; gap:6px;
  background:var(--panel-raised); border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 10px;
  font-size:11px; font-weight:700; color:var(--ink-mid); letter-spacing:.02em;
}
#pfstore-overlay .pfstore-plano-edit-btn:hover{background:var(--panel-hover); color:var(--ink-high);}
#pfstore-overlay .pfstore-plano-edit-btn svg{width:13px; height:13px;}

/* ---------- botão de ação no cabeçalho de uma seção do drawer
   (ex.: "+ Registrar" no Histórico de pagamentos, "Gerar boleto" na
   seção do Mercado Pago) — mesmo visual em pílula do botão acima, mas
   SEM position:absolute, porque aqui ele fica dentro de um cabeçalho
   flex (justify-content:space-between) e não de um card com
   position:relative. Não reaproveitar .pfstore-plano-edit-btn fora do
   card da view Planos — foi esse reaproveitamento que fazia os botões
   caírem um em cima do outro, sempre no mesmo ponto fixo do drawer. ---------- */
#pfstore-overlay .pfstore-section-action-btn{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  background:var(--panel-raised); border:1px solid var(--line); border-radius:999px; padding:7px 13px 7px 11px;
  font-size:11.5px; font-weight:700; color:var(--ink-mid); letter-spacing:.02em;
}
#pfstore-overlay .pfstore-section-action-btn:hover{background:var(--panel-hover); color:var(--ink-high);}
#pfstore-overlay .pfstore-section-action-btn svg{width:13px; height:13px;}
#pfstore-overlay .pfstore-section-action-btn:disabled{opacity:.6; cursor:default;}

/* ---------- modal "Editar plano" ----------
   Não reaproveita o #modal-overlay/openModal() global do admin: aquele
   fica em z-index:100 (ver css/style.css) e ficaria escondido atrás do
   #pfstore-overlay, que é z-index:400 — por isso um modal próprio,
   mais alto até que o drawer (410/411), dentro do próprio módulo. */
#pfstore-overlay .pfstore-modal-scrim{position:fixed; inset:0; background:rgba(4,5,7,.6); backdrop-filter:blur(2px); z-index:420;}
#pfstore-overlay .pfstore-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:421;
  width:min(480px, calc(100vw - 32px)); max-height:calc(100vh - 64px); overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:24px 26px 26px;
}
#pfstore-overlay .pfstore-modal-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px;}
#pfstore-overlay .pfstore-modal-head h2{font-size:16px; margin:0;}
#pfstore-overlay .pfstore-modal-close{width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--panel-raised); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
#pfstore-overlay .pfstore-modal-close svg{width:14px; height:14px;}
#pfstore-overlay .pfstore-modal-body .pfstore-field:last-of-type{margin-bottom:20px;}
#pfstore-overlay .pfstore-modal-actions{display:flex; justify-content:flex-end; gap:10px;}
@media (max-width:520px){ #pfstore-overlay .pfstore-modal-actions{flex-direction:column-reverse;} #pfstore-overlay .pfstore-modal-actions .pfstore-btn{width:100%; justify-content:center;} }

#pfstore-overlay [hidden]{display:none !important;}