/* =====================================================================
   SILK UI — ícones + botões do módulo Força de Vendas (PDV)
   Complementa o Tailwind: só classes novas (.si, .sbtn*, .pdv-nav*, .tip).
   Ícones vêm do sprite em js/silk-icons.js.
   ===================================================================== */

/* ---- Ícone de linha (herda a cor do texto) ---- */
.si{ width:1.15em; height:1.15em; flex:none; display:inline-block; vertical-align:-.2em;
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.si-sm{ width:.95em; height:.95em; }
.si-lg{ width:1.45em; height:1.45em; }
.si-fill{ fill:currentColor; stroke:none; }
.si-spin{ animation:si-spin .8s linear infinite; }
@keyframes si-spin{ to{ transform:rotate(360deg); } }

/* ---- Botão base ---- */
.sbtn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:42px; padding:0 15px;
  border:1px solid transparent; border-radius:12px; font:inherit; font-size:14px; font-weight:600; line-height:1;
  white-space:nowrap; cursor:pointer; text-decoration:none; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .08s, opacity .15s; }
.sbtn .si{ width:18px; height:18px; }
.sbtn:active{ transform:translateY(1px) scale(.99); }
.sbtn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(210,184,125,.6); }
.sbtn:disabled, .sbtn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.sbtn-sm{ height:36px; padding:0 12px; font-size:13px; border-radius:10px; }  .sbtn-sm .si{ width:16px; height:16px; }
.sbtn-xs{ height:30px; padding:0 10px; font-size:12px; border-radius:9px; }   .sbtn-xs .si{ width:14px; height:14px; }
.sbtn-lg{ height:52px; padding:0 22px; font-size:16px; border-radius:14px; } .sbtn-lg .si{ width:20px; height:20px; }
.sbtn-icon{ width:42px; padding:0; }  .sbtn-icon.sbtn-sm{ width:36px; }  .sbtn-icon.sbtn-xs{ width:30px; }
.sbtn-block{ width:100%; }

/* ---- Variantes ---- */
.sbtn-primary{ background:#072A40; color:#fff; box-shadow:0 10px 20px -12px rgba(7,42,64,.6); }
.sbtn-primary:hover{ background:#031C26; }
.sbtn-secondary{ background:#fff; color:#072A40; border-color:#e7e5e4; }
.sbtn-secondary:hover{ background:#faf5ea; border-color:#D2B87D; }
.sbtn-ghost{ background:transparent; color:#072A40; }
.sbtn-ghost:hover{ background:rgba(7,42,64,.06); }
.sbtn-soft{ background:rgba(210,184,125,.22); color:#3a2d0a; }
.sbtn-soft:hover{ background:rgba(210,184,125,.4); }
.sbtn-gold{ background:linear-gradient(180deg,#E7D5A6,#D2B87D); color:#3a2d0a; box-shadow:0 10px 20px -12px rgba(120,90,20,.55); }
.sbtn-gold:hover{ filter:brightness(.97); }
.sbtn-danger{ background:#fff; color:#b3392f; border-color:#f0d2ce; }
.sbtn-danger:hover{ background:#fbe9e6; border-color:#e8b8b2; }
.sbtn-success{ background:#1c7a4a; color:#fff; }
.sbtn-success:hover{ background:#166239; }
.sbtn-wpp{ background:#25D366; color:#fff; box-shadow:0 10px 20px -12px rgba(37,211,102,.6); }
.sbtn-wpp:hover{ background:#1fbf5b; }
.sbtn-muted{ background:#f5f5f4; color:#072A40; }
.sbtn-muted:hover{ background:#e7e5e4; }
/* estado "ligado" (ex.: câmera gravando) */
.sbtn-live{ background:#fbe9e6; color:#b3392f; border-color:#f0d2ce; }
.sbtn-live:hover{ background:#f7d9d4; }
.sbtn-live .live-dot{ width:8px; height:8px; border-radius:50%; background:#d9342b; box-shadow:0 0 0 0 rgba(217,52,43,.55); animation:sbtn-pulse 1.4s infinite; }
@keyframes sbtn-pulse{ 70%{ box-shadow:0 0 0 7px rgba(217,52,43,0); } 100%{ box-shadow:0 0 0 0 rgba(217,52,43,0); } }

/* ---- Botão de fechar (modais) e botões de ação de linha ---- */
.sbtn-close{ width:36px; height:36px; padding:0; border-radius:50%; background:transparent; color:#78716c; border:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; }
.sbtn-close:hover{ background:#f5f5f4; color:#072A40; }
.sbtn-close .si{ width:18px; height:18px; stroke-width:2.1; }
.sbtn-close.red:hover{ background:#fbe9e6; color:#b3392f; }
.sbtn-close.sm{ width:32px; height:32px; } .sbtn-close.sm .si{ width:16px; height:16px; }

/* ---- Botões de quantidade (carrinho) ---- */
.sbtn-qty{ width:32px; height:32px; border:0; border-radius:9px; background:#f5f5f4; color:#072A40; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.sbtn-qty:hover{ background:#e7e5e4; }
.sbtn-qty .si{ width:15px; height:15px; stroke-width:2.4; }

/* ---- Navegação do cabeçalho (segmentada) ---- */
.pdv-nav{ display:flex; align-items:center; gap:2px; padding:3px; border-radius:14px;
  background:rgba(7,42,64,.05); border:1px solid rgba(7,42,64,.07); }
.pdv-nav-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px; border:0; border-radius:11px;
  background:transparent; color:#24323a; font:inherit; font-size:13.5px; font-weight:600; text-decoration:none; cursor:pointer;
  white-space:nowrap; transition:background .15s, color .15s, box-shadow .15s; }
.pdv-nav-btn .si{ width:17px; height:17px; color:#9d937f; transition:color .15s; }
.pdv-nav-btn:hover, .pdv-nav-btn.on{ background:#fff; color:#031C26; box-shadow:0 1px 3px rgba(7,42,64,.12); }
.pdv-nav-btn:hover .si, .pdv-nav-btn.on .si{ color:#D98032; }
.pdv-nav-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(210,184,125,.6); }
.pdv-nav-sep{ width:1px; height:22px; background:#e9dfcc; margin:0 6px; }
@media (max-width:639px){
  .pdv-brand-sub{ display:none; }                 /* no celular fica só a folha + "Silk" */
  .pdv-home{ width:36px; padding:0; }
  .pdv-nav{ padding:2px; gap:1px; }
  .pdv-nav-btn{ padding:0 7px; height:34px; }
  .pdv-nav-btn span{ display:none; }
  .pdv-nav-btn .si{ width:20px; height:20px; }
  .pdv-nav-sep{ margin:0 3px; }
}
@media (max-width:379px){ .pdv-nav-btn{ padding:0 6px; } }

/* ---- Tooltip leve (data-tip) — útil nos botões só-ícone ---- */
.tip{ position:relative; }
.tip::after{ content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%) translateY(-3px);
  background:#031C26; color:#fff; font-size:11.5px; font-weight:500; letter-spacing:.01em; padding:5px 9px; border-radius:7px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:60; }
.tip:hover::after, .tip:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.tip.tip-up::after{ top:auto; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(3px); }
.tip.tip-up:hover::after, .tip.tip-up:focus-visible::after{ transform:translateX(-50%) translateY(0); }
@media (hover:none){ .tip::after{ display:none; } }

/* ---- Caixinha de ícone (ilustração em cards/modais) ---- */
.si-box{ display:inline-flex; align-items:center; justify-content:center; flex:none; border-radius:16px; }
.si-box .si{ width:55%; height:55%; }

/* ---- Toast com ícone ---- */
#toast{ display:flex; align-items:center; gap:9px; }
#toast.hidden{ display:none; }
#toast .si{ width:18px; height:18px; color:#E8DCB8; }

/* ---- Tailwind .hidden continua mandando nos elementos com display próprio ---- */
.sbtn.hidden, .sbtn-close.hidden, .pdv-nav-btn.hidden, .si-box.hidden{ display:none !important; }

/* ---- Modo escuro ---- */
html.silk-dark .sbtn-primary{ background:#0e3a55; }        html.silk-dark .sbtn-primary:hover{ background:#124668; }
html.silk-dark .sbtn-secondary{ background:#1a242b; color:#e6edf2; border-color:#283540; }
html.silk-dark .sbtn-secondary:hover{ background:#22303a; border-color:rgba(210,184,125,.45); }
html.silk-dark .sbtn-ghost{ color:#e6edf2; }               html.silk-dark .sbtn-ghost:hover{ background:rgba(255,255,255,.08); }
html.silk-dark .sbtn-soft{ background:rgba(210,184,125,.18); color:#f0e6d0; }
html.silk-dark .sbtn-soft:hover{ background:rgba(210,184,125,.3); }
html.silk-dark .sbtn-danger{ background:#1a242b; color:#f28b82; border-color:#4a2a27; }
html.silk-dark .sbtn-danger:hover{ background:#2b1f1e; }
html.silk-dark .sbtn-muted{ background:#22303a; color:#e6edf2; }  html.silk-dark .sbtn-muted:hover{ background:#2b3a45; }
html.silk-dark .sbtn-live{ background:#2b1f1e; color:#f28b82; border-color:#4a2a27; }
html.silk-dark .sbtn-close{ color:#94a3b8; }               html.silk-dark .sbtn-close:hover{ background:#22303a; color:#fff; }
html.silk-dark .sbtn-qty{ background:#22303a; color:#e6edf2; } html.silk-dark .sbtn-qty:hover{ background:#2b3a45; }
html.silk-dark .pdv-nav{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); }
html.silk-dark .pdv-nav-btn{ color:#cbd5e1; }
html.silk-dark .pdv-nav-btn:hover, html.silk-dark .pdv-nav-btn.on{ background:#1a242b; color:#fff; box-shadow:none; }
html.silk-dark .pdv-nav-sep{ background:#283540; }
html.silk-dark .tip::after{ background:#e6edf2; color:#0d1418; }
/* cabeçalho de vidro acompanha o modo escuro (o fx-glass força branco) */
html.silk-dark header.fx-glass{ background:rgba(13,20,24,.9) !important; box-shadow:0 1px 0 0 rgba(210,184,125,.22), 0 4px 14px -8px rgba(0,0,0,.6) !important; }

/* =====================================================================
   REGUA LATERAL DO PDV (silk-rail.js)
   72px fixa a esquerda; expande pra 232px no hover (sobrepondo, sem
   empurrar o conteudo) ou fica fixada aberta. No celular vira gaveta.
   ===================================================================== */
:root{ --rail-w:72px; --rail-open:232px; --rail-top:56px; }

.pdv-rail{ position:fixed; top:0; left:0; bottom:0; width:var(--rail-w); z-index:45;
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(255,255,255,.86); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border-right:1px solid #e9dfcc;
  transition:width .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, transform .22s cubic-bezier(.2,.7,.2,1); }
.pdv-rail:hover, .pdv-rail:focus-within, .pdv-rail.fixa{ width:var(--rail-open); box-shadow:18px 0 40px -28px rgba(7,42,64,.45); }

/* marca no topo */
.pdv-rail-brand{ position:relative; display:flex; align-items:center; gap:12px; height:64px; padding:0 0 0 22px; flex:none;
  text-decoration:none; color:#031C26; border-bottom:1px solid #f2ecdd; }
.pdv-rail-leaf{ width:28px; height:28px; flex:none; fill:none; stroke:currentColor; stroke-width:34;
  stroke-linecap:round; stroke-miterlimit:10; color:#072A40; }
.pdv-rail-brand .pdv-rail-tx b{ display:block; font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-weight:600; line-height:1; }
.pdv-rail-brand .pdv-rail-tx em{ display:block; font-style:normal; font-size:9px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#C6A968; margin-top:3px; }

/* itens */
.pdv-rail-nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 10px; display:flex; flex-direction:column; gap:3px; }
.pdv-rail-item{ position:relative; display:flex; align-items:center; gap:14px; height:44px; padding:0 13px; flex:none;
  border:0; border-radius:11px; background:transparent; color:#6f6858; font:inherit; font-size:14px; font-weight:600;
  text-align:left; text-decoration:none; cursor:pointer; white-space:nowrap; width:100%;
  transition:background .14s, color .14s; }
.pdv-rail-item .si{ width:21px; height:21px; flex:none; color:#9d937f; transition:color .14s; }
.pdv-rail-item:hover{ background:#faf5ea; color:#031C26; }
.pdv-rail-item:hover .si{ color:#072A40; }
.pdv-rail-item.on{ background:#f6edd6; color:#031C26; }
.pdv-rail-item.on .si{ color:#D98032; }
.pdv-rail-item.on::before{ content:''; position:absolute; left:-10px; top:11px; bottom:11px; width:3px;
  border-radius:0 3px 3px 0; background:#D98032; }
.pdv-rail-item:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(210,184,125,.65); }

/* rotulos: so aparecem com a regua aberta */
.pdv-rail-tx{ opacity:0; transform:translateX(-6px); transition:opacity .16s, transform .16s; }
.pdv-rail:hover .pdv-rail-tx, .pdv-rail:focus-within .pdv-rail-tx, .pdv-rail.fixa .pdv-rail-tx{ opacity:1; transform:none; }

/* rodape: tema, inicio, usuario, fixar */
.pdv-rail-foot{ flex:none; padding:10px; border-top:1px solid #f2ecdd; display:flex; flex-direction:column; gap:3px; }
.pdv-rail-user{ display:flex; align-items:center; gap:13px; height:44px; padding:0 11px; color:#24323a;
  font-size:13.5px; font-weight:600; white-space:nowrap; }
.pdv-rail-ava{ width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#072A40,#031C26); color:#E8DCB8; font-size:11px; font-weight:700; }
.pdv-rail-pin{ display:none; align-items:center; justify-content:center; height:30px; margin-top:2px;
  border:0; border-radius:9px; background:transparent; color:#9d937f; cursor:pointer; transition:background .14s, color .14s; }
.pdv-rail-pin .si{ width:17px; height:17px; }
.pdv-rail-pin:hover{ background:#faf5ea; color:#072A40; }

/* dica ao lado do icone quando a regua esta fechada */
.pdv-rail-item[data-tip]::after, .pdv-rail-brand[data-tip]::after{ content:attr(data-tip); position:absolute; left:calc(100% + 14px);
  top:50%; transform:translateY(-50%) translateX(-4px); background:#031C26; color:#fff; font-size:11.5px; font-weight:500;
  padding:5px 9px; border-radius:7px; white-space:nowrap; opacity:0; pointer-events:none; z-index:70;
  transition:opacity .14s, transform .14s; }
.pdv-rail-item:hover::after, .pdv-rail-brand:hover::after{ opacity:1; transform:translateY(-50%); }
.pdv-rail:hover .pdv-rail-item::after, .pdv-rail.fixa .pdv-rail-item::after,
.pdv-rail:hover .pdv-rail-brand::after, .pdv-rail.fixa .pdv-rail-brand::after{ display:none; }

/* barra de cima (so no celular) */
.pdv-top{ display:none; position:fixed; top:0; left:0; right:0; height:var(--rail-top); z-index:44;
  align-items:center; gap:12px; padding:0 14px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid #e9dfcc; }
.pdv-top-burger{ width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid #e9dfcc; border-radius:10px; background:#fff; color:#072A40; cursor:pointer; }
.pdv-top-burger .si{ width:20px; height:20px; }
.pdv-top-brand{ display:flex; align-items:center; gap:9px; color:#031C26; text-decoration:none; }
.pdv-top-brand .pdv-rail-leaf{ width:23px; height:23px; }
.pdv-top-brand b{ display:block; font-family:'Cormorant Garamond',Georgia,serif; font-size:19px; font-weight:600; line-height:1; }
.pdv-top-brand em{ display:block; font-style:normal; font-size:8.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#C6A968; margin-top:2px; }
.pdv-scrim{ display:none; position:fixed; inset:0; background:rgba(7,42,64,.4); z-index:44; }
.pdv-scrim.aberta{ display:block; }

/* ---- desktop: o conteudo desloca so a regua fechada (o hover sobrepoe) ---- */
@media (min-width:1024px){
  .pdv-has-rail{ padding-left:var(--rail-w); transition:padding-left .22s cubic-bezier(.2,.7,.2,1); }
  .pdv-has-rail.pdv-rail-fixa{ padding-left:var(--rail-open); }
  .pdv-rail-pin{ display:flex; }
}
/* ---- celular/tablet: gaveta ---- */
@media (max-width:1023px){
  .pdv-rail{ width:var(--rail-open); transform:translateX(-100%); box-shadow:0 20px 60px rgba(7,30,45,.3); }
  .pdv-rail.aberta{ transform:none; }
  .pdv-rail .pdv-rail-tx{ opacity:1; transform:none; }
  .pdv-rail-item[data-tip]::after, .pdv-rail-brand[data-tip]::after{ display:none; }
  .pdv-top{ display:flex; }
  .pdv-has-rail{ padding-top:var(--rail-top); }
  .pdv-has-rail .pdv-pagehead{ top:var(--rail-top); }
}
@media (prefers-reduced-motion:reduce){
  .pdv-rail, .pdv-has-rail, .pdv-rail-tx{ transition:none !important; }
}

/* ---- modo escuro ---- */
html.silk-dark .pdv-rail{ background:rgba(17,24,29,.9); border-right-color:#283540; }
html.silk-dark .pdv-rail-brand{ color:#e6edf2; border-bottom-color:#283540; }
html.silk-dark .pdv-rail-leaf{ color:#e6edf2; }
html.silk-dark .pdv-rail-item{ color:#cbd5e1; }
html.silk-dark .pdv-rail-item:hover{ background:#22303a; color:#fff; }
html.silk-dark .pdv-rail-item:hover .si{ color:#e6edf2; }
html.silk-dark .pdv-rail-item.on{ background:#1a242b; color:#fff; }
html.silk-dark .pdv-rail-foot{ border-top-color:#283540; }
html.silk-dark .pdv-rail-user{ color:#e6edf2; }
html.silk-dark .pdv-rail-pin:hover{ background:#22303a; color:#e6edf2; }
html.silk-dark .pdv-rail-item[data-tip]::after, html.silk-dark .pdv-rail-brand[data-tip]::after{ background:#e6edf2; color:#0d1418; }
html.silk-dark .pdv-top{ background:rgba(13,20,24,.92); border-bottom-color:#283540; }
html.silk-dark .pdv-top-brand{ color:#e6edf2; }
html.silk-dark .pdv-top-burger{ background:#1a242b; border-color:#283540; color:#e6edf2; }