/* Simulador "Veja no seu ambiente" (simulador.html, 2026-10-15). */

.sim-topo { padding: clamp(28px, 5vw, 56px) 0 18px; }
.sim-topo h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); color: var(--navy); margin-bottom: 10px; }
.sim-topo p { max-width: 62ch; color: #4a5266; line-height: 1.6; }
.sim-privado { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 0.86rem; color: #2f6b3a; }
.sim-privado svg { width: 18px; height: 18px; flex-shrink: 0; }
.sim-ia { display: block; max-width: 62ch; margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: var(--navy); color: #E2E5EE;
  font-size: 0.92rem; line-height: 1.5; }
.sim-ia b { color: #FFFFFF; }
.sim-ia a { color: var(--yellow); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sim-ia[hidden] { display: none; }

.sim-inicio { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-bottom: 28px; }
.sim-inicio .btn { cursor: pointer; }
.sim-arquivo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sim-link { background: none; border: 0; padding: 8px 2px; color: var(--navy); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sim-link:hover { color: #000; }
.sim-erro { color: #a3281b; font-weight: 600; margin: 0 0 18px; }

.sim-area { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 28px; align-items: start;
  padding-bottom: 56px; scroll-margin-top: 90px; }

/* a foto e as marcas: a moldura dá folga para os pontos saírem um pouco da foto */
.sim-moldura { position: relative; padding: var(--folga, 40px); background: #1b1f2a; border-radius: 6px;
  position: sticky; top: 84px; }
.sim-moldura canvas { display: block; width: 100%; height: auto; border-radius: 2px; }
.sim-marcas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.sim-poli { fill: rgba(255, 196, 14, 0.06); stroke: #FFC40E; stroke-width: 2; stroke-dasharray: 7 5; }
.sim-segue { stroke: #FFC40E; stroke-width: 1.5; stroke-dasharray: 3 6; opacity: 0.75; }
.sim-ponto { fill: rgba(27, 31, 42, 0.55); stroke: #FFC40E; stroke-width: 3; cursor: grab; touch-action: none; }
.sim-ponto:hover { fill: rgba(255, 196, 14, 0.35); }
.sim-ponto-miolo { fill: #FFC40E; pointer-events: none; }
.sim-cursor { fill: rgba(255, 255, 255, 0.18); stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.modo-pincel .sim-marcas { touch-action: none; cursor: crosshair; }
.sim-antes { position: absolute; left: calc(var(--folga, 40px) + 10px); bottom: calc(var(--folga, 40px) + 10px);
  padding: 8px 12px; border: 0; border-radius: 4px; background: rgba(10, 12, 20, 0.72); color: #fff;
  font: 700 0.78rem/1 var(--font-display); letter-spacing: 0.04em; cursor: pointer; user-select: none;
  -webkit-user-select: none; touch-action: none; }
.sim-antes:active { background: #FFC40E; color: #1b1f2a; }
.sim-trocar { position: absolute; right: calc(var(--folga, 40px) + 10px); bottom: calc(var(--folga, 40px) + 10px);
  padding: 8px 12px; border: 0; border-radius: 4px; background: rgba(10, 12, 20, 0.72); color: #fff;
  font: 700 0.78rem/1 var(--font-display); cursor: pointer; }

/* o painel ao lado */
.sim-painel { display: flex; flex-direction: column; gap: 18px; }
.sim-bloco h2 { font-size: 1rem; color: var(--navy); margin-bottom: 8px; }
.sim-bloco h2 span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 0.74rem; }
.sim-sups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sim-sups button, .sim-modos button, .sim-chip { padding: 10px 8px; border: 1.5px solid #d5d8df; border-radius: 4px; background: #fff;
  color: var(--navy); font: 700 0.88rem/1.1 var(--font-display); cursor: pointer; }
.sim-sups button[aria-pressed="true"], .sim-modos button[aria-pressed="true"], .sim-chip[aria-pressed="true"] {
  border-color: var(--navy); background: var(--navy); color: #fff; }
.sim-dica { margin-top: 8px; font-size: 0.86rem; line-height: 1.5; color: #4a5266; }
.sim-modos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sim-modos button { padding: 8px 10px; font-size: 0.8rem; }
.sim-pincel-opcoes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 0.84rem; color: #4a5266; }
.sim-pincel-opcoes[hidden], .sim-area[hidden] { display: none; }
.sim-pincel-opcoes button { padding: 6px 10px; border: 1px solid #d5d8df; border-radius: 4px; background: #fff; color: var(--navy);
  font: 600 0.8rem/1 var(--font-display); cursor: pointer; }
.sim-pincel-opcoes button:disabled { opacity: 0.45; cursor: default; }
.sim-check { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 0.86rem; color: #2b3245; }

.sim-grupos { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.sim-chip { flex-shrink: 0; padding: 7px 10px; font-size: 0.78rem; }
.sim-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 360px; overflow-y: auto;
  margin-top: 8px; padding: 2px; }
.sim-item { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1.5px solid #e1e3e8; border-radius: 5px;
  background: #fff; text-align: left; font: 600 0.76rem/1.25 var(--font-display); color: var(--navy); cursor: pointer; }
.sim-item small { display: block; font-weight: 500; color: #6b7285; margin-top: 2px; }
.sim-item-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: #eceae4; }
.sim-item-img img { width: 100%; height: 100%; object-fit: cover; }
.sim-item[aria-pressed="true"] { border-color: #FFC40E; box-shadow: 0 0 0 2px #FFC40E; }

.sim-ajustes { display: grid; gap: 10px; }
.sim-ajustes label { display: grid; gap: 4px; font-size: 0.84rem; color: #2b3245; }
.sim-ajustes input[type="range"] { width: 100%; accent-color: #28324B; }
.sim-ajustes .sim-link { justify-self: start; }

.sim-escolhidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.88rem; color: #2b3245; }
.sim-escolhidos a { color: var(--navy); font-weight: 700; margin-left: 4px; }
.sim-tirar { margin-left: 6px; background: none; border: 0; color: #a3281b; font: 600 0.78rem var(--font-display); cursor: pointer;
  text-decoration: underline; }
.sim-final { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sim-final .btn { flex: 1 1 180px; text-align: center; justify-content: center; }
.sim-final .btn:disabled, .sim-final .is-off { opacity: 0.45; pointer-events: none; }
.sim-nota { font-size: 0.8rem; color: #6b7285; line-height: 1.5; }

@media (max-width: 900px) {
  .sim-antes, .sim-trocar { padding: 6px 9px; font-size: 0.68rem; }
  .sim-area { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .sim-moldura { position: relative; top: 0; }
  .sim-lista { max-height: 300px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* "Minha casa" (16/10/2026): faixa com um cartão por cômodo, em cima da foto e do painel */
.sim-casa { grid-column: 1 / -1; display: grid; gap: 10px; }
.sim-casa-topo { display: flex; align-items: baseline; gap: 12px; }
.sim-casa-topo h2 { font-size: 1.05rem; color: var(--navy); margin: 0; }
.sim-casa-conta { font-size: 0.86rem; color: #6b7285; }
.sim-comodos { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.sim-comodo { flex: 0 0 156px; scroll-snap-align: start; }
.sim-comodo > button { display: flex; flex-direction: column; width: 100%; padding: 0; border: 2px solid #e1e3e8; border-radius: 8px;
  background: #fff; overflow: hidden; cursor: pointer; text-align: left; color: var(--navy); }
.sim-comodo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #1b1f2a; }
.sim-comodo-nome { padding: 7px 9px 0; font: 700 0.84rem/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-comodo-conta { padding: 2px 9px 8px; font-size: 0.74rem; color: #6b7285; }
.sim-comodo[aria-current="true"] > button { border-color: #FFC40E; box-shadow: 0 0 0 2px #FFC40E; }
.sim-comodo-mais { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 152px;
  border: 2px dashed #b9bdc8; border-radius: 8px; color: var(--navy); font: 700 0.84rem/1.25 var(--font-display); text-align: center;
  padding: 10px; cursor: pointer; background: #fafaf8; }
.sim-comodo-mais span { font-size: 1.8rem; line-height: 1; color: #9aa0ad; }
.sim-comodo-mais:hover { border-color: var(--navy); }

.sim-bloco-nome label { display: block; font: 700 0.84rem var(--font-display); color: var(--navy); margin-bottom: 6px; }
.sim-nome-linha { display: flex; gap: 10px; align-items: center; }
.sim-nome-linha input { flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid #d5d8df; border-radius: 4px;
  font: 600 0.95rem var(--font-text); color: var(--navy); }
.sim-nome-linha .sim-link { color: #a3281b; font-size: 0.84rem; }

.sim-casa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.86rem; color: #2b3245; }
.sim-casa-lista li { padding: 8px 10px; border: 1px solid #e1e3e8; border-radius: 6px; background: #fff; }
.sim-casa-lista b { display: block; color: var(--navy); margin-bottom: 2px; }
.sim-casa-lista span { display: block; }
.sim-casa-lista .sim-falta { color: #8a8f9c; }
.sim-casa-lista .sim-link { padding: 4px 0 0; font-size: 0.82rem; }

@media (max-width: 900px) {
  .sim-comodo { flex-basis: 128px; }
  .sim-comodo-mais { min-height: 128px; }
}