@font-face { font-family: "Instrument Serif"; src: url("../vendor/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../vendor/fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url("../vendor/fonts/IBMPlexSansCondensed-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../vendor/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #f1ebdd; --paper-2: #f7f3ea; --line: rgba(29, 27, 24, 0.14);
  --ink: #1d1b18; --ink-soft: rgba(29, 27, 24, 0.64); --accent: #9a3b22;
  --erro: #a3241a; --alerta: #b5651d; --aviso: #6b6a3a;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "IBM Plex Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.4 var(--sans); display: flex; flex-direction: column; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.marca { display: flex; align-items: baseline; gap: 8px; }
.marca .voltar { color: var(--ink-soft); text-decoration: none; font: 400 20px/1 var(--serif); }
.marca strong { font: 400 22px/1 var(--serif); }
.marca .sep { color: var(--ink-soft); }
.marca .cp { font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-left: 6px; }
.ferramentas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ferramentas button, .acoes button, .controles-3d button {
  padding: 6px 10px; background: var(--paper-2); border: 1px solid var(--line); font: 400 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
.ferramentas button:hover, .acoes button:hover, .controles-3d button:hover { border-color: var(--ink); }
button:disabled { opacity: .4; cursor: default; }
.divisor { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.status { font: 400 11px/1 var(--mono); color: var(--ink-soft); margin-left: 8px; }

.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 290px; }
.painel { overflow-y: auto; padding: 4px 16px 24px; background: var(--paper-2); }
.painel.esquerdo { border-right: 1px solid var(--line); }
.painel.direito { border-left: 1px solid var(--line); }
.painel section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.painel h2 { margin: 0 0 10px; font: 500 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.selecionado h2 { font: 400 22px/1.1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }

.campo { display: grid; gap: 3px; margin-bottom: 8px; }
.campo > span:first-child { font-size: 12px; color: var(--ink-soft); }
.entrada { display: flex; align-items: center; border: 1px solid var(--line); background: #fff; }
.entrada input { flex: 1; min-width: 0; border: 0; padding: 6px 8px; font: 400 13px/1.2 var(--mono); background: transparent; }
.entrada em { font: normal 400 11px/1 var(--mono); color: var(--ink-soft); padding: 0 8px; }
select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); background: #fff; font: 400 13px/1.2 var(--sans); }
input[type="color"] { width: 100%; height: 30px; padding: 2px; border: 1px solid var(--line); background: #fff; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

.amostras { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.amostra { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--cor); padding: 0; }
.amostra.ativa { outline: 2px solid var(--ink); outline-offset: 2px; }
.amostras input[type="color"] { width: 34px; height: 26px; }

.acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
button.perigo { color: var(--erro); }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lista .resumo, .lista.compacta button { width: 100%; text-align: left; padding: 7px 8px; background: #fff; border: 1px solid var(--line); }
.lista li.aberto .resumo { border-color: var(--ink); }
.lista .editor { padding: 10px 8px 4px; border: 1px solid var(--line); border-top: 0; background: #fff; }
.lista.compacta button.ativo { border-color: var(--accent); color: var(--accent); }
.vazio { color: var(--ink-soft); font-size: 13px; }
.categoria { margin-bottom: 10px; }
.categoria > span { display: block; font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.botoes { display: flex; flex-wrap: wrap; gap: 4px; }
.botoes button { padding: 5px 8px; background: #fff; border: 1px solid var(--line); font-size: 12px; }
.botoes button:hover { border-color: var(--ink); }

.centro { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.abas { display: flex; align-items: center; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); }
.abas button { padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; background: none; font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.abas button.ativo { background: var(--paper); border-color: var(--line); color: var(--ink); margin-bottom: -1px; }
.abas .dica { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--ink-soft); }
.vistas { position: relative; flex: 1; min-height: 0; }
.vista-planta, .vista-3d { position: absolute; inset: 0; }
.vista-planta { display: grid; place-items: center; padding: 12px; touch-action: none; }
.vista-planta svg { width: 100%; height: 100%; }
.vista-3d canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.controles-3d { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px; background: rgba(247, 243, 234, .9); border: 1px solid var(--line); }
.corte { font: 400 11px/1 var(--mono); text-transform: uppercase; display: flex; align-items: center; gap: 6px; margin-left: 6px; }

/* Planta SVG */
.planta .piso { fill: #fbf8f1; }
.planta .grade line { stroke: rgba(29, 27, 24, .07); stroke-width: .006; }
.planta .poche { fill: var(--ink); }
.planta .peitoril { fill: #fbf8f1; stroke: var(--ink); stroke-width: .012; }
.planta .simbolo { fill: none; stroke: var(--ink); stroke-width: .012; }
.planta .simbolo.tracejada { stroke-dasharray: .12 .08; }
.planta .movel { cursor: grab; }
.planta .movel .parte { fill: color-mix(in srgb, var(--cor) 22%, #fbf8f1); stroke: var(--ink); stroke-width: .014; }
.planta .movel .parte.detalhe { stroke-width: .008; }
.planta .movel.tapete .parte { fill: color-mix(in srgb, var(--cor) 30%, #fbf8f1); stroke-dasharray: .06 .04; stroke-width: .01; }
.planta .movel.parede .parte { fill: var(--ink); }
.planta .movel:hover .parte { stroke: var(--accent); }
.planta .movel.selecionado .parte { stroke: var(--accent); stroke-width: .022; }
.planta .movel.com-alerta .parte { stroke: var(--erro); }
.planta .caixa { fill: none; stroke: var(--accent); stroke-width: .012; stroke-dasharray: .05 .04; pointer-events: none; }
.planta .rotulo { font: 500 .2px var(--sans); letter-spacing: .02px; fill: var(--ink); }
.planta .rotulo-area { font: 400 .14px var(--mono); fill: var(--ink-soft); }
.planta .cota line { stroke: var(--ink); stroke-width: .008; }
.planta .cota line.ext { stroke: rgba(29, 27, 24, .45); stroke-width: .005; }
.planta .cota line.tick { stroke-width: .016; }
.planta .cota text { font: 400 .15px var(--mono); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }
.planta .cota.cadeia text { font-size: .12px; fill: var(--ink-soft); }

.metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.metricas dt { font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.metricas dd { margin: 4px 0 0; font: 400 20px/1 var(--serif); }
.verificacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.verificacoes button { width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-left-width: 3px; padding: 7px 8px; font-size: 13px; }
.verificacoes strong { display: block; font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.verificacoes .erro button { border-left-color: var(--erro); } .verificacoes .erro strong { color: var(--erro); }
.verificacoes .alerta button { border-left-color: var(--alerta); } .verificacoes .alerta strong { color: var(--alerta); }
.verificacoes .aviso button { border-left-color: var(--aviso); } .verificacoes .aviso strong { color: var(--aviso); }
.verificacoes .ok { color: #2f6b3a; font-size: 13px; }
.nota { font-size: 12px; color: var(--ink-soft); margin: 10px 0 0; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 10px 14px; background: var(--ink); color: var(--paper); font-size: 13px; z-index: 10; }
.toast[data-kind="erro"] { background: var(--erro); }

@media (max-width: 1100px) {
  /* altura fixa: selecionar um móvel não pode redimensionar a planta no meio de um arraste */
  .layout { grid-template-columns: 270px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 34vh; }
  .painel.esquerdo { grid-row: 1 / 3; }
  .painel.direito { grid-column: 2; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  body { height: auto; }
  .layout { display: flex; flex-direction: column; }
  .centro { order: -1; height: 70vh; }
  .painel { max-height: none; border: 0; }
  .abas .dica { display: none; }
}
.botao-link { padding: 6px 10px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font: 400 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.origem { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.origem li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.origem em { font: normal 400 10px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.origem em.ia { color: var(--alerta); } .origem em.inf { color: #2f6b3a; }