/* ==========================================================================
   Prévia da logo no brinde (01/10/2026). Carrega depois de /css/tm-site.css e /css/brindes.css (ou kits.css) e usa as
   variáveis deles: mesmas fontes, mesmas cores. Prefixo bl-.
   Peças: .bl-entrada (botão "Veja com a sua logo" e o painel, embaixo da foto), .bl-camada (a logo sobre a foto),
   o selo dos cartões (html.tem-logo) e .bl-orc (a logo da prévia na página do orçamento).
   ========================================================================== */

/* ---------- entrada: o botão "Veja com a sua logo" ---------- */
.bl-entrada{position:relative;display:grid;gap:8px}
.bl-chamada{display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:8px 10px 8px 10px;border-radius:20px;border:1px solid rgba(0,71,187,.16);background:linear-gradient(180deg,#fff 0%,#F8FAFF 100%);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:0 10px 28px rgba(0,30,96,.06);transition:border-color .2s,box-shadow .2s,transform .2s}
.bl-chamada:hover{border-color:rgba(0,71,187,.42);box-shadow:0 16px 38px rgba(0,71,187,.13);transform:translateY(-1px)}
.bl-chamada-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--soft-blue);color:var(--blue)}
.bl-chamada-txt{flex:1;min-width:0;display:grid;gap:1px;line-height:1.3}
.bl-chamada-txt b{font-family:var(--f-title);font-size:16px;font-weight:800;letter-spacing:-.02em}
.bl-chamada-txt small{font-size:13px;font-weight:600;color:var(--muted)}
.bl-chamada-acao{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--blue);color:#fff;font-size:13.5px;font-weight:900;white-space:nowrap;box-shadow:0 10px 24px rgba(0,71,187,.2)}
.bl-entrada.bl-carregando .bl-chamada{opacity:.6;pointer-events:none}
.bl-entrada.bl-soltar .bl-chamada{border-color:var(--blue);border-style:dashed;background:var(--soft-blue)}

.bl-status{font-size:13px;font-weight:700;color:var(--ok,#127A3A);min-height:0}
.bl-status:empty{display:none}
.bl-status.erro{color:var(--erro,#B42318)}

/* ---------- painel (com a logo aplicada) ---------- */
.bl-painel{display:grid;gap:12px;padding:14px;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 14px 36px rgba(0,30,96,.07)}
.bl-topo{display:flex;align-items:center;gap:12px}
.bl-mini{flex:none;width:48px;height:48px;border-radius:13px;border:1px solid var(--line);background:#F3F5F9 conic-gradient(#E9EDF4 25%,transparent 0 50%,#E9EDF4 0 75%,transparent 0) 0 0/12px 12px;display:grid;place-items:center;overflow:hidden;padding:5px}
.bl-mini canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bl-titulo{flex:1;min-width:0;display:grid;line-height:1.3}
.bl-titulo b{font-family:var(--f-title);font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.bl-titulo small{font-size:12.5px;font-weight:600;color:var(--muted)}
.bl-topo-acoes{flex:none;display:flex;gap:6px}
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--blue-dark);font:800 12.5px var(--f-text);cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.bl-btn:hover{background:var(--soft-blue);border-color:rgba(0,71,187,.3);color:var(--blue)}
.bl-btn svg{width:16px;height:16px;flex:none}
.bl-btn[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.bl-ajustes{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.bl-campo{display:grid;gap:0;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.bl-campo input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin:0;background:transparent;cursor:pointer}
.bl-campo input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:#E3E9F4}
.bl-campo input[type="range"]::-moz-range-track{height:5px;border-radius:999px;background:#E3E9F4}
.bl-campo input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8.5px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,30,96,.28)}
.bl-campo input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--blue);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,30,96,.28)}
.bl-campo input[type="range"]:focus-visible{outline:3px solid rgba(0,71,187,.4);outline-offset:2px;border-radius:999px}
.bl-opcoes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.bl-check{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-right:auto;padding-right:6px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer}
.bl-check input{width:18px;height:18px;accent-color:var(--blue);cursor:pointer}
.bl-cores{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bl-cores-rot{margin-right:6px;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.bl-cor{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:800 12.5px var(--f-text);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.bl-cor i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.bl-cor:hover{border-color:rgba(0,71,187,.35)}
.bl-cor[aria-checked="true"]{border-color:var(--blue);background:var(--soft-blue);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.bl-acoes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bl-acoes .btn{width:100%;padding-left:14px;padding-right:14px}
.bl-acoes .btn svg{width:17px;height:17px;flex:none}
.bl-acoes .btn[disabled]{opacity:.6;pointer-events:none}
.bl-aviso{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;font-weight:600;color:var(--body);padding:0 4px}
.bl-aviso::before{content:"i";flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--soft-blue);color:var(--blue);font:900 11px/16px var(--f-text);text-align:center}
.bl-ajuda{font-size:12px;color:var(--muted);font-weight:600}
/* controles na própria foto: aproximar e ver sem a logo */
.bl-flutua{position:absolute;right:12px;top:12px;z-index:4;display:grid;gap:8px}
.bl-redondo{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--blue-dark);cursor:pointer;box-shadow:0 8px 20px rgba(0,30,96,.12);transition:background .2s,color .2s,border-color .2s}
.bl-redondo:hover{background:var(--soft-blue);color:var(--blue);border-color:rgba(0,71,187,.3)}
.bl-redondo svg{width:19px;height:19px}
.bl-redondo[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.bl-painel-kit{margin-top:14px}
.bl-entrada-kit{margin-top:14px}
.bl-entrada-kit + .kit-galeria-nota,.bl-entrada-kit ~ .kit-galeria-nota{margin-top:10px}

/* ---------- a logo sobre a foto ---------- */
.bl-camada{position:absolute;inset:7%;z-index:2;pointer-events:none}
.kit-mosaico .km-t .bl-camada{inset:8%;z-index:0}
.bl-quadro{position:absolute;left:0;top:0;width:100%;height:100%}
.bl-logo{position:absolute;transform:translate(-50%,-50%) rotate(var(--bl-g,0deg));pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;outline:0;border-radius:3px}
.bl-logo::before{content:"";position:absolute;inset:-12px}
.bl-logo canvas{position:relative;display:block;width:100%;height:100%;pointer-events:none}
.bl-fixa .bl-logo{pointer-events:none;cursor:default}
.bl-fixa .bl-logo::before{display:none}
.bl-mexendo .bl-logo{cursor:grabbing}
.bl-area{position:absolute;transform:translate(-50%,-50%) rotate(var(--bl-g,0deg));border:1.5px dashed rgba(0,71,187,.5);border-radius:6px;background:rgba(238,245,255,.18);opacity:0;transition:opacity .2s}
.bl-mexendo .bl-area{opacity:1}
.bl-selecionada .bl-logo,.bl-logo:focus-visible{box-shadow:0 0 0 1px rgba(255,255,255,.95),0 0 0 2.5px var(--blue)}
.bl-alca{display:none;position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--blue);box-shadow:0 2px 8px rgba(0,30,96,.3);transform:scale(calc(1 / var(--bl-z,1)))}
.bl-alca::after{content:"";position:absolute;inset:-15px;border-radius:50%}
.bl-selecionada .bl-alca{display:block}
.bl-alca-nw{left:-7px;top:-7px;cursor:nwse-resize}
.bl-alca-ne{right:-7px;top:-7px;cursor:nesw-resize}
.bl-alca-se{right:-7px;bottom:-7px;cursor:nwse-resize}
.bl-alca-sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.bl-alca-giro{left:50%;top:-40px;width:26px;height:26px;margin-left:-13px;display:none;place-items:center;color:var(--blue);cursor:grab;transform-origin:50% 100%}
.bl-selecionada .bl-alca-giro{display:grid}
.bl-alca-giro svg{width:14px;height:14px}
.bl-alca-giro::after{inset:-9px}
.bp-foto-principal.bl-ativa #bp-foto,.bp-foto-principal .bl-camada{transform-origin:var(--bl-ox,50%) var(--bl-oy,50%);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s}
.bp-foto-principal.bl-zoom #bp-foto,.bp-foto-principal.bl-zoom .bl-camada{transform:translate(calc(50% - var(--bl-ox,50%)),calc(50% - var(--bl-oy,50%))) scale(var(--bl-z,1))}
.bl-solte{position:absolute;inset:12px;z-index:3;display:none;place-items:center;border:2px dashed var(--blue);border-radius:20px;background:rgba(238,245,255,.94);color:var(--blue);font:900 16px var(--f-text);pointer-events:none}
.bl-soltar > .bl-solte{display:grid}
.kit-mosaico.bl-soltar{outline:2px dashed var(--blue);outline-offset:4px}

/* ---------- selo nos cartões da vitrine (só quando há logo guardada; não desenha a logo no cartão) ---------- */
.bl-selo{display:none}
html.tem-logo .bl-selo{display:inline-flex;align-items:center;gap:5px;position:absolute;right:12px;top:12px;z-index:1;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(255,255,255,.95);color:var(--blue);font-size:11.5px;font-weight:900;letter-spacing:.01em;box-shadow:0 6px 16px rgba(0,30,96,.10),inset 0 0 0 1px rgba(0,71,187,.16)}
.bl-selo svg{width:13px;height:13px;flex:none}

/* ---------- orçamento: a logo da prévia e a etiqueta nos itens ---------- */
.bl-orc{display:flex;align-items:center;gap:12px;margin:12px 0;padding:12px;border-radius:16px;border:1px solid rgba(0,71,187,.16);background:linear-gradient(180deg,#fff 0%,#F8FAFF 100%)}
.bl-orc-txt{flex:1;min-width:0;display:grid;line-height:1.35}
.bl-orc-txt b{font-size:14.5px;font-weight:900;color:var(--ink)}
.bl-orc-txt small{font-size:12.5px;font-weight:600;color:var(--muted)}
.bl-orc .btn{flex:none;min-height:44px;padding:10px 16px;font-size:13.5px}
.bl-orc .btn[disabled]{opacity:.7;pointer-events:none}
.bo-logo-status{margin:10px auto 0;max-width:460px;padding:9px 14px;border-radius:12px;background:var(--soft,#F6F8FC);border:1px solid var(--line,#E7ECF5);font-size:14px;font-weight:700;color:var(--body,#48506A)}
.bo-logo-status.ok{background:var(--ok-bg,#E9FBEF);border-color:transparent;color:var(--ok,#127A3A)}
.bo-logo-status.erro{background:var(--alerta-bg,#FFF6E0);border-color:transparent;color:var(--alerta,#8A5A00)}
.bl-etiqueta{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--soft-blue);color:var(--blue);font-size:11.5px;font-weight:900;letter-spacing:0;text-transform:none;white-space:nowrap;vertical-align:middle}

/* ---------- a galeria deixa de ficar presa quando o painel não cabe na tela ---------- */
@media (max-height:980px){
  .bp-galeria:has(.bl-entrada.bl-aberta),.kit-galeria:has(.bl-entrada.bl-aberta){position:static}
}

@media (pointer:coarse){
  .bl-btn,.bl-cor{min-height:44px}
  .bl-check{min-height:44px}
  .bl-campo input[type="range"]{height:44px}
  .bl-alca{width:18px;height:18px}
  .bl-alca-nw{left:-9px;top:-9px}.bl-alca-ne{right:-9px;top:-9px}.bl-alca-se{right:-9px;bottom:-9px}.bl-alca-sw{left:-9px;bottom:-9px}
  .bl-alca-giro{width:30px;height:30px;margin-left:-15px;top:-46px}
  .bl-so-teclado{display:none}
  .bl-redondo{width:44px;height:44px}
}
@media (max-width:560px){
  .bl-chamada{gap:11px;padding:10px;border-radius:18px}
  .bl-chamada-txt b{font-size:15px}
  .bl-chamada-txt small{font-size:12.5px}
  .bl-chamada-acao{padding:0 13px;font-size:13px}
  .bl-painel{padding:12px;border-radius:18px}
  .bl-topo{flex-wrap:wrap}
  .bl-titulo{flex-basis:calc(100% - 60px)}
  .bl-topo-acoes{width:100%}
  .bl-topo-acoes .bl-btn{flex:1}
  .bl-ajustes{grid-template-columns:1fr;gap:0}
  .bl-flutua{right:8px;top:8px}
  .bl-acoes{grid-template-columns:1fr}
  .bl-orc{flex-wrap:wrap}
  .bl-orc .btn{width:100%}
  html.tem-logo .bl-selo{right:8px;top:auto;bottom:8px;padding:4px 8px 4px 6px;font-size:10.5px}
}
@media (max-width:380px){
  .bl-chamada-txt small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bl-chamada,.bl-btn,.bl-area,.bp-foto-principal.bl-ativa #bp-foto,.bp-foto-principal .bl-camada{transition:none}
}
@media print{
  .bl-entrada,.bl-orc{display:none}
}

/* Passada final de UI/UX (01/10/2026): os mesmos 44 px de toque também pela largura da tela (há celular e navegador
   que não se declaram "pointer:coarse"). */
@media (max-width:640px){
  .bl-btn,.bl-cor,.bl-check{min-height:44px}
  .bl-campo input[type="range"]{height:44px}
  .bl-redondo{width:44px;height:44px}
}