/* Mobiliar no mapa (public/mobiliar-mapa.js, só admin): barra de vidro em cima do móvel (some enquanto ele é arrastado)
   e o aviso. Usa os tokens de estilo.css. */
.mob { position: absolute; inset: 0; pointer-events: none; z-index: 3;
  --mob-vidro: color-mix(in srgb, var(--painel) 66%, transparent);
  --mob-borda: color-mix(in srgb, #FFFFFF 60%, transparent);
  --mob-sombra: 0 10px 30px rgba(31, 27, 45, .16), 0 1px 2px rgba(31, 27, 45, .08); }
@media (prefers-color-scheme: dark) {
  .mob { --mob-vidro: color-mix(in srgb, var(--painel) 72%, transparent); --mob-borda: color-mix(in srgb, #FFFFFF 12%, transparent); --mob-sombra: 0 10px 30px rgba(0, 0, 0, .4); }
}
.mob > * { pointer-events: auto; }
.mob [hidden] { display: none !important; }
.mob button { font: 600 13px/1 var(--corpo); color: var(--tinta); cursor: pointer; }
.mob button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mob svg { width: 17px; height: 17px; flex: none; }

/* vidro: o mapa aparece borrado atrás */
.mob-barra, .mob-aviso {
  background: var(--mob-vidro); border: 1px solid var(--mob-borda); box-shadow: var(--mob-sombra);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }

/* barra em cima do móvel; o JS põe o translate a cada quadro */
.mob-barra { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 16px; white-space: nowrap; will-change: transform; }
.mob-barra.mob-entra { animation: mob-entra .16s ease-out; }
@keyframes mob-entra { from { opacity: 0; scale: .94; } }
.mob-nome { display: flex; flex-direction: column; gap: 3px; padding: 0 10px 0 8px; margin-right: 4px; border-right: 1px solid color-mix(in srgb, var(--linha) 80%, transparent); }
.mob-nome strong { font: 600 13px/1.1 var(--corpo); }
.mob-nome small { font: 500 11px/1.35 var(--corpo); color: var(--suave); }
.mob-barra button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 0; border-radius: 11px; background: transparent; transition: background .12s; }
.mob button:hover:not(:disabled, .cat button) { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.mob button:disabled { opacity: .5; cursor: default; }
.mob-barra .mob-so-icone { width: 34px; padding: 0; justify-content: center; color: var(--suave); }
.mob .mob-perigo { color: var(--ruim); }
.mob .mob-perigo:hover:not(:disabled) { background: color-mix(in srgb, var(--ruim) 12%, transparent); }
.mob-erro { position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 0; margin: 0; padding: 6px 10px; border-radius: 10px; background: var(--tinta); color: var(--painel); font: 500 12px/1.2 var(--corpo); white-space: nowrap; pointer-events: none; }

/* parede: os tipos lado a lado, cada um com a amostra do material; o atual fica marcado */
.mob-seg { display: inline-flex; gap: 2px; }
.mob .mob-seg [aria-checked="true"] { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acento) 50%, transparent); }
.mob-amostra { width: 13px; height: 18px; flex: none; border-radius: 3px; border: 1.5px solid #1D1D24; }
.mob-amostra-parede { background: #F4EBE1; }
.mob-amostra-vidro { background: linear-gradient(135deg, rgba(46, 139, 255, .22) 0 42%, rgba(255, 255, 255, .95) 42% 56%, rgba(46, 139, 255, .22) 56%); }
.mob-amostra-fosco { background: radial-gradient(rgba(29, 29, 36, .14) .7px, transparent .9px) 0 0 / 3px 3px, #E9EFF6; }

/* Trocar: a barra do móvel cresce com os tipos que podem ir no lugar, em cartões com a foto */
.mob-barra.mob-trocando { flex-wrap: wrap; width: min(392px, calc(100% - 16px)); white-space: normal; }
.mob-trocando .mob-nome { flex: 1; border-right: 0; }
.mob-tipos { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 4px; max-height: 248px; overflow-y: auto; padding: 4px 0 0; }
.mob .mob-tipo { display: flex; flex-direction: column; align-items: center; gap: 3px; height: auto; padding: 6px 4px 7px; border-radius: 12px; text-align: center; }
.mob-tipo img { width: 72px; height: 54px; object-fit: contain; }
.mob-tipo em { font: 600 11.5px/1.2 var(--corpo); font-style: normal; }
.mob-tipo small { font: 500 10.5px/1.2 var(--corpo); color: var(--suave); }
/* Cor: as cores do tampo da mesa em bolinhas com o nome; a de agora fica marcada */
.mob-cores { flex-basis: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 4px 0 0; }
.mob .mob-cor { display: flex; flex-direction: column; align-items: center; gap: 4px; height: auto; padding: 7px 2px 6px; border-radius: 12px; }
.mob-cor i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(29, 29, 36, .18), 0 1px 2px rgba(31, 27, 45, .12); }
.mob-cor em { font: 600 11px/1.15 var(--corpo); font-style: normal; text-align: center; }
.mob .mob-cor[aria-checked="true"] { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acento) 50%, transparent); }
.mob-cor[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--painel), 0 0 0 3.5px var(--acento); }
.mob-vazio { grid-column: 1 / -1; margin: 6px 8px; font: 500 12px/1.3 var(--corpo); color: var(--suave); }

.mob-aviso { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 8px 8px 8px 14px; border-radius: 14px; font: 500 13px/1.3 var(--corpo); color: var(--tinta); }
.mob-aviso:not(:has(button)) { padding-right: 14px; }
.mob-aviso.mob-aviso-erro { color: var(--ruim); }
.mob-aviso button { height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--acento); color: var(--no-acento); }

.mapa.mob-ligado.mob-sobre { cursor: pointer; }
/* em cima de um móvel, a mão aberta: segurar e arrastar move (o clique escolhe) */
.mapa.mob-ligado.mob-pega { cursor: grab; }
.mapa.mob-arrastando, .mapa.mob-arrastando * { cursor: grabbing; }
/* arrastando, a barra sai da frente da peça (volta ao soltar, já no lugar novo) */
.mapa.mob-arrastando .mob-barra { display: none; }

@media (max-width: 640px) {
  .mob-aviso { bottom: 58px; }
  .mob-modo small { display: none; }
  .mob-barra button span, .mob-nome small { display: none; }
  .mob-barra button { padding: 0 9px; }
}
.mob-modo { background: var(--mob-vidro); border: 1px solid var(--mob-borda); box-shadow: var(--mob-sombra);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
/* Vários: o aviso no alto do mapa com Sair (o botão fica no alto do painel) */
.mob-modo span { display: flex; flex-direction: column; gap: 2px; }
.mob-modo strong { font: 600 13px/1.2 var(--corpo); }
.mob-modo small { font: 500 11.5px/1.3 var(--corpo); color: var(--suave); }
.mob-modo > svg { color: var(--acento); }
.mob-modo { position: absolute; left: 50%; top: 14px; translate: -50% 0; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 7px 7px 7px 12px; border-radius: 14px; white-space: nowrap; }
.mob .mob-modo button { height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--acento); color: var(--no-acento); }
/* a caixa que o arrasto desenha */
.mob .mob-caixa { position: absolute; pointer-events: none; border: 1.5px solid var(--acento); border-radius: 4px; background: color-mix(in srgb, var(--acento) 12%, transparent); }
.mapa.mob-selecionando { cursor: crosshair; }
.mob-arrastada { position: fixed; left: 0; top: 0; z-index: 50; width: 84px; height: 63px; margin: -40px 0 0 -42px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(31, 27, 45, .28)); transition: opacity .12s; }
.mob-arrastada.mob-fora { opacity: .45; }
/* recém-aberta, a barra deixa o ponteiro passar: o segundo dos dois cliques na peça duplica, não aperta um botão dela */
.mob-barra.mob-recem { pointer-events: none; }

/* o botão Mobiliar do topo (o estilo é o .esc-admin de admin.css): ligado, fica marcado */
.esc-admin#abrir-mobiliar[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--no-acento); }
.esc-admin#abrir-mobiliar[aria-pressed="true"] svg { color: var(--no-acento); }

/* o painel do modo Mobiliar, ao lado do mapa (no .esc-corpo, fora do #mapa): o mapa encolhe e a planta se reenquadra na
   parte livre. No alto, Vários e Sair; as abas Catálogo e Escolhido; só a lista de cada aba rola */
.esc-corpo { --mob-lado-larg: 384px; }
.esc-corpo.mob-aberto > .mapa { margin-right: var(--mob-lado-larg); }
.mob-lado { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; box-sizing: border-box; width: var(--mob-lado-larg); display: flex; flex-direction: column; gap: 10px;
  padding: 12px 12px 10px; background: var(--painel); border-left: 1px solid var(--linha); color: var(--tinta); font: 500 13px/1.35 var(--corpo); transition: opacity .15s; }
.mob-lado[hidden] { display: none; }
.mob-lado button { font: 600 13px/1 var(--corpo); color: var(--tinta); cursor: pointer; }
.mob-lado :is(button, select, input):focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mob-lado svg { width: 17px; height: 17px; flex: none; }
.mob-lado-topo { flex: none; display: flex; align-items: center; gap: 4px; }
.mob-lado .mob-nome { flex: 1; min-width: 0; margin: 0; padding: 0 2px; border: 0; }
.mob-lado .mob-nome strong { font: 700 16px/1.15 var(--titulo); }
.mob-lado .mob-so-icone { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--suave); }
.mob-lado .mob-so-icone:hover { background: color-mix(in srgb, var(--acento) 12%, transparent); color: var(--tinta); }
.mob-lado .mob-varios { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; flex: none; border: 0; border-radius: 10px; color: var(--acento); background: color-mix(in srgb, var(--acento) 9%, transparent); }
.mob-lado .mob-varios[aria-pressed="true"] { background: var(--acento); color: var(--no-acento); }
.mob-abas { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--tinta) 6%, var(--painel)); }
.mob-abas button { height: 32px; min-width: 0; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-abas button span { overflow: hidden; text-overflow: ellipsis; }
.mob-abas button[aria-selected="true"] { background: var(--painel); color: var(--tinta); box-shadow: 0 1px 3px rgba(31, 27, 45, .14); }
.mob-abas button:disabled { opacity: .45; cursor: default; }
.mob-catalogo.cat { flex: 1 1 auto; min-height: 0; --cat-col: 150px; }
.mob-catalogo .cat-movel { touch-action: none; }
.mob-catalogo[hidden], .mob-props[hidden] { display: none; }
.mob-dica { flex: none; margin: 0 2px; font: 500 11.5px/1.35 var(--corpo); color: var(--suave); }

/* aba Escolhido: a peça com a foto, as ações e os blocos de cores, cadeiras da mesa e estação de trabalho */
.mob-props { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 8px; overscroll-behavior: contain; }
.mob-props-topo { display: flex; align-items: center; gap: 10px; }
.mob-props-topo img { width: 72px; height: 54px; flex: none; object-fit: contain; border-radius: 10px; background: color-mix(in srgb, var(--tinta) 4%, var(--painel)); }
.mob-props-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mob-props-acoes button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid var(--linha); border-radius: 10px; background: var(--painel); }
.mob-props-acoes button:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--linha)); background: color-mix(in srgb, var(--acento) 7%, var(--painel)); }
.mob-props-acoes svg { color: var(--acento); }
.mob-lado .mob-perigo, .mob-lado .mob-perigo svg { color: var(--ruim); }
.mob-bloco { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linha); }
.mob-bloco h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font: 600 11px/1.2 var(--corpo); letter-spacing: .05em; text-transform: uppercase; color: var(--suave); }
.mob-bloco h4 small { font: 500 12px/1.2 var(--corpo); letter-spacing: 0; text-transform: none; }
.mob-pcores { display: grid; gap: 5px; }
.mob-pcores small { font-size: 12px; color: var(--suave); }
.mob-pcores [role="radiogroup"] { display: flex; flex-wrap: wrap; gap: 2px; }
.mob-pcores button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; }
.mob-pcores button:hover { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.mob-pcores i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(29, 29, 36, .18); }
.mob-pcores button[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--painel), 0 0 0 3.5px var(--acento); }
.mob-nota { margin: 0; font: 500 12px/1.4 var(--corpo); color: var(--suave); }
.mob-nota-aviso { color: var(--alerta); }
.mob-campo { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mob-campo select { flex: 1; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 9px; background: var(--painel); color: var(--tinta); font: 500 13px/1 var(--corpo); }
/* as cadeiras: o tampo no meio e um botão em cada lado que tem lugares (frente embaixo); ligado, sólido */
.mob-mesa-lados { display: grid; grid-template: ". fundo ." 28px "esq tampo dir" auto ". frente ." 28px / 28px auto 28px; gap: 5px; justify-content: center; padding: 2px 0; }
.mob-mesa-tampo { grid-area: tampo; display: grid; place-items: end center; width: var(--w); height: var(--h); padding-bottom: 3px; box-sizing: border-box; border-radius: 6px;
  background: #EADCC8; box-shadow: inset 0 0 0 1px rgba(29, 29, 36, .15); color: rgba(29, 29, 36, .5); font: 600 10px/1 var(--corpo); text-transform: uppercase; letter-spacing: .06em; }
.mob-lado .mob-mesa-lado { display: flex; align-items: center; justify-content: space-evenly; padding: 0; border: 1.5px dashed color-mix(in srgb, var(--suave) 45%, transparent); border-radius: 8px; background: var(--painel); }
.mob-mesa-fundo { grid-area: fundo; } .mob-mesa-frente { grid-area: frente; }
.mob-mesa-esq { grid-area: esq; flex-direction: column; } .mob-mesa-dir { grid-area: dir; flex-direction: column; }
.mob-mesa-lado i { width: 12px; height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--suave) 30%, transparent); }
.mob-lado .mob-mesa-lado:hover { border-color: var(--acento); }
.mob-lado .mob-mesa-lado[aria-pressed="true"] { border-style: solid; border-color: var(--acento); background: var(--acento-suave); }
.mob-mesa-lado[aria-pressed="true"] i { background: var(--acento); }
.mob-lado .mob-mesa-lado[aria-pressed="mixed"] { border-color: var(--acento); }
.mob-mesa-lado[aria-pressed="mixed"] i { background: color-mix(in srgb, var(--acento) 45%, transparent); }
/* a etiqueta de estação */
.mob-estacao-liga { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; }
.mob-estacao-liga input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--acento); }
.mob-estacao-liga span { display: grid; gap: 2px; }
.mob-estacao-liga strong { font-size: 13px; }
.mob-estacao-liga small { font-size: 12px; line-height: 1.35; color: var(--suave); }
.mob-estacao-liga:has(input:disabled) { opacity: .6; cursor: default; }

/* janela estreita: o painel mais fino; celular: o painel vira uma folha embaixo do mapa */
@media (max-width: 900px) { .esc-corpo { --mob-lado-larg: 320px; } .mob-catalogo.cat { --cat-col: 130px; } }
@media (max-width: 640px) {
  .esc-corpo.mob-aberto > .mapa { margin-right: 0; flex: 0 0 45%; }
  .mob-lado { top: auto; left: 0; width: auto; height: 55%; border-left: 0; border-top: 1px solid var(--linha); border-radius: 16px 16px 0 0; }
  .mob-lado .mob-nome small, .mob-dica { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mob-barra.mob-entra { animation: none; }
  .mob-lado { transition: none; }
}
.mob-paleta { flex-basis: 100%; padding: 6px 4px 0; color: var(--suave, #6E6A88); font: 600 11px/1.2 var(--corpo); }