/* ==========================================================================
   Popup das tabelas de medidas e de cores (02/10/2026; o site inteiro desde 06/10/2026). Carregar DEPOIS do /css/tm-site.css:
     <link rel="stylesheet" href="/css/tabelas-popup.css?v=20261006">
   Onde vale: toda página com link de tabela de medidas ou de cartela de cores (páginas de peça, página
   /tabelas-de-medidas-e-cores, terceirão, simulador, páginas de datas…). O comportamento é o /js/tabelas-popup.js.
   Fontes, cores e raio vêm das variáveis do tm-site.css; nada de paleta nova.
   ========================================================================== */

/* ---------- os gatilhos na página da peça ---------- */
.tb-gatilhos{display:flex;flex-wrap:wrap;gap:8px}
.pd-spec dd a.tb-gatilho,.tb-gatilho{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid rgba(0,71,187,.18);background:#fff;color:var(--blue);font:800 14px var(--f-text);transition:background .2s,border-color .2s}
.tb-gatilho:hover{background:var(--soft-blue);border-color:rgba(0,71,187,.34)}
.tb-gatilho svg{width:17px;height:17px;flex:none}
.pd-nota.tb-perto{margin-top:6px}
.tb-perto a{color:var(--blue);font-weight:800;white-space:nowrap}
.tb-perto a:hover{text-decoration:underline}
a[data-tb-abre][aria-busy="true"]{cursor:progress;opacity:.7}

/* ---------- a janela ---------- */
.tbp{border:0;padding:0;margin:auto;width:min(1040px,calc(100% - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:var(--radius);background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 40px 120px rgba(2,6,23,.45)}
.tbp::backdrop{background:rgba(2,4,10,.66);backdrop-filter:blur(4px)}
.tbp[open]{display:flex}
.tbp-caixa{display:flex;flex-direction:column;gap:12px;width:100%;min-height:0;padding:18px 20px 16px}
.tbp-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.tbp-topo h2{font-family:var(--f-title);font-size:clamp(21px,2.6vw,26px);line-height:1.12;letter-spacing:-.04em;color:var(--ink)}
.tbp-tipo{display:block;margin-bottom:5px;font:900 12px var(--f-text);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.tbp-fechar{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#344054;font:800 14px var(--f-text);cursor:pointer;transition:background .2s}
.tbp-fechar:hover{background:var(--bg)}
.tbp-escolha{display:flex;align-items:center;gap:10px;font:800 14px var(--f-text);color:#344054}
.tbp-escolha select{flex:0 1 320px;min-width:0;min-height:40px;padding:8px 36px 8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:800 15px var(--f-text);cursor:pointer}
.tbp-escolha select:hover{border-color:rgba(0,71,187,.4)}
.tbp-tipos,.tbp-abas{display:flex;flex-wrap:wrap;gap:8px}
.tbp-tipos button,.tbp-abas button{min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#475467;font:800 14px var(--f-text);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tbp-tipos button:hover,.tbp-abas button:hover{border-color:rgba(0,71,187,.4);color:var(--blue)}
.tbp-tipos button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.tbp-abas button[aria-selected="true"]{background:var(--soft-blue);border-color:rgba(0,71,187,.34);color:var(--blue)}
.tbp-nota{font-size:15px;line-height:1.5;color:#344054}
.tbp-palco{flex:1 1 auto;min-height:120px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:#fff}
.tbp-palco img{display:block;width:100%;max-width:none;height:auto;background:var(--bg);-webkit-user-select:none;user-select:none}
.tbp-palco.amplia img{cursor:zoom-in}
.tbp-palco.ampliado img{cursor:grab}
.tbp-palco.arrastando img{cursor:grabbing}
.tbp-palco.so-texto{flex:0 0 auto;min-height:0;background:var(--soft-blue);border-color:rgba(0,71,187,.18)}
.tbp-texto{padding:22px 20px;font-size:17px;line-height:1.5;font-weight:700;color:var(--ink)}
.tbp-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.tbp-zoom{min-height:40px;padding:8px 18px;border-radius:999px;border:0;background:var(--blue);color:#fff;font:800 14px var(--f-text);cursor:pointer;transition:background .2s}
.tbp-zoom:hover{background:var(--blue-2)}
.tbp-acoes a,.tbp-todas{color:var(--blue);font-weight:800;font-size:14.5px}
.tbp-acoes a::after{content:" ↗"}
.tbp-acoes a:hover,.tbp-todas:hover{text-decoration:underline}
.tbp-pe{display:flex;justify-content:flex-end;padding-top:10px;border-top:1px solid var(--line)}
.tbp-todas{font-size:14px;color:var(--muted)}
.tbp-todas::after{content:" →"}

@media(max-width:640px){
  .pd-spec dd a.tb-gatilho,.tb-gatilho{gap:6px;padding:8px 12px} /* os dois botões lado a lado em 390 px */
  .tbp{width:calc(100% - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:18px}
  .tbp-caixa{gap:10px;padding:14px 14px 12px}
  .tbp-fechar{padding:8px 12px}
  .tbp-escolha select{flex:1 1 auto}
  .tbp-tipos button,.tbp-abas button{padding:8px 14px}
  .tbp-acoes a,.tbp-todas{font-size:15px}
  .tbp-pe{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.tb-gatilho,.tbp-fechar,.tbp-zoom,.tbp-tipos button,.tbp-abas button{transition:none}}