/*
 * Maquetes do Revit nos guias (BACKLOG #175, pedido do Fabrício em 18/10/2026: as prévias da Spec 077
 * "estão muito boas" e deveriam ir para os guias). Desenham a tela do Revit 2025 (tema escuro) dentro da
 * página clara do guia, como um print que se pode clicar. Sem dependência: CSS puro; o comportamento de
 * cada maquete fica num <script> no próprio guia. Na impressão, os botões somem e a tela sai como figura.
 */

.maquete {
  --rv-titulo: #2e3440;
  --rv-borda: #1a1f25;
  --rv-painel: #454f61;
  --rv-menu: #3b4453;
  --rv-lista: #3a4352;
  --rv-campo: rgba(34, 41, 51, .6);
  --rv-texto: #f5f5f5;
  --rv-texto-2: rgba(245, 245, 245, .72);
  --rv-texto-3: rgba(245, 245, 245, .42);
  --rv-azul: #0696d7;
  --rv-azul-2: #38abdf;
  --rv-papel: #ffffff;
  --rv-tinta: #3a4250;
  --rv-mira: #f2c36b;
  --rv-fita: #f0f2f5;
  --rv-fita-borda: #c9cfd8;
  --rv-cola: rgba(59, 68, 83, .95);
  --c1: #f2555a; --c1b: #c62a2f;
  --c2: #3b9eff; --c2b: #2470c2;
  --c3: #8dc63f; --c3b: #5e9421;
  --c4: #ffc53d; --c4b: #c8920a;
  --c5: #8e6be8; --c5b: #5f42b5;
  --c6: #12a594; --c6b: #0b7468;

  margin: 1.4rem 0 1.6rem;
  display: grid;
  gap: .6rem;
}

/* ── Moldura, botões e legenda da maquete (no estilo do guia) ───────────────── */

/* O atributo hidden precisa vencer o display das grades e flex abaixo. */
.maquete [hidden] { display: none !important; }

.maquete-rolo { overflow-x: auto; padding-bottom: 4px; }
.maquete-controles { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.maquete-controles .dica-curta { font-size: .85rem; color: var(--tinta-500); margin-left: .2rem; }
.tecla {
  font: 600 .85rem var(--fonte-mono);
  min-width: 2.2rem; height: 2rem; padding: 0 .7rem;
  border: 1px solid var(--tinta-200); border-bottom-width: 3px; border-radius: 6px;
  background: var(--branco); color: var(--tinta-900); cursor: pointer;
}
.tecla:hover { border-color: var(--tinta-500); }
.tecla:focus-visible, .rv button:focus-visible { outline: 2px solid var(--info-base); outline-offset: 2px; }
.tecla.leve { font: 500 .82rem var(--fonte-texto); border-bottom-width: 1px; border-radius: 999px; }
.maquete-legenda {
  font-size: .9rem; color: var(--tinta-700);
  background: var(--tinta-50); border-left: 3px solid var(--amarelo);
  padding: .55rem .8rem; border-radius: 0 6px 6px 0; margin: 0;
}
.maquete figcaption { font-size: .82rem; color: var(--tinta-500); }

/* ── Base do Revit ──────────────────────────────────────────────────────────── */

.rv { font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px; line-height: 1.35; color: var(--rv-texto); }
.rv button { font: inherit; color: inherit; }

/* Planta */
.rv-cena {
  position: relative; min-width: 680px; height: 340px;
  background: var(--rv-papel); border: 1px solid var(--rv-borda); border-radius: 3px; overflow: hidden;
}
.rv-cena.baixa { height: 250px; }
.rv-cena .parede { position: absolute; background: var(--rv-tinta); }
.rv-cena .ambiente { position: absolute; font: 10.5px/1 "Segoe UI", sans-serif; letter-spacing: .04em; color: #8a93a3; }
.rv-cena .eletroduto { position: absolute; height: 0; border-top: 2px dashed #8a93a3; }

.ponto {
  position: absolute; width: 18px; height: 18px; padding: 0;
  border: 2px solid var(--rv-tinta); border-radius: 3px; background: #fff;
  transition: box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.ponto.luz { border-radius: 50%; }
.ponto[data-c="1"] { background: var(--c1); border-color: var(--c1b); }
.ponto[data-c="2"] { background: var(--c2); border-color: var(--c2b); }
.ponto[data-c="3"] { background: var(--c3); border-color: var(--c3b); }
.ponto[data-c="4"] { background: var(--c4); border-color: var(--c4b); }
.ponto[data-c="5"] { background: var(--c5); border-color: var(--c5b); }
.ponto[data-c="6"] { background: var(--c6); border-color: var(--c6b); }
/* Modo Circuitos: cor na LINHA, sem encher o símbolo (como no plugin desde 18/10/2026) */
.vazado .ponto[data-c] { background: #fff; border-width: 3px; }
.ponto.meio-tom { opacity: .3; }
.ponto.meio-tom:not([data-c]) { border-color: #9aa1ab; }

/* Opção tipo rádio (Colorir por: Circuito, Quadro, Comando) */
.rv-radio { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; border: 0; background: transparent; padding: 2px 0; cursor: pointer; color: var(--rv-texto-2); }
.rv-radio[aria-pressed="true"] { color: var(--rv-texto); }
.ponto.selecionado { box-shadow: 0 0 0 3px rgba(6, 150, 215, .6); }
.mirando .ponto.alvo { cursor: crosshair; }
.mirando .ponto.alvo:hover { box-shadow: 0 0 0 3px var(--rv-mira); }
.mirando .ponto:not(.alvo) { opacity: .45; }

/* Colinha (cola de atalhos no canto da vista) */
.rv-cola {
  position: absolute; left: 12px; bottom: 12px; width: 268px;
  background: var(--rv-cola); border: 1px solid #5a6578; border-radius: 4px; padding: 9px 12px;
  display: grid; gap: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.rv-cola .t { font: 600 10.5px "Segoe UI", sans-serif; letter-spacing: .06em; color: var(--rv-texto-2); }
.rv-cola .passo { font-weight: 600; }
.rv-cola .estado { color: var(--rv-texto-2); }
.rv-cola ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; }
.rv-cola li { display: flex; gap: 6px; align-items: center; }
.k {
  font: 11px Consolas, monospace; min-width: 18px; text-align: center; padding: 0 5px;
  border: 1px solid #6c778a; border-radius: 3px; background: var(--rv-titulo);
}
.k.letra { border-color: var(--rv-mira); color: #ffe2a8; }

/* Janela do plugin (paleta, legenda, diálogo) */
.rv-janela {
  position: absolute; width: 290px; background: var(--rv-painel);
  border: 1px solid var(--rv-borda); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); overflow: hidden;
}
.rv-janela.solta { position: relative; }
.rv-barra { display: flex; align-items: center; gap: 6px; background: var(--rv-titulo); padding: 0 10px; height: 32px; font-size: 12.5px; font-weight: 600; }
.rv-barra .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-barra .x { color: var(--rv-texto-2); font-weight: 400; }
.bolinha { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.bolinhas { display: inline-flex; gap: 2px; height: 16px; padding: 0 5px; align-items: center; border-radius: 8px; border: 1px solid var(--rv-azul-2); background: rgba(56, 171, 223, .35); }
.bolinhas.desligado { background: transparent; border-color: rgba(188, 211, 238, .45); }
.bolinhas i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.rv-corpo { padding: 8px 10px 10px; display: grid; gap: 8px; }
.rv .sutil { color: var(--rv-texto-2); }
.rv .tres { display: grid; grid-template-columns: 1fr 1fr 52px; gap: 6px; }
.rv .rot { font-size: 11px; color: var(--rv-texto-2); margin-bottom: 2px; }
.rv-campo {
  height: 24px; background: var(--rv-campo); padding: 0 6px; border-radius: 2px; border: 1px solid transparent;
  display: flex; align-items: center; justify-content: space-between; white-space: nowrap; overflow: hidden;
}
.rv-campo.vazio { color: var(--rv-texto-3); }
.rv-campo.foco { border-color: var(--rv-azul); color: var(--rv-texto); }
.rv-campo.foco::after { content: ""; width: 1px; height: 14px; background: var(--rv-texto); margin-left: 2px; animation: rv-pisca 1s steps(1) infinite; }
@keyframes rv-pisca { 50% { opacity: 0; } }
.rv .botoes { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.rv-prim, .rv-sec {
  height: 26px; border-radius: 2px; display: grid; place-items: center; padding: 0 12px;
  font: 600 12px "Segoe UI", sans-serif; border: 0; cursor: default;
}
.rv-prim { background: var(--rv-azul); color: #fff; }
button.rv-prim { cursor: pointer; }
.rv-prim.apagado { opacity: .45; }
.rv-sec { border: 1px solid rgba(188, 211, 238, .5); background: transparent; font-weight: 400; }
.rv-rodape { background: var(--rv-titulo); border-top: 1px solid rgba(188, 211, 238, .1); padding: 5px 10px; font-size: 12px; color: #d6f5e1; }
.rv-rodape.erro { color: #ffb4b4; }

/* Lista (Espaço) e linhas de circuito */
.rv-lista { background: var(--rv-lista); border: 1px solid rgba(188, 211, 238, .12); border-radius: 2px; display: grid; gap: 1px; padding: 3px; }
.rv-busca { height: 24px; background: var(--rv-campo); border-radius: 2px; padding: 0 6px; display: flex; align-items: center; border: 1px solid var(--rv-azul); margin-bottom: 3px; }
.rv-circ {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center;
  padding: 5px 6px; border: 0; background: transparent; text-align: left; border-radius: 2px; width: 100%;
}
button.rv-circ { cursor: pointer; }
button.rv-circ:hover { background: rgba(56, 171, 223, .2); }
.rv-circ i { width: 12px; height: 12px; border-radius: 2px; display: block; border: 1px solid rgba(188, 211, 238, .5); }
.rv-circ small { color: var(--rv-texto-2); font-size: 11px; display: block; }
.rv-circ.esmaecido { opacity: .4; }
.rv-cab { padding: 5px 6px 2px; font-weight: 600; }

/* Diálogo de pergunta do plugin */
.rv-dialogo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 330px; z-index: 3; }
.rv-dialogo .rv-corpo p { margin: 0; font-size: 12px; max-width: none; }

/* Menu do botão direito */
.rv-menu { position: absolute; width: 230px; background: #fbfbfb; color: #1b1b1b; border: 1px solid #b9bfc8; box-shadow: 2px 3px 10px rgba(0, 0, 0, .2); padding: 3px 0; font-size: 12px; z-index: 2; }
.rv-menu div { padding: 4px 22px; }
.rv-menu .sub { background: #dcecfa; display: flex; justify-content: space-between; }
.rv-menu hr { border: 0; border-top: 1px solid #e0e3e8; margin: 3px 0; }
.rv-submenu { position: absolute; width: 210px; background: #fbfbfb; color: #1b1b1b; border: 1px solid #b9bfc8; box-shadow: 2px 3px 10px rgba(0, 0, 0, .2); padding: 3px 0; font-size: 12px; z-index: 2; }
.rv-submenu div { padding: 4px 16px; }

/* Faixa de opções (ribbon), tema claro como no Revit 2025 */
.rv-fita { min-width: 680px; background: var(--rv-fita); border: 1px solid var(--rv-fita-borda); border-radius: 3px; color: #1b1f24; font-family: "Segoe UI", system-ui, sans-serif; font-size: 11.5px; }
.rv-abas { display: flex; gap: 2px; padding: 4px 6px 0; border-bottom: 1px solid var(--rv-fita-borda); background: #e4e7ec; }
.rv-abas span { padding: 4px 10px; border-radius: 3px 3px 0 0; color: #3b4250; }
.rv-abas .ativa { background: var(--rv-fita); border: 1px solid var(--rv-fita-borda); border-bottom-color: var(--rv-fita); margin-bottom: -1px; color: #000; font-weight: 600; }
.rv-abas .contexto { background: #d8f0d2; color: #1f5a12; font-weight: 600; }
.rv-paineis { display: flex; align-items: stretch; padding: 6px 6px 0; gap: 0; }
.rv-painel { display: grid; grid-template-rows: 1fr auto; border-right: 1px solid var(--rv-fita-borda); padding: 0 8px; }
.rv-painel.novo { background: rgba(255, 204, 0, .18); outline: 2px solid var(--amarelo, #ffcc00); outline-offset: -2px; border-radius: 3px; }
.rv-painel .itens { display: flex; gap: 6px; align-items: flex-start; }
.rv-painel .titulo { text-align: center; color: #4a5160; padding: 3px 0 4px; font-size: 11px; }
.rv-bt { display: grid; justify-items: center; gap: 2px; width: 62px; text-align: center; line-height: 1.15; padding: 2px 0; }
.rv-bt img, .rv-bt .ic { width: 28px; height: 28px; object-fit: contain; }
.rv-bt .ic { display: grid; place-items: center; font-size: 18px; color: #4a5160; }
.rv-bt.apagado { opacity: .35; }

/* Janela "Um circuito por ponto" */
.rv-tabela { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rv-tabela th { text-align: left; font-weight: 400; color: var(--rv-texto-2); padding: 4px 6px; border-bottom: 1px solid rgba(188, 211, 238, .15); }
.rv-tabela td { padding: 4px 6px; border-bottom: 1px solid rgba(188, 211, 238, .08); }
.rv-tabela td .rv-campo { height: 22px; }

/* Luminárias (guia 16): planta em SVG, faixa no topo da vista, cartão junto ao cursor e paleta no canto */
.rv-cena.lum { min-width: 720px; height: 510px; cursor: crosshair; }
.rv-cena.lum > svg { position: absolute; left: 0; top: 0; }
.rv-cena.lum text { font: 10.5px "Segoe UI", sans-serif; letter-spacing: .04em; fill: #8a93a3; }
.rv-faixa {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none;
  width: max-content; max-width: calc(100% - 20px); padding: 7px 12px; text-align: center;
  background: var(--rv-cola); border: 1px solid #5a6578; border-radius: 4px;
}
.rv-faixa .t { font-size: 14px; font-weight: 600; }
.rv-faixa ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 12px; margin: 5px 0 0; padding: 0; }
.rv-faixa li { display: flex; gap: 4px; align-items: center; margin: 0; color: var(--rv-texto-2); }
.rv-cartao {
  position: absolute; z-index: 2; pointer-events: none; width: max-content; min-width: 150px; max-width: 260px; padding: 6px 9px;
  font-size: 12.5px; background: var(--rv-cola); border: 1px solid #5a6578; border-radius: 4px;
}
.rv-cartao strong, .rv-cartao span, .rv-cartao small { display: block; font-size: 12.5px; }
.rv-cartao strong { font-weight: 600; }
.rv-cartao small { color: var(--rv-texto-2); }
.lum-paleta { right: 12px; bottom: 12px; z-index: 3; cursor: default; }
.lum-sessao { height: 3px; background: var(--rv-azul); }
.lum-bt { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--rv-texto-2); font-size: 14px; }
.lum-bt[aria-pressed="true"] { color: var(--rv-azul-2); }
.lum-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.lum-seg button { height: 26px; padding: 0 7px; border: 1px solid rgba(188, 211, 238, .25); border-radius: 2px; background: var(--rv-campo); cursor: pointer; color: var(--rv-texto-2); }
.lum-seg button[aria-pressed="true"] { background: var(--rv-azul); border-color: var(--rv-azul); color: #fff; }
.lum-seg.mini button { height: 22px; font-size: 11.5px; }
.lum-familia { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 4px; border-bottom: 1px solid rgba(188, 211, 238, .15); }
.lum-linha { display: flex; align-items: center; gap: 6px; }
.lum-linha > .rot { width: 46px; margin: 0; }
.lum-linha > .fim { margin-left: auto; }
.lum-dica { margin: -5px 0 0 52px; font-size: 11px; color: var(--rv-texto-2); }
.lum-contador { display: inline-flex; align-items: center; background: var(--rv-campo); border-radius: 2px; }
.lum-contador button { width: 22px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.lum-contador b { min-width: 14px; text-align: center; font-weight: 400; }
.rv-secao { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--rv-texto-2); }
.lum-config { display: flex; justify-content: center; min-width: 680px; padding: 14px; background: #e9ecf1; border: 1px solid #c9cfd8; border-radius: 3px; }
.lum-config .rv-janela { width: 300px; }
.lum-config .rv-campo > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .ponto { transition: none; }
  .rv-campo.foco::after { animation: none; }
}

@media print {
  .maquete-controles { display: none; }
  .maquete, .rv, .rv * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .maquete { break-inside: avoid; }
}