/* Generated by tools/split_css.py — do not edit directly. */

/* source: style.css */
/* ============================================================
   malê · Store Admin — Soft Coral design system
   Tokens → Reset → Layout → Components → Screens → Utilities
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* Declara o esquema ao navegador: em claro, "light" desativa o
     escurecimento forçado do Chrome Android; em escuro, "dark" acerta
     scrollbars e controles nativos. */
  color-scheme: light;
  /* marca */
  --coral:        #ff6b3a;
  --coral-deep:   #e8501a;
  --coral-soft:   #ffb79a;
  --coral-glow:   #ffe4d6;
  --magenta:      #d6336c;
  --magenta-deep: #a81e50;
  --rose:         #ffd6e0;
  --plum:         #3d0f24;
  --cream:        #fff8f2;
  --peach:        #ffe8db;

  /* neutros */
  --ink:       #1a0f0a;
  --ink-soft:  #3a2620;
  --gray-900:  #2b1d17;
  --gray-700:  #6b5a52;
  --gray-600:  #83746c;
  --gray-500:  #9a8a82;
  --gray-300:  #d8ccc2;
  --gray-200:  #ece3d9;
  --gray-100:  #f5ede3;
  --white:     #ffffff;

  /* estado */
  --mint:     #d6f5e4;
  --mint-ink: #1b7a42;
  --sun:      #fff4c7;
  --sun-ink:  #8a5d0a;
  --danger:   #d83a3a;
  --danger-bg:#fff0f0;

  /* gradientes */
  --grad-hero: linear-gradient(135deg, #ff6b3a 0%, #d6336c 100%);
  --grad-soft: linear-gradient(135deg, #ffe8db 0%, #ffd6e0 100%);
  --grad-dark: linear-gradient(135deg, #3d0f24 0%, #1a0f0a 100%);
  --grad-mesh: radial-gradient(ellipse at 20% 10%, #ffb79a 0%, transparent 45%),
               radial-gradient(ellipse at 80% 70%, #ffd6e0 0%, transparent 45%),
               #fff8f2;

  /* tipografia */
  --f-display: "Instrument Serif", "Fraunces", Georgia, serif;
  --f-body:    "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* raios */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* sombras */
  --sh-sm:    0 1px 2px rgba(26,15,10,.06), 0 1px 3px rgba(26,15,10,.04);
  --sh-md:    0 4px 14px rgba(26,15,10,.08), 0 2px 4px rgba(26,15,10,.04);
  --sh-lg:    0 20px 50px rgba(26,15,10,.12), 0 6px 12px rgba(26,15,10,.06);
  --sh-glow:  0 10px 40px rgba(255,107,58,.28);
  --sh-glow-m:0 10px 40px rgba(214,51,108,.25);

  /* layout */
  --sidebar-w: 232px;
  --topbar-h:  78px;
}

/* ---------- DARK MODE ---------- */
/* Mantém marca coral/magenta. Troca cream → ink, ink → cream, neutros invertidos. */
[data-theme="dark"]{
  color-scheme: dark;
  --ink:        #f5ede3;
  --ink-soft:   #d8ccc2;
  --gray-900:   #ece3d9;
  --gray-700:   #b8aba1;
  --gray-600:   #9a8a82;
  --gray-500:   #83746c;
  --gray-300:   #4a3a32;
  --gray-200:   #3a2820;
  --gray-100:   #2b1d17;
  --white:      #1a0f0a;
  --cream:      #1a0f0a;
  --peach:      #2a1d15;
  --coral-glow: #4a2a1a;
  --rose:       #3a1d28;
  --mint:       #1d3a28;
  --sun:        #3a2d10;
  --danger-bg:  #3a1818;
  --grad-soft:  linear-gradient(135deg, #2a1d15 0%, #3a1d28 100%);
  --grad-mesh:  radial-gradient(ellipse at 20% 10%, #4a2a1a 0%, transparent 45%),
                radial-gradient(ellipse at 80% 70%, #3a1d28 0%, transparent 45%),
                #1a0f0a;
  --sh-sm:    0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --sh-md:    0 4px 14px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
  --sh-lg:    0 20px 50px rgba(0,0,0,.6), 0 6px 12px rgba(0,0,0,.4);
}

[data-theme="dark"] body{ background: var(--cream); color: var(--ink); }
[data-theme="dark"] img[src*="brand/"]{ filter: invert(1) hue-rotate(180deg) saturate(0.9) brightness(1.1); }

/* ============================================================
   TEMAS SAZONAIS — apenas acentos e ambientacao.
   Nucleo da marca (coral, magenta, plum) preservado.
   Mexem em: peach, coral-glow, rose, grad-soft, grad-mesh.
   ============================================================ */

/* 🌸 PRIMAVERA — rosa palido + lilas suave */
html[data-season="primavera"]:not([data-theme="dark"]){
  --peach:       #ffeef5;
  --coral-glow:  #ffe0ed;
  --rose:        #f5d6e8;
  --grad-soft:   linear-gradient(135deg, #ffeef5 0%, #f5d6e8 50%, #e8d6f5 100%);
  --grad-mesh:   radial-gradient(ellipse at 20% 10%, #ffd6e8 0%, transparent 45%),
                 radial-gradient(ellipse at 80% 70%, #e8d6f5 0%, transparent 45%),
                 #fff8fb;
  --season-icon: "🌸";
  --season-label: "primavera";
}

/* ☀️ VERAO — coral vibrante, areia, azul piscina como contraste */
html[data-season="verao"]:not([data-theme="dark"]){
  --peach:       #ffe2c2;
  --coral-glow:  #ffd9b8;
  --rose:        #ffcfa3;
  --grad-soft:   linear-gradient(135deg, #ffe2c2 0%, #ffcfa3 50%, #b8e6f0 100%);
  --grad-mesh:   radial-gradient(ellipse at 20% 10%, #ffd9b8 0%, transparent 45%),
                 radial-gradient(ellipse at 80% 70%, #b8e6f0 0%, transparent 45%),
                 #fff5e6;
  --season-icon: "☀️";
  --season-label: "verão";
}

/* 🍂 OUTONO — terracota, mostarda, vinho */
html[data-season="outono"]:not([data-theme="dark"]){
  --peach:       #f5d4a8;
  --coral-glow:  #f0c89a;
  --rose:        #e8b88a;
  --grad-soft:   linear-gradient(135deg, #f5d4a8 0%, #e8a878 50%, #c4715a 100%);
  --grad-mesh:   radial-gradient(ellipse at 20% 10%, #e8a878 0%, transparent 45%),
                 radial-gradient(ellipse at 80% 70%, #c4715a 0%, transparent 45%),
                 #fdf5ea;
  --season-icon: "🍂";
  --season-label: "outono";
}

/* ❄️ INVERNO — plum profundo, dourado, off-white */
html[data-season="inverno"]:not([data-theme="dark"]){
  --peach:       #f0e8db;
  --coral-glow:  #e8d8c2;
  --rose:        #d8c2a8;
  --grad-soft:   linear-gradient(135deg, #f0e8db 0%, #d8c2a8 50%, #b8a088 100%);
  --grad-mesh:   radial-gradient(ellipse at 20% 10%, #e8d8c2 0%, transparent 45%),
                 radial-gradient(ellipse at 80% 70%, #d8c2a8 0%, transparent 45%),
                 #faf6f0;
  --season-icon: "❄️";
  --season-label: "inverno";
}

/* 🌷 DIA DAS MAES — rosa + dourado, microcopy especifico via tema */
html[data-season="dia-maes"]:not([data-theme="dark"]){
  --peach:       #ffe0ec;
  --coral-glow:  #ffd0e0;
  --rose:        #ffc0d6;
  --grad-soft:   linear-gradient(135deg, #ffe0ec 0%, #ffc0d6 50%, #f0c878 100%);
  --grad-mesh:   radial-gradient(ellipse at 20% 10%, #ffc0d6 0%, transparent 45%),
                 radial-gradient(ellipse at 80% 70%, #f0c878 0%, transparent 45%),
                 #fff5fa;
  --season-icon: "🌷";
  --season-label: "dia das mães";
}

/* 🛍️ BLACK FRIDAY — plum + dourado, urgencia discreta */
/* 🛍️ BLACK FRIDAY — dourado + ameixa profunda como ACENTOS sobre fundo
   claro. A versão anterior usava os MESMOS marrons escuros do modo dark
   nos painéis (--peach: #2b1d17 etc.), então com este tema ativo o "modo
   claro" ficava idêntico ao escuro. Sazonal = skin de acento, não de
   fundo: quem quer escuro usa o toggle. */
html[data-season="black-friday"]:not([data-theme="dark"]){
  --peach:       #f5ecdd;
  --coral-glow:  #ecdcb8;
  --rose:        #e8d2c4;
  --grad-soft:   linear-gradient(135deg, #f5ecdd 0%, #ecd9ae 55%, #c9a865 100%);
  --grad-mesh:   radial-gradient(ellipse at 20% 10%, #c9a865 0%, transparent 45%),
                 radial-gradient(ellipse at 80% 70%, #3d0f24 0%, transparent 45%),
                 #fbf4e8;
  --season-icon: "🛍️";
  --season-label: "black friday";
}

/* 🎄 NATAL — verde pinheiro + vermelho + dourado */
html[data-season="natal"]:not([data-theme="dark"]){
  --peach:       #f5e8d8;
  --coral-glow:  #f0d8a8;
  --rose:        #e8c898;
  --grad-soft:   linear-gradient(135deg, #f5e8d8 0%, #d8a878 50%, #2d5a3d 100%);
  --grad-mesh:   radial-gradient(ellipse at 20% 10%, #d8a878 0%, transparent 45%),
                 radial-gradient(ellipse at 80% 70%, #2d5a3d 0%, transparent 45%),
                 #fdf6ea;
  --season-icon: "🎄";
  --season-label: "natal";
}

/* Chip indicador de tema ativo (painel interno) */



/* ---------- RESET ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
button{ font-family: inherit; cursor: pointer; }
a{ color: var(--coral-deep); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1, h2, h3, h4{ font-family: var(--f-display); font-weight: 400; letter-spacing: -.015em; margin: 0; }
input, select, textarea{ font-family: inherit; font-size: inherit; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: var(--gray-300); border-radius: 999px; border: 2px solid var(--cream); }
::-webkit-scrollbar-track{ background: transparent; }

/* ---------- APP SHELL ---------- */




/* Sidebar */




















/* Main + Topbar */
.main{
  flex: 1;
  min-width: 0;
  width: calc(100% - var(--sidebar-w));
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}






/* Busca colapsável (mobile vira ícone). Desktop: wrapper transparente,
   trigger escondido, form sempre visível (mesmo com <details> fechado). */




/* <details> fechado esconde o conteúdo por padrão; no desktop forçamos
   a search-pill a aparecer sempre. */






















/* Flash messages */







/* v74.0.67 · feedback contextual para testes de integração. */






@media (max-width: 720px) {
  
  
}

/* ---------- BUTTONS ---------- */



















/* ---------- CARDS ---------- */








/* ---------- CHIPS ---------- */





 /* v46: badge de venda online */




/* ---------- Escala dos números administrativos ----------
   Controlada por Configurações > Sistema. Os seletores são aplicados
   aos componentes do painel; catálogo, Lookbook e checkout usam classes
   próprias e não herdam estes tamanhos. */
html[data-admin-number-size="compact"]{
  --admin-kpi-size: 28px;
  --admin-kpi-mobile-size: 26px;
  --admin-stat-size: 40px;
  --admin-stat-money-size: clamp(29px, 2.65vw, 37px);
  --admin-stat-mobile-size: 32px;
  --admin-stat-money-mobile-size: 28px;
  --admin-stat-small-size: 26px;
  --admin-stat-money-small-size: 24px;
}
html[data-admin-number-size="balanced"]{
  --admin-kpi-size: 32px;
  --admin-kpi-mobile-size: 28px;
  --admin-stat-size: 47px;
  --admin-stat-money-size: clamp(31px, 2.85vw, 41px);
  --admin-stat-mobile-size: 37px;
  --admin-stat-money-mobile-size: 31px;
  --admin-stat-small-size: 29px;
  --admin-stat-money-small-size: 27px;
}
html[data-admin-number-size="standard"]{
  --admin-kpi-size: 38px;
  --admin-kpi-mobile-size: 31px;
  --admin-stat-size: 56px;
  --admin-stat-money-size: clamp(34px, 3.1vw, 44px);
  --admin-stat-mobile-size: 42px;
  --admin-stat-money-mobile-size: 34px;
  --admin-stat-small-size: 32px;
  --admin-stat-money-small-size: 30px;
}

/* ---------- KPI ---------- */










/* ---------- THUMB (placeholder de produto) ---------- */













/* ---------- AVATAR ---------- */










/* ---------- TABLE ---------- */







/* ---------- FILTER BAR ---------- */





/* Tabs */






/* ---------- FORMS ---------- */













/* ── Uniformização de campos crus (painel) ──────────────────────────
   ~95 inputs/selects/textareas espalhados pelo painel (a seção de frete
   inteira em Configurações, criar venda, reposição, etc.) estavam SEM
   wrapper .form-control e renderizavam com o estilo nativo do navegador
   — larguras e aparências diferentes lado a lado com as pílulas.
   Esta regra dá a qualquer campo cru dentro de .form-group o MESMO
   visual da variante --plain, sem precisar tocar 20 templates.
   Escopo .app = só o painel; o catálogo público substitui o shell e
   tem sua própria tipografia de formulário. O seletor de filho direto
   (>) garante que inputs DENTRO de .form-control (transparentes, a
   pílula é o wrapper) não sejam re-estilizados. */




/* input de arquivo: sem pílula (o botão nativo manda), só tipografia coerente */


/* Grid de 4 campos (caixa-padrão do frete): colapsa em 2 no celular */

@media (max-width: 640px) {
  
}







/* ---------- GRIDS ---------- */











/* ---------- PROGRESS BARS ---------- */







/* ---------- STAT BLOCK (dentro de drawer/profile) ---------- */




/* ---------- PAGINATION ---------- */





/* ---------- EMPTY STATE ---------- */




/* ---------- LOGIN ---------- */















/* ---------- DASHBOARD chart wrap ---------- */




/* ---------- CATALOG (vitrine pública) ---------- */














































/* ---------- DRAWER (customer profile, etc.) ---------- */












/* ---------- POS / carrinho ---------- */


/* Feedback de toque (mobile): ao tocar, card afunda + ring coral.
   Mais importante que o hover desktop, ja que celular nao tem hover. */


/* Animacao quando o item e adicionado ao carrinho - feedback visual */
@keyframes pos-added-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 58, .6); }
  50%  { box-shadow: 0 0 0 12px rgba(255, 107, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 58, 0); }
}

/* Indicador visual permanente para produtos COM variantes:
   borda esquerda coral + canto com chip "tam·cor" na imagem */



































/* ---------- MISC helpers ---------- */





            
    




   

/* ---------- PUBLIC PAGES (login, catalog, etc. sem sidebar) ---------- */


/* ---------- MEDIA ---------- */
@media (max-width: 1100px) {
  
  
  
  
  
  
  
  
  
  
  
}
@media (max-width: 780px) {
  
  
  .main{
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: 0;
  }
  
  
  
  
  
  
  
  
  
  
  /* Mobile: actions empilham e usam flex-wrap. O botao primario
     (sem .btn--ghost) ocupa linha propria com largura total para
     destaque visual + legibilidade. Botoes ghost sm ficam icon-only. */
  
  /* Hamburguer fica primeiro, alinhado a esquerda */
  
  /* Busca colapsada em ícone no mobile: o <details> vira um botão lupa
     compacto (display:contents é desfeito para podermos posicioná-lo). */
  
  
  
  /* Form fica oculto até abrir; quando abre, ocupa a linha toda abaixo
     dos ícones, sem empurrar a faixa congelada quando fechado. */
  
  
  
  

  /* Botoes ghost sm ficam compactos, lado a lado, icon-only */
  
  /* Forms (logout etc) seguem o fluxo */
  
  /* Botão primário do topbar: escondido no mobile — a ação primária vira
     o FAB flutuante (.page-fab), padronizando posição em todas as telas.
     Telas sem page_fab_url não têm botão primário no topbar de qualquer forma. */
  
  
  
  
  
  
  
  
  /* Topbar mobile: botoes ghost sm icon-only com tamanho fixo */
  
  
  /* Botao primario "Novo produto": destaque, gradiente legivel,
     largura cheia em linha propria. Min-height 48px = alvo de toque WCAG. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* ============================================================
   PDV MOBILE — create_sale.html
   Estrategia: carrinho em cima, catalogo embaixo, CTA fixa
   no rodape. Sobrescreve estilos inline com !important onde
   necessario (nao e elegante, mas o HTML tem inline styles).
   ============================================================ */
@media (max-width: 780px) {
  /* 1. Empilha colunas (carrinho primeiro via order) */
  

  /* 2. Catalogo: sem altura minima fixa, sem scroll aninhado */
  
  
  

  /* 3. Carrinho aparece primeiro e nao fica sticky no mobile */
  
  
  

  /* 4. Forca grid de produtos para 2 colunas mesmo com inline style.
        Especificidade tripla + !important vence o style="..." */
  
  /* Cards menores, alvo de toque mantido (>=44px no botao) */
  
  
  
  
  

  /* 5. Filterbar empilha pesquisa e botao Scanner */
  
  
  

  /* 6. Pills de categoria: scroll horizontal em vez de wrap caotico */
  
  
  

  /* 7. Pagamento: 3 colunas iguais com alvo de toque maior */
  
  
  

  /* 8. Despacho: campos curtos (CEP/UF/Numero) empilham */
  

  /* 9. Cart items mais densos */
  
  
  
  

  /* 10. CTA STICKY: botao Finalizar fixo no rodape com total visivel.
         Acionado quando o submit-btn estiver dentro de .grid--pos. */
  
  

  /* 11. iOS safe area no botao sticky */
  @supports (padding: env(safe-area-inset-bottom)) {
    
  }

  /* 12. Scanner video nao estoura largura */
  
}

/* v74.0.10 · variantes públicas legadas catalog-clean removidas; a vitrine usa .ed-* em catalog.css. */



/* ---------- KEBAB MENU ---------- */







/* legacy modifiers ainda existem mas nao sao mais necessarios para
   posicionamento - mantidos por compatibilidade. */













/* v74.0.10 · variante pública legada cx-* removida; sem consumidores em template/JS. */

/* ============================================================
   PRODUCTS TABLE — responsive layout
   Desktop: columnar grid; Mobile: stacked card per row.
   ============================================================ */






/* Mobile: stacked card per product */
@media (max-width: 780px) {
  
  
  
  
  
  
  
  
  
  

  /* Kebab menu: posicionamento controlado por JS via position:fixed.
     Em mobile mantemos largura minima legivel. */
  
}

/* ============================================================
   LABELS PICKER — product_labels_batch.html
   ============================================================ */
















@media (max-width: 780px) {
  
  
  
  
  
  
  
}

/* ============================================================
   SETTINGS TABS — settings.html
   ============================================================ */






@keyframes settings-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section dividers inside a single big card (e.g. Fiscal) */




/* Sticky save bar at bottom of form */


@media (max-width: 780px) {
  
  
  
}

/* ============================================================
   MOBILE: tabelas genéricas .table__head / .table__row
   ------------------------------------------------------------
   25 templates usam grid-template-columns inline com larguras
   fixas (ex: "50px 2fr 2fr 110px..."). Em <=780px isso força
   scroll horizontal ou quebra layout. Esta regra neutraliza o
   grid e empilha cada coluna como bloco vertical.
   ============================================================ */
@media (max-width: 780px) {
  

  
  
  /* Avatares e thumbs — manter tamanho natural, alinhados à esquerda */
  
  /* Chips em mobile: inline-flex compacto */
  
  /* Forms (botões de ação) ocupam 100% e têm altura confortável p/ toque */
  
  
}

/* ============================================================
   Onda 3 · Modal de detalhes da peça (catálogo público)
   ============================================================ */


@keyframes pxFade { from { opacity: 0; } to { opacity: 1; } }



@keyframes pxRise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 760px) {
  
  
  
}








@media (max-width: 760px) {
  
}





/* Tabs */





/* Panes */



@keyframes pxPaneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }




/* Meta list (Sobre) */





/* Blocos (Composição/Cuidados) */






/* CTA */




/* ============================================================
   Polimento v3 · barra de composição + ícones lavagem ISO 3758
   ============================================================ */

/* Barra horizontal proporcional (Composição) */



/* Legenda da composição */






/* Extras de composição (tecido, gramatura) */


/* Ícone de lavagem ISO 3758 */




/* ============================================================
   DASHBOARD MOBILE — reordenacao por prioridade
   No mobile a coluna unica do dashboard precisa priorizar
   acoes urgentes (alertas) antes de analises (graficos).
   Ordem: KPIs -> Alertas -> Vendas/Top -> Analytics
   ============================================================ */
@media (max-width: 780px) {
  
  
  
  
  
}

/* ============================================================
   LOGOUT — reposicionamento no mobile
   Desktop: botao na topbar (padrao), oculto na sidebar
   Mobile : oculto na topbar, visivel como item na sidebar
   ============================================================ */




@media (max-width: 780px) {
  
  
}

/* ============================================================
   v9 — Badge de pendentes na sidebar
   Aparece ao lado do item "A receber" quando ha pagamentos
   aguardando confirmacao.
   ============================================================ */




/* ─── Grade de taxas de parcelamento + simulador (v30) ───────────
   Adaptado da ValeTech: a adquirente entrega uma taxa por nº de parcelas.
   A grade auto-fit evita colunas fixas e cabe no card em qualquer largura;
   o preview em R$ (preenchido por JS em Configurações) vira uma segunda
   linha dentro da célula. */







/* Prévia em R$ da parcela (preenchida por JS na tela de Configurações).
   Vira uma segunda linha dentro da célula — por isso o .rate-cell passa a
   ser flex-wrap. Fica vazia se não houver valor de simulação. */










/* ─── Configurações: grid de faixas compartilhadas (v34) ──────────
   Um grid só. Cada card ocupa faixas (grid-row/span, definidos pelo JS):
   onde uma coluna tem dois cards, a vizinha pode ter um card alto que
   ocupa as duas faixas. Como as linhas do grid são as MESMAS para todas
   as colunas, todo topo e toda base caem na mesma altura — inclusive as
   emendas entre cards empilhados, que na v33 (células flex independentes)
   saíam tortas por ~15px. O alinhamento passa a ser do navegador. */

@media (min-width: 1500px) {  }
@media (max-width: 899px)  {  }




/* Impressão: o PDF saía com 3 colunas espremidas (o --cols é inline, vem
   da largura da TELA) e cards partidos entre páginas. */
@media print {
  
  
}

/* Grade de taxas: dentro de uma coluna (~430px) as células param de
   esticar. minmax(76px, 1fr) dá 4–5 por linha em vez de 12 numa fileira
   só ocupando a largura da tela. */





/* Grade de taxas: nº de colunas FIXO por faixa — o auto-fit esticava as 12
   células numa fileira só quando o card ficava largo. */

@media (min-width: 900px) {
  
}

/* v68 · Aba Legal: campos de texto longo pedem largura. Em vez das 2–3
   colunas do resto das configurações, no máximo 2 — e uma só até 1279px,
   senão o textarea de 14 linhas fica espremido e o texto vira uma coluna
   estreita difícil de revisar. */

@media (min-width: 1280px) {  }
@media (min-width: 1500px) {  }

/* v68 · Resumo de acessos da vitrine */








/* v72.24 · acessibilidade global de teclado */
:where(a, button, input, select, textarea, summary):focus-visible{
  outline: 3px solid var(--coral-deep, #b34b42);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* v74.0.47 · Kits admin + publicação de look/kit */





/* v74.0.47 · comunicação: deixa explícito que cancelamento é um campo editável */





/* v74.0.47 · seletor de produtos do kit: checkboxes editoriais, sem multiselect nativo */












/* v74.0.63 · consentimentos WhatsApp independentes */


/* v74.0.63 · realce do envio de teste na fila WhatsApp */


/* source: style-refinements.css */
/* ============================================================
   malê · style-refinements.css
   ------------------------------------------------------------
   Carregado DEPOIS de style.css. Não substitui — refina.
   Foco: alma editorial dos mockups. Tipografia respirada,
   números em serif, blocos numerados, microcopy aliviada.

   Convenção de classes novas: prefixo .me-* ("malê editorial")
   pra coexistir com tudo que já existe sem colidir.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1 · TIPOGRAFIA EDITORIAL — refinos sobre o que já existe
   ──────────────────────────────────────────────────────────── */

/* Topbar: eyebrow do dia mais delicado, título com peso de revista */


@media (max-width: 780px) {
  
}

/* Card titles: italics editorial respiradas */



/* ────────────────────────────────────────────────────────────
   2 · EYEBROW NUMERADO ("01 · como ela se chama")
   Usado em create_product e qualquer formulário longo.
   ──────────────────────────────────────────────────────────── */

/* Coluna da foto no formulário de produto: sticky no desktop para
   manter a foto visível enquanto o usuário rola pelos campos da direita.
   Em mobile (≤780px, mesmo breakpoint do grid--1-2 colapsar) precisa
   ser static — caso contrário a foto cobre os campos abaixo, tornando
   alguns inacessíveis (especialmente após upload, quando o slot cresce). */

@media (max-width: 780px) {
  
}

/* Hero do detalhe do produto: foto 280px + info no desktop, colapsa
   para uma única coluna em mobile. Sem isso, a coluna info fica com
   ~80px no celular e o texto (nome, SKU, preços) estoura para fora. */

@media (max-width: 780px) {
  
}








/* ────────────────────────────────────────────────────────────
   3 · STAT EDITORIAL — número gigante em serif italic
   Usado no dashboard pros KPIs principais.
   ──────────────────────────────────────────────────────────── */















@media (max-width: 780px) {
  
  
}

/* Grid de stats no topo do dashboard — cards separados com gap (estilo mockup) */



@media (max-width: 980px) {
  
}
@media (max-width: 540px) {
  /* Mantém 2x2 em iPhones — coluna única consumia ~480px de altura
     antes de chegar no banner/gráfico. 2x2 cabe em ~210px. */
  
  
  
  
  
  
  
  
}

/* ────────────────────────────────────────────────────────────
   4 · BANNER SUTIL DE PENDENTES — linha à esquerda
   ──────────────────────────────────────────────────────────── */









/* ────────────────────────────────────────────────────────────
   5 · NUMBERED LIST — top produtos com números 1-5 grandes
   ──────────────────────────────────────────────────────────── */










/* ────────────────────────────────────────────────────────────
   6 · LISTA DE VENDAS RECENTES — calma, com #id discreto
   ──────────────────────────────────────────────────────────── */












@media (max-width: 780px) {
  
  
}

/* ────────────────────────────────────────────────────────────
   7 · CARD EDITORIAL — mais respirado que o .card padrão
   ──────────────────────────────────────────────────────────── */


/* Quando o card só tem 2 elementos (header + 1 row), alivia o padding inferior */







@media (max-width: 540px) {
  
}

/* ────────────────────────────────────────────────────────────
   8 · BARRA DE PROGRESSO FINA (saúde financeira)
   ──────────────────────────────────────────────────────────── */










/* ────────────────────────────────────────────────────────────
   9 · INPUT EDITORIAL — campos respirados sem caixa
   Versão alternativa de .form-control usada no create_product.
   Linhas finas sob o texto, sem moldura pesada.
   ──────────────────────────────────────────────────────────── */











@media (max-width: 720px) {
  
}

/* ────────────────────────────────────────────────────────────
   10 · CHIP-PICKER — cores e tamanhos como pills selecionáveis
   ──────────────────────────────────────────────────────────── */








/* ────────────────────────────────────────────────────────────
   11 · PHOTO SLOT — área de foto principal com overlay button
   ──────────────────────────────────────────────────────────── */

/* v72.12 · Coluna da capa do look. Em duas colunas (>1100px) ela fica
   sticky, acompanhando a rolagem dos campos à direita — comportamento certo
   ali. Quando o grid colapsa para UMA coluna, sticky + aspect-ratio 3/4 a
   100% de largura produziam uma foto de ~670px colada no topo, cobrindo o
   campo Nome: era esse o "primeiro plano impedindo a edição". */

@media (max-width: 1100px) {
  
  
  
}







/* Mini-thumbs strip abaixo da foto principal */






/* ────────────────────────────────────────────────────────────
   12 · FOOTER BAR — barra fixa com status e ações (form longo)
   ──────────────────────────────────────────────────────────── */






@media (max-width: 720px) {
  
  
  
}

/* ────────────────────────────────────────────────────────────
   13 · SEGMENTED — tabs sutis (6 meses · 12 meses · YTD)
   ──────────────────────────────────────────────────────────── */





/* ────────────────────────────────────────────────────────────
   13b · CHART editorial — eixos em HTML, SVG só pra linhas
   Resolve a distorção do preserveAspectRatio="none" no texto.
   ──────────────────────────────────────────────────────────── */











@media (max-width: 720px) {
  /* yaxis continua existindo em mobile (44px); mantém alinhamento das
     barras no eixo X. Antes zerava o padding-left, deixava labels deslocados. */
  
  
  
  
  /* Com 12 meses ou YTD em mobile, valor mensal não cabe.
     Esconde o valor — usuário ainda vê o mês e o gráfico. */
  
}

/* ────────────────────────────────────────────────────────────
   14 · LAYOUT GERAL — ajustes finos no app shell
   ──────────────────────────────────────────────────────────── */

/* Mais ar entre cards do dashboard */


/* Cards em grids do dashboard ficam mais respirados */

@media (max-width: 540px) {
  
}

/* Catálogo público: garantir que o hero respira mais */
.ed-hero__title{
  letter-spacing: -.025em;
}

/* ────────────────────────────────────────────────────────────
   14b · CATÁLOGO PÚBLICO — refinos editoriais cirúrgicos
   O catálogo já está editorial; aqui só ajustes de respiro.
   ──────────────────────────────────────────────────────────── */

/* Título do hero — letter-spacing ainda mais apertado pra peso de revista */


/* Eyebrow do hero — mais letter-spacing, mais delicado */
.ed-hero__edition{
  font-size: 10.5px !important;
  letter-spacing: .28em !important;
}

/* Lede mais respirado, em italic sutil pra reforçar voz editorial */
.ed-hero__lede{
  font-style: italic;
  color: var(--gray-700);
}

/* Card do produto: nome com mais peso editorial, meta menor */
.ed-card__name{
  letter-spacing: -.005em;
}


/* Intermission curatorial: bloco que respira muito mais */
.ed-intermission{
  padding: 80px 24px !important;
  text-align: center;
}
.ed-intermission__eyebrow{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.ed-intermission__text{
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.3;
  color: var(--ink);
  max-width: 28ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* Manifesto: tipografia mais delicada */



/* Footer: mais respiração, separadores sutis */
.ed-foot{
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}


.ed-foot__legal{
  font-size: 10.5px;
  letter-spacing: .04em;
  opacity: .6;
}

/* Filtros: chips mais delicados */
.ed-chip{
  font-family: var(--f-body);
  letter-spacing: .01em;
}

/* Search: mais respirada */
.ed-search input{
  letter-spacing: .01em;
}

/* ────────────────────────────────────────────────────────────
   14c · CATÁLOGO PÚBLICO — Footer editorial reformulado
   Substitui completamente o layout antigo (.ed-foot__brand
   + .ed-foot__cols) por uma versão respirada e balanceada.
   ──────────────────────────────────────────────────────────── */

/* v72.2 · O rodapé vinha de --plum com !important AQUI, não em
   catalog.css — por isso continuava bordô mesmo com a paleta trocada.
   v72.5 · Superfície e tintas passam a tokens PRÓPRIOS do rodapé
   (--ed-foot-bg / --ed-foot-ink*): antes eram emprestados do palco
   escuro do topo, e mudar o tom do rodapé mexia no topo junto. */


/* Decorative top rule (constrained à largura do conteúdo) */




/* Quando não tem o "Sobre" (catalogo pequeno), 3 cols */


@media (max-width: 920px) {
  
  
}
@media (max-width: 540px) {
  
}

/* Coluna brand: wordmark menor, mais coeso */




/* v72.6 · A cor declarada em `.ed-foot__wordmark` (0,1,0) perdia para
   `.ed a`: a marca saía na tinta suave herdada, não na forte. */







/* Colunas de links */









/* Linha legal: separador fino + 2 lados */

.ed-foot__legal{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* v72.5 · era .42 → 3,5:1 no padrão e 3,1:1 no chumbo. */
  color: rgba(var(--ed-foot-ink-strong), .64);
}


/* ────────────────────────────────────────────────────────────
   14d · CATÁLOGO PÚBLICO — amplificação editorial geral
   Sutilezas que reforçam a impressão de "revista".
   ──────────────────────────────────────────────────────────── */

/* Cards do grid: nome em italic delicado pra reforçar curadoria */
.ed-card__name{
  font-style: italic;
  font-size: 18px;
  letter-spacing: -.005em;
}

/* Preço: serif italic em vez de mono */
.ed-price{
  font-family: var(--f-display);
  font-style: italic;
  font-size: 18px;
  letter-spacing: -.005em;
}
.ed-price__prefix{
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-right: 4px;
  vertical-align: 1px;
}

/* Cue "conversar →" mais delicado */
.ed-card__cue{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--gray-500);
}

/* Sort active mais editorial — underline em vez de bold */


/* ────────────────────────────────────────────────────────────
   14f · FILTER BAR em 3 colunas (igual ao mockup do Claude)
   Estrutura horizontal: busca esquerda · cats centro · sort direita.
   Categorias viram texto com underline (sem pill com borda).
   ──────────────────────────────────────────────────────────── */

.ed-filters{
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) !important;
  align-items: center;
  gap: clamp(20px, 3vw, 48px) !important;
}
.ed-search{ max-width: 280px !important; padding-bottom: 8px !important; }
.ed-search input{ font-size: 14px; }









/* Contador de filtros ocupa as 3 cols */
.ed-filters__count{ grid-column: 1 / -1; }

@media (max-width: 920px) {
  .ed-filters{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ed-search{ max-width: 100% !important; }
  
}

/* ────────────────────────────────────────────────────────────
   14e · CARD ALINHADO — preço sempre na base do card
   Resolve o desalinhamento quando produtos têm quantidade
   diferente de variantes/swatches.
   ──────────────────────────────────────────────────────────── */

.ed-card__link{
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.ed-card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* Empurra o foot pro fim — todos os preços alinham na linha de baixo */
.ed-card__foot{
  margin-top: auto;
}
/* O variants block fica logo após o head, sem ser empurrado */
.ed-card__variants{
  margin-top: 0;
}

/* ────────────────────────────────────────────────────────────
   15 · DARK MODE — ajustes para os refinamentos
   ──────────────────────────────────────────────────────────── */







/* ────────────────────────────────────────────────────────────
   17 · LOOKBOOK · lista de produtos do look (admin)
   ──────────────────────────────────────────────────────────── */








/* ────────────────────────────────────────────────────────────
   16 · ALERT GRID adaptativo — resolve o "descontínuo"
   Quando só 1 alerta dispara, ocupa largura natural (não 50%).
   Com 2 ou 3, divide igualmente. Sem coluna fantasma.
   ──────────────────────────────────────────────────────────── */



/* Quando só tem 1 filho, limita largura pra não esticar feio */


/* Cards de alerta: mantêm o card branco (consistência com outros cards),
   mas com layout interno alinhado e sem padding excessivo quando vazios. */



@media (max-width: 540px) {
  
}


/* ────────────────────────────────────────────────────────────
   17 · FAB MOBILE — Nova venda
   Em ≤720px o botão "Nova venda" do topbar some e vira FAB
   no canto inferior direito. Alvo grande (56px) para polegar
   em iPhones. Safe-area-inset garante respiro do notch/home bar.
   ──────────────────────────────────────────────────────────── */



/* FAB genérico (qualquer tela com page_fab_url). Idêntico ao dashboard-fab,
   padroniza a ação primária no canto inferior direito em mobile. */
@media (max-width: 720px) {
  
  
  
  
}
@media (max-width: 380px) {
  
  
}

@media (max-width: 720px) {
  /* Esconde botão "Nova venda" do topbar — FAB assume o papel */
  

  
  
  
  
}

/* Em telas muito pequenas (≤380px iPhone SE), só ícone para não invadir conteúdo */
@media (max-width: 380px) {
  
  
}


/* ────────────────────────────────────────────────────────────
   18 · ÍCONES nos cards de KPI — decoração discreta
   Posicionados no canto superior direito, em cor muito sutil.
   Não competem com o número, só reforçam o tipo da métrica.
   ──────────────────────────────────────────────────────────── */





@media (max-width: 540px) {
  /* Em mobile o card é menor — ícone menor e mais próximo da borda */
  
  
}


/* ────────────────────────────────────────────────────────────
   19 · MONTH PICKER — seletor de mês no corpo do dashboard
   Setas + dropdown + botão "hoje". Sem JS (usa <details>).
   Posicionado ANTES dos KPIs (não mais na topbar — quebrava
   layout em mobile espremido entre os ícones de utilitário).
   ──────────────────────────────────────────────────────────── */

/* Linha que envolve o picker + botão hoje */



























/* Mobile: picker continua bonito no corpo, alinhado à esquerda. */
@media (max-width: 540px) {
  
  
}

/* ────────────────────────────────────────────────────────────
   N · ALINHAMENTO DE GRID — fix de "column blowout" no desktop
   ------------------------------------------------------------
   Em CSS Grid, filhos têm `min-width: auto` por padrão — ou seja,
   se um <select> ou um placeholder longo ocupa mais que sua fração,
   ele "estoura" a coluna e quebra a proporção 1fr 1fr (ou 2fr 1fr).
   Era exatamente o que estava acontecendo em Configurações ▸ Operação:
   o card de PIX, com o option "Chave aleatória (EVP)", empurrava a
   coluna direita para mais largo que a esquerda.

   A correção canônica é zerar o min-width dos itens de grid e,
   por simetria, dos itens flex em coluna. No mobile, todos esses
   grids viram 1 coluna via media query — então a regra abaixo
   é inerte ali e não muda nada. Visualmente: os cards passam a
   ter exatamente a mesma largura, alinhados em colunas firmes.
   ──────────────────────────────────────────────────────────── */


/* Form controls dentro de grids/flex precisam aceitar encolher
   abaixo do tamanho intrínseco do conteúdo (ex: select com option
   longo). Sem isso, o flex:1 do input/select segura largura mínima
   do conteúdo e voltamos ao mesmo problema dentro de cada card. */


/* `.flex-col` empilha cards verticalmente — garantir que cada card
   ocupe exatamente a largura da coluna pai, sem ler o conteúdo
   intrínseco. Isso resolve o caso "cada card tem uma largura
   diferente" mesmo quando o pai é a coluna correta. */


/* ────────────────────────────────────────────────────────────
   N+1 · SIDEBAR — estado ativo mais discreto
   ------------------------------------------------------------
   O gradient coral→magenta + glow funciona muito bem em CTAs
   (botão "Salvar", hero), mas no menu lateral ele puxa o olho
   para si e compete com o conteúdo da página. A regra abaixo
   troca para uma marcação mais editorial: fundo coral suave +
   texto coral profundo (mesmas cores da marca, intensidade
   invertida) + barrinha de acento à esquerda. Mantém clareza
   de "qual item está ativo" sem o peso visual.
   Sobrescreve a regra original em style.css (mesma especificidade,
   carregado depois — cascata vence).
   ──────────────────────────────────────────────────────────── */

/* Barrinha de acento à esquerda — ancorada no item, não na cor de fundo,
   para que o estado ativo permaneça legível mesmo se a cor mudar. */

/* Ícone também na cor de marca (em vez de currentColor branco) */

/* Badge dentro do item ativo: ajustar para o fundo claro */


/* ══════════ Sparklines nos cards de estatística ══════════ */



/* ══════════ Tooltip interativo do gráfico ══════════ */












/* ══════════ Funil de conversão (dashboard) ══════════ */









/* KPI de resultado positivo (lucro) */



/* v72.49 · Core Web Vitals no painel */










/* ============================================================
   v72.53 · PAINEL MALÊ — PRIMEIRA FASE DA NOVA IDENTIDADE
   ------------------------------------------------------------
   Mudanças estritamente visuais: shell, navegação, botões, campos,
   cards e listagem de produtos. Sem alterar HTML funcional, rotas,
   formulários ou estados de negócio.
   ============================================================ */



















































/* Produtos mobile: menu ancorado de verdade no topo direito do card.
   O posicionamento absoluto elimina a dependência do grid e impede que
   o botão volte a "boiar" abaixo da margem em produtos com textos longos. */
@media (max-width: 780px) {
  

  

  

  

  

  
  
  
  
  

  

  
}

/* ============================================================
   v72.54 · PAINEL MALÊ — COMPONENTES DE PRODUTOS E ESTOQUE
   ------------------------------------------------------------
   Segunda etapa da identidade: hierarquia, densidade e padrões
   reutilizáveis nas telas de produtos, variantes, reposição e
   avisos de estoque. Mudanças visuais; regras de negócio intactas.
   ============================================================ */



.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}























































@media (max-width: 980px) {
  
  
  
}

@media (max-width: 780px) {
  
  
  
  
  

  
  
  
  
  
  
  
  

  
  
  

  /* Avise-me: tabela vira uma sequência de cards sem rolagem horizontal. */
  
  
  
  
  
  
  
  

  /* Reposição: cada produto em baixa vira card compacto e legível. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* Detalhe de reposição: itens deixam de parecer tabela espremida. */
  
  
  
  
  
  
  
  
  
  

  /* Formulários de produto: ação de salvar padronizada e sempre acessível. */
  
  
  
  
  
  
  

  /* Detalhe do produto: hierarquia mais curta e sidebar sem sticky. */
  
  
  
  

  /* Variantes: linhas viram cards; controles de estoque permanecem juntos. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

@media (max-width: 480px) {
  
  
  
  
  
  
}




/* ============================================================
   v72.55 · PAINEL MALÊ — VENDAS E PEDIDOS
   Padronização visual, hierarquia, filtros e comportamento mobile.
   ============================================================ */

/* ── Lista de vendas ─────────────────────────────────────── */



































/* ── Pendências de pagamento ───────────────────────────── */












/* ── Detalhe do pedido ─────────────────────────────────── */































/* ── Nova venda / PDV ──────────────────────────────────── */











@media (max-width: 980px) {
  
  
}

@media (max-width: 780px) {
  /* Resumo: quatro métricas continuam legíveis em duas colunas. */
  
  
  
  
  

  /* Filtros recolhíveis para liberar área útil da lista. */
  
  
  
  
  
  

  /* Cada venda vira um card compacto com menu no topo direito. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* Pendências também deixam de parecer tabela espremida. */
  
  
  
  
  
  
  
  
  
  
  

  /* Detalhe: hierarquia vertical, ações grandes e itens em cards. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* PDV: mesma linguagem visual e menos bordas concorrentes. */
  
  
  
  
}

@media (max-width: 480px) {
  
  
  
  
  
}

/* ============================================================
   v72.56 · PAINEL MALÊ — CLIENTES E RELACIONAMENTO
   Lista, perfil, cadastro, atendimento, aniversários e créditos.
   ============================================================ */

/* ── Lista de clientes ───────────────────────────────────── */































/* ── Perfil da cliente ──────────────────────────────────── */






















































/* ── Formulários de cliente e crédito ──────────────────── */






















/* ── Aniversários ──────────────────────────────────────── */
















/* ── Créditos ──────────────────────────────────────────── */
















/* ── Atendimento rápido ────────────────────────────────── */






















@media (max-width: 1100px) {
  
  
  
}

@media (max-width: 900px) {
  
  
  
  
  
  
}

@media (max-width: 780px) {
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
}

@media (max-width: 480px) {
  
  
  
  
  
  
  
}

/* ============================================================
   v72.57 · PAINEL MALÊ — CUPONS E CAMPANHAS
   ------------------------------------------------------------
   Terceira etapa da identidade administrativa: marketing mais
   legível, filtros reais, cards mobile e formulários consistentes.
   ============================================================ */










/* Cupons */




















/* Formulários de marketing */





























/* Campanhas */

















/* Detalhe da campanha */




































@media (max-width: 1100px) {
  
  
  
  
}

@media (max-width: 900px) {
  
  
  
}

@media (max-width: 780px) {
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
}

@media (max-width: 480px) {
  
  
  
  
  
  
  
  
}

/* ============================================================
   v72.58 · PAINEL MALÊ — CONFIGURAÇÕES, ACESSOS E SEGURANÇA
   ------------------------------------------------------------
   Terceira camada administrativa: navegação, formulários sensíveis,
   usuários, auditoria, MFA e contas de pagamento. As regras de
   autenticação e integração permanecem no servidor.
   ============================================================ */

/* Configurações: atalhos claros antes do formulário extenso. */























/* v74.0.85 · Sem alterações não há barra de salvar. Ao abrir a navegação
   móvel, a barra também sai da composição para nunca disputar o menu. */

@media (max-width: 780px) {
  
}

/* Usuários: ações em menu único e cartões operacionais no celular. */























/* Criação de usuário e senhas. */
























/* Auditoria: rótulos em português e proteção visual dos IPs. */











/* MFA: segredos ficam mascarados e códigos recebem ações explícitas. */












/* Contas e credenciais de pagamento. */

























@media (max-width: 980px) {
  
  
}

@media (max-width: 780px) {
  /* v74.0.24 · Reserva móvel real. A v74.0.23 media corretamente a barra,
     mas uma regra posterior de <=899px voltava o padding do formulário para
     24px. Centralizamos o espaço numa variável e preservamos uma margem de
     leitura abaixo do último card. */
  
  
  /* 16px evita o auto-zoom de campos no Safari/iOS, que também altera a
     viewport e pode produzir a sensação de teclado instável. */
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

@media print {
  
  
}

/* ============================================================
   v72.60 · DASHBOARD — IMAGENS E LEITURA DOS INDICADORES
   ============================================================ */



@media (max-width: 700px) {
  
}

/* ============================================================
   v72.61 · RETOQUES EM VENDAS + AÇÃO MOBILE DO LOOKBOOK
   Lista de vendas mais densa sem remover informações operacionais.
   ============================================================ */


@media (max-width: 780px) {
  
  
  

  
  
  
  
  
  
  
  

  
  
  
  
  
  

  
  
  

  
  
  
  
  
  
  
  
  
}

@media (max-width: 420px) {
  
  
  
}

/* ============================================================
   Malê v72.64 · acabamento visual final do painel
   Consistência entre dashboard, clientes, vendas e relatórios.
   ============================================================ */

/* Superfícies principais seguem a mesma linguagem visual. */






/* Ações de overflow usam a mesma posição e tratamento em listas. */



/* Imagens do dashboard não podem parecer placeholders quando carregadas. */



@media (max-width: 780px) {
  /* Dashboard: cards um pouco menos altos e cabeçalhos mais alinhados. */
  
  
  
  
  

  /* Clientes: três indicadores na mesma faixa e ações de contato abaixo. */
  
  
  
  
  

  /* Vendas: menu firmemente ancorado no canto superior. */
  
  
  
  

  /* FABs da administração mantêm proporção e afastamento iguais. */
  
}

@media (max-width: 420px) {
  
  
}

/* v72.66 · Configurações de envio — campo de peso no padrão do painel */





@media (max-width: 640px) {
  
  
}


/* ============================================================
   Malê v72.67 · limpeza final da identidade antiga no dashboard
   ============================================================ */
@media (max-width: 720px) {
  
  
}







/* ============================================================
   Malê v72.68 · prata editorial e limpeza da identidade antiga
   ============================================================ */
:root{
  --admin-silver-start: #f4f4f2;
  --admin-silver-mid: #d8d8d4;
  --admin-silver-end: #b9b9b4;
  --admin-silver-ink: #242424;
  --admin-silver-border: #a7a7a2;
}

/* Ação Nova venda: mesma altura, fonte e acabamento no dashboard e vendas. */




/* Promo do Instagram no menu lateral: neutra, sem coral/magenta/plum. */






/* Dashboard: superfícies e acentos decorativos neutros. */
















@media (max-width: 720px) {
  
}


/* ============================================================
   Malê v72.69 · grafite único + seletor de peças do Lookbook
   ============================================================ */
:root{
  --admin-primary: #454542;
  --admin-primary-hover: #353533;
  --admin-primary-active: #292927;
  --admin-primary-ink: #ffffff;
  --admin-primary-border: #3e3e3b;
}

/* Todos os botões principais do painel usam o mesmo grafite fosco. */





/* Seletor de peças: mesma linguagem dos demais campos do painel. */












@keyframes look-row-added {
  from { opacity: .35; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  
  
}




/* v72.70 · Editor de looks coerente no mobile */

@media (max-width: 780px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* ========================================================================
   v73.21 · Banner do topo — trilhas independentes + upload contemporâneo
   ======================================================================== */











































































@media (max-width: 1180px) {
  
  
  
  
}
@media (max-width: 820px) {
  
  
  
  

  /* v74.0.91 · No celular o editor deixa de ser um popover absoluto.
     O <details> passa a integrar o fluxo do card; ao abrir, o próprio card
     cresce e nenhum campo cobre o banner seguinte ou a borda da viewport. */
  
  
  
  
  
  
  
  
  

  
  
  
}

/* O catálogo público tem duas trilhas independentes; só a correspondente ao
   viewport participa do layout. Sem fallback silencioso entre dispositivos. */
.ed-topbanner--mobile-track{ display: block; }
/* v74.0.25 · No mobile o banner aceita swipe horizontal, mas o gesto vertical
   continua livre para rolar a página e o pinch continua disponível. */
.ed-topbanner--mobile-track{
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.ed-topbanner--desktop-track{ display: none; }
@media (min-width: 721px) {
  .ed-topbanner--mobile-track{ display: none !important; }
  .ed-topbanner--desktop-track{ display: block; }
}

/* v73.22 · Release Candidate — ações de Settings + vitals por dispositivo */













@media (max-width: 980px) {
  
  
}

/* v73.38 · Cupons com exclusão de produtos */

















@media (max-width: 720px) {
  
  
  
}

/* ============================================================
   v73.68 · Ações Meta responsivas
   O card de integrações pode ficar mais estreito por causa da sidebar.
   A grade genérica de 3 colunas mantinha cada botão em 1fr enquanto
   .btn força white-space: nowrap, fazendo os rótulos vazarem do card.
   Esta regra é deliberadamente local: não altera os demais botões.
   ============================================================ */


@media (max-width: 420px) {
  
}


/* ============================================================
   v73.70 · Monitor operacional da sincronização de estoque Meta
   Separa fila local, lote remoto e retry sem depender do banner flash.
   ============================================================ */
















@keyframes metaSyncPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.82); }
}
@media (max-width: 680px) {
  
  
  
  
  
}
@media (prefers-reduced-motion: reduce) {
  
}

/* v74.0 RC3 · Cadências configuráveis da sincronização Meta */



@media (max-width: 760px) {
  
}

/* ============================================================
   v74.0 RC6 · Integração Meta compacta + heartbeat observável
   A aba deixa de ser uma coluna única muito longa no desktop. Cada coluna
   mantém seu próprio fluxo; mobile volta naturalmente para uma coluna.
   ============================================================ */






@media (max-width: 1099px) {
  
}
@media (max-width: 680px) {
  
  
  
}

/* Ajustes raros ficam recolhidos por padrão; o resumo sempre mostra os
   valores em vigor, então o operador não precisa abrir só para conferi-los. */










@media (max-width: 520px) {
  
  
}










@media (max-width: 560px) {
  
}

/* ============================================================
   v74.0 RC7 · Integrações usam a largura real do painel
   O empacotador global de Configurações cria 2/3 colunas no desktop. A aba
   Integrações contém um único card-composição (Meta) que já possui sua própria
   grade interna; portanto esse card deve ocupar 100% da largura útil.
   ============================================================ */



/* Em telas largas, aproveita a largura extra sem transformar textos em linhas
   excessivamente longas: a coluna operacional recebe um pouco mais de espaço. */
@media (min-width: 1450px) {
  
}
@media (max-width: 1099px) {
  
}


/* v74.0.5 · Controles não podem forçar a largura dos cards de Integrações. */







/* v74.0 RC8 · diagnósticos Meta legíveis no próprio painel. */


























@media (max-width: 640px) {
  
  
  
}

/* ============================================================
   v74.0 RC11 · Relatório local de imagens Meta
   Mostra foto por foto sem transformar novamente a aba Integrações em uma
   página interminável: o relatório possui área de rolagem própria.
   ============================================================ */



























@media (max-width: 760px) {
  
  
  
  
  
}

/* ============================================================
   v74.0 RC11 · Cadastro de produto alinhado ao restante do admin
   Mantém a estrutura editorial/numerada da página, mas os componentes de
   entrada voltam a usar o mesmo vocabulário visual de Configurações, vendas,
   clientes e edição de produto: caixa, raio, foco, hint e espaçamento.
   ============================================================ */
















/* Os pills de cuidados continuam úteis como picker, mas deixam de usar um
   visual de vitrine e passam a se comportar como filtros do painel. */




/* RC11 · correção estrutural: alguns blocos de três campos do cadastro usam
   somente a classe --3, então ela precisa declarar o grid por conta própria. */

@media (max-width: 720px) {
  
}

/* ============================================================
   v74.0.7 · ALINHAMENTO SEMÂNTICO DOS FORMULÁRIOS DE CONFIGURAÇÕES
   ------------------------------------------------------------
   Campos lado a lado não podem "descer" quando um rótulo quebra em duas
   linhas. As grades administrativas passam a compartilhar a mesma faixa de
   rótulo e a mesma altura mínima de controle. No celular, a grade volta para
   uma coluna e a reserva vertical é removida para não desperdiçar espaço.
   ============================================================ */




/* Também cobre campos gerados por ui_field(), que chegam embrulhados em um
   <div> quando o template precisa distribuir três textos lado a lado. */


@media (min-width: 721px) {
  
}

/* Inputs, selects e wrappers visuais começam e terminam na mesma altura. */




@media (max-width: 720px) {
  

  
}

/* O wrapper --plain não define a altura do próprio <select>/<input> porque
   herda align-items:center de .form-control. Por isso a altura comum também
   precisa ser aplicada ao controle real. */


/* ============================================================
   v74.0.9 · CONSISTÊNCIA VISUAL + ARQUITETURA DE INFORMAÇÃO
   ------------------------------------------------------------
   - O painel usa superfícies neutras inclusive em blocos que ainda herdavam
     o antigo gradiente coral/rosa.
   - Cores de estado passam a ser semânticas e discretas.
   - Seções do menu ficam compactas para permitir agrupamento por assunto
     sem transformar o drawer mobile numa sequência excessivamente longa.
   ============================================================ */















/* As abas de Configurações não devem depender de um empacotador que muda a
   posição visual por altura. O CSS Grid mantém a sequência semântica. */



/* O novo grupo Operação contém formulários de impressão/fiscal e precisa da
   mesma proteção responsiva dos demais grupos de Configurações. */
@media (max-width: 720px) {
  
}

/* Produto: duas ações primárias visíveis e manutenção no menu contextual. */





/* ============================================================
   v74.0.17 · CONFIGURAÇÕES — DENSIDADE + BALANCEAMENTO DE ALTURA REAL
   ------------------------------------------------------------
   O layout continua sem masonry e sem reordenar o DOM, mas usa menos
   faixas semânticas e escolhe 1, 2 ou 3 colunas conforme a densidade.
   Cards curtos deixam de desperdiçar largura e o scroll vertical cai.
   ============================================================ */













/* v74.0.22 · Em zonas de três colunas a primeira é a coluna editorial
   principal: recebe ~39% da largura; as duas auxiliares ficam simétricas. */




/* v74.0.17 · Fechamento real da base das colunas.
   - 2+ cards: o excedente é distribuído ENTRE os cards.
   - 1 card: o card ocupa a altura-alvo da coluna; este era o caso que a
     v74.0.16 ignorava e que aparece no print da aba Vitrine. */
@media (min-width: 900px) {
  
  
  

  /* Contrato histórico v74.0.17: o fechamento antigo usava
     `justify-content: space-between`; a v74.0.22 substitui isso pelo gap
     limitado + crescimento distribuído dos cards para evitar grandes vazios. */
}

/* O rodapé fixo não deve esconder os últimos campos/cards. */


/* Contrato histórico de densidade (v74.0.15):
   grid-template-columns: repeat(3, minmax(0, 1fr));
   A v74.0.22 torna a primeira coluna deliberadamente mais larga. */
/* Desktop médio: 3 colunas ainda são confortáveis com os campos atuais. */
@media (min-width: 1180px) and (max-width: 1329px) {
  
}

/* Tablet/desktop estreito: zonas de 3 colunas passam a 2 de forma previsível. */
@media (min-width: 900px) and (max-width: 1179px) {
  
  
  
}

@media (max-width: 899px) {
  /* Em telefone, --settings-mobile-bottom-space vem da barra fixa medida;
     em 781–899px ela não existe e o formulário mantém os 24px normais. */
  
  
  
  
  
  
  
}

/* ============================================================
   Malê v74.0.24 · estabilidade dos controles no mobile
   ------------------------------------------------------------
   As barras de ação fixas usam sua altura real (medida em base.html), e os
   campos mantêm fonte >=16px para evitar auto-zoom/flicker de teclado no iOS.
   O scroll-margin garante que o controle focado não fique sob a barra.
   ============================================================ */
@media (max-width: 780px) {
  
}

/* ============================================================
   Malê v74.0.21 · consistência dos campos administrativos
   ------------------------------------------------------------
   Corrige os últimos controles que escapavam do sistema visual do
   painel: moeda em Configurações, promoção em lote, matrizes de
   estoque, composição dinâmica e confirmação destrutiva.
   ============================================================ */




/* Campo compacto = mesmo material do painel, só com densidade menor.
   Usado onde um controle normal de 44 px prejudicaria barras e matrizes. */











@media (max-width: 560px) {
  
  
  
}

/* ── Pendentes de envio / retirada ─────────────────────── */







@media (max-width: 760px) {
  
  
  
}

/* ═══════════════════════════════════════════════════════════════════════
   v74.0.48 · Lookbook admin — publicação verificável
   O estado agregado evita a situação "13 criados / 7 no catálogo" sem
   explicação. Cards deixam de ser <a> envolvendo <form>, preservando HTML
   válido e permitindo publicar/despublicar direto da listagem.
   ═══════════════════════════════════════════════════════════════════════ */



















@media (max-width: 720px) {
  
  
  
}

/* v74.0.58 · ações estruturadas do banner */






@media (max-width: 720px) {
  
}

/* v74.0.69 · Guardrails editoriais ---------------------------------------
   O contador orienta sem transformar descrição em campo rígido. Só campos
   explicitamente marcados como microcopy/título recebem maxlength no HTML. */






@media (max-width:560px){
  
  
}



/* v74.0.93 · diagnóstico de CLS por página/release, sem PII. */