/* Os estilos da app do Hobbysta, num arquivo só, como nas apps do Consumidor Guiado.
   Toda cor vem de token do design system; nenhuma cor é escrita aqui.
   Todo espaço e todo tamanho é múltiplo de 8 pixels, pela grade de 8 que Aline Miyaki pediu em
   02/10. Cada exceção de 2 ou 4 pixels traz o motivo ao lado. */

html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  line-height: 20px;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Atalho de teclado: é o 1º elemento que recebe foco e só aparece com o foco. */
.pular {
  position: fixed; left: 8px; top: -80px; z-index: 30;
  padding: 8px 16px; border-radius: calc(var(--radius) - 2px);
  background: var(--background); color: var(--foreground);
  outline: 2px solid var(--primary); text-decoration: none;
}
.pular:focus { top: 8px; }

/* A faixa do conteúdo: até 1.080 pixels, no centro. Em janela mais estreita, ocupa a largura inteira.
   A barra do topo e o corpo da tela usam a mesma faixa, para as 2 bordas ficarem alinhadas. */
.faixa { max-width: 1080px; margin-left: auto; margin-right: auto; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden; /* 1 pixel: o texto fica só para o leitor de tela, fora da vista */
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* As sombras do design system, pelo achado 17 da 2ª passada do super plano e pela regra 6, desde a etapa 1 da PR 1 do super
   plano: os valores são os das classes shadow-xs, shadow-md e shadow-lg do pacote do design system (ds-bundle/_ds_bundle.css) e o
   do aviso flutuante do Sonner do mesmo pacote, que a app usa sem o estilo dele ("unstyled", em componentes/aviso.js). O design
   system não guarda essas sombras em variáveis, e por isso elas ficam aqui, num lugar só; as regras da app usam só estas 4. Até
   a etapa 1, 7 sombras tinham o preto escrito à mão, com 6 valores diferentes. */
:root {
  --sombra-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sombra-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --sombra-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --sombra-do-aviso: 0 4px 12px rgb(0 0 0 / 0.1);
}

/* Os 4 tempos e as 3 curvas do movimento, pela regra 149, desde a etapa 1 do "aplicar" das microinterações, de 01/11: a mudança
   de cor; o que é pequeno, como a explicação do "i" e o menu, ao abrir e ao fechar; o que é médio, como a janela, o painel e o
   aviso de baixo; e o que muda de lugar numa distância grande. O que entra usa a curva de entrar, o que sai usa a de sair, e o que
   fica na tela e só muda usa a de mudar. Todo movimento da app usa estas variáveis, também componentes/movimento.js, que as lê. */
:root {
  --tempo-da-cor: 0.1s;
  --tempo-do-pequeno-ao-abrir: 0.15s;
  --tempo-do-pequeno-ao-fechar: 0.1s;
  --tempo-do-medio-ao-abrir: 0.25s;
  --tempo-do-medio-ao-fechar: 0.2s;
  --tempo-do-grande: 0.4s;
  --curva-de-entrar: ease-out;
  --curva-de-sair: ease-in;
  --curva-de-mudar: ease-in-out;
}

/* A mudança de cor com o ponteiro em cima e com o clique, pela regra 149: 0,1 segundo, só na cor do fundo, do texto e da borda,
   também para quem pediu menos movimento, porque a cor não muda o tamanho nem o lugar de nada. O contorno e a sombra ficam fora,
   e por isso o anel do foco do teclado muda na hora, como na Atlassian. Até o "aplicar", o botão do design system mudava tudo em
   0,15 segundo, pela classe transition-all do pacote, e os elementos da app mudavam na hora, ou em 0,2 segundo, como a faixa da
   declaração da Página do projeto. O :where() não tem peso: quando outra regra deste arquivo dá uma transição a um elemento da
   lista, como a de girar uma seta, ela vale no lugar desta, e por isso precisa trazer também as 3 cores. Esta regra passa por cima
   das transições do design system, que ficam numa camada (@layer) do pacote. A lista: o que se clica, pelo elemento e pelo papel, e
   as áreas e os textos da app que mudam de cor quando o ponteiro está em cima deles ou de algo dentro deles, pelas regras com :hover
   e :active deste arquivo, lidas em 01/11. Ficam na hora, fora da regra 149, a sombra, o contorno e o preenchimento de desenho (fill
   e stroke) que mudam com o ponteiro, como a sombra das frentes no desenho do módulo da tela 3 (button.projetar-fr) e a linha do
   desenho da caixa da tela 3 (.projetar-caixa-desenho). */
:where(
  button, a, summary, label, select, input, textarea, tr,
  [role="button"], [role="tab"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [role="option"], [role="radio"],
  [role="checkbox"], [role="switch"], .sb-ds-button,
  /* a barra do topo, a home e as janelas */
  .marca, .etiqueta-beta, .menu-item, .menu-usuario, .fechar-janela, .reutilizar, .borda-azul, .texto-azul, .texto-cinza, .atencao,
  .lista tbody tr :is(.projeto-numero, .data, .texto-secundario), .aviso-flutuante-acao, .aviso-flutuante-fechar,
  /* a Página do projeto, o detalhe do preço e o guia de montagem */
  .botao-informacao, .legenda-item, .linha.com-detalhe, .linha-nome, .linha-ambiente, .linha-numero, .linha-biblioteca, .ambiente-nome,
  .ambiente-quantos, .declaracao-concordo, .declaracao-concordo > span, .resposta-escolhida, .resposta-outra, .selo-clicavel,
  .marca-do-preco, .modulo-linha, .modulo-resto, .modulo-nome, .custo-gatilho, .custo-nome, .custo-nome > h3, .custo-gatilho .cinza,
  .categoria-linha, .parte-linha, .guia-de-montagem-cartao-topo, .guia-de-montagem-cartao-nome, .guia-de-montagem-marcar-montado,
  .guia-de-montagem-botao-da-lista, .guia-de-montagem-tarefa, .guia-de-montagem-tarefa-nome, .guia-de-montagem-tarefa-pecas,
  .guia-de-montagem-nome-no-desenho,
  /* o Meu perfil e a janela de ajuda */
  .mostrar-senha, .perfil-caixa-rotulo, .perfil-link-da-exclusao, .caso, .caso-titulo, .caso-complemento,
  /* a tela 2 e o "Como fica na sua casa" */
  .cartao-modulo, .cartao-nome, .tipo-de-modulo, .sinal-parede, .sugestao-de-modulo, .sugestao-pergunta, .selo-cinza-clicavel,
  .opcao-de-acabamento, .opcao-nome, .nome-editavel, .icone-botao, .cota-digitada, .cor-da-lista, .cor-da-lista-nome, .casa-planta-parede,
  .casa-item, .casa-textura, .casa-trilho-painel, .aba-do-ambiente, .peca-do-ambiente, .peca-alca, .painel-do-modulo-voltar,
  .linha-que-abre, .acao-do-modulo,
  /* a tela 3 */
  .projetar-trilho-painel, .projetar-botao-3d, .projetar-icone-botao, .projetar-chip, .projetar-opcao, .projetar-opcao-texto > span,
  .projetar-linha-mais, .projetar-linha-mais-nome, .projetar-migalha, .projetar-linha-da-peca, .projetar-linha-da-peca > svg,
  .projetar-linha-da-peca-sub, .projetar-op, .projetar-op-escolha, .projetar-op-nome, .projetar-botao-pequeno, .projetar-custo-gatilho,
  .projetar-custo-nome, .projetar-cinza, .projetar-cabeca > svg, .projetar-esp, .projetar-alca, .projetar-fr-folha, .projetar-visual,
  .projetar-conteudo, .projetar-conteudo-escolha, .projetar-conteudo-nome, .projetar-parte-nome, .projetar-parte-sub, .projetar-tp-lado
) {
  transition-property: background-color, color, border-color;
  transition-duration: var(--tempo-da-cor);
  transition-timing-function: var(--curva-de-mudar);
}
/* O foco do teclado e o cursor num campo mudam a borda na hora, como o anel do foco, porque a borda azul do campo com o cursor faz
   parte do foco, pela regra 110; a borda volta à cor de antes em 0,1 segundo quando o foco sai. */
:where(:focus-visible, input:focus, textarea:focus) { transition-property: background-color, color; }
/* A alça da borda da janela flutuante da tela 3 muda de cor num ::after, que o :where() acima não alcança. */
.projetar-janela-borda::after { transition: background-color var(--tempo-da-cor) var(--curva-de-mudar); }

/* Os componentes do design system que abrem e fecham, pela regra 149, pelos data-slot do pacote, lidos em 01/11: o pacote dá a
   mesma animação de entrada e de saída, com a mesma curva, em 0,15 segundo à explicação, ao menu e à lista e em 0,2 segundo à
   janela (ds-bundle/_ds_bundle.css, classes animate-in, animate-out e duration-200), e não tem a regra de menos movimento. Aqui,
   o pequeno abre em 0,15 segundo e fecha em 0,1, e o médio abre em 0,25 e fecha em 0,2, com a curva de entrar e a de sair; o
   crescimento de 95% a 100% e o deslize de 8 pixels do pacote continuam. O aviso de baixo, o Sonner, fica para a etapa 2. */
:is([data-slot="tooltip-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="select-content"],
  [data-slot="popover-content"]) {
  animation-duration: var(--tempo-do-pequeno-ao-abrir); animation-timing-function: var(--curva-de-entrar);
}
:is([data-slot="tooltip-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="select-content"],
  [data-slot="popover-content"])[data-state="closed"] {
  animation-duration: var(--tempo-do-pequeno-ao-fechar); animation-timing-function: var(--curva-de-sair);
}
:is([data-slot="dialog-content"], [data-slot="dialog-overlay"], [data-slot="alert-dialog-content"], [data-slot="alert-dialog-overlay"],
  [data-slot="sheet-content"], [data-slot="sheet-overlay"]) {
  animation-duration: var(--tempo-do-medio-ao-abrir); animation-timing-function: var(--curva-de-entrar);
}
:is([data-slot="dialog-content"], [data-slot="dialog-overlay"], [data-slot="alert-dialog-content"], [data-slot="alert-dialog-overlay"],
  [data-slot="sheet-content"], [data-slot="sheet-overlay"])[data-state="closed"] {
  animation-duration: var(--tempo-do-medio-ao-fechar); animation-timing-function: var(--curva-de-sair);
}
/* Para quem pediu menos movimento, os mesmos componentes só aparecem e somem, nos mesmos tempos: a animação do pacote
   (@keyframes enter e exit) lê o crescimento, o deslize e a transparência destas variáveis, e aqui o crescimento fica em 100%, o
   deslize em 0 e a transparência começa e termina em 0. O liga e desliga do design system (Switch) passa sem deslizar a bolinha. */
@media (prefers-reduced-motion: reduce) {
  :is([data-slot="tooltip-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="select-content"],
    [data-slot="popover-content"], [data-slot="dialog-content"], [data-slot="dialog-overlay"], [data-slot="alert-dialog-content"],
    [data-slot="alert-dialog-overlay"], [data-slot="sheet-content"], [data-slot="sheet-overlay"]) {
    --tw-enter-scale: 1; --tw-exit-scale: 1;
    --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0;
    --tw-enter-opacity: 0; --tw-exit-opacity: 0;
  }
  [data-slot="switch-thumb"] { transition: none; }
}

/* O nome que guarda a largura dele em negrito, num ::after escondido com o mesmo texto, para nada andar quando a escolha muda
   (regra 123), como .tipo-rotulo e .casa-aba-nome; desde a etapa 1 da PR 1 do super plano, nas abas da janela da versão de teste,
   em "Por dentro" em grupo e nos itens do espaço. */
.nome-com-o-negrito-guardado { display: inline-grid; }
.nome-com-o-negrito-guardado::after { content: attr(data-texto); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }


/* ---------- A barra do topo (componentes/barra-do-topo.js) ---------- */

/* O design system não tem componente pronto de barra do topo. A barra tem 48 pixels de altura,
   mais a linha de 1 pixel embaixo, e cada elemento fica a 8 pixels da borda de cima e da de baixo. */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: 49px; /* 49 pixels: os 48 da barra e a linha de 1 embaixo, pela regra 48 */
  background: var(--primary);
  color: var(--primary-foreground);
  border-bottom: 1px solid var(--sb-ds-brand-900);
}
.barra-dentro { height: 48px; display: flex; justify-content: space-between; }
/* Desde a etapa 34 da PR das vistas e da usabilidade do super plano, pela U11: no "Como fica na sua casa", a única página que ocupa a
   janela inteira (telas/modulos/ver-como-fica-na-sua-casa.js), a barra também ocupa a janela inteira, com o logotipo e o nome da
   pessoa a 24 pixels das bordas: 8 de espaço aqui, mais os 16 que o logotipo e o botão do nome já têm por dentro (.marca e
   .menu-usuario, abaixo). As outras páginas continuam com a barra na faixa, pela regra 8, que ganha a exceção no fim da PR. */
html:has([data-el="casa"]) .barra-dentro { max-width: none; padding: 0 8px; }
.lado-do-logotipo { display: flex; align-items: center; height: 48px; }
/* O logotipo é o arquivo de hoje, e leva de volta para a home. A imagem tem 32 pixels de altura,
   com 8 pixels acima e abaixo, e começa a 16 pixels da borda da faixa, alinhada com o título.
   Desde o "aplicar" da tela 6, de 07/10, a área do logotipo é uma caixa de 40 pixels de altura, 4 pixels em volta da
   imagem, com margem de 4, 4, 4 e 12 pixels, espaço interno de 4 e canto de 8 (D21): a imagem continua a 16 pixels da
   borda da faixa, a 8 do alto da barra e a 8 da etiqueta "Beta", e a caixa termina a 4 pixels da etiqueta. Os 4 e os
   12 pixels são exceções à grade de 8, porque a caixa fica 4 pixels em volta da imagem, que não muda de lugar. Até
   07/10, a área era a altura inteira da barra, com 8 pixels de espaço interno e 16 à esquerda. */
.marca {
  box-sizing: border-box; flex: none; display: block;
  height: 40px; margin: 4px 4px 4px 12px; padding: 4px; border-radius: 8px; /* 4 e 12 pixels: a caixa fica 4 pixels em volta da imagem, como diz o comentário acima */
}
.marca img { display: block; width: auto; height: 32px; }
/* A etiqueta "Versão de teste", que se chamava "Beta" até 09/10 (regra 10), fica a 8 pixels do logotipo e abre a janela que explica a jornada nova.
   Ela tem 24 pixels de altura, e a área de clique tem 40 pixels de altura. */
.etiqueta-beta {
  position: relative; flex: none;
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--secondary); color: var(--secondary-foreground);
  font-family: inherit; font-size: 12px; line-height: 16px; font-weight: 600;
}
.etiqueta-beta::after { content: ''; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -8px; } /* -4 pixels: a área do clique passa 4 pixels dos lados da etiqueta e 8 em cima e embaixo, sem mudar o desenho */
.etiqueta-beta:hover { background: var(--sb-ds-brand-200); }
.etiqueta-beta:focus-visible { outline: 2px solid var(--primary-foreground); outline-offset: 2px; }
/* Os botões "Projetos" e "Preciso de ajuda" têm 32 pixels de altura, com 8 pixels acima e abaixo,
   16 pixels de espaço dos lados, 8 pixels entre o ícone e o texto e 8 pixels entre um botão e o seguinte. */
.menu { display: flex; align-items: center; gap: 8px; height: 48px; }
.menu-item {
  box-sizing: border-box; height: 32px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--primary-foreground); text-decoration: none;
  font-size: 14px; line-height: 14px; white-space: nowrap;
}
/* Desde o "aplicar" de 06/10, pela parte 12 do estudo do corte, do preço e da linha do tempo: o item selecionado, o
   da página atual ou o que está com o menu aberto, fica com o azul do hover, o 800, também com o ponteiro em cima, a
   exceção da regra 81 que Aline Miyaki pediu: "se passar o mouse em cima do que esta selecionado, nao deve ficar sem
   o azul, deve permanecer com o azul do hover". Até 06/10, ele passava ao 700, que é o azul da barra, e a caixa sumia. */
.menu-item.ativo, .menu-item:hover, .menu-item.ativo:hover { background: var(--sb-ds-brand-800); }
/* Com o ponteiro em cima, o logotipo ganha a caixa azul escura dos outros itens da barra, e não cresce mais, pela
   parte 5 do estudo do Meu perfil e da ajuda, aprovada por Aline Miyaki em 07/10: "ok pode ser" (D21). O logotipo e
   o botão "Serviços" levam à mesma tela, e por isso mudam do mesmo jeito, pela regra 81. Até 07/10, o logotipo ficava
   5% maior e com o traço mais grosso, sem a caixa. */
.marca:hover { background: var(--sb-ds-brand-800); }
/* O botão de ajuda tem a mesma aparência e o mesmo comportamento do botão "Serviços",
   sem borda, por pedido de Aline Miyaki em 02/10. */
.botao-ajuda { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
/* O item "MadMais" da barra do topo, desde o "aplicar" do estudo de 04/11, pela DH2, com a aparência de "Preciso de ajuda". */
.botao-da-loja { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
/* O botão do usuário termina a 16 pixels da borda da faixa, alinhado com a borda direita da lista. Desde o
   "aplicar" de 06/10, ele tem a caixa dos outros itens da barra: 32 pixels de altura, 16 de cada lado e o canto
   arredondado, com o círculo cinza da foto de 24 pixels e o ícone de 12, a alternativa que Aline Miyaki escolheu na
   parte 12: "todos tem que ser iguais, ocm mais respiro". A caixa aparece com o ponteiro em cima e enquanto o menu
   está aberto. Até 06/10, a caixa tinha a altura da barra, sem o canto, e o círculo, 32 pixels. */
.menu-usuario {
  box-sizing: border-box; height: 32px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; cursor: pointer;
  color: var(--primary-foreground); font: inherit; font-size: 14px; line-height: 14px;
}
/* Desde o "aplicar" da tela 6, de 07/10, o botão do nome fica marcado no Meu perfil, com a caixa azul escura, como o
   item da página atual (D18). */
.menu-usuario:hover, .menu-usuario[data-state="open"], .menu-usuario.ativo { background: var(--sb-ds-brand-800); }
.menu-usuario [data-slot="avatar"] { width: 24px; height: 24px; }
/* Desde o "aplicar" do Meu perfil, de 10/10: a barra mostra a 1ª palavra do nome, com as reticências depois de 160 pixels,
   para a barra caber numa linha na janela de 900 pixels (E50 e regra 41); e o menu tem no máximo 288 pixels, com o nome
   inteiro e o e-mail no topo, numa linha que não se clica, quebrados em qualquer letra, para aparecerem inteiros (E40 e
   parte 13 do estudo do Meu perfil e da ajuda). */
.nome-na-barra { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px; } /* 16 pixels: a linha do nome cabe na caixa de 32, sem cortar as letras que descem */
.menu-do-usuario { max-width: 288px; }
.menu-conta { display: grid; }
.menu-conta-nome { font-weight: 500; color: var(--foreground); overflow-wrap: anywhere; }
.menu-conta-email { font-weight: 400; color: var(--muted-foreground); overflow-wrap: anywhere; }
/* Os itens do menu do usuário mostram a mãozinha, como todo elemento clicável da tela. No design
   system, o item do menu mostra a seta do ponteiro. Pedido de Aline Miyaki em 02/10. Desde 06/10, com o ponteiro em
   cima, o item fica azul claro, e não no amarelo claro do design system, que fica só para o que pede atenção. */
.menu-do-usuario [role="menuitem"] { cursor: pointer; }
.menu-do-usuario [role="menuitem"]:focus, .menu-do-usuario [role="menuitem"][data-highlighted] { background-color: var(--secondary) !important; color: var(--foreground) !important; }
.menu-item:focus-visible, .menu-usuario:focus-visible, .marca:focus-visible {
  outline: 2px solid var(--primary-foreground); outline-offset: -2px;
}


/* ---------- A janela da versão de teste (componentes/janela-da-versao-de-teste.js) ---------- */

/* A janela nunca passa da altura da tela; se o texto não couber, a janela rola por dentro.
   Os blocos da janela (o cabeçalho, as abas com o conteúdo e o botão "Entendi") ficam a 32 pixels
   um do outro, e não aos 16 do design system, pela proximidade da Gestalt. */
.janela-beta, .janela-da-app { max-height: calc(100dvh - 32px); overflow-y: auto; row-gap: 32px; }
/* No computador, a janela tem 576 pixels de largura, e não os 512 do design system: com 576, os
   textos ocupam menos linhas, e a janela continua sem rolagem numa tela de 800 pixels de altura.
   Desde 03/10, as janelas da página do serviço usam as mesmas regras, pela classe "janela-da-app". */
@media (min-width: 640px) { .janela-beta, .janela-da-app { max-width: 576px; } }
/* O X da janela é um botão desta app. Ele fica centrado na 1ª linha do título, e o desenho do X
   termina na borda direita do conteúdo, como o botão "Entendi". Os 20 pixels do topo são exceção à
   grade de 8: é o que centra a área de clique, de 32 pixels, na 1ª linha do título. */
.fechar-janela { position: absolute; top: 20px; right: 16px; } /* 20 pixels: a área do clique, de 32, no meio da 1ª linha do título */
/* A frase da ajuda tem 2 formas, e só 1 aparece: a outra entra na janela com menos de 480 pixels. */
.ajuda-so-icone { display: none; }
/* As abas ficam no centro da janela. A aba aberta tem o fundo azul claro e o texto no azul
   principal (5,17:1), e a outra tem o texto cinza escuro (cerca de 7,2:1), que escurece mais com o
   ponteiro em cima. No design system, a aba aberta só fica branca, com o texto preto, e a diferença
   entre as abas fica fraca; e o cinza de texto do design system dá 4,35:1 sobre o fundo das abas,
   abaixo de 4,5:1. Pedido de Aline Miyaki em 02/10. Cada aba mostra a mãozinha, como todo elemento
   clicável; no design system, a aba mostra a seta do ponteiro. */
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1B da folha 1, de 19/10, como as abas "Decoração", "Parede" e "Piso"
   (.casa-aba): a aba aberta tem a barra azul de 2 pixels embaixo e o texto azul em negrito, sem o fundo azul claro; a fechada,
   com o ponteiro em cima, ganha o azul mais claro do design system (brand-50) e o texto azul; a aberta, com o ponteiro em cima,
   o azul claro (brand-100); e a fileira, sem a faixa cinza do design system, tem a linha cinza de 1 pixel embaixo, que a barra
   azul cobre. A fileira continua com os 36 pixels de altura do design system: 8 em cima, a linha de 20 e 6 embaixo, com a barra
   de 2. Até a etapa 1, a aba aberta tinha o fundo azul claro, as cores que a regra 81 dá ao ponteiro em cima. */
.beta-corpo [role="tablist"] { align-self: center; height: 36px; padding: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--border); } /* 36 pixels: a altura da fileira das abas do design system */
.beta-corpo [role="tab"] { height: 36px; padding: 8px 8px 6px; border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; box-shadow: none; cursor: pointer; color: var(--sb-ds-neutral-600); } /* 6 pixels embaixo: com a barra de 2, os 8 de cima */
.beta-corpo [role="tab"]:hover { background: var(--sb-ds-brand-50); color: var(--primary); }
.beta-corpo [role="tab"]:active { background: var(--sb-ds-brand-100); } /* regra 119 */
.beta-corpo [role="tab"][data-state="active"] { background: none; border-bottom-color: var(--primary); box-shadow: none; color: var(--primary); font-weight: 600; }
.beta-corpo [role="tab"][data-state="active"]:hover { background: var(--sb-ds-brand-100); }
.beta-corpo [role="tab"][data-state="active"]:active { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* regra 119; o brand-800 sobre o brand-200, como em .casa-aba */
/* Quando a aba muda, o topo da janela fica no mesmo lugar, e a altura acompanha o conteúdo; o
   código que fixa o topo está em componentes/janela-da-versao-de-teste.js. */
/* O conteúdo da aba recebe o foco do teclado, e o foco aparece em volta dele, no azul principal.
   No design system, o conteúdo da aba recebe o foco sem mostrar nada. */
.beta-corpo [role="tabpanel"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
/* Dentro de cada aba: 16 pixels entre as abas e o 1º item, que são os 8 do design system mais os 8
   do item; 8 pixels entre 2 itens; e 0 entre a frase principal de um item e o complemento dela. */
.beta-corpo ol, .beta-corpo ul { margin: 0; padding-left: 24px; list-style: none; color: var(--foreground); }
.beta-corpo ol { counter-reset: passo; }
/* Cada item tem um título, em preto, com 16 pixels de letra, e o complemento embaixo, em cinza,
   com 14. O título é o que mais importa, e por isso é o maior: quem lê só os títulos lê a lista.
   Pedido de Aline Miyaki em 02/10, nos 5 passos e nos 3 combinados. */
.beta-corpo li { position: relative; margin: 8px 0; font-size: 16px; line-height: 24px; text-wrap: pretty; }
.beta-corpo li:last-child { margin-bottom: 0; }
/* O número e o ponto de cada item começam na mesma borda do título da janela, e o texto do item
   começa 24 pixels depois. A lista perde o marcador do navegador, e o código devolve o papel de
   lista para o leitor de tela. */
.beta-corpo li::before { position: absolute; left: -24px; width: 24px; }
.beta-corpo ol > li { counter-increment: passo; }
.beta-corpo ol > li::before { content: counter(passo) "."; }
.beta-corpo ul > li::before { content: "•"; content: "•" / ""; }
/* O complemento fica embaixo do título do item, colado nele, em cinza e menor. */
.beta-corpo .complemento { display: block; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }


/* ---------- A home (telas/home.js) ---------- */

/* Corpo da tela, de cima para baixo: o título, a faixa da busca e a lista.
   Os espaços seguem a grade de 8 pixels, e o que é mais ligado fica mais perto, pela proximidade
   da Gestalt. Pedido de Aline Miyaki em 02/10:
   - 32 pixels entre a barra do topo e o título, e entre a faixa da busca e a lista;
   - 16 pixels entre o título e a faixa da busca, que formam o cabeçalho da lista;
   - 8 pixels entre o campo de busca e o botão "Novo serviço", que ficam lado a lado;
   - 16 pixels entre a borda da faixa e o conteúdo, a mesma distância do logotipo.
   O corpo começa 81 pixels abaixo do topo da janela: 49 da barra do topo, com a linha, mais 32. */
.conteudo { padding-top: 81px; padding-bottom: 40px; } /* 81 pixels: os 49 da barra do topo e 32 */
.linha-titulo { margin: 0 16px; }
.linha-titulo h1 { margin: 0; text-wrap: balance; }
.faixa-da-busca { display: flex; gap: 8px; margin: 16px 16px 0 16px; }
.faixa-da-busca .campo { flex: 1; min-width: 0; }
.faixa-da-busca .acao { flex: none; width: 200px; }
.tabela { margin: 32px 16px 0 16px; }

/* Lista de serviços. */
/* 12 pixels em cima e embaixo de cada célula é exceção à grade de 8: com 16, cada linha cresce
   8 pixels; com 8, o botão de status fica a 10 pixels da linha de cima e da de baixo. Aline
   Miyaki manteve os 12 pixels em 02/10. */
.lista th, .lista td { padding: 12px 8px; } /* 12 pixels: com 16, cada linha cresce 8; com 8, o botão de status fica a 10 das linhas, como diz o comentário acima */
/* O texto da 1ª coluna começa no mesmo ponto que o "B" de "Busque", no campo de busca: o texto
   do campo fica a 13 pixels da borda dele, que são 1 pixel de borda e 12 de espaço interno, os
   2 do design system. Pedido de Aline Miyaki em 02/10. */
.lista th:first-child, .lista td:first-child { padding-left: 13px; } /* 13 pixels: o texto começa no ponto do texto do campo de busca, com 1 de borda e 12 de espaço */
/* Desde a PR 4 do super plano, pela SP128 da lista das decisões do super plano e pela regra 47: sem a coluna do "Reutilizar", a
   última célula fica sem o espaço da direita, e o botão de status termina no ponto em que o botão "Novo projeto", acima da lista,
   termina. O título "Status" continua no ponto de antes, porque o espaço da esquerda não muda. */
.lista th:last-child, .lista td:last-child { padding-right: 0; }
.lista tbody tr, .bloco { cursor: pointer; }
/* Desde a PR 4 do super plano, pelo defeito 15 e pela regra 36: a linha de cada projeto é um link de verdade também fora do nome.
   O link da linha (telas/home.js, LinkDaLinha) cobre a linha inteira, por baixo do nome e do botão de status, que ficam por cima
   dele, e o Ctrl e clique e o clique com o botão do meio em qualquer ponto da linha abrem o projeto numa aba nova. A linha passa a
   ser a referência do link que a cobre, e o azul claro da linha com o ponteiro em cima continua o mesmo, pela regra 81. */
.lista tbody tr, .bloco { position: relative; }
.link-da-linha { position: absolute; inset: 0; z-index: 0; }
.lista .projeto-nome, .lista .de-status, .bloco .projeto-nome, .bloco .de-status { position: relative; z-index: 1; }
/* O nome do projeto ocupa 1 linha, em qualquer tamanho de janela, e o nome que não cabe é
   cortado com reticências. Com isso, todas as linhas da lista têm a mesma altura. */
.projeto-nome {
  display: block; width: fit-content; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--primary); font-size: 14px; line-height: 20px; font-weight: 600;
  text-decoration: none;
}
/* Desde o "aplicar" de 06/10, pela parte 12 do estudo: com o ponteiro em cima, a linha de cada serviço fica azul
   claro, como o topo do cartão do detalhe, e o nome do projeto, que já é azul, fica sem o sublinhado; o número do
   serviço, a central e a data passam ao cinza escuro, porque o cinza do design system tem 4,13:1 sobre o azul claro,
   e o cinza escuro, 6,80:1. O bloco do celular fica como estava, porque o celular é da fase 2. */
.lista tbody tr:hover { background: var(--secondary); }
.lista tbody tr:hover .projeto-numero, .lista tbody tr:hover .data, .lista tbody tr:hover .texto-secundario { color: var(--sb-ds-neutral-600); }
.bloco:hover .projeto-nome { text-decoration: underline; text-underline-offset: 3px; }
.projeto-nome:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.projeto-numero {
  display: block; color: var(--muted-foreground);
  font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums;
}
.texto-secundario { color: var(--muted-foreground); }
.data { color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Botões de status. O preenchimento diz a urgência, e a cor diz o sentimento.
   Todos têm a mesma largura, a mesma borda de 1 pixel e o conteúdo começando pela esquerda,
   para o ícone e o texto de todos começarem no mesmo ponto. */
.de-status { width: 100%; justify-content: flex-start !important; border: 1px solid transparent; text-decoration: none; }
/* Desde a etapa 3 da PR 1 do super plano, pela 6I da folha 2: a seta para a direita na borda da direita de todo botão de situação. */
.de-status > .seta-no-fim { margin-left: auto; }
/* Amarelo cheio: precisa da atenção do Hobbysta. */
.atencao { background: var(--sb-ds-accent-300) !important; color: var(--sb-ds-accent-950) !important; }
.atencao:hover { background: var(--sb-ds-accent-400) !important; }
/* Azul com borda: está com o Hobbysta, sem pressa. */
.borda-azul { border-color: var(--primary) !important; color: var(--primary) !important; }
/* Botão de texto: o Hobbysta só aguarda, ou o serviço está concluído. */
.texto-azul { color: var(--primary) !important; }
.texto-cinza { color: var(--sb-ds-neutral-600) !important; }
/* Com o ponteiro em cima, o fundo é azul claro ou cinza claro. O amarelo claro, que é o fundo
   padrão do design system nessa situação, fica só com o sentido de atenção. */
.borda-azul:hover, .texto-azul:hover { background: var(--secondary) !important; color: var(--primary) !important; }
/* Desde o "aplicar" do estudo de 04/11, pela correção da etapa 7 do plano, que Aline Miyaki aprovou em 05/11: o botão cinza "Pronto:
   montagem concluída", com o ponteiro em cima, passa do cinza claro (--muted), com 1,09:1 contra o branco, que quase não se via, pela
   folha 2 do super plano, ao cinza 200 do design system, e o texto passa ao cinza 700, pela regra 132, como pede a regra 81. */
.texto-cinza:hover { background: var(--sb-ds-neutral-200) !important; color: var(--sb-ds-neutral-700) !important; }

/* O hover dos botões do design system, na home e na página do serviço, desde o "aplicar" da tela 4, de 05/10,
   pela regra 81: todo elemento clicável mostra, com o ponteiro em cima, uma mudança que se vê na área inteira
   que recebe o clique. A decisão de Aline Miyaki: "pode fazer conforme o reconmensadado de hover do melhor jeito
   padronizadando qualidade". O design system não muda, porque é repositório de outro time: o botão traz no
   código a classe "sb-ds-button" e a marca do tipo dele, e a app troca o hover. A conferência achou que o
   botão de dentro de "DialogClose", como "Voltar ao orçamento", perde a marca data-slot="button", que o plano
   indicava, e por isso a regra usa a classe. No design system, o botão cheio fica 10% mais claro, e o
   com borda e o sem borda ganham um amarelo claro, de 1,09:1 contra o branco. O de borda azul e o amarelo de
   atenção ficam como estavam, porque já mudam o fundo. */
/* Cheio azul, como "Novo serviço" e "Enviar o pedido à MadMais": o azul mais escuro. */
.sb-ds-button.variant-default:hover { background: var(--sb-ds-brand-800); }
/* Cheio vermelho, como "Erro no projeto: ver como resolver": o vermelho mais escuro. */
.sb-ds-button.bg-destructive:hover { background: var(--sb-ds-destructive-700); }
/* Com borda cinza, como "Voltar ao orçamento" das janelas: o azul claro, no lugar do amarelo claro. */
.sb-ds-button.border.bg-background:not(.borda-azul):hover { background: var(--secondary); color: var(--foreground); }
/* De texto azul e de texto cinza, sem borda, que ocupam mais que o texto, como os status de texto da home e
   "Imprimir o orçamento": desde o "aplicar" de 06/10, só o fundo, sem o sublinhado, pela regra 81: o sublinhado
   fica só no botão de texto sem caixa, numa frase ou ao lado de um texto. A fala de Aline Miyaki: "button hobver com
   linha em baixo é estranho [...] ou é um ou outro". */
/* Só de ícone, como o X das janelas: o azul um tom mais forte, como o "i". O "Reutilizar" da home, que também era só de ícone,
   saiu na PR 4 do super plano, pela SP15. */
.fechar-janela:hover { background: var(--sb-ds-brand-200) !important; }
/* Os botões dos avisos amarelos do painel do total ocupam a largura do aviso, com o texto à esquerda e a seta, no que leva a outro
   lugar, na borda da direita, pela decisão 8 e pela 6I da folha 2, desde a etapa 4 da PR 1 do super plano. */
.aviso-do-painel [data-slot="button"], .aviso-do-painel [data-slot="tooltip-trigger"] { justify-content: flex-start; text-align: left; }
.aviso-do-painel .seta-no-fim { margin-left: auto; }

/* O botão pressionado, desde o "aplicar" do Meu perfil, de 10/10, pela regra 119 e pela decisão 95 do estudo do Meu
   perfil e da ajuda (E59): enquanto a pessoa segura o clique, o botão fica 1 tom do design system mais escuro que com o
   ponteiro em cima, e volta ao tom do ponteiro em cima quando ela solta. O botão travado e o botão que espera a resposta
   do Cortecloud não mudam, porque o clique neles não faz a ação. A decisão 95 substituiu a decisão 13 do estudo da tela
   2, de 09/10, que deixava o pressionado igual ao ponteiro em cima. */
.sb-ds-button.variant-default:not([aria-disabled="true"]):active { background: var(--sb-ds-brand-900); }
.sb-ds-button.bg-destructive:not([aria-disabled="true"]):active { background: var(--sb-ds-destructive-800); }
.sb-ds-button.border.bg-background:not(.borda-azul):not([aria-disabled="true"]):active { background: var(--sb-ds-brand-200); color: var(--foreground); }
/* Desde a VU12 da lista das decisões do estudo da usabilidade, o texto do botão com borda azul pressionado é o brand-800, porque o
   azul principal sobre o brand-200 dá 4,46:1, abaixo dos 4,5:1 do texto; até a VU12, só o "Personalizar" da linha do módulo tinha o
   brand-800. Desde 27/10, pela decisão de Aline Miyaki sobre a VU12, o botão de texto azul sem borda, como o "Cancelar" do passo da
   senha nova, no Meu perfil, e "Imprimir o orçamento", também passa ao brand-800, porque tem o mesmo fundo quando pressionado. */
.borda-azul:not([aria-disabled="true"]):active, .texto-azul:not([aria-disabled="true"]):active { background: var(--sb-ds-brand-200) !important; color: var(--sb-ds-brand-800) !important; }
.texto-cinza:not([aria-disabled="true"]):active { background: var(--sb-ds-neutral-300) !important; } /* 1 tom acima do ponteiro em cima, pela regra 119, desde o "aplicar" do estudo de 04/11, que passou o ponteiro em cima ao cinza 200 */
.atencao:not([aria-disabled="true"]):active, .marca-do-preco:not(.marca-do-meio):active { background: var(--sb-ds-accent-500) !important; }
.fechar-janela:active, .mostrar-senha:active, .botao-informacao:active, .etiqueta-beta:active { background: var(--sb-ds-brand-300) !important; }
.menu-item:active, .menu-item.ativo:active, .menu-usuario:active, .marca:active { background: var(--sb-ds-brand-900); }
.link-de-texto:active, .botao-de-texto:active { color: var(--sb-ds-brand-800); text-decoration: underline; text-underline-offset: 3px; }
.perfil-link-da-exclusao:active { color: var(--foreground); }

/* A explicação discreta, que começou no botão "Reutilizar" da home, que saiu na PR 4 do super plano, pela SP15, e no nome cortado:
   fundo branco, borda cinza e texto no cinza da coluna "Última mudança". No design system, a explicação é azul e tem uma seta;
   aqui a seta não aparece. */
.explicacao-discreta {
  background-color: var(--popover) !important;
  color: var(--muted-foreground) !important;
  /* A borda é o cinza 400 do design system, mais escuro que o cinza 200 (--border) das opções e das linhas que a
     caixa cobre, para a explicação não se confundir com elas, pela regra 79 e pela decisão 11 do estudo da tela 2,
     de 07/10. A fala de Aline Miyaki: "agora com essa borda nesse tooltip, vale padronizar isso em outras
     interfaces e prototipos". */
  border: 1px solid var(--sb-ds-neutral-400);
  /* Toda explicação tem a mesma letra, a dos estudos: 14 pixels, com 20 de altura de linha, pela regra 79,
     a pedido de Aline Miyaki em 05/10: "manter sempre a padronizacao do tamanho da fonte e cor em todos
     os tooltips". Até 05/10, as explicações curtas do design system tinham 12 pixels. */
  font-size: 14px !important; line-height: 20px !important;
}
.explicacao-discreta .sb-ds-tooltip-arrow { display: none !important; }
/* A largura da explicação do nome cortado, na home, desde o "aplicar" dos ajustes de 15/10 da home, pela mudança 1: a explicação
   passou do Tooltip do design system ao componente das explicações, e a largura de antes, que ficava no código da home, passou a
   esta classe. */
.explicacao-do-nome { max-width: 360px !important; }
/* O "Reutilizar" saiu da home na PR 4 do super plano, pela SP15, e a app não usa mais estas 4 regras. Elas ficam só para os 2
   estudos que copiam a lista da home de antes e carregam este arquivo, estudos/estudo-tela-1-linha-do-servico.html e
   estudos/estudo-tela-1-e-6-ajustes-de-15-10.html, que guardam a história das decisões da home: sem elas, o botão desses estudos
   perde o lugar na linha, o azul com o ponteiro em cima, o tom do pressionado e a largura da explicação. */
.acoes-linha { display: flex; justify-content: flex-end; align-items: center; }
.reutilizar:hover { background: var(--sb-ds-brand-200) !important; }
.reutilizar:active { background: var(--sb-ds-brand-300) !important; }
.explicacao-do-reutilizar { max-width: 232px !important; text-wrap: balance !important; }

/* Celular: cada serviço é um bloco, separado do seguinte por uma linha. */
.blocos { list-style: none; margin: 16px 16px 0 16px; padding: 0; }
.bloco { padding: 16px 0; border-bottom: 1px solid var(--border); }
.bloco:first-child { border-top: 1px solid var(--border); }
.bloco-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.bloco-texto { min-width: 0; }
.bloco-data { display: block; color: var(--muted-foreground); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
/* No celular, os botões têm 44 pixels de altura, para o toque do dedo. */
.bloco .de-status { height: 44px; } /* 44 pixels: a altura para o toque do dedo, no celular */

/* Home sem serviços. */
.vazio { margin: 72px auto 0 auto; max-width: 424px; padding: 0 16px; text-align: center; }
.vazio-icone { display: flex; justify-content: center; color: var(--muted-foreground); }
.vazio h2 { margin: 16px 0 0 0; font-size: 18px; line-height: 28px; font-weight: 600; text-wrap: balance; }
.vazio p { margin: 8px 0 0 0; color: var(--muted-foreground); text-wrap: pretty; }
/* O botão "Novo serviço" fica 24 pixels abaixo da 2ª frase, no centro, com os mesmos 200 pixels
   de largura que tem ao lado do campo de busca. */
.vazio-acao { width: 200px; margin: 24px auto 0 auto; }


/* ---------- A página do serviço (telas/pagina-do-servico.js) ---------- */

/* De cima para baixo: o cabeçalho, com o título e as 6 etapas, e as partes da página. Os espaços
   seguem a grade de 8, e o que é mais ligado fica mais perto, pela proximidade:
   - 32 pixels entre a barra do topo e o título, como na home (o espaço vem de .conteudo);
   - 16 pixels entre o título e as etapas, e 8 entre as etapas e a frase da etapa atual, que formam
     o cabeçalho da página;
   - 48 pixels entre o cabeçalho e a 1ª parte, e entre 2 partes: o dobro dos 24 entre os blocos de
     uma parte;
   - 16 pixels entre o título de uma parte e o 1º bloco dela.
   As partes usam a faixa inteira do conteúdo, até a mesma borda das etapas, como a lista da home.
   Pedido de Aline Miyaki em 03/10: numa coluna de 2 terços da faixa, as partes ficavam deslocadas
   para a esquerda. */
.servico-cabecalho { margin: 0 16px; }
/* O botão de voltar fica acima do título, com a seta na borda do título e a 16 pixels dele, porque o
   botão é ligado ao título (04/10). */
.voltar { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; line-height: 20px; }
.servico-titulo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.servico-nome { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 16px; min-width: 0; }
/* Desde o "aplicar" dos ajustes da tela 2, de 15/10, pela mudança 13 do plano e pela regra 41: o título quebra a palavra
   que não cabe na linha, como o nome de até 255 caracteres sem espaço, para não passar da largura da página; o título curto
   fica igual, porque "anywhere" só quebra a palavra que não cabe. A classe é a do título principal de 8 trechos da app. */
.titulo-do-servico { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; overflow-wrap: anywhere; }
.titulo-do-servico:focus, .titulo-da-parte:focus, .conteudo:focus { outline: none; }
.servico-numero { color: var(--muted-foreground); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Os botões "Imprimir o orçamento" e "Compartilhar o orçamento" são botões de texto azuis, como os
   botões de texto da home, cada um com o ícone, a 8 pixels um do outro. O compartilhar e a imagem do
   projeto inteiro, de 48 pixels, só aparecem com ?pendentes=todos (P12 e P14). */
.servico-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.imprimir, .compartilhar { flex: none; text-decoration: none; }
.projeto-imagem { align-self: center; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: var(--muted); color: var(--sb-ds-neutral-600); }

/* A linha do tempo, pela proposta C do estudo do corte, do preço e da linha do tempo, desde o "aplicar" de 06/10:
   os 6 círculos têm 24 pixels e ficam ligados por uma linha de 2 pixels, no meio do círculo, que começa 8 pixels
   depois de um círculo e termina 8 antes do outro. A etapa feita tem o círculo cinza, com o sinal de feito, e a
   linha até a próxima também cinza; a etapa atual tem o círculo azul e o nome em azul (5,17:1), em negrito; e a
   etapa que ainda vem tem o círculo branco, com a borda cinza. Nos momentos de atenção, o círculo fica amarelo. O
   nome fica 8 pixels abaixo do círculo, e a data da etapa feita, em cinza, logo embaixo do nome. A linha fica 16
   pixels abaixo do título, como as etapas de antes. */
.c-linha { position: relative; margin-top: 16px; }
.c-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.c-etapa { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-right: 16px; font-size: 14px; line-height: 20px; }
.c-marca { display: flex; flex-direction: column; align-items: flex-start; }
/* Desde a 5ª PR do "aplicar" da tela 3, de 20/10, a marca de cada etapa é um quadrado de 24 pixels com 6 pixels de canto, e não
   mais um círculo, com as mesmas cores e o mesmo sinal de feito, pela P2 da folha da proposta do projeto em 3D, decidida por Aline
   Miyaki em 18/10, e pela etapa 24 do plano; a classe continua com o nome "c-circulo", para os comandos de conferência e o balão
   da etapa atual, que põe a ponta no meio da marca, continuarem iguais. Os números da lista "Como pagar" continuam em círculos,
   pela regra 47. */
.c-circulo { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--sb-ds-neutral-400); background: var(--background); color: var(--muted-foreground); font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.c-etapa.feita .c-circulo { border-color: var(--sb-ds-neutral-500); background: var(--sb-ds-neutral-500); color: var(--background); }
.c-etapa.atual .c-circulo { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
/* Desde o "aplicar" da Página do projeto, de 15/10, a etapa atual dos momentos de atenção leva a classe "c-atencao", e não
   "atencao", que pinta de amarelo, com !important, todo elemento com esse nome, pela etapa 5 do plano. */
.c-etapa.atual.c-atencao .c-circulo { border-color: var(--sb-ds-accent-700); background: var(--sb-ds-accent-300); color: var(--sb-ds-accent-950); }
.c-etapa:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 32px; right: 8px; height: 2px; background: var(--border); } /* 11 pixels: a linha de 2 fica no meio do círculo de 24 */
.c-etapa.seg-feito::after { background: var(--sb-ds-neutral-500); }
.c-nome { margin-top: 8px; color: var(--muted-foreground); }
.c-etapa.feita .c-nome { color: var(--sb-ds-neutral-600); }
.c-etapa.atual .c-nome { color: var(--primary); font-weight: 600; }
.c-etapa.atual.c-atencao .c-nome { color: var(--foreground); }
.c-data { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
/* A etapa atual é um botão, com o círculo e o nome: com o ponteiro em cima, o nome ganha o sublinhado, e o balão
   abre como a explicação do "i", pela regra 85; o clique fecha o balão e rola a página até o lugar da ação. */
.c-gatilho { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.c-gatilho:hover .c-nome, .c-gatilho:focus-visible .c-nome { text-decoration: underline; text-underline-offset: 3px; }
.c-gatilho:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
/* O balão da etapa atual é uma explicação, com a letra de todas as explicações, pela regra 79: o nome da etapa em
   preto, como o título das explicações longas, e a frase em cinza, com 14 pixels. Ele tem 320 pixels de largura e
   a ponta no meio do círculo da etapa atual, que o código mede; sem espaço embaixo da etapa, ele abre em cima, e a
   ponta fica embaixo. */
.balao-da-etapa { position: relative; width: 320px; max-width: 320px !important; padding: 16px !important; text-align: left; text-wrap: wrap !important; }
.balao-da-etapa::before { content: ""; position: absolute; top: -9px; left: var(--ponta, 16px); width: 16px; height: 16px; box-sizing: border-box; border-left: 1px solid var(--sb-ds-neutral-400); border-top: 1px solid var(--sb-ds-neutral-400); background: var(--popover); rotate: 45deg; border-radius: 2px 0 0 0; } /* -9 pixels: o meio da ponta fica na borda de 1 pixel do balão, e a ponta cobre a borda embaixo dela; 2 pixels: a ponta não fica pontuda */
.balao-da-etapa[data-side="top"]::before { top: auto; bottom: -9px; border: 0; border-right: 1px solid var(--sb-ds-neutral-400); border-bottom: 1px solid var(--sb-ds-neutral-400); border-radius: 0 0 2px 0; } /* -9 pixels: o meio da ponta fica na borda de 1 pixel do balão, como embaixo */
/* Desde o "aplicar" dos 6 pontos, de 30/10, pela SE5: à direita da etapa, a ponta fica no lado esquerdo da caixa, na altura do meio
   do círculo, e "--ponta" passa a ser a distância do começo da ponta até a borda de cima da caixa. */
.balao-da-etapa[data-side="right"]::before { top: var(--ponta, 16px); left: -9px; border: 0; border-left: 1px solid var(--sb-ds-neutral-400); border-bottom: 1px solid var(--sb-ds-neutral-400); border-radius: 0 0 0 2px; } /* -9 pixels: o meio da ponta fica na borda de 1 pixel do balão, como embaixo */
/* Quando a ponta encosta num canto da caixa, como na etapa 1, esse canto fica reto, e a ponta continua no meio do
   círculo da etapa: com o canto arredondado, o lado da ponta terminava no ar, e o contorno tinha uma falha, que a borda
   mais escura de 07/10 deixou visível. A ponta, girada, tem 11,3 pixels de cada lado do meio, e o meio fica a
   var(--ponta) + 9 pixels da borda esquerda da caixa, de 320 pixels: o raio do canto de cada lado vai de 0 a 8 pixels,
   pela distância entre a ponta e esse canto. A escolha de Aline Miyaki, em 07/10: "prefiro canto reto que nem fez nos
   outros tooltips, assim nao tem erro". */
.balao-da-etapa:not([data-side="top"]):not([data-side="right"]) { border-top-left-radius: clamp(0px, calc(var(--ponta, 16px) - 3px), 8px) !important; border-top-right-radius: clamp(0px, calc(299px - var(--ponta, 16px)), 8px) !important; }
/* À direita, desde a SE5, o canto de cima, à esquerda, fica reto quando a ponta encosta nele, como embaixo e em cima, pela regra 91;
   o canto de baixo, à esquerda, fica com os 8 pixels, porque a ponta fica sempre a mais de 8 pixels dele, pela conta de lugarDoBalao. */
.balao-da-etapa[data-side="right"] { border-top-left-radius: clamp(0px, calc(var(--ponta, 16px) - 3px), 8px) !important; }
.balao-da-etapa[data-side="top"] { border-bottom-left-radius: clamp(0px, calc(var(--ponta, 16px) - 3px), 8px) !important; border-bottom-right-radius: clamp(0px, calc(299px - var(--ponta, 16px)), 8px) !important; }
.c-balao-titulo { display: flex; align-items: center; gap: 8px; color: var(--foreground); font-weight: 600; }
.c-balao-titulo svg { color: var(--sb-ds-accent-700); } /* o ícone de atenção, com 4,92:1 sobre o branco */
.c-balao-frase { display: block; margin-top: 4px; } /* 4 pixels: o nome e a frase ficam juntos */
/* Na folha impressa, que não tem ponteiro, a frase da etapa atual fica embaixo da linha. */
.etapa-agora { margin: 8px 0 0 0; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }

/* As partes da página. */
/* Desde a etapa 4 da PR 1 do super plano, pela 11B da folha 2, 32 pixels do topo da página ao corpo, em todas as telas, o espaço
   entre blocos da regra 45; até a etapa 4, a Página do projeto e o Meu perfil tinham 48. */
.servico-corpo { margin: 32px 16px 0 16px; }
.parte { scroll-margin-top: 81px; }
.parte + .parte { margin-top: 48px; }
.titulo-da-parte { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; }

/* O quadrado da textura de 1 cor, com 16 pixels, como os ícones, e a borda por dentro, para a cor
   clara aparecer sobre o branco. A borda é a cor do texto do design system com 12% de opacidade: some
   na cor escura e aparece na clara. A imagem do grupo e a do módulo usam a mesma borda. */
.amostra { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent); } /* 4 pixels de canto, pela SP46: o canto da amostra é 1/4 do lado, até 8 pixels, e 1/4 de 16 é 4, que o design system não tem */
/* Desde a etapa 4 da PR 1 do super plano, pela decisão 10 da folha 2, a amostra mostra a foto da chapa (componentes/modulo.js,
   Amostra), como .projetar-amostra, na tela 3: a foto cobre o quadrado, e a borda por dentro passa para cima dela. */
.amostra { position: relative; overflow: hidden; }
.amostra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amostra::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent); pointer-events: none; }

/* O bloco cinza é o Card do design system, com o fundo cinza claro e sem a borda e a sombra: o
   resumo do preço. O texto começa a 16 pixels da borda do bloco, no mesmo ponto do número das
   etapas. No fundo cinza, o texto secundário usa o cinza mais escuro do design system (7,17:1),
   porque o cinza do texto secundário dá 4,35:1, abaixo de 4,5:1. */
.bloco-cinza { margin-top: 16px; padding: 16px; gap: 0; border: 0; box-shadow: none; background: var(--muted); }
.bloco-cinza p { margin: 0; }

/* O resumo do preço, na versão B aprovada em 03/10. O bloco tem 24 pixels de espaço interno, e não os
   16 dos outros blocos cinzas, porque é o bloco principal da página, pelo espaçamento que Aline Miyaki
   pediu na simulação. Por dentro:
   - o rótulo, o valor, a validade e a linha curta ficam a 4 pixels um do outro, a exceção que junta o
     grupo do preço;
   - 32 pixels entre esse grupo e a barra, e 16 entre a barra e a legenda, com a marca do grupo em
     destaque no meio: a marca fica a 4 pixels da barra, e a legenda, a 8 pixels da marca. Até a marca
     entrar, em 03/10, a legenda ficava a 12 pixels da barra.
   Desde o refino de 03/10, o valor tem 40 pixels de letra, e não 32, e o grupo do preço fica a 32
   pixels da barra, e não a 24: Aline Miyaki pediu o total mais em evidência, porque ele disputava a
   atenção com a barra. */
.resumo-do-preco { padding: 24px; }
.resumo-rotulo { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-600); }
.resumo-total { margin-top: 4px !important; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.025em; color: var(--foreground); font-variant-numeric: tabular-nums; } /* 4 pixels: o total fica junto do rótulo */
/* Desde a PR 5 do super plano, embaixo do total, no lugar da validade, a frase do momento do preço (telas/pagina-do-servico.js,
   FraseDoTotal): o TI2, o TI3, a frase do erro da lista das peças e a linha cinza do estimado, no cinza 700 do design system,
   com 9,51:1 contra o cinza do bloco, pela regra 132, e com até 37em por linha, pela regra 8. */
.resumo-frase { margin-top: 4px !important; max-width: 37em; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-700); } /* 4 pixels: a frase fica junto do total, como a validade de antes */
.resumo-frase + .resumo-frase { margin-top: 8px !important; }
.resumo-frase .botao-informacao { margin: -2px 0 -2px 0; vertical-align: middle; } /* -2 pixels: o "i" de 24 cabe na linha de 20 */
/* A espera do cálculo do preço exato, pela PC3: a frase, em preto e no peso 500, como na moldura da folha 5, a frase da ajuda e a
   barra de 8 pixels, que anda de 1 em 1 segundo; quem pediu menos movimento ao sistema vê a barra andar sem animação. Desde a etapa
   4 do "aplicar" das microinterações, de 01/11, pela regra 149, a parte azul tem a largura inteira da barra e anda pela escala na
   horizontal, a partir da esquerda (telas/pagina-do-servico.js, EsperaDoPreco), e não pela largura, que deixa a página mais lenta;
   o tempo de 1 segundo, igual ao intervalo entre 2 passos, fica, porque a barra acompanha o relógio e não abre nem fecha nada. */
.espera-do-preco { margin-top: 4px; max-width: 37em; } /* 4 pixels: a espera fica junto do total, como a frase do momento do preço */
.espera-frases:focus { outline: none; }
.espera-frase { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--foreground); }
.espera-ajuda { margin-top: 4px !important; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-700); } /* 4 pixels: a frase da ajuda fica junto da frase da espera */
.espera-barra { margin-top: 8px; height: 8px; border-radius: 9999px; background: var(--sb-ds-neutral-300); overflow: hidden; }
.espera-barra > span { display: block; width: 100%; height: 100%; border-radius: 9999px; background: var(--primary); transform-origin: left center; transition: transform 1s linear; }
@media (prefers-reduced-motion: reduce) { .espera-barra > span { transition: none; } }
/* O valor da linha "Diferença do cálculo exato", com o sinal antes do "R$", fora da coluna dos valores, para o "R$" ficar na mesma
   vertical dos outros valores, pelas regras 80 e 90. */
.com-sinal { position: relative; }
.sinal-da-diferenca { position: absolute; right: 100%; white-space: pre; }
.da-diferenca .linha-nome, .modulo-titulo > .modulo-nome-da-diferenca { display: inline-flex; align-items: center; gap: 8px; }
.da-diferenca .linha-nome { display: flex; }
.da-diferenca > .modulo-linha:hover { --fundo-da-linha: var(--background); } /* a linha não abre, e por isso não muda com o ponteiro em cima, pela regra 81 */
.detalhe-linha-do-preco { margin: 0; max-width: 37em; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-700); }
.resumo-do-preco .aviso { margin-top: 8px; }
/* A retirada na loja, com o ícone, embaixo da validade, desde o estudo aprovado em 03/10. Até então,
   a linha curta dizia o transporte à parte e o prazo, que passaram para o ícone de informação. */
.resumo-retirada { margin-top: 4px !important; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-600); } /* 4 pixels: a linha da retirada fica junto da linha de cima */
/* O texto do ícone de informação só aparece na impressão, no fim do grupo do preço. */
.so-impressao { display: none; }
.informacao-impressa { margin-top: 16px; }
.informacao-impressa p { font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-600); }
.informacao-impressa .informacao-titulo { color: var(--foreground); font-weight: 500; }
.informacao-impressa p + .informacao-titulo { margin-top: 8px; }
/* O ícone de informação é um botão de 24 pixels, em azul, porque é clicável. */
.botao-informacao { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 9999px; background: none; color: var(--primary); cursor: pointer; }
.botao-informacao:hover { background: var(--sb-ds-brand-200); } /* o azul um tom mais forte, pela regra 81: o azul claro tinha 1,05:1 contra o cinza do bloco */
.botao-informacao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* O número do WhatsApp e o ícone de editar formam 1 botão de texto, no 1º passo do pedido enviado: azul,
   como os outros botões de texto da página, e sem borda nem fundo, para não apertar a frase de baixo nem
   colar o ponto final. O clique abre a janela do número. Pedido de Aline Miyaki em 05/10; a 1ª montagem,
   com borda, ocupava a altura inteira da linha, e ela achou o erro de espaço. */
.numero-editavel { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--primary); font: inherit; font-weight: 500; cursor: pointer; vertical-align: top; } /* 4 pixels: o lápis fica junto do número */
.numero-editavel:hover { text-decoration: underline; text-underline-offset: 4px; }
.numero-editavel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.numero-editavel svg { width: 16px; height: 16px; }
/* O texto do ícone: o título de cada assunto em preto e o texto em cinza, com 16 pixels entre os 3
   assuntos, numa caixa de 360 pixels de largura, com 16 de espaço interno. É a explicação do design
   system, com a aparência branca da explicação da home, que abre com o ponteiro em cima. */
.informacao-do-total { width: 360px; max-width: 360px !important; padding: 16px !important; text-align: left; }
.informacao-do-total p { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
/* A explicação do design system equilibra o tamanho das linhas, e o texto acabava antes do fim da caixa,
   como no prazo, achado de Aline Miyaki em 04/10. Aqui as linhas ocupam a largura da caixa. */
.informacao-do-total, .informacao-do-total p, .descricao-da-mudanca { text-wrap: wrap !important; }
.informacao-do-total .informacao-titulo { color: var(--foreground); font-weight: 500; }
.informacao-do-total p + .informacao-titulo { margin-top: 16px; }
/* A barra de 100%: 16 pixels de altura, 2 pixels entre os grupos, a exceção que separa as cores sem
   afastar os grupos, e cada parte com a largura da porcentagem dela. O contorno de 1 pixel marca onde
   as partes claras começam e terminam, porque os 2 tons claros têm pouco contraste com o fundo. Ele
   fica no cinza médio do design system (4,35:1 contra o fundo cinza claro, acima dos 3:1 que a borda
   de uma parte de gráfico pede), e não no azul quase preto, a pedido de Aline Miyaki em 03/10. */
.barra-do-total { margin-top: 32px; display: flex; gap: 2px; height: 16px; border-radius: 8px; overflow: hidden; outline: 1px solid var(--sb-ds-neutral-500); outline-offset: 0; } /* 2 pixels: separa as cores sem afastar os grupos */
.barra-parte { min-width: 4px; flex-basis: 0; border: 0; padding: 0; cursor: pointer; } /* 4 pixels: a menor parte da barra continua à vista */
/* A marca do grupo em destaque: uma linha no azul principal embaixo da parte do grupo com o ponteiro,
   o foco ou o clique, pedida por Aline Miyaki em 03/10. Com os tons claros, a parte em destaque ficava
   mais clara que as partes apagadas, e o destaque não aparecia; a marca não depende do tom da parte.
   A linha de marcas tem a mesma largura mínima e os mesmos 2 pixels entre as partes que a barra, para
   cada marca ficar embaixo da sua parte sem medir a tela, e fica no lugar mesmo sem destaque, para a
   legenda não andar. Os 4 pixels de altura e os 4 de distância da barra são exceção à grade de 8: a
   marca pertence à parte de cima e fica mais perto da barra (4) do que da legenda (8). */
.marcas-da-barra { margin-top: 4px; display: flex; gap: 2px; height: 4px; } /* 4 pixels: a marca fica mais perto da barra que da legenda; 2 pixels: os mesmos da barra, entre as partes */
.marca-da-parte { min-width: 4px; flex-basis: 0; border-radius: 2px; } /* 4 pixels: a mesma largura mínima da parte da barra, para cada marca ficar embaixo da sua parte */
.marca-da-parte.visivel { background: var(--primary); }
/* A legenda: o ponto da cor, o nome em azul, porque é clicável, e o valor e a porcentagem em cinza (P1). */
/* Desde o "aplicar" da Página do projeto, de 15/10, pela decisão 13, pela exceção da regra 123 e pela etapa 6 do plano: cada
   grupo é um botão de 36 pixels de altura, com 12 pixels de espaço dos lados e a borda de 2 pixels transparente; o grupo
   escolhido ganha a borda no azul principal, o fundo azul claro e o nome em negrito, sem o sinal de feito; cada botão já
   tem a largura do nome em negrito, pelo texto escondido de "data-texto", para nenhum botão andar; o ponteiro em cima dá o
   fundo azul claro, no lugar do sublinhado, pela regra 81; e o pressionado, o brand-200, pela regra 119. A legenda passa
   14 pixels para fora dos 2 lados, a borda e o espaço do botão, para o ponto do 1º grupo continuar no começo da barra, e
   fica colada nas marcas da barra, porque o botão já tem 8 pixels em cima do texto. */
.legenda { margin: 0 -14px; display: flex; flex-wrap: wrap; gap: 0 8px; } /* -14 pixels: a borda de 2 e o espaço de 12 do botão, para o ponto do 1º grupo ficar no começo da barra */
.legenda-item { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 36px; padding: 0 12px; border: 2px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: 14px; line-height: 20px; cursor: pointer; } /* 36 pixels: a altura do botão do design system; 12 pixels: com a borda de 2, dão os 14 que a legenda passa para fora */
.legenda-item:hover { background: var(--secondary); }
.legenda-item:active { background: var(--sb-ds-brand-200); }
.legenda-item[aria-pressed="true"] { border-color: var(--primary); background: var(--secondary); }
.legenda-item[aria-pressed="true"] .legenda-nome { font-weight: 600; }
.legenda-nome { display: inline-grid; }
.legenda-nome::after { content: attr(data-texto); font-weight: 600; visibility: hidden; height: 0; overflow: hidden; } /* a largura do nome em negrito, reservada */
.legenda-ponto { width: 8px; height: 8px; border-radius: 9999px; }
/* O ponto dos tons claros ganha o contorno cinza, como a barra, para aparecer sobre o fundo cinza claro. */
.legenda-ponto.claro { box-shadow: inset 0 0 0 1px var(--sb-ds-neutral-500); }
.legenda-nome { color: var(--primary); font-weight: 500; }
.legenda-numeros, .legenda-parte { color: var(--sb-ds-neutral-600); font-variant-numeric: tabular-nums; }
.legenda-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Com o ponteiro ou o foco num grupo, os outros grupos ficam mais claros. O grupo escolhido com o
   clique continua assim até o 2º clique; até 15/10, o nome dele ficava sublinhado. */
.barra-parte.apagado, .legenda-item.apagado { opacity: 0.4; }
/* Desde a etapa 4 do "aplicar" das microinterações, de 01/11, pela MI13 e pela regra 149: os outros grupos ficam mais claros em 0,1
   segundo e voltam no mesmo tempo, com o ponteiro, com o foco do teclado na legenda (telas/pagina-do-servico.js, onFocus) e com o
   clique, com a curva de quem fica na tela e muda; os 2 continuam com a mudança de cor de 0,1 segundo do fundo, do texto e da
   borda, do começo deste arquivo. Para quem pediu menos movimento, fica igual, porque a transparência não muda o tamanho nem o
   lugar de nada. Até essa etapa, os grupos mudavam na hora. */
.barra-parte, .legenda-item { transition-property: background-color, color, border-color, opacity; transition-duration: var(--tempo-da-cor); transition-timing-function: var(--curva-de-mudar); }

/* Os avisos são o Alert do design system, com as cores dos botões de status da home: o amarelo do que pede atenção e o vermelho
   do erro (4,63:1). O Alert do design system tem borda cinza e texto cinza, e aqui o texto fica na cor do aviso.
   Desde a etapa 4 da PR 1 do super plano, pela decisão 8 da folha 2, todo aviso amarelo tem o jeito do aviso das máquinas da tela 3
   (.projetar-aviso-das-maquinas): o fundo accent-100, a borda de 1 pixel no accent-700, pela regra 109, o texto preto, com 18,42:1, e
   o ícone no accent-800, com 6,37:1 contra o fundo. Até a etapa 4, o fundo era o accent-300, e o texto e o ícone, o accent-950. O selo
   amarelo, que é pequeno, continua com o fundo accent-300 (.selo-atencao). */
.aviso { border: 0; }
.aviso [data-slot="alert-description"] { color: inherit; }
.aviso-atencao { background: var(--sb-ds-accent-100); color: var(--foreground); }
.aviso-atencao > svg, .aviso-do-painel-linha > svg { color: var(--sb-ds-accent-800); }
/* Desde a 5ª PR do "aplicar" da tela 3, de 20/10, o aviso amarelo da Página do projeto tem a borda de 1 pixel no accent-700 que a
   regra 109 pede: a regra .aviso, acima, tirava a largura da borda do Alert, e a regra do fim deste arquivo só dava a cor. O espaço
   de dentro perde 1 pixel, e o aviso fica do mesmo tamanho: 11 e 15 pixels, os 12 e os 16 do Alert, menos a borda. Até a etapa 4 da
   PR 1 do super plano, a borda valia só dentro da Página do projeto, a classe servico-corpo, e o aviso do preço do detalhe, que fica
   numa janela, fora dela, ficava sem a borda; desde a etapa 4, a borda vale em todo aviso amarelo, pela regra 109 e pela decisão 8 da
   folha 2, também nos estudos que carregam este arquivo. O aviso amarelo do painel do total, na tela 2, tem a borda e o espaço dele,
   pela M4 (.aviso-do-painel). */
.aviso.aviso-atencao { border: 1px solid var(--sb-ds-accent-700); padding: 11px 15px; } /* 11 e 15 pixels: os 12 e os 16 do Alert, menos a borda */
.aviso-erro { background: var(--destructive); color: var(--primary-foreground); }

/* A linha de cima da lista dos módulos, desde o "aplicar" de 05/10, no lugar das abas, que saíram por decisão de
   Aline Miyaki: o número de módulos à esquerda, em cinza, e, à direita, "Visualizar projeto" e "Corrigir o
   projeto", azuis com borda, com a altura do botão do design system, 36 pixels. A linha fica 24 pixels abaixo do
   resumo e a 16 da lista, os espaços das abas. O "Corrigir o projeto" mostra o que muda na explicação branca da
   regra 32, com no máximo 264 pixels de largura. */
.lista-topo { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Desde o "aplicar" de 06/10, o número de módulos é um título, com a letra dos títulos das partes, como "O envio do
   pedido à MadMais": 20 pixels, em preto e em negrito (parte 5 do estudo). */
.lista-titulo { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; color: var(--foreground); }
.botoes-de-mudanca { display: flex; align-items: center; gap: 8px; }
.botao-de-mudanca { text-decoration: none; }
.descricao-da-mudanca { max-width: 264px !important; }

/* A lista dos módulos: o lugar da imagem, o nome, o selo, as medidas, as etiquetas, o valor e a seta. A linha
   inteira recebe o clique: o link do nome cobre a linha por cima, e o selo, a marca do preço e o botão das
   etiquetas ficam acima dele. O fundo passa 8 pixels para fora da borda do conteúdo, dos 2 lados, para o texto
   continuar alinhado com o título da parte. Desde o "aplicar" de 05/10, o valor fica numa coluna de 112 pixels,
   alinhado à esquerda, e o "R$" de cada módulo fica na mesma vertical do "R$" do total, pela regra 80. Desde o
   "aplicar" de 06/10, com o ponteiro em cima, a linha fica azul claro, e o nome fica azul, sem o sublinhado, como o
   topo do cartão do detalhe, a pedido de Aline Miyaki: "do detlahemtno fica em azul, gosto mais, padroniza isso na
   tela 4 tambem". O ambiente passa ao cinza escuro, porque o cinza do design system tem 4,13:1 sobre o azul claro, e
   o cinza escuro, 6,80:1. */
.linhas { list-style: none; margin: 16px 0 0 0; padding: 0; border-top: 1px solid var(--border); }
.linhas > li { border-bottom: 1px solid var(--border); }
.linha, .linha-do-total { display: grid; column-gap: 16px; align-items: center; margin: 0 -8px; padding: 16px 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.de-modulo { grid-template-columns: 64px minmax(0, 1fr) 112px 16px; }
.linha.com-detalhe { position: relative; cursor: pointer; }
.linha.com-detalhe:hover { background: var(--secondary); }
.linha.com-detalhe:hover .linha-nome { color: var(--primary); }
.linha.com-detalhe:hover .linha-ambiente { color: var(--sb-ds-neutral-600); }
.linha-link { color: inherit; text-decoration: none; outline: none; }
.linha-link::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.linha-link:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }
.linha-imagem { display: flex; }
.linha-texto { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.modulo-titulo { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; } /* 4 pixels: o selo que quebra fica junto do nome */
.linha-nome { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--foreground); }
/* O número do módulo, "01.", antes do nome, em cinza escuro, como no detalhe, desde o "aplicar" de 07/10 (decisão 13). */
.linha-numero { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--sb-ds-neutral-600); font-variant-numeric: tabular-nums; }
.linha-ambiente { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--muted-foreground); }
.linha-resumo { font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
/* As medidas ficam em preto, com os números em negrito, porque são o que o Hobbysta confere antes de enviar. */
.linha-medidas { font-size: 14px; line-height: 20px; color: var(--foreground); font-variant-numeric: tabular-nums; }
.linha-medidas b { font-weight: 600; }
.linha-valor { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left; }
.linha-seta { display: flex; color: var(--primary); }
/* Desde o "aplicar" dos ajustes da tela 2, de 15/10, na linha de cada módulo da lista: o valor e a seta ficam na linha do
   nome, e a seta, 4 pixels abaixo do alto do nome, no meio da linha de 24, pela D75, como Duplicar e Tirar da tela 2; a
   linha do total e as linhas de "Fora dos módulos" continuam no meio, porque têm 1 ou 2 linhas de texto. O nome sai numa
   linha, cortado com reticências, com o nome inteiro na explicação, pela regra 31 e pela mudança 13 do plano, e fica por
   cima do link esticado da linha, para só o ponteiro em cima do nome abrir a explicação. Embaixo do nome, o nome da
   biblioteca, em cinza, quando a pessoa deu um nome ao módulo, pela D85 e pela regra 52. */
.linha.de-modulo.com-detalhe .linha-valor { align-self: start; }
.linha.de-modulo.com-detalhe .linha-seta { align-self: start; margin-top: 4px; } /* 4 pixels: a seta de 16 fica no meio da linha do nome, de 24 */
.de-modulo .modulo-titulo { max-width: 100%; }
.de-modulo .modulo-titulo > .linha-link { min-width: 0; max-width: 100%; }
.de-modulo .modulo-titulo .linha-nome { position: relative; z-index: 1; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-biblioteca { font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-600); }
/* Desde o "aplicar" da Página do projeto, de 15/10, pela decisão 3 e pela etapa 6 do plano, a linha de cada módulo tem os
   espaços da linha da tela 2: 24 pixels em cima e embaixo; o selo sempre na linha do nome, que corta com reticências antes
   de o selo quebrar a linha; as medidas a 8 pixels do nome, ou do nome da biblioteca, colado embaixo dele; e a borda da 1ª
   etiqueta 1 pixel depois da caixa do texto, no traço do L de "Largura", como .linha-da-tela2 .etiquetas. A linha do
   total e as de "Fora dos módulos" continuam com 16 pixels, porque não são módulos. */
.linhas > li.linha.de-modulo.com-detalhe { padding-top: 24px; padding-bottom: 24px; }
.de-modulo.com-detalhe .modulo-titulo { flex-wrap: nowrap; }
.de-modulo.com-detalhe .modulo-titulo > .selo-clicavel { flex: none; }
.de-modulo.com-detalhe .linha-medidas { margin-top: 8px; }
.de-modulo.com-detalhe .etiquetas { margin-left: 1px; } /* 1 pixel: a borda da 1ª etiqueta no traço do L de "Largura", como diz o comentário acima */
/* O nome do projeto na tabela das medidas da declaração tem, embaixo, o nome do módulo na biblioteca, em cinza, pela regra
   130 e pela escolha 23 do plano, como a linha da lista dos módulos. */
.tabela-das-medidas .nome-da-biblioteca { display: block; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--sb-ds-neutral-600); }
.linha-do-total { padding-top: 16px; }
.linha-total-rotulo { grid-column: 2; font-size: 16px; line-height: 24px; font-weight: 600; }
.linha-do-total .linha-valor { grid-column: 3; font-weight: 600; }
.linhas > li.linha-do-total { border-bottom: 0; }
/* A lista dos módulos separada por ambiente, desde a 5ª PR do "aplicar" da tela 3, de 20/10, pela C4 da folha da proposta do
   projeto em 3D, parte 9, e pela etapa 23 do plano. Com 2 ambientes ou mais, cada ambiente é uma linha da lista, com a foto do 3D
   de 96 por 64 pixels, o nome, em negrito, e o número de módulos, em cinza, em 14 pixels, o valor e a seta, como a folha mede; a
   linha tem 16 pixels em cima e embaixo, e a foto começa onde começam a imagem de cada módulo e o título da lista, pela regra 47.
   Com o ponteiro em cima, a linha fica azul claro e o nome fica azul, como a linha do módulo, pela regra 81. Aberta, a linha
   mostra embaixo as linhas dos módulos do ambiente, com a borda de cima, como na folha, e sem a borda de baixo da última, porque
   a linha do ambiente já tem a dela; a lista dos ambientes não tem a borda de cima, como na folha. Com 1 ambiente, a foto de 160
   por 96 pixels fica no alto da lista, a 16 pixels do título e da lista, com o nome do ambiente 16 pixels depois dela. */
.linhas.lista-dos-ambientes { border-top: 0; }
.de-ambiente { grid-template-columns: 96px minmax(0, 1fr) 112px 16px; }
/* Desde a decisão de Aline Miyaki de 20/10, pela regra 84, o selo do recorte à mão de cada módulo do ambiente ficava depois do
   nome, a 8 pixels, como na linha do módulo; o selo saiu no "aplicar" dos 6 pontos, de 30/10, pela SE4. */
.ambiente-titulo { display: flex; align-items: center; column-gap: 8px; max-width: 100%; }
/* Desde a PR 4 do super plano, pela decisão 26 da folha 4, o nome e o valor do ambiente ficam em 16 pixels, como a linha da
   embalagem; o valor fica com a letra do valor da embalagem, que é do mesmo nível, pela regra 88, e o número de módulos continua
   em 14, o complemento embaixo do nome, pela regra 52. */
.ambiente-nome { display: block; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; line-height: 24px; font-weight: 600; text-align: left; color: var(--foreground); cursor: pointer; overflow-wrap: anywhere; }
.linha.de-ambiente:hover .ambiente-nome { color: var(--primary); }
.ambiente-quantos { font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-700); }
/* Desde a PR 4 do super plano, com 2 ambientes ou mais, a linha de cada custo que não é de um módulo e a linha do total têm a
   coluna da foto do ambiente, de 96 pixels, para o texto delas começar no ponto do texto dos ambientes, pelo achado 9 da 2ª passada
   e pelas regras 47 e 89: as 3 linhas são do mesmo nível. Até a PR 4, o texto delas começava 32 pixels antes. */
.lista-dos-ambientes > .linha.de-modulo, .lista-dos-ambientes > .linha-do-total { grid-template-columns: 96px minmax(0, 1fr) 112px 16px; }
/* Desde a PR 4 do super plano, o pressionado da linha do ambiente e da linha do módulo, enquanto a pessoa segura o clique, fica 1
   tom acima do ponteiro em cima, pela regra 119 e pelo achado 13 da 2ª passada: o brand-200, com o nome no brand-800 e o cinza no
   cinza 700, para o contraste continuar acima de 4,5:1, pela regra 132. */
.linha.com-detalhe:has(.linha-link:active) { background: var(--sb-ds-brand-200); }
.linha.com-detalhe:has(.linha-link:active) .linha-nome, .linha.de-ambiente:has(.linha-link:active) .ambiente-nome { color: var(--sb-ds-brand-800); }
.linha.com-detalhe:has(.linha-link:active) :is(.linha-numero, .linha-biblioteca, .ambiente-quantos) { color: var(--sb-ds-neutral-700); }
/* Desde a PR 4 do super plano, com o ponteiro em cima de um selo, da marca do preço ou de "+1 material", dentro da linha, a linha
   fica como sem o ponteiro, e só o botão muda, porque o clique vai para o botão, e não para a linha, pela regra 81 e pelo achado 14
   da 2ª passada, como a linha do resumo da tela 2 (.linha.linha-da-tela2). */
.linha.com-detalhe:has(.selo-clicavel:hover, .marca-do-preco:hover, .mais-materiais:hover) { background: transparent; }
.linha.com-detalhe:has(.selo-clicavel:hover, .marca-do-preco:hover, .mais-materiais:hover) .linha-nome,
.linha.de-ambiente:has(.selo-clicavel:hover, .marca-do-preco:hover, .mais-materiais:hover) .ambiente-nome { color: var(--foreground); }
/* A seta da linha de cada ambiente gira em 0,25 segundo ao abrir e em 0,2 ao fechar, com a curva de quem fica na tela e muda, e,
   para quem pediu menos movimento, muda sem girar, pela MI2 e pela regra 149, desde a etapa 2 do "aplicar" das microinterações; até
   essa etapa, girava em 0,2 segundo nos 2 sentidos. A transição que vale é a do estado de chegada: a do aberto, ao abrir. */
.seta-que-abre svg { transition: rotate var(--tempo-do-medio-ao-fechar) var(--curva-de-mudar); }
.ambiente.aberto > .de-ambiente .seta-que-abre svg { rotate: 180deg; transition-duration: var(--tempo-do-medio-ao-abrir); }
@media (prefers-reduced-motion: reduce) { .seta-que-abre svg { transition: none; } }
/* Desde a PR 4 do super plano, os módulos do ambiente aberto ficam 1 nível para dentro: a lista começa no ponto do texto do
   ambiente, 112 pixels depois da borda, os 96 da foto e os 16 do espaço, e a foto de cada módulo fica nesse ponto, pela decisão 26
   da folha 4 e pela regra 89; o fundo do ponteiro em cima começa 8 pixels antes, como nas outras linhas. O valor continua na coluna
   dos outros valores, pela regra 80, porque a lista termina na mesma borda direita. Os módulos do ambiente fechado ficam na página,
   escondidos, para a folha impressa, pela P1, com a classe .modulos-fechados, e não com o atributo hidden, porque o design system
   esconde o hidden com !important numa camada, que o papel não consegue mostrar de novo. */
.linhas.modulos-do-ambiente { margin-top: 0; margin-left: 112px; }
.linhas.modulos-do-ambiente.modulos-fechados { display: none; }
.linhas.modulos-do-ambiente > li:last-child { border-bottom: 0; }
/* A marca do preço em palavras, que fica só na folha impressa, pela P2, e as etiquetas do papel, pela SP127 (no fim deste arquivo,
   @media print). O selo com o nome, que também ficava só no papel, saiu com o selo "Recorte à mão na montagem", pela SE4. */
.marca-em-palavras, .etiquetas-no-papel { display: none; }
/* A página que carrega, desde a PR 4 do super plano, pela SPT101: as linhas cinza no lugar da linha do tempo, do resumo do preço e de 2
   linhas de módulo, com as alturas de cada uma na página pronta, a 16 pixels uma da outra. */
.carregando-pagina .esqueletos .esqueleto.esqueleto-linha-do-tempo { width: auto; height: 56px; border-radius: 8px; }
.carregando-pagina .esqueletos .esqueleto.esqueleto-resumo-do-preco { width: auto; height: 264px; border-radius: 12px; }
.carregando-pagina .esqueletos .esqueleto.esqueleto-linha-de-modulo { width: auto; height: 112px; border-radius: 8px; }
.ambiente-unico { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.ambiente-unico-nome { min-width: 0; margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere; }
/* A foto do 3D de cada ambiente (componentes/foto-do-ambiente.js): 8 pixels de canto, o fundo cinza 50 do 3D e a borda de 1
   pixel por dentro, como a folha desenha; enquanto a foto é feita, a linha cinza do design system, e, quando a foto falha, o
   ícone de imagem em cinza, num fundo branco, como o lugar da imagem de cada módulo.
   Desde o "aplicar" da escolha do módulo, de 30/10, a foto do 3D de cada módulo (componentes/foto-do-modulo.js, pela EM11) tem o
   mesmo desenho, com a classe .foto-pelo-3d, porque .foto-do-modulo é a foto grande da página do módulo; quando a foto falha, ela
   mostra a foto da biblioteca, inteira, no fundo cinza 50, como o quadro "Os ambientes do projeto" mostrava, ou, sem a foto da
   biblioteca, o ícone de imagem, como a foto do ambiente. */
.foto-do-ambiente, .foto-pelo-3d { position: relative; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: var(--sb-ds-neutral-50); }
.foto-do-ambiente::after, .foto-pelo-3d::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
.foto-do-ambiente img, .foto-pelo-3d img { display: block; width: 100%; height: 100%; }
.foto-pelo-3d.foto-da-biblioteca img { object-fit: contain; }
.foto-do-ambiente.foto-que-falhou, .foto-pelo-3d.foto-sem-imagem { background: var(--background); color: var(--sb-ds-neutral-500); }
/* A linha cinza da espera tem o cinza das outras linhas da espera (.esqueletos .esqueleto), desde o "aplicar" da escolha do módulo,
   de 30/10: sem ele, o Skeleton do design system ficava no amarelo claro do tema, também na foto de cada ambiente. */
.foto-do-ambiente .foto-esqueleto, .foto-pelo-3d .foto-esqueleto { width: 100%; height: 100%; border-radius: 0; background: var(--muted); }
.foto-sendo-feita.sem-pulsar .esqueleto { animation: none; }
/* Pela regra 113, desde a etapa 3 do "aplicar" das microinterações, de 01/11: a linha cinza da foto fica parada para quem pediu menos
   movimento ao computador, como as outras linhas cinza; até a etapa 3, ela pulsava até os 5,3 segundos também para essas pessoas. */
@media (prefers-reduced-motion: reduce) { .foto-sendo-feita .esqueleto { animation: none; } }
.selo-atencao { background: var(--sb-ds-accent-300); color: var(--sb-ds-accent-950); }
/* O lugar da imagem da escolha de módulos: branco, com a borda por dentro e o ícone de imagem em cinza, como no
   estudo do detalhe. A imagem que a Alexandria entrega não muda com a cor do módulo, e por isso a cor fica nas
   etiquetas, pela decisão de Aline Miyaki de 05/10. Até o "aplicar", o quadro tinha a cor do módulo. Desde o "aplicar" da
   escolha do módulo, de 30/10, pela EM11, a lista dos módulos da Página do projeto mostra no lugar a foto do 3D de cada módulo,
   na cor escolhida (.foto-pelo-3d, acima). */
.modulo-imagem { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent); }
.modulo-imagem.com-icone { background: var(--muted); color: var(--sb-ds-neutral-600); }
/* O selo e o botão das etiquetas ficam por cima do link que cobre a linha; as etiquetas deixam o clique
   passar para o link, menos o botão. */
.linha .selo-clicavel, .linha .etiquetas { position: relative; z-index: 1; }
.linha .etiquetas, .cartao-topo .etiquetas { pointer-events: none; }
.linha .mais-materiais, .cartao-topo .mais-materiais { pointer-events: auto; }

/* As etiquetas da chapa e da fita, na lista dos módulos e no topo de cada módulo do detalhe: brancas, com a borda
   por dentro, numa linha só, com o botão "+N materiais" no fim, que mostra as outras (estudo, 23ª versão). Desde o
   "aplicar" dos ajustes da tela 2, de 15/10, cada etiqueta tem 2 linhas, pela D62 e pela D73: em cima, o tipo e a marca,
   em cinza, com 12 pixels; embaixo, o nome em negrito, com 14; e a amostra à esquerda, no meio das 2 linhas, como a
   parte 5 do estudo dos ajustes da tela 2. O botão "+N materiais", mais baixo que a etiqueta, fica no meio da altura da
   linha (item 8 das escolhas do plano). Até 15/10, a etiqueta tinha 1 linha, de 28 pixels. */
.etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.etiquetas [hidden] { display: none; }
.material { display: inline-grid; grid-template-columns: 16px auto; column-gap: 8px; align-items: center; box-sizing: border-box; height: 48px; padding: 6px 8px; border-radius: 8px; background: var(--background); box-shadow: inset 0 0 0 1px var(--border); color: var(--foreground); white-space: nowrap; } /* 48 pixels: as linhas de 16 e de 20, com 6 em cima e embaixo; 8 pixels: o canto do selo do design system, pela 11A da folha 2 */
.material .amostra { grid-row: 1 / 3; }
.material-cima { grid-column: 2; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--sb-ds-neutral-600); }
.material-nome { grid-column: 2; font-size: 14px; line-height: 20px; font-weight: 600; }
.mais-materiais { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--primary); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer; } /* 28 pixels: a altura do botão; 8 pixels: o canto das etiquetas (.material), pela 11A da folha 2, desde a etapa 4 da PR 1 do super plano */
/* "+2 materiais" é um botão de texto ao lado das etiquetas, e por isso fica só com o sublinhado, sem o fundo, pela
   regra 81, desde o "aplicar" de 06/10. */
.mais-materiais:hover { text-decoration: underline; text-underline-offset: 3px; }
.mais-materiais:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* O título da parte do envio e, à direita, o botão de tirar dúvidas no WhatsApp, azul com borda, com a
   altura do botão do design system, 36 pixels. Pedido de Aline Miyaki em 04/10. */
.parte-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.botao-de-duvida { flex: none; text-decoration: none; }

/* O campo do WhatsApp, nas janelas das dúvidas e da confirmação do envio: o rótulo, o campo, a frase do
   estado e a explicação, a 8 pixels um do outro. O campo tem 296 pixels de largura e a borda no cinza
   médio (4,74:1 sobre o branco), porque a borda do campo do design system some sobre o branco (1,26:1).
   Com o número certo, o sinal de feito aparece dentro do campo, à direita, e o texto do campo ganha 40
   pixels de espaço à direita, para não passar por baixo do sinal. O sinal fica a 12 pixels da borda
   direita, o mesmo espaço interno do campo no design system, e a 10 pixels do topo, a exceção que centra
   o sinal de 16 pixels no campo de 36. */
.whatsapp { display: grid; row-gap: 8px; }
/* Desde a PR 4 do super plano, pela SPT98 e pelo defeito 17, o rótulo "Seu WhatsApp" tem o "i" ao lado, a 4 pixels, como o rótulo do
   Meu perfil (.perfil-rotulo); o "i", de 24 pixels, sobe e desce 2 pixels, para a linha do rótulo continuar com 20. 4 e 2 pixels são
   exceções à grade de 8, por esse motivo. */
.whatsapp-rotulo-com-i { display: flex; align-items: center; gap: 4px; } /* 4 pixels: o "i" fica colado ao rótulo, como no Meu perfil */
.whatsapp-rotulo-com-i > [data-slot="label"] { line-height: 20px; }
.whatsapp-rotulo-com-i > .botao-informacao { margin: -2px 0; } /* -2 pixels: o "i" de 24 cabe na linha de 20 do rótulo */
.dica-do-campo { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
/* Desde o "aplicar" de 04/10, o campo ocupa a largura da janela, com 48 pixels de altura, maior que o
   campo do design system, de 36, e o número fica em 20 pixels, maior que o título da janela, de 18, a
   pedido de Aline Miyaki: "coloque essa caixa indo ate o final do modal, e um pouco mais alta". O texto
   começa a 16 pixels da borda, e o sinal de feito fica a 16 pixels da borda direita e do topo. */
.campo-com-sinal { position: relative; width: 100%; }
.campo-com-sinal .whatsapp-campo { width: 100%; height: 48px; padding: 0 16px; border-color: var(--sb-ds-neutral-500); font-size: 20px; line-height: 28px; font-variant-numeric: tabular-nums; }
.whatsapp[data-estado="certo"] .whatsapp-campo { padding-right: 48px; }
.sinal-certo { position: absolute; right: 16px; top: 16px; display: flex; color: var(--primary); pointer-events: none; }
/* 1 linha fica reservada para a frase do estado, entre o campo e a explicação, para a explicação não
   andar quando a frase aparece. */
.whatsapp .estado-do-campo, .whatsapp .estado-do-campo:empty { display: block; min-height: 20px; } /* 20 pixels: a altura de 1 linha da frase do estado, reservada embaixo do campo */
/* O foco do teclado nos botões da página fica no azul principal, como nos links e nos cartões: o anel
   do design system mede 2,52:1 sobre o branco, e o botão travado, sem a sombra, não mostrava foco
   nenhum (achado da conferência de 03/10). */
/* O botão com explicação passa a se chamar "tooltip-trigger" no data-slot, e por isso os botões de
   mudança e o de dúvidas entram pela classe. */
.servico-cabecalho [data-slot="button"]:focus-visible, .servico-corpo [data-slot="button"]:focus-visible, .servico-corpo .botao-de-mudanca:focus-visible, .servico-corpo .botao-de-duvida:focus-visible, .servico-corpo .enviar:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none;
}
/* A frase do estado do número, embaixo do campo: o erro, em vermelho, com o ícone de alerta; e o número
   salvo, em azul, com o sinal de feito. */
.estado-do-campo:empty { display: none; }
.erro-do-campo, .certo-do-campo { margin: 0; display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; font-size: 14px; line-height: 20px; }
.erro-do-campo > svg, .certo-do-campo > svg { margin-top: 2px; } /* 2 pixels: o ícone de 16 no meio da linha de 20 */
.erro-do-campo { color: var(--destructive); }
.certo-do-campo { color: var(--primary); font-weight: 500; } /* a frase do número salvo fica no azul principal, para dizer que deu certo: exceção da regra 35, a pedido de Aline Miyaki em 04/10 */
/* Desde a etapa 4 do "aplicar" das microinterações, de 01/11, pela MI12 e pela regra 149: no campo do WhatsApp das 3 janelas do
   número, o sinal de feito e a frase do número certo aparecem em 0,15 segundo, o tempo do pequeno ao abrir, só pela transparência,
   a partir do momento em que entram na tela, que é o momento em que o número fica salvo (telas/pagina-do-servico.js,
   CampoDoWhatsapp). Para quem pediu menos movimento, fica igual, porque a transparência não muda o tamanho nem o lugar de nada. O
   leitor de tela lê a frase na hora, pela região que ele acompanha. Até essa etapa, os 2 apareciam na hora. */
@keyframes aparecer-pela-transparencia { from { opacity: 0; } }
.whatsapp .sinal-certo, .whatsapp .certo-do-campo { animation: aparecer-pela-transparencia var(--tempo-do-pequeno-ao-abrir) var(--curva-de-entrar) backwards; }
/* O botão travado fica cinza e mostra que não é clicável. O cinza escuro do ícone dá 7,17:1 sobre o
   fundo cinza claro; no design system, o botão desabilitado fica com metade da opacidade, com pouco
   contraste. */
/* Desde o "aplicar" da tela 6, de 07/10, a classe "botao-travado" dá a mesma aparência aos botões travados do Meu
   perfil e da janela de ajuda, também ao vermelho, porque o estado travado tem a aparência que a app dá a ele. */
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 2 da folha 1, de 19/10, o que não se clica tem 1 aparência só, em todas
   as telas: o fundo cinza claro (muted), sem borda própria, com a borda de 1 pixel na cor do fundo, para nada andar, e sem sombra;
   o texto e o ícone no cinza 500, com 4,35:1 sobre o cinza claro; o ponteiro de proibido; e nada muda com o ponteiro em cima. Até
   a etapa 1, o botão travado tinha a borda no cinza 300 e o texto no cinza 600. */
.falar-travado, .falar-travado:hover, .enviar-travado, .enviar-travado:hover, .botao-travado, .botao-travado:hover {
  background: var(--muted) !important; border: 1px solid var(--muted) !important; color: var(--sb-ds-neutral-500) !important;
  box-shadow: none !important; cursor: not-allowed !important;
}

/* O cartão da loja (P7): o Card do design system, com a borda, 16 pixels abaixo do título da parte. O
   texto começa a 24 pixels da borda: 1 pixel da borda e 23 de espaço interno. A linha do nome empresarial
   e do CNPJ saiu em 04/10, a pedido de Aline Miyaki. */
/* Desde 05/10, o cartão segue a opção B do estudo do cartão da loja, escolhida por Aline Miyaki. Em cima,
   o ícone da loja num círculo de 40 pixels e, a 16 pixels dele, o rótulo e o nome; 8 pixels abaixo, o
   endereço e o horário, com o ícone pequeno no centro da coluna de 40 pixels e o texto no mesmo ponto do
   nome. Depois, a linha do design system, com 24 pixels em cima e embaixo, e as 2 ações, a 16 pixels uma
   da outra, cada uma com o título em preto, de 16 pixels, e o complemento em cinza, de 14, colado no
   título. A informação fica em preto e o rótulo em cinza: no cartão de antes, era o contrário. */
.loja { margin-top: 16px; padding: 23px; gap: 0; box-shadow: none; } /* 23 pixels: com a borda de 1 do cartão, o conteúdo fica a 24 da borda de fora, como na declaração */
.loja p { margin: 0; }
.loja-topo, .loja-linha { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
.loja-topo { align-items: center; }
.loja-icone { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--muted); color: var(--sb-ds-neutral-700); }
.loja-rotulo { margin: 0; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--muted-foreground); }
.loja-nome { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); }
.loja-lugar { margin-top: 8px; display: grid; row-gap: 8px; }
.loja-linha { align-items: start; font-size: 14px; line-height: 20px; color: var(--foreground); }
.loja-linha > svg { justify-self: center; margin-top: 2px; color: var(--sb-ds-neutral-600); } /* 2 pixels: o ícone fica no meio da 1ª linha do texto */
.loja-horario { color: var(--muted-foreground); }
.loja-mapa { margin-left: 16px; white-space: nowrap; }
.loja-divisa { margin: 24px 0; }
.loja-acoes { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 16px; }
.loja-acoes .loja-linha > svg { margin-top: 4px; } /* 4 pixels: o ícone fica no meio da linha de 24 pixels do título */
.loja-acao-titulo { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--foreground); }
.loja-acao-complemento { display: block; color: var(--muted-foreground); }

/* A declaração, na forma B aprovada em 03/10 (P19): o Card do design system, com a borda, 24 pixels
   abaixo do cartão da loja. Dentro dele, de cima para baixo: o título e a abertura; o cartão das
   medidas, em amarelo; as 2 colunas, separadas por uma linha; e a faixa da caixa de marcar. O texto
   começa a 24 pixels da borda do cartão: 1 pixel da borda e 23 de espaço interno, e o cartão das
   medidas começa no mesmo ponto. */
.declaracao { margin-top: 24px; padding: 0; gap: 0; box-shadow: none; } /* sem cortar o que passa da borda: a faixa de concordar tem os cantos de baixo arredondados, e o anel e o crescimento dela não são cortados */
.declaracao p { margin: 0; }
.declaracao-cabecalho { padding: 23px 23px 0 23px; } /* 23 pixels: com a borda de 1 da declaração, o conteúdo fica a 24 da borda de fora */
.declaracao-titulo-do-bloco { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.declaracao-abertura { margin-top: 4px !important; font-size: 14px; line-height: 20px; color: var(--muted-foreground); } /* 4 pixels: a abertura fica colada ao título */
.declaracao-frase { display: block; font-size: 16px; line-height: 24px; color: var(--foreground); }
.declaracao .complemento { display: block; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
/* O cartão das medidas: o amarelo claro do design system, com a borda no amarelo escuro, a régua num
   círculo amarelo forte, a frase das medidas em negrito, a tabela das medidas de cada módulo em fundo
   branco, e as 2 frases sobre a medida. O azul fica de fora, porque a regra 35 guarda o azul para o que
   é clicável. O complemento usa o cinza escuro (7,37:1 sobre o amarelo claro). */
.declaracao-medidas {
  margin: 16px 23px 0 23px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: start; /* 23 pixels: o cartão das medidas começa no ponto do cabeçalho, a 24 da borda de fora */
  padding: 23px; border: 1px solid var(--sb-ds-accent-700); border-radius: 8px; background: var(--accent); /* 23 pixels: com a borda de 1, o conteúdo fica a 24 da borda de fora */
}
.declaracao-regua { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 40px; height: 40px; border: 1px solid var(--sb-ds-accent-700); border-radius: 9999px; background: var(--sb-ds-accent-300); color: var(--sb-ds-accent-950); } /* a borda de 1 pixel no accent-700, pela regra 109, desde a etapa 4 da PR 1 do super plano; o círculo continua com 40 pixels */
.declaracao-medidas .declaracao-frase { font-weight: 600; }
.declaracao-medidas .complemento { color: var(--sb-ds-neutral-600); }
.tabela-das-medidas { margin-top: 16px; width: 100%; border-collapse: separate; border-spacing: 0; background: var(--background); border: 1px solid var(--sb-ds-accent-300); border-radius: 8px; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.tabela-das-medidas th, .tabela-das-medidas td { padding: 8px 16px; text-align: left; }
.tabela-das-medidas thead th { font-weight: 500; color: var(--sb-ds-neutral-600); }
.tabela-das-medidas tbody th, .tabela-das-medidas tbody td { border-top: 1px solid var(--sb-ds-accent-200); }
.tabela-das-medidas tbody th { font-weight: 500; color: var(--foreground); }
.tabela-das-medidas td { color: var(--sb-ds-neutral-600); }
.tabela-das-medidas td b { font-weight: 600; color: var(--foreground); }
.declaracao-outras { list-style: none; margin: 16px 0 0 0; padding: 0; display: grid; row-gap: 16px; }
.declaracao-outras .declaracao-frase { font-weight: 500; }
/* Os combinados: a tabela por momento do pedido, 16 pixels abaixo do cartão das medidas e começando no
   mesmo ponto dele, com 24 pixels até a faixa de concordar. A tabela não tem fundo nem borda por fora,
   para chamar menos atenção que o cartão amarelo, a pedido de Aline Miyaki em 04/10. O momento fica em
   preto, com peso médio; quem faz, numa etiqueta do design system, com borda para a MadMais e a
   Serrabits; e o combinado, em preto. A etiqueta "Eu" tem o amarelo do cartão das medidas, com o fundo
   e a borda dele, a pedido de Aline Miyaki em 05/10: "a tag Eu vale deixar com um destaque sendo fundo
   amarelo, o mesmo highlight que voce deu do que o Eu medi o lugar onde o móvel vai ficar". */
.tabela-dos-combinados { margin: 24px 23px 24px 23px; width: calc(100% - 46px); border-collapse: collapse; font-size: 14px; line-height: 20px; } /* 23 pixels: com a borda de 1 do cartão, a tabela fica a 24 */
.tabela-dos-combinados th, .tabela-dos-combinados td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; } /* 12 pixels: a altura da linha da tabela do design system */
/* O cabeçalho da tabela tem em cima os mesmos 12 pixels das linhas, e a tabela fica a 24 da parte
   amarela, como fica a 24 da faixa de concordar: o espaço que aparece acima do cabeçalho fica igual ao
   espaço abaixo da última linha, de 36 pixels. Pedido de Aline Miyaki em 04/10. */
.tabela-dos-combinados thead th { padding-top: 12px; padding-bottom: 8px; font-weight: 500; color: var(--sb-ds-neutral-600); } /* 12 pixels: os mesmos 12 das linhas da tabela */
.tabela-dos-combinados tbody th, .tabela-dos-combinados tbody td { border-top: 1px solid var(--border); }
.tabela-dos-combinados tbody th { width: 192px; font-weight: 500; color: var(--foreground); }
.tabela-dos-combinados td:nth-child(2) { width: 160px; }
.tabela-dos-combinados td:last-child { padding-right: 0; color: var(--foreground); text-wrap: pretty; }
.quem-faz { display: flex; flex-wrap: wrap; gap: 8px; }
/* Desde o "aplicar" de 06/10, a coluna "Quem faz" fica no centro, com o título e as etiquetas, e as 2 etiquetas da
   mesma linha ficam a 4 pixels uma da outra, como 1 grupo: a exceção da regra 77, a pedido de Aline Miyaki: "quero
   que o quem faz esteja todo centralizado". A coluna continua com 160 pixels. */
.tabela-dos-combinados .col-quem { text-align: center; }
.tabela-dos-combinados .col-quem .quem-faz { justify-content: center; gap: 4px; } /* 4 pixels: "Eu" e "MadMais" ficam juntos */
.etiqueta-de-quem { padding: 1px 8px; color: var(--sb-ds-neutral-700); background: var(--background); } /* 1 pixel: os 2 do selo em cima e embaixo, menos a borda, para o selo ficar com os 20 pixels da decisão 7 da folha 2, desde a etapa 4 da PR 1 do super plano; 8 pixels: os 8 dos lados do Badge do design system, dentro da borda, desde o fim da PR 1 */
.etiqueta-de-quem.eu { background: var(--accent); border-color: var(--sb-ds-accent-700); color: var(--foreground); }
/* A faixa da caixa de marcar: o rótulo envolve a caixa, e a faixa inteira é clicável. Desde o pedido de
   Aline Miyaki de 03/10, "tem que ficar com mais destaque na tela", a faixa fica no azul mais claro do
   design system, porque é clicável (regra 35), com 24 pixels de espaço em cima e embaixo, o texto em
   negrito e a borda da caixa no azul principal; com o ponteiro em cima e com a caixa marcada, o azul
   fica um tom mais forte, e a linha de cima passa ao azul principal. */
.declaracao-concordo {
  display: grid; grid-template-columns: 32px 1fr; column-gap: 16px; align-items: center;
  padding: 24px 23px; border-top: 1px solid var(--sb-ds-brand-200); background: var(--sb-ds-brand-50); /* 23 pixels: com a borda de 1 da declaração, o texto fica a 24 da borda de fora, como o cabeçalho */
  font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); cursor: pointer;
}
.declaracao-concordo:hover { background: var(--secondary); }
/* Desde o "aplicar" de 05/10, o texto da faixa também fica azul com o ponteiro em cima, como o nome das áreas
   clicáveis da regra 81: o fundo azul claro sozinho tinha 1,08:1 contra o cinza da faixa, e a conferência do
   hover apontou a mudança como fraca. O azul sobre o azul claro tem 5,17:1. */
.declaracao-concordo:hover > span:last-child { color: var(--primary); }
.declaracao-concordo[data-marcado="sim"] { background: var(--secondary); border-top-color: var(--primary); }
/* Os cantos de baixo da faixa são os do cartão, 3 pixels a mais que o canto do design system: os 4 a mais
   do cartão, menos a borda de 1. */
.declaracao-concordo { position: relative; border-radius: 0 0 calc(var(--radius) + 3px) calc(var(--radius) + 3px); } /* a cor muda em 0,1 segundo, pela regra 149, no começo do arquivo; até o "aplicar" das microinterações, o fundo mudava em 0,2 */
/* O anel, com o clique no botão de enviar travado: um anel azul de 2 pixels por fora da faixa, que cobre a
   borda cinza do cartão e segue os cantos arredondados, e o crescimento de 1% e volta, em 0,4 segundo, a
   cada clique. Para quem pediu menos movimento ao sistema, a faixa só ganha o anel. Pedido de Aline Miyaki
   em 04/10, como exceção da regra 61, que deixa as microinterações para a sessão própria. Desde a etapa 2 da PR 1 do super
   plano, pela decisão 5 da folha 1, o anel tem 2 pixels de folga branca entre a faixa e o azul, como o de "Mudar o projeto",
   para não se confundir com a borda azul de 2 pixels do escolhido da 1A. Desde o "aplicar" do anel do que falta, de 31/10, o anel e
   o crescimento vêm da classe única do anel (.anel-do-que-falta, mais abaixo), e aqui fica só o que é desta faixa. */
.declaracao-concordo.anel-do-que-falta { border-top-color: transparent; } /* só desta faixa: a linha azul clara de cima da faixa, que a separa da tabela dos combinados, some enquanto o anel aparece, como até o "aplicar", para não ficar uma 2ª linha logo dentro do anel */
.declaracao-caixa { display: flex; justify-content: center; }
/* A caixa do design system tem a borda no cinza mais claro, que some sobre a faixa (1,1:1). Aqui a
   borda fica no azul principal, acima dos 3:1 que a borda de um controle pede, e o fundo fica branco.
   Marcada, a caixa fica no azul principal, como no design system. */
.declaracao-concordo [role="checkbox"] { cursor: pointer; background: var(--background); border-color: var(--primary); }
.declaracao-concordo [role="checkbox"][data-state="checked"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.declaracao-concordo [role="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* A faixa do envio, 32 pixels abaixo da declaração, porque fecha a página: o botão de enviar no centro e,
   8 pixels embaixo, a frase de que o envio não é pagamento (P17), também no centro, desde o "aplicar" de
   04/10. Com o clique na etapa atual, a faixa fica 32 pixels acima do pé da janela. */
.enviar-faixa { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; scroll-margin-bottom: 32px; }
.enviar-nota { margin: 0; max-width: 448px; font-size: 14px; line-height: 20px; color: var(--muted-foreground); text-align: center; text-wrap: pretty; }
/* O botão de enviar é maior que os botões do design system, que vão até 40 pixels de altura: 64 pixels
   de altura, a largura da coluna, o texto em 20 pixels e o ícone em 24. É exceção desta tela, pedida
   por Aline Miyaki em 04/10: "sei que no design system nao tem um botao tao grande, mas permita so aqui
   por favor, tem que ter muita mais destaque". */
.enviar { flex: none; }
.enviar-grande { width: 448px; height: 64px !important; padding: 0 32px !important; gap: 12px !important; font-size: 20px !important; line-height: 28px; font-weight: 600 !important; border-radius: calc(var(--radius) + 2px) !important; } /* 12 pixels entre o ícone e o texto, a exceção que acompanha a letra de 20 */

/* O pedido enviado, pela opção B do estudo de 04/10: 1 cartão com o sinal de feito, o título com a data e
   a hora do envio e o botão de falar com o vendedor; embaixo de uma linha, os 3 passos que vêm depois do
   envio. O sinal de feito e os números dos passos ficam numa coluna de 40 pixels, centrados, e os textos
   começam todos no mesmo ponto, a 56 pixels da borda do conteúdo, pela regra 47. O sinal de feito fica
   no azul principal, como a frase do número salvo, pela exceção da regra 35 para o sucesso. O cartão da
   loja fica a 24 pixels do cartão do pedido, como entre o cartão da loja e o da declaração. */
.enviado { margin-top: 16px; padding: 23px; gap: 0; box-shadow: none; } /* 16 pixels do título da parte, como nas outras partes; 23 pixels: com a borda de 1, o conteúdo fica a 24 */
.enviado p { margin: 0; }
.enviado-topo { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.enviado-sinal { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--sb-ds-brand-50); color: var(--primary); }
.enviado-titulo { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); }
.falar-com-vendedor { text-decoration: none; }
.enviado-passos { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.enviado-agora { margin-left: 56px !important; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sb-ds-neutral-600); }
/* Desde o "aplicar" da linha do tempo, de 16/10, pela decisão 8 levada a esta lista (L8) e pela etapa 6 do plano: os números
   de "O que acontece agora" começam no ponto do rótulo, a 56 pixels da borda do cartão, pela regra 47, e o texto de cada passo
   começa 32 pixels depois, nos 24 do círculo mais 8. Até 16/10, os números ficavam no meio da coluna de 40 pixels do ícone. */
.enviado-lista { list-style: none; margin: 16px 0 0 56px; padding: 0; }
.enviado-lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
.enviado-lista li + li { margin-top: 16px; }
.enviado-lista .enviado-numero { justify-self: start; }
.enviado-numero { justify-self: center; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid var(--sb-ds-neutral-300); border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--sb-ds-neutral-700); font-variant-numeric: tabular-nums; }
.enviado-frase { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--foreground); }
.enviado-complemento { display: block; font-size: 14px; line-height: 20px; color: var(--muted-foreground); text-wrap: pretty; }
.enviado + .loja { margin-top: 24px; }

/* O cartão do momento, nas etapas 3 a 5 da Página do projeto, desde o "aplicar" da linha do tempo, de 16/10, pelo estudo do
   refino da interface da linha do tempo: o topo é o do cartão do projeto enviado, e, embaixo de uma linha, a informação
   principal da etapa, a 56 pixels da borda, no ponto do texto do título do cartão, com 32 pixels entre os blocos. */
.momento-destaque { margin-top: 24px; padding: 24px 0 0 56px; border-top: 1px solid var(--border); display: grid; row-gap: 32px; }
.momento-linha { margin-top: 4px !important; max-width: 37em; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-600); } /* 4 pixels: a linha fica junto do valor ou da data, como a validade embaixo do total */
/* A linha com o ícone de alerta, no amarelo mais escuro do design system, como a previsão que passou (T25). 2 pixels: o
   ícone fica no meio da 1ª linha, de 20. */
.momento-com-alerta { display: flex; align-items: flex-start; gap: 8px; }
.momento-com-alerta > svg { flex: none; margin-top: 2px; color: var(--sb-ds-accent-700); } /* 2 pixels: o ícone de 16 no meio da 1ª linha, de 20 */
/* O nome da loja, na etapa 5, com 24 pixels de letra, menor que o valor e a data, que têm 40, pelo exercício da parte 2 do
   estudo das etapas 3 a 5. 4 pixels: o nome fica junto do rótulo, como o valor do resumo do preço. */
.momento-nome { margin-top: 4px !important; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; color: var(--foreground); } /* 4 pixels: o nome fica junto do rótulo */
.momento-rotulo { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sb-ds-neutral-600); }
/* O bloco que recebe o anel azul na chegada e no clique na etapa atual: 16 pixels de espaço dentro e a mesma medida para
   fora, para o texto ficar no lugar, como no estudo do projeto enviado. */
.momento-bloco { margin: -16px; padding: 16px; border-radius: 8px; }
.momento-bloco:focus, .caixa-da-pergunta:focus { outline: none; }
/* "Como pagar o projeto" em 2 passos numerados (decisão 8): o número no ponto do rótulo, pela regra 47, e o texto 32
   pixels depois, nos 24 do círculo mais 8. */
.momento-passos { list-style: none; margin: 16px 0 0 0; padding: 0; display: grid; row-gap: 24px; }
.momento-passos li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
.momento-passos .enviado-numero { justify-self: start; }
/* O endereço, o horário e as formas de pagamento, em preto, com 1 ícone cinza de 16 pixels em cada linha, no lugar do
   rótulo (regra 74), e o texto 8 pixels depois. 2 pixels: o ícone fica no meio da linha de 20. */
.momento-dados { list-style: none; margin: 8px 0 0 0; padding: 0; display: grid; row-gap: 8px; }
.momento-dados li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; font-size: 14px; line-height: 20px; color: var(--foreground); }
.momento-dados li > svg { margin-top: 2px; color: var(--sb-ds-neutral-600); } /* 2 pixels: o ícone de 16 no meio da linha de 20 */
/* Os itens sem número, como "Confira as peças antes de sair da loja" e o andamento da produção: o ícone no ponto do rótulo e
   o texto 8 pixels depois. 4 pixels: o ícone fica no meio da linha do título, de 24. */
.momento-itens { list-style: none; margin: 16px 0 0 0; padding: 0; display: grid; row-gap: 16px; }
.momento-itens li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; }
.momento-itens li > svg { margin-top: 4px; color: var(--sb-ds-neutral-600); } /* 4 pixels: o ícone de 16 no meio da linha do título, de 24 */
.momento-secao { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.momento-no-ponto-do-texto { padding-left: 56px; }

/* A pergunta da compra, na etapa 4, pela regra 126: a caixa cinza, a 56 pixels da borda, com 24 pixels de espaço dentro; a
   frase cinza no cinza 700, com 9,51:1 contra o cinza da caixa, porque o cinza do texto secundário tem 4,35:1. */
.caixa-da-pergunta { margin: 24px 0 0 56px; padding: 24px; border-radius: 8px; background: var(--muted); }
.caixa-da-pergunta p { margin: 0; }
.caixa-titulo { max-width: 37em; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); }
.caixa-texto { margin-top: 4px !important; max-width: 37em; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-700); } /* 4 pixels: a frase fica junto da pergunta */
/* As 2 respostas, com a borda e o texto azuis (decisão 11) e a mesma largura (decisão 14): cada botão tem 2 camadas no
   mesmo lugar, a que aparece e a escondida, com "Sim, foi como eu esperava" em negrito e com o sinal de feito, que guarda a
   largura. Escolhida, a resposta fica azul clara, com a borda de 2 pixels, 1 de borda e 1 de sombra por dentro, o negrito e
   o sinal de feito, e a outra fica cinza, pela regra 123. */
.respostas-da-compra { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.resposta-camadas { display: inline-grid; }
.resposta-camadas > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.resposta-medida { visibility: hidden; font-weight: 600; }
.resposta-escolhida { border-color: var(--primary) !important; background: var(--secondary) !important; color: var(--primary) !important; box-shadow: inset 0 0 0 1px var(--primary) !important; font-weight: 600 !important; }
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima,
   a resposta sem escolha, depois da escolha da outra, ganha o azul mais claro do design system (brand-50), o texto azul e a
   borda azul clara (brand-400); a escolhida, com o ponteiro em cima, o brand-200, com o texto no brand-800, que passa de 4,5:1
   nele, como a cor escolhida da página do módulo; e o pressionado fica 1 tom acima, pela regra 119. Antes da escolha, as 2
   respostas continuam com a borda azul e o azul claro com o ponteiro em cima (decisão 11 e regra 124). */
.resposta-escolhida:hover { background: var(--sb-ds-brand-200) !important; color: var(--sb-ds-brand-800) !important; }
.resposta-escolhida:active { background: var(--sb-ds-brand-300) !important; color: var(--sb-ds-brand-800) !important; }
.resposta-outra:not(:hover) { color: var(--sb-ds-neutral-600) !important; }
.resposta-outra:hover { background: var(--sb-ds-brand-50) !important; border-color: var(--sb-ds-brand-400) !important; color: var(--primary) !important; }
.resposta-outra:active { background: var(--secondary) !important; }
/* A caixa da regra 127, do componente componentes/revelar.js: 8 pixels de canto e 16 de espaço dentro, 16 pixels embaixo das
   respostas, com a largura do campo, pela regra 105, e a ponta no meio da resposta escolhida. 36 pixels: os 17 de espaço e a
   borda de 1 de cada lado, para o campo continuar com 37em. Desde a etapa 1 da PR 1 do super plano, pela decisão 24 da folha 4,
   de 20/10, a caixa tem a borda cinza de 1 pixel em todas as telas, também na pergunta da compra da Página do projeto, como a
   tela 3 tinha desde a decisão 96, de 19/10, para o azul forte ficar só na escolha. 17 pixels: com a borda de 1, o conteúdo
   fica onde estava com a borda de 2; -9 pixels: a ponta de 16, girada, encosta na borda de 1, como a do balão da linha do
   tempo. Até a etapa 1, fora da tela 3, a borda era azul, de 2 pixels. */
.borda-do-que-apareceu { position: relative; box-sizing: border-box; max-width: calc(37em + 36px); margin-top: 16px; padding: 17px; border: 1px solid var(--sb-ds-neutral-400); border-radius: 8px; background: var(--background); } /* 17 e 36 pixels: os 16 de espaço, mais 1, com a borda de 1, como diz o comentário acima */
.borda-do-que-apareceu[data-ponta]::before { content: ''; position: absolute; top: -9px; left: calc(var(--ponta-x) - 8px); width: 16px; height: 16px; box-sizing: border-box; background: var(--background); border-top: 1px solid var(--sb-ds-neutral-400); border-left: 1px solid var(--sb-ds-neutral-400); transform: rotate(45deg); } /* -9 pixels: a ponta de 16, girada, encosta na borda de 1 */
/* O campo do porquê, com o rótulo acima e "Opcional" ao lado, em cinza, pelas regras 67 e 111, e "Enviar a resposta" à
   direita, 16 pixels embaixo. */
.campo-do-porque-rotulo { display: flex; align-items: baseline; gap: 8px; }
.campo-do-porque-rotulo .opcional { font-weight: 400; color: var(--muted-foreground); }
.campo-do-porque [data-slot="textarea"] { margin-top: 8px; min-height: 80px; }
.campo-do-porque-acoes { margin-top: 16px; display: flex; justify-content: flex-end; }

/* ---------- O detalhe do preço (telas/pagina-do-servico.js, desde o "aplicar" de 05/10) ---------- */

/* A opção A do estudo do detalhe (estudos/estudo-tela-4-painel-do-detalhe.html), com as medidas dele. A janela
   ocupa a janela inteira do navegador, por cima da página: é o Dialog do design system, sem a margem, a borda, o
   canto e o zoom da janela pequena. Em cima ficam o título e o X; embaixo deles, a faixa cinza do total, fixa;
   no meio, os módulos, que rolam; e embaixo, o pé fixo. O conteúdo de cada parte fica na faixa de 1.080 pixels,
   no centro, como a página (decisão 8 dos cenários), com 24 pixels de espaço dos lados, os do estudo.
   Desde a etapa 4 do "aplicar" das microinterações, de 01/11, pela MI16 e pela regra 149: o detalhe aparece em 0,25 segundo e some
   em 0,2, só pela transparência, com a animação de entrar e de sair da janela do design system e os tempos do médio, do começo
   deste arquivo; o crescimento de 95% a 100% e o deslize ficam em 100% e em 0, para nada andar nem crescer, também para quem não
   pediu menos movimento, e o fundo escuro da janela fica transparente, logo abaixo. Até essa etapa, o detalhe abria e fechava
   sem movimento, e o fundo escuro ficava escondido atrás dele. */
.detalhe {
  inset: 0; top: 0; left: 0; translate: none; transform: none;
  width: 100vw; max-width: none !important; height: 100dvh; max-height: none;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0;
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  --tw-enter-scale: 1; --tw-exit-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0;
  /* Desde o "aplicar" de 07/10, os títulos dos blocos abertos ficam parados no alto ao rolar, um embaixo do outro,
     pela regra 88: a linha do módulo, a 8 pixels do alto da área que rola, com 56 de altura; "Quanto custa este
     módulo", com 36; a linha do custo, com 36; a categoria, com 36; e a parte do móvel, com 57, que tem 2 linhas de
     texto. O cabeçalho da tabela fica embaixo do último título parado. */
  --parada-do-modulo: 8px; --parada-do-titulo: 64px; --parada-do-custo: 100px; --parada-da-categoria: 136px; --parada-da-parte: 172px; --altura-da-parte: 57px;
}
/* O fundo escuro da janela do design system, que vem logo antes do detalhe, fica transparente, pela MI16: com o detalhe aparecendo
   pela transparência, o fundo escuro escureceria a página durante a entrada. O detalhe ocupa a janela inteira e não tem área de
   fora para o clique fora. */
[data-slot="dialog-overlay"]:has(+ .detalhe) { background-color: transparent; }
.detalhe-faixa { box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
/* O cabeçalho e o pé ficam fora da área que rola e descontam a largura da barra de rolagem dela, medida pelo código,
   para o conteúdo das 3 partes ficar no mesmo eixo, e o "R$" do total, na vertical do "R$" dos módulos (regra 80). */
.detalhe-topo, .detalhe-pe { padding-right: var(--rolagem, 0px); }
.detalhe-topo { border-bottom: 1px solid var(--border); }
/* O cabeçalho, desde o "aplicar" de 07/10: o título e o subtítulo, à esquerda; o total a pagar à direita do título,
   com o rótulo antes dele e o "R$" na coluna dos valores dos módulos, a 160 pixels da borda do conteúdo; e o X. A faixa
   cinza do total saiu (estudo dos trabalhos especiais, 06/10). */
.detalhe-cabecalho { display: grid; grid-template-columns: minmax(0, 1fr) auto 112px 32px; column-gap: 16px; align-items: start; padding-top: 24px; padding-bottom: 16px; }
.detalhe-titulo { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: normal; }
.detalhe-subtitulo { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.detalhe-total-rotulo { margin: 0; font-size: 14px; line-height: 28px; font-weight: 500; white-space: nowrap; }
.detalhe-total-rotulo .cinza { font-weight: 400; color: var(--sb-ds-neutral-600); }
.faixa-valor { font-size: 18px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* O X é o botão só de ícone da app, de 32 por 32 pixels, no centro da 1ª linha do título, com o desenho
   terminando na borda do conteúdo. */
.detalhe .fechar-detalhe { position: static; justify-self: end; width: 32px; height: 32px; padding: 0; margin: -2px -8px 0 0; color: var(--muted-foreground); } /* -2 pixels: o X fica no centro da linha do título, de 28 pixels; -8 pixels: o desenho de 16 pixels termina na borda do conteúdo */
/* O aviso amarelo do preço fica dentro do cabeçalho, a 16 pixels do subtítulo e a 16 da linha de baixo, que desce para
   baixo do aviso (decisão de Aline Miyaki de 06/10). Sem o aviso, o lugar dele não ocupa espaço. */
.detalhe-aviso:has(> *) { padding-bottom: 16px; }
.detalhe-aviso > .aviso { margin-top: 0; }
.detalhe-conteudo { overflow-y: auto; }
.detalhe-conteudo > .detalhe-faixa { padding-top: 24px; padding-bottom: 24px; }
.detalhe-pe { border-top: 1px solid var(--border); background: var(--background); }
.detalhe-botoes { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; padding-bottom: 16px; }
.detalhe .cinza { color: var(--muted-foreground); }
/* As linhas abrem e fecham sem a animação da altura do design system, em todos os níveis, e o conteúdo aberto fica sem
   corte, para os títulos de dentro ficarem parados ao rolar (regra 88). Desde a etapa 2 do "aplicar" das microinterações, de
   01/11, pela MI2 e pela regra 149, o que abriu aparece descendo 8 pixels, e o que fica embaixo anda até o lugar novo, pelo
   script da página (telas/pagina-do-servico.js, aoMexer), e a seta gira em 0,25 segundo ao abrir e em 0,2 ao fechar, e muda
   sem girar para quem pediu menos movimento; até essa etapa, a seta virava na hora. O ícone da linha fica parado quando a
   linha abre, e só a seta gira. */
.detalhe [data-slot="accordion-content"] { animation: none !important; }
.detalhe [data-slot="accordion-content"][data-state="open"] { overflow: visible !important; }
.detalhe [data-slot="accordion-trigger"] > svg { transition: rotate var(--tempo-do-medio-ao-fechar) var(--curva-de-mudar); }
.detalhe [data-slot="accordion-trigger"][data-state="open"] > svg { transition-duration: var(--tempo-do-medio-ao-abrir); }
@media (prefers-reduced-motion: reduce) { .detalhe [data-slot="accordion-trigger"] > svg { transition: none; } }
.detalhe [data-slot="accordion-trigger"] > svg.size-fixo { rotate: none !important; }
.detalhe [data-slot="accordion-item"] { border-bottom: 0; }
/* O texto que não cabe em 1 linha termina em reticências, e o texto inteiro aparece numa explicação (proposta de 07/10). */
.cortavel { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dica-da-reticencia { position: fixed; z-index: 60; box-sizing: border-box; width: max-content; pointer-events: none; }

/* ---- O nível 1: o módulo, na lista no estilo do FAQ (proposta de 07/10) ---- */
/* Cada módulo começa com 1 linha de 56 pixels, com um traço fino entre os módulos e sem a caixa do cartão: o número na
   coluna de 40 pixels, o nome, o valor na coluna de 112 e a seta na de 16, com 16 entre as colunas e 16 nas pontas. */
.modulo { position: relative; border-top: 1px solid var(--sb-ds-neutral-300); }
.modulo:last-child { border-bottom: 1px solid var(--sb-ds-neutral-300); }
.modulo-linha { --fundo-da-linha: var(--background); position: sticky; top: var(--parada-do-modulo); z-index: 6; box-sizing: border-box; display: grid; grid-template-columns: 40px minmax(0, 1fr) 112px 16px; column-gap: 16px; align-items: center; height: 56px; padding: 0 16px; background: var(--fundo-da-linha); }
/* No módulo aberto e com a linha no lugar dela, os 8 pixels de baixo da linha ficam sem fundo: a imagem e as medidas
   começam 8 pixels abaixo do nome, embaixo da linha. Parada no alto, a linha tem o fundo inteiro e cobre o resto do
   topo, que passa por baixo dela; a faixa branca de 8 pixels acima dela cobre o que rola. */
.modulo[data-state="open"]:not([data-parada="sim"]) > .modulo-linha { background: linear-gradient(var(--fundo-da-linha) 48px, transparent 48px); }
.modulo[data-parada="sim"] > .modulo-linha { box-shadow: inset 0 1px 0 var(--sb-ds-neutral-300); }
.modulo[data-parada="sim"][data-coberto="sim"] > .modulo-linha { box-shadow: inset 0 1px 0 var(--sb-ds-neutral-300), inset 0 -1px 0 var(--sb-ds-neutral-300); }
/* Desde a etapa 4 do "aplicar" das microinterações, de 01/11, pela MI15 e pela regra 149: o traço de 1 pixel em cima e embaixo da
   linha parada e a faixa branca de 8 pixels acima dela aparecem e somem em 0,1 segundo, pela transparência e pela sombra que
   desenha o traço, com a curva de quem fica na tela e muda, junto com o sumiço em 20 pixels de rolagem do resto do topo
   (telas/pagina-do-servico.js, acompanharOTopo). A faixa branca muda junto com o traço, para o traço de cima não sumir por 0,1
   segundo enquanto o traço do módulo passa por baixo dela. A faixa fica no módulo aberto, transparente, e aparece com a linha
   parada. Para quem pediu menos movimento, fica igual, porque nada anda nem muda de tamanho. O anel do foco do teclado da linha é
   o contorno do botão do nome (.modulo-gatilho::after), e não a sombra, e por isso continua mudando na hora. Até essa etapa, o
   traço e a faixa mudavam de uma vez. */
.modulo-linha { transition-property: background-color, color, border-color, box-shadow; transition-duration: var(--tempo-da-cor); transition-timing-function: var(--curva-de-mudar); }
.modulo[data-state="open"] > .modulo-linha::before { content: ""; position: absolute; left: 0; right: 0; top: calc(0px - var(--parada-do-modulo)); height: var(--parada-do-modulo); background: var(--background); opacity: 0; pointer-events: none; transition: opacity var(--tempo-da-cor) var(--curva-de-mudar); }
.modulo[data-parada="sim"] > .modulo-linha::before { content: ""; position: absolute; left: 0; right: 0; top: calc(0px - var(--parada-do-modulo)); height: var(--parada-do-modulo); background: var(--background); opacity: 1; }
.modulo-numero { font-size: 14px; line-height: 24px; color: var(--sb-ds-neutral-600); font-variant-numeric: tabular-nums; }
.modulo-numero > svg { vertical-align: -3px; } /* -3 pixels: o ícone de 16 fica no meio da linha de 24 */
.modulo-titulo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.modulo-titulo > h3 { flex: 0 1 auto; min-width: 0; margin: 0; font: inherit; }
.detalhe [data-slot="accordion-trigger"].modulo-gatilho { display: block; flex: 0 1 auto; min-width: 0; padding: 0; border-radius: 0; font-size: 16px; line-height: 24px; font-weight: 400; text-align: left; color: var(--foreground); text-decoration: none; cursor: pointer; box-shadow: none; }
.modulo-nome { font-weight: 600; }
.modulo-gatilho .cinza { color: var(--sb-ds-neutral-600); }
/* O botão do nome cobre a linha inteira, e a seta fica na coluna dela, no meio da linha, em azul, porque é clicável. */
.modulo-gatilho::after { content: ""; position: absolute; inset: 0; }
.modulo-gatilho:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }
.detalhe .modulo-gatilho > svg { position: absolute; right: 16px; top: 20px; width: 16px; height: 16px; translate: none; color: var(--primary); } /* 20 pixels: a seta de 16 fica no meio da linha de 56 */
.modulo-valor { font-size: 16px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* O resto do topo do módulo aberto: a imagem, embaixo do nome, e, ao lado dela, as medidas e os materiais. Ele começa
   8 pixels acima do fim da linha, embaixo da parte sem fundo dela, e fecha o módulo com o clique, como a linha. A
   imagem e as etiquetas começam 1 pixel depois do começo da coluna, no traço reto das letras da fonte Geist (ponto 3
   da lista "Antes de mostrar uma tela"). */
.modulo-resto { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-content: start; margin-top: -8px; padding: 0 16px 16px 72px; cursor: pointer; } /* -8 pixels: a imagem fica 8 pixels abaixo do nome, como no topo do cartão de antes; 72 pixels: os 16 da ponta, os 40 do número e os 16 entre as colunas */
.modulo-resto > .quadro-da-imagem { grid-row: 1 / span 2; translate: 1px 0; } /* 1 pixel: o traço reto das letras */
.modulo-resto > .cartao-medidas, .modulo-resto > .etiquetas { grid-column: 2; }
.modulo-resto > .etiquetas { translate: 1px 0; } /* 1 pixel: a borda das etiquetas no traço do L de "Largura" */
/* Desde o "aplicar" da Página do projeto, de 15/10, pela escolha 23 e pela etapa 8 do plano e pela regra 130: no módulo
   com o nome dado, o nome da biblioteca fica na 1ª linha do resto do topo, em cinza, colado embaixo do nome, como na
   lista dos módulos da página, e a imagem fica 8 pixels abaixo dele. A linha do módulo aberto fica sem fundo nos 16
   pixels de baixo, e não nos 8, para o nome da biblioteca começar onde o nome termina, a 40 pixels do alto da linha; a
   linha parada continua com 56 pixels e cobre o nome da biblioteca quando ele passa por baixo dela. */
.modulo.com-biblioteca[data-state="open"]:not([data-parada="sim"]) > .modulo-linha { background: linear-gradient(var(--fundo-da-linha) 40px, transparent 40px); }
.com-biblioteca > .modulo-resto { margin-top: -16px; } /* -16 pixels: o resto começa no fim do nome, a 40 pixels do alto da linha */
.modulo-resto > .modulo-biblioteca { grid-column: 1 / -1; margin-bottom: 8px; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-600); overflow-wrap: anywhere; } /* 8 pixels: a imagem fica 8 pixels abaixo do nome da biblioteca */
.com-biblioteca > .modulo-resto > .quadro-da-imagem { grid-row: 2 / span 2; }
.de-fora > .modulo-resto { display: block; }
/* Com o ponteiro em cima, a linha e o resto do topo ficam azul claro, e o nome fica azul, pela regra 81. */
.modulo-linha:hover, .modulo-linha:has(+ .modulo-resto:hover) { --fundo-da-linha: var(--secondary); }
.modulo-linha:hover + .modulo-resto, .modulo-resto:hover { background: var(--secondary); }
.modulo-linha:hover .modulo-nome, .modulo-linha:has(+ .modulo-resto:hover) .modulo-nome { color: var(--primary); }
/* A marca de chegada, a forma A: o contorno azul em volta do módulo clicado na página, inteiro, e o fundo azul claro
   na 1ª linha dele, também parada no alto, e no resto do topo. O contorno fica por cima de tudo o que há dentro do
   módulo, e a linha parada ganha o traço azul em cima. */
.modulo.chegada > .modulo-linha { --fundo-da-linha: var(--secondary); }
.modulo.chegada > .modulo-resto { background: var(--secondary); }
.modulo.chegada::after { content: ""; position: absolute; inset: -1px 0 0 0; z-index: 8; border: 1px solid var(--primary); pointer-events: none; } /* -1 pixel: o contorno começa na linha de 1 pixel de cima do módulo */
.modulo.chegada[data-parada="sim"] > .modulo-linha { box-shadow: inset 0 1px 0 var(--primary); }
.cartao-medidas { font-size: 14px; line-height: 20px; color: var(--foreground); font-variant-numeric: tabular-nums; }
.cartao-medidas b { font-weight: 600; }
.cartao-medidas.cinza { color: var(--sb-ds-neutral-600); }
.quadro-da-imagem { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--background); color: var(--sb-ds-neutral-500); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent); }
/* Desde o "aplicar" da escolha do módulo, de 30/10, o quadro é a foto do 3D do módulo (.foto-pelo-3d, pela EM11), com o fundo cinza
   50 do 3D, como na lista, menos sem foto nenhuma, quando fica o ícone de imagem no branco. */
.quadro-da-imagem.foto-pelo-3d:not(.foto-sem-imagem) { background: var(--sb-ds-neutral-50); }
.modulo-resto .etiquetas { position: relative; z-index: 1; pointer-events: none; }
.modulo-resto .mais-materiais { pointer-events: auto; }
/* O conteúdo do módulo aberto começa no ponto do nome, a 72 pixels da borda, como a resposta embaixo da pergunta num
   FAQ, e o texto de cada nível de dentro começa 24 pixels depois do texto do nível de cima. */
.modulo-corpo { padding: 16px 16px 0 72px; } /* 72 pixels: os 16 da ponta, os 40 do número e os 16 entre as colunas */
/* Os 16 pixels de baixo ficam dentro da parte "Quanto custa este módulo", para o título dela sair do alto junto com a
   linha do módulo, no fim do módulo, e não 16 pixels antes. */
.modulo-corpo > .secao, .modulo-corpo > .custos { padding-bottom: 16px; }

/* ---- O nível 2: "Quanto custa este módulo" e as linhas do custo ---- */
/* O título fica parado embaixo da linha do módulo em todo módulo aberto, com as linhas do custo abertas ou fechadas
   (regra 88). As linhas têm o ícone, o nome com a quantidade em cinza, o valor na coluna de 112 pixels e a coluna da
   seta, de 24: com os 8 de espaço, o "R$" fica na vertical do valor do módulo, e a seta, na vertical da seta dele. */
.secao-titulo { position: sticky; top: var(--parada-do-titulo); z-index: 5; margin: -8px 0; padding: 8px 0; background: var(--background); font-size: 14px; line-height: 20px; font-weight: 600; } /* -8 e 8 pixels: o título parado cobre os 8 pixels acima e abaixo dele */
.custos { list-style: none; margin: 8px 0 0 0; padding: 0; }
.custo { display: grid; grid-template-columns: 16px minmax(0, 1fr) 112px 24px; column-gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.custos > .custo:first-child { border-top: 0; }
.custo > svg { margin-top: 2px; color: var(--sb-ds-neutral-600); } /* 2 pixels: o ícone fica no meio da 1ª linha */
.custo-nome { display: flex; align-items: center; min-width: 0; font-weight: 500; }
.custo-nome .cinza { font-weight: 400; }
.custo-valor { font-weight: 500; font-variant-numeric: tabular-nums; text-align: left; white-space: nowrap; }
/* O peso da letra dos valores cai a cada nível: 600 na linha do custo, 500 na categoria e 400 no item (plano, etapa 2). */
.custos > .custo > .custo-valor, .custos > .custo > h3 .custo-valor { font-weight: 600; }
/* O "i" de 24 pixels passa 2 pixels acima e 2 abaixo da linha de texto de 20, sem aumentar a linha, e fica a 8 pixels
   do nome que ele explica. */
.botao-informacao.no-detalhe { flex: none; margin: -2px 0; } /* -2 pixels: o "i" de 24 cabe na linha de 20 */
.custo-nome > .botao-informacao, .item-nome > .botao-informacao { margin-left: 8px; }
/* O "i" das categorias "Ferragens" e "Dispositivos de montagem" fica por cima do botão da categoria, que cobre a linha
   inteira: sem isso, o ponteiro em cima do "i" abria e fechava a categoria, e a explicação não abria (achado da
   conferência das explicações, no "aplicar" de 07/10). O selo e a marca do preço da linha do módulo já ficavam por cima. */
.categoria-linha .botao-informacao { position: relative; z-index: 1; }
.complemento-da-linha { flex: 0 100 auto; margin-left: 4px; } /* 4 pixels: o espaço de 1 letra antes do "·" */
.custo-nome > h3 + .complemento-da-linha { margin-left: 4px; } /* 4 pixels: o espaço de 1 letra antes do "·", como em .complemento-da-linha */
/* A linha que abre e fecha: o botão ocupa a linha, e o fundo do ponteiro passa 8 pixels do texto. */
.custo.abre-e-fecha { display: block; padding: 0; }
.custo.abre-e-fecha > h3 { margin: 0; font: inherit; }
.detalhe [data-slot="accordion-trigger"].custo-gatilho { display: grid; grid-template-columns: 16px minmax(0, 1fr) 112px 24px; column-gap: 8px; align-items: start; margin: 0 -8px; padding: 8px; border-radius: 6px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--foreground); text-decoration: none; cursor: pointer; box-shadow: none; } /* -8 e 8 pixels: o fundo do ponteiro passa 8 pixels do texto; 6 pixels: o canto do botão do design system */
.custo-gatilho > .custo-nome { display: block; }
.detalhe .custo-gatilho:hover { background: var(--secondary); }
.detalhe .custo-gatilho:hover .custo-nome { color: var(--primary); }
.detalhe .custo-gatilho:hover .cinza { color: var(--sb-ds-neutral-600); } /* o cinza do design system tem 4,35:1 sobre o fundo do ponteiro; o cinza escuro tem 7,17:1 */
.detalhe .custo-gatilho:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.custo-gatilho > svg:first-child { margin-top: 2px; color: var(--sb-ds-neutral-600); } /* 2 pixels: o ícone fica no meio da 1ª linha */
.detalhe .custo-gatilho > svg:last-child { justify-self: end; margin-top: 2px; translate: none; color: var(--primary); } /* 2 pixels: a seta fica no meio da linha */
/* A linha do custo aberta fica parada embaixo do título; o que fica dentro dela tem o fundo cinza claro, com as
   tabelas brancas, e a linha-guia desce do ícone da linha, e o traço, da seta, até o último item de dentro. */
.custo.abre-e-fecha[data-state="open"] { position: relative; }
.custo.abre-e-fecha[data-state="open"] > h3 { position: sticky; top: var(--parada-do-custo); z-index: 4; background: var(--background); }
.custo.abre-e-fecha > [data-slot="accordion-content"][data-state="open"] { margin-bottom: 8px; border-radius: 8px; background: var(--muted); }
.custo.abre-e-fecha[data-state="open"]::before, .custo.abre-e-fecha[data-state="open"]::after { content: ""; position: absolute; z-index: 1; top: 40px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--sb-ds-neutral-300); } /* 40 pixels: a linha começa 4 pixels abaixo da linha do custo, de 36; 8 pixels: ela termina no fim do fundo cinza */
.custo.abre-e-fecha[data-state="open"]::before { left: 7px; } /* 7 pixels: o meio do ícone de 16 */
.custo.abre-e-fecha[data-state="open"]::after { right: 7px; } /* 7 pixels: o meio da seta de 16 */
.aberto { padding: 8px 0; }
.aberto .cinza, .aberto .item-detalhe { color: var(--sb-ds-neutral-600); } /* o cinza do design system tem 4,35:1 sobre o cinza claro; o cinza escuro tem 7,17:1 */
/* As peças e os componentes que ainda não chegaram: 3 linhas cinza, 1 para cada categoria, no ponto do texto das
   categorias; e os que não chegam, desde o "aplicar" da Página do projeto, de 15/10, o bloco que não carregou da regra
   113, com a frase, o botão de texto "Tentar agora" e, depois de 2 minutos, a frase da ajuda (cenário 3). O bloco fica
   no alto da parte aberta, sem os 32 pixels de cima que ele tem nas outras telas, e no preto, e não no cinza, como a
   frase de antes, porque o texto é o que a parte aberta mostra. */
.aberto.esperando { padding: 16px 48px; }
.aberto .erro-das-pecas.nao-carregou { margin-top: 0; }
.aberto .esqueletos .esqueleto { background: var(--sb-ds-neutral-200); } /* sobre o cinza claro do que fica dentro da linha do custo, a linha cinza do Skeleton fica 1 tom mais escura, para aparecer */
/* Pela regra 113, desde a etapa 4 do "aplicar" das microinterações, de 01/11: as 3 linhas cinza do "Tentar agora" deixam de pulsar
   depois de 5 segundos, pela classe sem-pulsar (telas/pagina-do-servico.js, LinhaQueAbre, e .esqueletos.sem-pulsar, na parte do
   Meu perfil), e ficam paradas para quem pediu menos movimento ao computador; até essa etapa, elas pulsavam sem parar. */
@media (prefers-reduced-motion: reduce) { .detalhe .esqueletos .esqueleto { animation: none; } }
.categorias > * + * { border-top: 1px solid var(--border); }

/* ---- O nível 3: as categorias e a linha com 1 coisa só dentro ---- */
/* A categoria tem o ícone no ponto do texto da linha do custo, o nome 24 pixels depois dele, o valor na coluna dos
   valores e a seta 24 pixels mais para dentro que a da linha do custo. O fundo do ponteiro passa 8 pixels do texto. */
.categoria-linha { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) 112px 24px; column-gap: 8px; align-items: start; margin: 0 -8px; padding: 8px 8px 8px 32px; border-radius: 6px; font-size: 14px; line-height: 20px; } /* -8 e 8 pixels: o fundo do ponteiro; 32 pixels: os 8 do fundo e os 24 do nível */
.categoria-linha > svg, .linha-de-uma-coisa > svg { margin-top: 2px; color: var(--sb-ds-neutral-600); } /* 2 pixels: o ícone fica no meio da 1ª linha */
.categoria-linha > .custo-valor, .linha-de-uma-coisa > .custo-valor { font-weight: 500; }
.custo-nome > h3 { flex: 0 1 auto; min-width: 0; margin: 0; font: inherit; }
.detalhe [data-slot="accordion-trigger"]:is(.categoria-gatilho, .parte-gatilho) { display: block; flex: 0 1 auto; min-width: 0; padding: 0; border-radius: 0; font: inherit; text-align: left; color: inherit; text-decoration: none; cursor: pointer; box-shadow: none; }
.categoria-gatilho::after, .parte-gatilho::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.categoria-gatilho:focus-visible::after, .parte-gatilho:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
.detalhe .categoria-gatilho > svg { position: absolute; right: 32px; top: 10px; width: 16px; height: 16px; translate: none; color: var(--primary); } /* 32 pixels: a seta fica 24 pixels mais para dentro que a da linha do custo, e os 8 do fundo do ponteiro; 10 pixels: no meio da 1ª linha */
.categoria-linha:hover { background: var(--secondary); }
.categoria-linha:hover .custo-nome > h3 { color: var(--primary); }
/* A categoria aberta fica parada embaixo da linha do custo, com o fundo cinza claro só dentro da linha do custo e a
   linha-guia e o traço da linha do custo desenhados por cima dela. */
.categoria[data-state="open"] > .categoria-linha { position: sticky; top: var(--parada-da-categoria); z-index: 3; background: linear-gradient(to right, transparent 8px, var(--muted) 8px, var(--muted) calc(100% - 8px), transparent calc(100% - 8px)); }
.categoria[data-state="open"] > .categoria-linha:hover { background: var(--secondary); }
.categoria[data-state="open"] > .categoria-linha::before, .categoria[data-state="open"] > .categoria-linha::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sb-ds-neutral-300); } /* 2 pixels: a largura da linha-guia e do traço, como na categoria aberta */
.categoria[data-state="open"] > .categoria-linha::before { left: 15px; } /* 15 pixels: os 8 do fundo e os 7 da linha-guia da linha do custo */
.categoria[data-state="open"] > .categoria-linha::after { right: 15px; } /* 15 pixels: os 8 do fundo e os 7 do traço, como no ::before */
/* O que fica dentro da categoria aberta: 24 pixels para dentro, com a linha-guia, que desce do ícone, e o traço, que
   desce da seta, até o último item. */
.categoria-aberta { position: relative; margin-left: 24px; padding-bottom: 8px; }
.categoria-aberta::before, .categoria-aberta::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 8px; width: 2px; border-radius: 1px; background: var(--sb-ds-neutral-300); } /* 2 pixels: a largura da linha-guia e do traço */
.categoria-aberta::before { left: 7px; } /* 7 pixels: o meio do ícone da categoria */
.categoria-aberta::after { right: 31px; } /* 31 pixels: o meio da seta da categoria */
/* A linha com 1 coisa só dentro tem a forma da categoria, sem a seta, e não abre. */
.linha-de-uma-coisa { display: grid; grid-template-columns: 16px minmax(0, 1fr) 112px 24px; column-gap: 8px; align-items: start; padding: 8px 0 8px 24px; font-size: 14px; line-height: 20px; } /* 24 pixels: o ícone no ponto do texto da linha do custo */

/* ---- O nível 4: os itens, em 2 linhas, e as partes do móvel ---- */
/* O item começa 24 pixels depois do texto da categoria, e a amostra, quando o item tem cor, fica antes do nome, no
   ponto do texto da categoria: o nome de todo item começa no mesmo ponto. O valor fica na coluna dos valores, e a lista
   termina 48 pixels antes da borda, para o traço passar. */
.itens { margin: 0 48px 8px 24px; } /* 48 pixels: a lista termina antes do traço da categoria */
.item { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: start; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.item:first-child { border-top: 0; }
.item-texto { display: block; min-width: 0; padding: 0 16px 0 24px; } /* 24 pixels: o nome começa no mesmo ponto com e sem a amostra */
.item-nome { display: flex; align-items: center; min-width: 0; font-weight: 400; }
.item-nome > .amostra { margin-left: -24px; margin-right: 8px; }
.item-detalhe { display: block; color: var(--sb-ds-neutral-600); }
.item-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A parte do móvel tem a forma do item, com a amostra da chapa no ponto do texto da categoria, e abre a tabela das
   peças; a seta fica 24 pixels mais para dentro que a da categoria. */
.parte-linha { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) 112px 24px; column-gap: 8px; align-items: start; padding: 8px 0 8px 24px; border-top: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.parte-linha > .amostra { margin-top: 2px; } /* 2 pixels: o quadrado fica no meio da 1ª linha */
.parte-linha > .custo-nome { display: block; font-weight: 400; }
.parte-linha > .custo-nome > h3 { display: block; }
.parte-linha > .custo-valor { font-weight: 400; }
.detalhe .parte-gatilho > svg { position: absolute; right: 48px; top: 10px; width: 16px; height: 16px; translate: none; color: var(--primary); } /* 48 pixels: a seta fica 24 pixels mais para dentro que a da categoria; 10 pixels: no meio da 1ª linha */
.parte-linha:hover { background: var(--secondary); }
.parte-linha:hover .custo-nome > h3 { color: var(--primary); }
.parte-do-movel[data-state="open"] > .parte-linha { position: sticky; top: var(--parada-da-parte); z-index: 2; background: linear-gradient(var(--sb-ds-neutral-300), var(--sb-ds-neutral-300)) left 7px top 0 / 2px 100% no-repeat, linear-gradient(var(--sb-ds-neutral-300), var(--sb-ds-neutral-300)) right 31px top 0 / 2px 100% no-repeat, linear-gradient(var(--sb-ds-neutral-300), var(--sb-ds-neutral-300)) right 7px top 0 / 2px 100% no-repeat, var(--muted); } /* a linha-guia da categoria e os 2 traços passam por cima da parte parada */
.parte-do-movel[data-state="open"] > .parte-linha:hover { background: var(--secondary); }
/* O pressionado nos 4 níveis do acordeão do detalhe, desde o "aplicar" da Página do projeto, de 15/10, pela parte 13 do
   estudo e pela regra 119: enquanto a pessoa segura o clique na linha, o fundo passa do azul claro do ponteiro em cima,
   o --secondary, ao brand-200, 1 tom mais escuro, e o nome continua no azul principal, do ponteiro em cima. O clique no
   selo, na marca do preço ou no "i" da linha fica com o pressionado deles. */
.modulo-linha:has(.modulo-gatilho:active), .modulo-linha:has(+ .modulo-resto:active) { --fundo-da-linha: var(--sb-ds-brand-200); }
/* O botão "+N materiais", dentro do resto do topo, tem o pressionado dele, e a linha fica no azul do ponteiro em cima. A
   regra fica separada da de cima, porque o navegador descarta a regra inteira com um ":has" dentro de outro ":has". */
.modulo-linha:has(+ .modulo-resto button:active) { --fundo-da-linha: var(--secondary); }
.modulo-linha:has(.modulo-gatilho:active) + .modulo-resto, .modulo-resto:active:not(:has(button:active)) { background: var(--sb-ds-brand-200); }
.detalhe .custo-gatilho:active { background: var(--sb-ds-brand-200); }
.detalhe .categoria > .categoria-linha:has(.categoria-gatilho:active) { background: var(--sb-ds-brand-200); }
.detalhe .parte-do-movel > .parte-linha:has(.parte-gatilho:active) { background: var(--sb-ds-brand-200); }
.parte-aberta { position: relative; margin-left: 24px; padding-bottom: 8px; }
.parte-aberta::before { content: ""; position: absolute; z-index: 1; left: 7px; top: 0; bottom: 8px; width: 2px; border-radius: 1px; background: var(--sb-ds-neutral-300); } /* 7 pixels: o meio da amostra */

/* ---- O nível 5: a tabela das peças ---- */
/* A tabela começa no ponto do texto do nível de cima e termina 48 pixels antes da borda, para o traço passar. */
.pecas-da-chapa { margin-right: 48px; padding: 0 0 8px 24px; }
.modulo-corpo .tabela-do-detalhe { background: var(--background); }
/* O cabeçalho da tabela fica em negrito, em preto, com a linha de baixo mais escura, e parado embaixo do último título
   parado: a parte do móvel ou, com 1 chapa, a categoria. */
.modulo-corpo .tabela-do-detalhe thead th, .modulo-corpo .tabela-do-detalhe thead td { position: sticky; top: calc(var(--parada-da-parte) + var(--altura-da-parte)); z-index: 1; background: var(--background); box-shadow: inset 0 -1px 0 var(--sb-ds-neutral-400); color: var(--foreground); font-weight: 600; }
.categoria-aberta > .pecas-da-chapa thead :is(th, td) { top: var(--parada-da-parte); }
/* A tira da borda engrossada fica embaixo da peça que ela engrossa, 24 pixels para dentro, sem a linha que separa as
   peças, e com o traço que liga a tira à peça de cima: do alto da linha até o meio da 1ª linha de texto, a 18 pixels,
   com 10 de largura (decisão 10 do plano). */
.tabela-do-detalhe tr.tira > th { position: relative; padding-left: 24px; }
.tabela-do-detalhe tr.tira > th, .tabela-do-detalhe tr.tira > td { border-top-color: transparent; }
.tabela-do-detalhe tr.tira > th::before { content: ""; position: absolute; left: 8px; top: 0; width: 10px; height: 18px; box-sizing: border-box; border-left: 2px solid var(--sb-ds-neutral-300); border-bottom: 2px solid var(--sb-ds-neutral-300); border-bottom-left-radius: 6px; } /* 18 pixels: os 8 do espaço de cima e os 10 da meia linha; 6 pixels: a curva do traço */
.por-unidade { display: block; color: var(--sb-ds-neutral-600); }
/* As caixas pequenas que ficam na coluna de um texto começam 1 pixel depois do começo da coluna, no traço reto das
   letras da Geist: a amostra no começo de uma linha, o desenho da peça embaixo de "Bordas com fita" e o selo embaixo do
   nome da peça. */
.modulo-corpo .amostra, .modulo-corpo .fita-celula > .peca-mini, .modulo-corpo th .selo-clicavel { translate: 1px 0; }

/* As tabelas: todas as colunas à esquerda, com 24 pixels entre os títulos, e as tabelas do mesmo detalhe com as
   colunas no mesmo eixo, pela regra 77. Cada largura é a do título mais 24 pixels. */
.tabela-do-detalhe { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.tabela-do-detalhe th, .tabela-do-detalhe td { padding: 8px 16px 8px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.tabela-do-detalhe th:last-child, .tabela-do-detalhe td:last-child { padding-right: 0; }
.tabela-do-detalhe thead th, .tabela-do-detalhe thead td { border-top: 0; font-weight: 500; color: var(--sb-ds-neutral-600); }
.tabela-do-detalhe tbody th { font-weight: 400; }
.tabela-do-detalhe .col-qtd { width: 100px; } /* o título "Quantidade", de 76 pixels, e 24 de espaço até a coluna seguinte */
.tabela-do-detalhe .col-medidas, .tabela-do-detalhe .col-marca { width: 209px; } /* o título "Comprimento × largura (mm)", de 185 pixels, e 24 de espaço */
.tabela-do-detalhe .col-fita, .tabela-do-detalhe .col-valor { width: 272px; }
.tabela-do-detalhe td.desenho { padding-top: 6px; padding-bottom: 6px; } /* 6 pixels: com o desenho de 24 pixels, a linha fica com 36, a altura das linhas de texto */
.fita-celula { display: flex; align-items: center; gap: 8px; }
.titulo-com-info { display: inline-flex; align-items: center; gap: 4px; } /* 4 pixels: o "i" fica colado ao título */
.peca-extra { display: flex; align-items: center; gap: 4px; font-weight: 400; color: var(--sb-ds-neutral-600); } /* 4 pixels: o "i" fica colado à frase */
/* O desenho da peça deitada: a borda com fita é uma linha de 4 pixels na cor da fita, contornada por dentro por
   uma linha cinza de 1 pixel, para a fita branca aparecer no desenho branco; a borda sem fita é a linha cinza. Cada
   borda pode ter a cor da própria fita, para a peça com 2 fitas. O leitor de tela lê a frase ao lado. */
.peca-mini { --cor-da-fita: var(--sb-ds-neutral-700); --contorno: var(--sb-ds-neutral-500); --cima: 0 0 transparent; --baixo: 0 0 transparent; --esquerda: 0 0 transparent; --direita: 0 0 transparent; --cima-contorno: 0 0 transparent; --baixo-contorno: 0 0 transparent; --esquerda-contorno: 0 0 transparent; --direita-contorno: 0 0 transparent; display: inline-block; flex: none; width: 48px; height: 24px; box-sizing: border-box; vertical-align: middle; border: 1px solid var(--contorno); border-radius: 2px; background: var(--background); box-shadow: var(--cima), var(--baixo), var(--esquerda), var(--direita), var(--cima-contorno), var(--baixo-contorno), var(--esquerda-contorno), var(--direita-contorno); } /* 2 pixels: o canto do desenho da peça, como no estudo */
.peca-mini.fita-cima { --cima: inset 0 4px 0 var(--cor-cima, var(--cor-da-fita)); --cima-contorno: inset 0 5px 0 var(--contorno); }
.peca-mini.fita-baixo { --baixo: inset 0 -4px 0 var(--cor-baixo, var(--cor-da-fita)); --baixo-contorno: inset 0 -5px 0 var(--contorno); }
.peca-mini.fita-esquerda { --esquerda: inset 4px 0 0 var(--cor-esquerda, var(--cor-da-fita)); --esquerda-contorno: inset 5px 0 0 var(--contorno); }
.peca-mini.fita-direita { --direita: inset -4px 0 0 var(--cor-direita, var(--cor-da-fita)); --direita-contorno: inset -5px 0 0 var(--contorno); }
.peca-mini.escura { --cor-da-fita: var(--sb-ds-neutral-700); }
.peca-mini.clara { --cor-da-fita: var(--sb-ds-neutral-100); }
.peca-mini.madeira { --cor-da-fita: var(--sb-ds-accent-700); }
/* A explicação do "i" do detalhe: a caixa branca da regra 32, com até 320 pixels de largura, como no estudo. O
   desenho da fita, na explicação de "Bordas com fita", fica no azul principal, a exceção da regra 35. */
.explicacao-do-detalhe { max-width: var(--largura-da-explicacao, 320px) !important; /* a variável, só quando a área que rola em volta do elemento é mais estreita, pela regra 79 */ padding: 16px !important; text-align: left; text-wrap: wrap !important; }
.explicacao-do-detalhe .peca-mini.grande { --cor-da-fita: var(--primary); display: block; width: 96px; height: 48px; margin-bottom: 8px; }
/* O selo amarelo que abre a explicação, como o do preço desatualizado e o do aviso de montagem: um botão, que mostra
   a mãozinha e escurece um tom com o ponteiro em cima, pela regra 81. */
.selo-clicavel { border: 0; font-family: inherit; cursor: pointer; }
/* Desde a etapa 20 da 4ª PR do "aplicar" da tela 3: o selo amarelo com texto que abre a explicação, como o do aviso de montagem, na
   página do módulo e na Página do projeto, volta a ter a borda de 1 pixel no accent-700, pela regra 109, que a regra de cima tirava
   desde antes de 10/10; o espaço de dentro perde 1 pixel, e o selo fica do mesmo tamanho, 20 pixels de altura, como a regra 109
   pede onde o elemento não tinha borda. O selo só com o ícone já tinha a borda, na regra .selo-clicavel.selo-so-icone, abaixo. */
.selo-atencao.selo-clicavel:not(.selo-so-icone) { border: 1px solid var(--sb-ds-accent-700); padding: 1px 8px; } /* 1 pixel: os 2 do selo do design system em cima e embaixo, menos a borda; 8 pixels: os 8 dos lados do Badge do design system, dentro da borda, desde o fim da PR 1 do super plano */
.selo-clicavel:hover { background: var(--sb-ds-accent-400); }
.selo-clicavel:active { background: var(--sb-ds-accent-500); } /* desde as correções da etapa 20: pressionado, 1 tom acima do ponteiro em cima, pela regra 119, como .atencao e .marca-do-preco; a borda continua no accent-700 */
.selo-clicavel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
/* O selo amarelo só com o ícone, da linha do módulo do resumo, desde a 2ª metade da etapa 17 da 4ª PR, pela M5: 28 por 20 pixels,
   com o ícone de 12 no meio, 7 pixels de cada lado e a borda de 1 no amarelo 700, pela regra 109, como o selo do estudo das
   melhorias (linha 144); 20 pixels é a altura do selo com texto, e 28, a largura que a M5 mediu nos 94 nomes. Até a etapa 20, o
   selo com texto ficava sem a borda, pela classe selo-clicavel; desde a etapa 20, ele tem a borda, pela regra logo acima. */
.selo-clicavel.selo-so-icone { box-sizing: border-box; width: 28px; height: 20px; padding: 0; justify-content: center; border: 1px solid; } /* 28 e 20 pixels: a largura medida nos 94 nomes e a altura do selo com texto */
/* A marca K do preço desatualizado, desde o "aplicar" de 06/10: o valor num fundo amarelo, com o ícone de alerta,
   como os selos amarelos, sem o texto. Desde o "aplicar" de 07/10, o ícone fica depois do valor, e a caixa começa 6
   pixels antes do "R$", os 6 do espaço: o "R$" continua na mesma vertical dos outros valores, pela regra 80. O texto
   sobre o amarelo forte tem 11,01:1 de contraste. Com o ponteiro em cima, o amarelo escurece 1 tom, como os selos, e
   o clique abre a explicação, pela regra 85. A marca fica acima do link que cobre a linha do módulo e do botão que
   cobre a linha do módulo no detalhe, para o ponteiro alcançar a marca. A marca do meio, na linha do custo e na
   categoria, só mostra: ela fica dentro do botão da linha, e a explicação abre na marca do item. */
.marca-do-preco { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; margin: -2px 0 -2px -6px; padding: 2px 6px; border: 0; border-radius: 8px; background: var(--sb-ds-accent-300); color: var(--sb-ds-accent-950); font: inherit; cursor: pointer; white-space: nowrap; } /* 2, 4 e 6 pixels: o espaço do selo do design system; -2 pixels: a marca cabe na linha sem aumentar a altura dela; -6 pixels: o "R$" fica no lugar dele */
.marca-do-preco:hover { background: var(--sb-ds-accent-400); }
.marca-do-meio, .marca-do-meio:hover { cursor: inherit; background: var(--sb-ds-accent-300); }
/* Na letra de 16 pixels, o ícone de 14 sobe 1 pixel, para ficar no meio da altura do número. */
.linha-valor .marca-do-preco svg, .modulo-valor .marca-do-preco svg { position: relative; top: -1px; } /* -1 pixel: o ícone de 14 no meio da altura do número de 16 */
.marca-do-preco:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* O aviso do preço, embaixo do total e na faixa do total do detalhe, com o botão "Atualizar o preço" à direita, que
   é o botão pequeno do design system, azul com borda, de 32 pixels de altura. O aviso do preço novo fica no azul
   claro, com o sinal de feito no azul principal. */
.aviso.aviso-com-botao { grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; }
.aviso.aviso-com-botao > svg { align-self: start; }
.aviso-com-botao > [data-slot="button"], .aviso-com-botao > .botao-atualizar { grid-column: 3; grid-row: 1; }
.aviso [data-slot="alert-description"] p { margin: 0; line-height: 20px; }
.aviso-forte { font-weight: 600; }
.aviso-feito { background: var(--secondary); color: var(--foreground); }
.aviso-feito > svg { color: var(--primary); }
.aviso:focus { outline: none; }
.botao-atualizar[aria-disabled="true"], .botao-atualizar[aria-disabled="true"]:hover { cursor: progress; color: var(--sb-ds-neutral-600) !important; border-color: var(--sb-ds-neutral-400) !important; background: var(--background) !important; }
/* Desde o "aplicar" da Página do projeto, de 15/10, pela escolha 11 do plano: travado pela falha, pela regra 102, o botão
   fica no cinza dos botões travados (.botao-travado), e não no branco da espera, que a regra de cima dava a todo botão
   "Atualizar o preço" travado; vale também na tela 2, que usa a mesma classe, pela regra 86. */
.botao-atualizar.botao-travado[aria-disabled="true"], .botao-atualizar.botao-travado[aria-disabled="true"]:hover {
  background: var(--muted) !important; border: 1px solid var(--muted) !important; color: var(--sb-ds-neutral-500) !important; cursor: not-allowed !important;
} /* desde a etapa 1 da PR 1 do super plano, a aparência única do que não se clica, da decisão 2 da folha 1, como .botao-travado */
/* A frase da espera longa de "Atualizar o preço", na Página do projeto, saiu na PR 5 do super plano, com o botão, pela SP11. */
.girando { animation: girar 1s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }
/* O anel do que falta nos lugares que ganharam o anel na etapa 2 da PR 1 do super plano, pela decisão 5 da folha 1, com a classe
   de componentes/o-que-falta.js: 2 pixels de azul e 2 de folga branca, que cresce 1% e volta a cada clique no botão travado, como a
   faixa da declaração. O "!important" passa por cima do anel do foco do campo do design system, porque o campo que falta recebe o
   cursor junto com o anel. Para quem pediu menos movimento ao sistema, o lugar só ganha o anel, parado.
   Desde o "aplicar" do anel do que falta, de 31/10, pela etapa 1 do plano e pela AF6, que deixa o desenho como estava, esta é a
   única classe do anel na app: as regras da classe "alvo", com o mesmo desenho, saíram da faixa da declaração, do bloco do momento,
   da pergunta da compra e da retirada, dos avisos amarelos, de "Mudar o projeto" e de "Enviar o projeto à MadMais", dos casos da
   janela de ajuda, das cores e dos botões da página do módulo, de "Voltar à escolha dos módulos" e do título do guia de montagem.
   Ficam à parte só as regras próprias de 1 elemento, cada uma com o motivo: a borda de cima da faixa da declaração, o botão de enviar
   travado, os campos de senha do Meu perfil e a folha impressa. */
.anel-do-que-falta { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary) !important; }
.anel-do-que-falta-0 { animation: cresce-0 0.4s ease-out 1; }
.anel-do-que-falta-1 { animation: cresce-1 0.4s ease-out 1; }
@keyframes cresce-0 { 0% { transform: scale(1); } 40% { transform: scale(1.01); } 100% { transform: scale(1); } }
@keyframes cresce-1 { 0% { transform: scale(1); } 40% { transform: scale(1.01); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .anel-do-que-falta-0, .anel-do-que-falta-1 { animation: none; } }
/* A frase do que falta, na linha reservada embaixo do que falta, pela regra 67 e pela decisão 5 da folha 1: em vermelho, com o
   ícone de alerta, como a frase do erro de um campo (.erro-do-campo), e a linha fica vazia, com a altura dela, até a frase
   aparecer. */
.frase-do-que-falta { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; min-height: 20px; margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--destructive); } /* 20 pixels: a altura de 1 linha da letra de 14, a linha reservada da regra 67, como a de .estado-do-campo */
.frase-do-que-falta > svg { margin-top: 2px; } /* 2 pixels: o ícone de 16 no meio da linha de 20 */
/* Desde a etapa 6 da PR 1 do super plano, pela regra 67: nos painéis estreitos, o painel da tela 3 (o aviso das máquinas, de 300 e
   336 pixels) e o painel "Mudar a cor de todos os módulos", da tela 2 (302 pixels), a frase mais longa de cada lugar ocupa 2 linhas,
   medidas no Chrome sem janela em 23/10, em janelas de 900 e de 1.280 pixels, e a linha reservada passa a ter as 2, para nada andar
   quando a frase aparece. Até a etapa 6, a frase empurrava o que vinha depois dela 20 pixels para baixo.
   Pela 14ª rodada da lista das decisões do super plano, a regra 67 vale em cada lugar da frase, com as linhas da frase mais longa
   de cada um, medidas no navegador em 23/10, nas janelas de 900 e de 1.280 pixels, que dão o mesmo número de linhas: 2 linhas
   embaixo dos casos da janela de ajuda (526 pixels) e das cores da página do módulo (336); e 3 em "Personalizar este módulo"
   (288) e nos avisos da cor e do ajuste do painel do total (288), em que a frase do ajuste mais longa, com os nomes dos 94
   módulos da biblioteca e os nomes dados nos projetos do protótipo, tem 3 linhas. */
.frase-do-que-falta.frase-do-que-falta-2-linhas { min-height: 40px; } /* 40 pixels: 2 linhas de 20, a altura da linha da letra de 14 */
.frase-do-que-falta.frase-do-que-falta-3-linhas { min-height: 60px; } /* 60 pixels: 3 linhas de 20, a altura da linha da letra de 14 */
.frase-do-que-falta.frase-embaixo-do-voltar { margin: -8px 0 16px; } /* desde o "aplicar" do anel do que falta, de 31/10: a linha reservada embaixo de "Voltar à escolha dos módulos", na troca de um módulo sem nenhuma cor na loja, fica a 8 pixels do link, descontados os 16 que o link já tem embaixo, e o título fica a 16 pixels da linha, como fica do link, pela regra 65 */
.frase-do-que-falta.frase-do-que-falta-4-linhas { min-height: 80px; } /* 80 pixels: 4 linhas de 20, desde o "aplicar" do anel do que falta, de 31/10, embaixo das fotos de cada cartão do quadro "Os ambientes do projeto", em que a frase da lixeira travada ocupa 4 linhas nas janelas de 900 e de 1.280 pixels, pela medida no navegador do Claude */
/* Desde o "aplicar" da Página do projeto, de 15/10, pelas mudanças 2 e 3 de 15/10 do plano: o mesmo anel da regra 68 em
   "Mudar o projeto" e em "Enviar o projeto à MadMais", na chegada pela tela 2 e pela home e no clique na etapa atual (PE7),
   com 2 pixels de branco entre o botão e o anel, para o anel azul não se confundir com a borda azul do botão. Desde o "aplicar" do
   anel do que falta, de 31/10, o anel vem da classe única (.anel-do-que-falta, acima). */
/* O botão de enviar travado pela caixa da declaração tira a sombra com "!important", também com o ponteiro em cima
   (.enviar-travado:hover), e essa regra pesa mais que a do anel; o anel volta por cima dela, com o peso do botão travado. */
.enviar.enviar-travado.anel-do-que-falta { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary) !important; }
/* O aviso amarelo do momento de atenção, no começo da página, logo abaixo da linha do tempo, pela decisão 15 e pela etapa 5
   do plano: no começo do corpo da página, a 48 pixels da linha do tempo, como a parte do preço quando não há aviso, e 32 acima
   da parte seguinte, como entre os blocos, pela regra 45. O aviso do preço do 2º momento (.aviso-no-comeco) saiu na PR 5 do
   super plano, com o preço vencido antes do envio, pela SP5. */
.servico-corpo > .aviso-do-momento { margin-bottom: 32px; }
/* O texto corrido da Página do projeto fica com no máximo 37em por linha, pela regra 8, desde o "aplicar" de 15/10: os
   avisos, as ações do cartão da loja, a abertura e as frases da declaração e os passos do projeto enviado. */
.servico-corpo .aviso [data-slot="alert-description"] > p, .loja-acao-complemento, .declaracao-abertura, .declaracao-frase, .enviado-frase, .enviado-complemento { max-width: 37em; }
/* As peças e os componentes que ainda não chegaram: 3 linhas cinza, do Skeleton do design system, no cinza claro
   do estudo; e os que não chegam: a frase e o botão de texto "Tentar agora", desde o "aplicar" de 15/10 (exemplo 4). */
.esqueletos { display: grid; row-gap: 16px; }
.esqueletos .esqueleto { height: 16px; border-radius: 4px; background: var(--muted); }
.esqueletos .esqueleto:nth-child(2) { width: 80%; }
.esqueletos .esqueleto:nth-child(3) { width: 64%; }
.erro-das-pecas p { margin: 0; color: var(--foreground); }
.botao-de-texto { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 500; cursor: pointer; }
.botao-de-texto:hover { text-decoration: underline; text-underline-offset: 3px; }
.botao-de-texto:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

/* A folha impressa do detalhe, que só aparece no papel: uma lista simplificada, sem cartões, cores, selos,
   desenhos e botões, com letra de 12 pixels, como uma lista impressa (estudo, 26ª versão). Desde o "aplicar" de 07/10,
   ela segue os 5 níveis da tela, cada nível 16 pixels mais para dentro que o de cima, com o valor numa coluna só, de 96
   pixels, e o "R$" na mesma vertical (estudo dos cenários do detalhe, parte da folha). */
.folha-do-detalhe { margin-top: 32px; font-size: 12px; line-height: 16px; color: var(--foreground); }
.folha-do-detalhe p { margin: 0; }
.folha-titulo { font-size: 16px; line-height: 24px; font-weight: 600; }
.folha-total { margin-top: 8px !important; font-size: 14px; line-height: 20px; }
.folha-linha { display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 16px; align-items: start; break-inside: avoid; }
/* Desde o "aplicar" da Página do projeto, de 15/10, pelo acréscimo 2 de 15/10 e pela etapa 8 do plano: o nome dado ao
   módulo quebra a linha e sai inteiro no papel, também com 255 caracteres sem espaço. */
.folha-linha > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.folha-nivel-1 { margin-top: 24px; padding-top: 8px; border-top: 2px solid var(--foreground); font-size: 14px; line-height: 20px; font-weight: 600; break-after: avoid; }
.folha-nivel-2 { margin-top: 16px; padding-left: 16px; font-weight: 600; break-after: avoid; }
.folha-nivel-3 { margin-top: 8px; padding-left: 32px; font-weight: 500; break-after: avoid; }
.folha-nivel-4 { margin-top: 4px; padding-left: 48px; font-weight: 400; } /* 4 pixels: a lista impressa é densa, como a folha de antes */
.folha-complemento { font-weight: 400; color: var(--sb-ds-neutral-600); }
.folha-complemento.em-bloco { display: block; }
.folha-nivel-1 .folha-complemento { font-size: 12px; line-height: 16px; }
.folha-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.folha-valor .marca-impressa { margin-left: -4px; } /* -4 pixels: a marca fica em volta do valor, com o "R$" no lugar */
.folha-tabela { width: calc(100% - 64px); margin: 4px 0 0 64px; border-collapse: collapse; table-layout: fixed; } /* 64 pixels: a tabela fica 16 pixels para dentro do nível de cima; 4 pixels: junto do item */
.folha-tabela th, .folha-tabela td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; vertical-align: top; } /* 4 pixels: as linhas da tabela impressa ficam juntas */
.folha-tabela thead th { color: var(--sb-ds-neutral-600); }
.folha-tabela tr { break-inside: avoid; } /* a linha da peça não se divide entre 2 páginas, com o caso dela embaixo do nome */
.folha-tabela .f-qtd { width: 88px; }
.folha-tabela .f-meio, .folha-tabela .f-fim { width: 200px; }
.folha-sub { display: block; color: var(--sb-ds-neutral-600); }
/* A marca do preço desatualizado, no valor que pode mudar: o fundo amarelo, sem o ícone, e as palavras "preço
   desatualizado" no complemento do item, para a folha impressa em preto e branco. */
.marca-impressa { display: inline-flex; align-items: center; padding: 0 4px; border-radius: 4px; background: var(--sb-ds-accent-300); color: var(--sb-ds-accent-950); } /* 4 pixels: o espaço e o canto da marca na letra de 12 da folha */

/* Os links de texto, como o "Ver no mapa" do cartão da loja e o botão de voltar. */
.link-de-texto { color: var(--primary); font-weight: 500; text-decoration: none; }
.link-de-texto:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-de-texto:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

/* As janelas da página: a lista das medidas, com a forma da lista da janela da versão de teste, e a
   frase de até quando o projeto pode mudar. */
.janela-lista { list-style: none; margin: 0; padding: 0 0 0 24px; }
.janela-lista li { position: relative; margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--foreground); }
.janela-lista li:first-child { margin-top: 0; }
.janela-lista li::before { content: "•"; content: "•" / ""; position: absolute; left: -24px; width: 24px; }
.janela-lista .complemento { display: block; font-size: 14px; line-height: 20px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.janela-nota { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted-foreground); text-wrap: pretty; }


/* ---------- Os campos de todas as telas (regra 110) ---------- */

/* Desde o "aplicar" do Meu perfil, de 10/10, pela regra 110, pela E37 e pela decisão 83: os campos de digitar e as caixas
   de escolha reagem do mesmo jeito em todas as telas. Parado, a borda fica no cinza 500 do design system, com 4,74:1
   contra o branco, porque o critério 1.4.11 da WCAG pede 3:1 para a borda que mostra onde fica o campo, e a borda do
   design system, o cinza 200, tem 1,26:1; com o ponteiro em cima, no cinza 700; com o cursor no campo, no azul principal,
   com o anel azul claro; e, com erro, no vermelho, também com o cursor no campo, com o anel vermelho claro do design
   system. O campo mudado e ainda não salvo fica sem cor própria. A busca da home e o campo do WhatsApp da página do
   serviço mudam junto. O achado da borda vai ao design system, pelo canal dele. O ":not(:disabled)" da regra do cursor no
   campo dá a ela o mesmo peso da regra do ponteiro em cima, e a que vem depois vale: com o cursor no campo e o ponteiro
   em cima, a borda continua azul, como a conferência de 10/10 achou que não ficava. */
[data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"] { border-color: var(--sb-ds-neutral-500); }
[data-slot="input"]:not(:disabled):hover, [data-slot="textarea"]:not(:disabled):hover, [data-slot="select-trigger"]:not(:disabled):hover { border-color: var(--sb-ds-neutral-700); }
[data-slot="input"]:not(:disabled):focus-visible, [data-slot="textarea"]:not(:disabled):focus-visible, [data-slot="select-trigger"]:not(:disabled):focus-visible, [data-slot="select-trigger"][data-state="open"]:not(:disabled) {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--secondary);
}
[data-slot="input"][aria-invalid="true"], [data-slot="textarea"][aria-invalid="true"], [data-slot="select-trigger"][aria-invalid="true"],
[data-slot="input"][aria-invalid="true"]:hover, [data-slot="textarea"][aria-invalid="true"]:hover, [data-slot="select-trigger"][aria-invalid="true"]:hover { border-color: var(--destructive); }
[data-slot="input"][aria-invalid="true"]:focus-visible, [data-slot="textarea"][aria-invalid="true"]:focus-visible, [data-slot="select-trigger"][aria-invalid="true"]:focus-visible {
  border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent); /* 20%: o anel do campo com erro do design system */
}
/* O campo de busca travado, da home e da escolha dos módulos, desde a etapa 1 da PR 1 do super plano, pela decisão 2 da folha 1 e
   pelo plano do super plano, que leva a decisão aos 2 campos, para o que não se clica ter 1 aparência só: o fundo cinza claro,
   com a borda na cor do fundo, o texto no cinza 500, o ponteiro de proibido e nada que mude com o ponteiro em cima; o campo usa o
   aria-disabled, e não o disabled do navegador, e por isso continua recebendo o foco do teclado, com o anel do foco. Até a etapa
   1, o campo usava o disabled, com a metade da opacidade do design system. */
[data-slot="input"][aria-disabled="true"], [data-slot="input"][aria-disabled="true"]:not(:focus-visible):hover { background: var(--muted); border-color: var(--muted); color: var(--sb-ds-neutral-500); box-shadow: none; cursor: not-allowed; }
[data-slot="input"][aria-disabled="true"]::placeholder { color: var(--sb-ds-neutral-500); }


/* ---------- A tela 6, o Meu perfil (telas/meu-perfil.js) ---------- */

/* Desde o "aplicar" do Meu perfil, de 10/10, a página fica na coluna estreita, de 640 pixels, no centro da faixa, com o
   botão de voltar, o título e os cartões começando na borda da coluna (regra 8, decisão 84 e E56): 672 pixels são os
   640 da coluna mais os 16 de cada lado, que a moldura das páginas já dá. Abaixo de 672 pixels, a coluna ocupa a tela
   inteira. */
.perfil-coluna { max-width: 672px; margin: 0 auto; }
/* A frase do e-mail da conta fica 8 pixels embaixo do título, em cinza, com o e-mail em preto, e o e-mail longo quebra
   em qualquer letra, para aparecer inteiro (E18 e parte 13 do estudo). */
.perfil-email-da-conta { margin: 8px 0 0; max-width: 37em; color: var(--muted-foreground); }
.perfil-email-dado { color: var(--foreground); font-weight: 500; overflow-wrap: anywhere; }
/* Cada bloco é o Card do design system, como o cartão da loja da página do serviço, 16 pixels embaixo do título do bloco,
   sem sombra: o corpo fica a 24 pixels da borda, e o rodapé fica embaixo de uma linha, no branco, com o botão à direita,
   a 24 pixels da borda (regra 105, E2, E3 e decisão 84). */
.perfil-cartao { margin-top: 16px; padding: 0; gap: 0; box-shadow: none; }
/* O cartão da senha fica na frente da frase da exclusão, que vem logo embaixo dele, desde a etapa 5 do "aplicar" das microinterações,
   de 01/11, pela MI18: na volta por "Cancelar", o cartão cresce de uma vez, e a frase, que anda do lugar de antes ao novo, começa o
   movimento por cima da borda de baixo do cartão (telas/meu-perfil.js, Senha); com o cartão na frente, a frase sai de baixo dele. */
#parte-senha > .perfil-cartao { position: relative; z-index: 1; }
.perfil-corpo { padding: 23px; } /* 23 pixels: com a borda de 1, o conteúdo fica a 24 da borda do cartão */
.perfil-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px 23px; border-top: 1px solid var(--border); } /* 23 pixels: o botão termina a 24 da borda do cartão */
/* Os campos de cada cartão ficam em 4 colunas de 136 pixels, a 16 pixels uma da outra, nos 592 pixels de dentro do
   cartão. Cada campo tem o rótulo, o campo 8 pixels abaixo e 1 linha reservada para a frase do estado, pela regra 67, e
   por isso nada anda quando a frase de erro aparece. Os seus dados ficam em 3 grupos, com 32 pixels entre 2 grupos, o
   dobro dos 16 de dentro de um grupo (E16). */
.perfil-campos { display: grid; grid-template-columns: repeat(4, 136px); column-gap: 16px; row-gap: 16px; }
.perfil-campo { display: flex; flex-direction: column; min-width: 0; }
.perfil-campo.perfil-grupo { margin-top: 16px; }
.perfil-s2 { grid-column: span 2; }
.perfil-s4 { grid-column: span 4; }
.perfil-campo > [data-slot="label"], .perfil-rotulo > [data-slot="label"] { line-height: 20px; }
.perfil-campo > [data-slot="input"], .perfil-campo > .perfil-senha, .perfil-campo > [data-slot="select-trigger"], .perfil-campo > [data-slot="textarea"] { margin-top: 8px; }
.perfil-campo .estado-do-campo, .perfil-campo .estado-do-campo:empty { display: block; min-height: 20px; margin-top: 8px; } /* 20 pixels: a altura de 1 linha da frase do estado, reservada embaixo do campo */
.perfil-campo > .dica-do-campo { margin-top: 8px; }
/* O rótulo com o "i" e com "Opcional" ao lado, a 4 pixels um do outro, como no estudo; o "i", de 24 pixels, sobe e desce
   2 pixels, para a linha do rótulo continuar com 20 (E22 e E41). 4 e 2 pixels são exceções à grade de 8, por esse motivo. */
.perfil-rotulo { display: flex; align-items: center; gap: 4px; } /* 4 pixels: o "i" e "Opcional" a 4 pixels do rótulo (E22 e E41) */
.perfil-rotulo > .botao-informacao { margin: -2px 0; } /* -2 pixels: o "i" de 24 sobe e desce 2, para a linha do rótulo continuar com 20 */
.perfil-opcional { color: var(--muted-foreground); font-weight: 400; }
/* A explicação do "i" do WhatsApp tem 400 pixels de largura, para o texto caber em 2 linhas sem cobrir o campo (E22). */
.explicacao-de-400 { max-width: 400px !important; }
/* A explicação dos 2 selos da imagem do resumo, na tela 2, "Indisponível na loja" e "Mude 1 escolha", tem 480 pixels de largura,
   desde o "aplicar" das explicações do resumo, de 31/10, pela ER2: com 3 linhas, a caixa abre do lado do selo que não cobre "Ver como
   fica na sua casa" nem "Cor e materiais", do painel do módulo, nas janelas de 1.024, 1.280 e 1.920 pixels, pela medida do estudo;
   com 320 pixels, ela cobria um dos 2 botões, conforme o painel aberto, e, com 400, encostava 1 pixel em "Ver como fica na sua
   casa" na janela de 1.280. */
.explicacao-de-480 { max-width: 480px !important; }
/* As escolhas do estado e da cidade ocupam a coluna inteira, com a mãozinha, e as opções têm o azul claro do ponteiro
   em cima, como os itens do menu da pessoa, pelas regras 49 e 81; a caixa reage ao ponteiro pela borda, como os campos de
   digitar, pela regra 110. */
.perfil-escolha { width: 100% !important; cursor: pointer; }
/* Desde a etapa 1 da PR 1 do super plano, pelo achado 1 da 2ª passada, as listas que abrem da tela 3, como "Ambiente" e "Até
   onde a porta abre", têm o mesmo ponteiro em cima, pela classe .projetar-lista-opcoes (telas/projetar/controles.js e
   telas/projetar/paginas/o-modulo.js): até a etapa 1, as opções ficavam amarelas e mostravam a seta. */
.perfil-opcoes [role="option"], .projetar-lista-opcoes [role="option"] { cursor: pointer; }
.perfil-opcoes [role="option"]:focus, .perfil-opcoes [role="option"][data-highlighted],
.projetar-lista-opcoes [role="option"]:focus, .projetar-lista-opcoes [role="option"][data-highlighted] { background-color: var(--secondary) !important; color: var(--foreground) !important; }
/* O WhatsApp tem a caixa de 288 pixels, com os algarismos de mesma largura. */
.perfil-whatsapp > [data-slot="input"] { width: 288px; font-variant-numeric: tabular-nums; }
/* O aviso da cidade fora da cidade de São Paulo: a 1ª linha fica na linha reservada embaixo dos 2 campos, e a 2ª empurra o
   resto do cartão para baixo (E28). -20 pixels: a altura da linha reservada. */
.perfil-aviso-da-cidade { margin: -20px 0 0; max-width: 37em; } /* -20 pixels: a altura da linha reservada */
/* O campo de senha deixa 40 pixels à direita para o botão do olho, de 28 pixels, a 4 da borda do campo, mais 8 de
   folga para o texto. 28, 4 e 6 pixels são exceções à grade de 8: o botão cabe dentro do campo de 36 pixels do
   design system, com o canto acompanhando o do campo. O olho fica azul um tom mais forte com o ponteiro em cima, como
   o X das janelas, pela regra 81 (D13). */
.perfil-senha { position: relative; display: block; }
.perfil-senha > [data-slot="input"] { padding-right: 40px; }
.mostrar-senha { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; padding: 0 !important; border-radius: 6px; color: var(--muted-foreground); cursor: pointer; } /* 28 e 4 pixels: o botão do olho cabe no campo de 36 do design system, a 4 da borda, como diz o comentário acima */
.mostrar-senha:hover { background: var(--sb-ds-brand-200) !important; color: var(--foreground) !important; }
.mostrar-senha:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; }
/* "Esqueceu a senha atual?", embaixo da linha do estado da senha atual (E36). */
.perfil-esqueceu { align-self: flex-start; }
/* A caixa dos conteúdos exclusivos, 24 pixels abaixo dos campos, com o "i" a 4 pixels do texto, como o "i" do total
   da página do serviço. A caixa de 16 pixels fica 4 pixels abaixo do alto da linha de 24, que é a altura do "i" (D9).
   A caixa e o texto dela recebem o clique; com o ponteiro em cima, a caixa ganha o halo azul claro do estudo, e o
   texto fica azul, pela regra 81. */
.perfil-caixa { margin-top: 24px; display: flex; align-items: flex-start; gap: 8px; max-width: 37em; }
.perfil-caixa > [role="checkbox"] { margin-top: 4px; cursor: pointer; } /* 4 pixels: a caixa de 16 no meio da linha de 24, a altura do "i" */
.perfil-caixa-linha { display: flex; align-items: center; gap: 4px; min-height: 24px; } /* 4 pixels: o "i" a 4 pixels do texto, como no rótulo (E22) */
.perfil-caixa-rotulo { line-height: 20px; font-weight: 400; cursor: pointer; }
.perfil-caixa:has(> [role="checkbox"]:hover, .perfil-caixa-rotulo:hover) > [role="checkbox"] { box-shadow: 0 0 0 4px var(--secondary); }
.perfil-caixa:has(> [role="checkbox"]:hover, .perfil-caixa-rotulo:hover) .perfil-caixa-rotulo { color: var(--primary); }
/* A caixa do aceite, só com ?termos=novo (D12): sem o "i", a linha tem 20 pixels, e a caixa fica 2 pixels abaixo do
   alto dela, no meio da 1ª linha. */
.perfil-aceite { margin-top: 8px; }
.perfil-aceite > [role="checkbox"] { margin-top: 2px; } /* 2 pixels: a caixa de 16 no meio da 1ª linha, de 20 */
.perfil-termos { margin: 16px 0 0; max-width: 37em; color: var(--muted-foreground); }
/* O passo da senha nova, no lugar dos 2 campos, e a frase do e-mail mandado, que fica no cartão depois do sonner
   (E36 e decisão 88). */
.perfil-parte-texto { margin: 0; max-width: 37em; color: var(--muted-foreground); }
.perfil-passo:focus { outline: none; }
.perfil-email-mandado { margin: 16px 0 0; max-width: 37em; }
/* Os botões de texto do Meu perfil ficam na linha deles, sem a margem que o botão "Tentar de novo" da página do serviço
   tinha até 15/10. */
.perfil-rodape .botao-de-texto, .perfil-campo .botao-de-texto { margin-top: 0; }
/* "Esqueceu a senha atual?" fica 8 pixels abaixo da linha do estado, na linha de "Use 6 caracteres ou mais.", ao lado,
   como no estudo; com 0, ele ficava 8 pixels acima da frase. */
.perfil-campo > .perfil-esqueceu { margin-top: 8px; }
/* Os seus dados carregando: as 4 linhas cinza do Skeleton, no lugar dos campos, como no estudo, e, depois de 10
   segundos, a frase da espera longa; o pulsar para depois de 5 segundos e para quem pediu menos movimento (regra 113). */
.perfil-carregando .esqueleto:nth-child(4) { width: 48%; }
.esqueletos.sem-pulsar .esqueleto { animation: none; }
@media (prefers-reduced-motion: reduce) { .perfil-carregando .esqueleto { animation: none; } }
.perfil-ainda { margin: 16px 0 0; color: var(--muted-foreground); }
/* Os seus dados que não carregaram: a frase do que falhou, o "Tentar agora" e, com ?pendentes=todos, a frase da ajuda
   (decisão 77). */
.perfil-nao-carregou { display: grid; row-gap: 8px; justify-items: center; max-width: 37em; margin: 0 auto; color: var(--muted-foreground); text-align: center; } /* no centro do cartão, pela decisão 19B da folha 3, desde a etapa 5 da PR 1 do super plano */
.perfil-nao-carregou p { margin: 0; }
/* O botão que espera a resposta do Cortecloud: o fundo branco, o texto cinza, a borda cinza e o cursor de espera, como o
   "Atualizar o preço" da página do serviço, e não o cinza do botão travado, que nesta app quer dizer que falta algo (E8). */
.botao-esperando, .botao-esperando:hover, .botao-esperando:active { cursor: progress; color: var(--sb-ds-neutral-600) !important; border: 1px solid var(--sb-ds-neutral-400) !important; background: var(--background) !important; box-shadow: none !important; }
/* A frase da exclusão, 48 pixels embaixo do cartão da senha, em cinza; só "excluir a sua conta" é clicável, no cinza da
   frase, sublinhado também sem o ponteiro em cima e sem ícone, e preto com o ponteiro em cima, pela decisão 85 e pela
   exceção da regra 71 (E33); com o teclado, o foco é o azul da app, pela regra 38. */
.perfil-excluir-frase { margin: 48px 0 0; max-width: 37em; color: var(--muted-foreground); }
.perfil-link-da-exclusao { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.perfil-link-da-exclusao:hover { color: var(--foreground); }
.perfil-link-da-exclusao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
/* A página cinza no lugar da entrada do Cortecloud, depois do "Sair da conta" e da exclusão da conta (telas/saiu.js),
   fora da moldura da app, como na parte 3 do estudo (D20): a frase e o link no meio da janela, a 16 pixels um do outro,
   no cinza claro do design system, com o texto no cinza escuro. */
.saiu { box-sizing: border-box; min-height: 100dvh; padding: 32px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--muted); color: var(--sb-ds-neutral-700); text-align: center; }
.saiu-texto { margin: 0; }
.saiu-texto:focus { outline: none; }
/* Na janela da exclusão, os 2 campos ficam um embaixo do outro, na largura da janela. */
.perfil-campos-da-janela { grid-template-columns: minmax(0, 1fr); }
/* O campo que falta, quando o botão travado recebe o clique: o anel azul, e o campo cresce um pouco e volta, como a
   faixa da declaração da página do serviço (regra 68). Desde a etapa 2 da PR 1 do super plano, pela decisão 5 da folha 1, o anel
   tem 2 pixels de folga branca entre o campo e o azul.
   Desde o "aplicar" do anel do que falta, de 31/10, a classe é a única do anel (.anel-do-que-falta), e ela fica no bloco do campo
   (.perfil-campo), com o rótulo e a frase embaixo; por isso, o bloco fica sem o anel e sem o crescimento, o anel vai ao campo de
   dentro e o crescimento vai ao campo com o botão do olho (.perfil-senha), para o olho crescer junto, como até o "aplicar". */
.perfil-campo.anel-do-que-falta { box-shadow: none !important; } /* o bloco com o rótulo fica sem o anel, que vai só ao campo */
.perfil-campo.anel-do-que-falta-0, .perfil-campo.anel-do-que-falta-1 { animation: none; } /* o bloco com o rótulo não cresce; cresce só o campo com o olho */
.perfil-campo.anel-do-que-falta [data-slot="input"] { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); }
.perfil-campo.anel-do-que-falta-0 .perfil-senha { animation: cresce-0 0.4s ease-out 1; }
.perfil-campo.anel-do-que-falta-1 .perfil-senha { animation: cresce-1 0.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .perfil-campo.anel-do-que-falta-0 .perfil-senha, .perfil-campo.anel-do-que-falta-1 .perfil-senha { animation: none; } }


/* ---------- A janela de ajuda (componentes/janela-de-ajuda.js) ---------- */

/* A janela tem as medidas das outras janelas da app, pela classe "janela-da-app". A pergunta "O que aconteceu?" tem 16
   pixels de letra e fica 8 pixels acima dos casos. Cada caso é um cartão de escolha, com o círculo de 16 pixels à
   esquerda, a 16 pixels do texto, e 8 pixels entre os cartões; o título do caso fica em preto, com 16 pixels, e quem
   responde, em cinza, com 14, pela regra 52. Com o ponteiro em cima, o cartão fica azul claro, e o cartão escolhido
   tem a borda azul, pela regra 81 (D23). */
.casos { margin: 0; padding: 0; border: 0; min-width: 0; border-radius: 8px; }
.casos-pergunta { padding: 0; margin-bottom: 8px; font-size: 16px; line-height: 24px; font-weight: 500; }
/* Desde a etapa 6 da PR 1 do super plano: a legenda flutua, para o navegador deixar de desenhá-la na borda de cima do fieldset, e o
   anel do que falta (.casos.anel-do-que-falta) passa a contornar a pergunta e os casos, sem cruzar o texto de "O que aconteceu?"; a legenda
   continua sendo o nome do grupo para o leitor de tela. Até a etapa 6, a linha de cima do anel passava no meio da pergunta. */
.casos-pergunta { float: left; width: 100%; }
.casos-pergunta + * { clear: both; }
.casos-lista { gap: 8px; }
.caso { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
/* O caso escolhido, desde o "aplicar" dos ajustes de 15/10 da home, pela H9 e pela regra 123, como as listas de opções da
   tela 3 (linha 61 da ficha dela): a borda azul de 2 pixels, com 15 pixels de espaço por dentro, para o conteúdo não andar,
   o fundo azul claro e o título em negrito, e o círculo marcado faz o papel do sinal de feito; os outros casos ficam com a
   cor de sempre. Até 16/10, o caso escolhido tinha só a borda azul de 1 pixel. Desde a etapa 1 da PR 1 do super plano, pela
   decisão 1A da folha 1, os 3 tons em escada: com o ponteiro em cima, o caso sem escolha ganha o azul mais claro do design
   system (brand-50), o título azul e a borda azul clara (brand-400); o escolhido ganha o título azul e, com o ponteiro em
   cima, o brand-200, com o título no brand-800, que passa de 4,5:1 nele; e o pressionado fica 1 tom acima, pela regra 119.
   Até a etapa 1, o ponteiro em cima dava o azul claro do escolhido, e o escolhido não mudava com o ponteiro em cima. */
.caso:not(:has([data-state="checked"])):hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); }
.caso:not(:has([data-state="checked"])):hover .caso-titulo { color: var(--primary); }
.caso:not(:has([data-state="checked"])):active { background: var(--secondary); }
.caso:has([data-state="checked"]) { border: 2px solid var(--primary); padding: 15px; background: var(--secondary); } /* 15 pixels: com a borda de 2, o conteúdo não anda */
.caso:has([data-state="checked"]) .caso-titulo { font-weight: 600; color: var(--primary); }
.caso:has([data-state="checked"]):hover { background: var(--sb-ds-brand-200); }
.caso:has([data-state="checked"]):active { background: var(--sb-ds-brand-300); }
.caso:has([data-state="checked"]):hover .caso-titulo, .caso:has([data-state="checked"]):active .caso-titulo { color: var(--sb-ds-brand-800); }
/* A frase do caso escolhido, dentro do cartão, embaixo do texto cinza (H9). */
.caso-depois { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-700); text-wrap: pretty; }
/* Sobre o azul claro do cartão escolhido e do cartão com o ponteiro em cima, o texto cinza fica no cinza 700 do design
   system, com 9,05:1, porque o cinza do texto secundário tem 4,13:1 contra o azul claro e não chega aos 4,5:1 do nível AA
   da WCAG, como a regra 126 fez na caixa cinza. Decisão de Aline Miyaki de 16/10, no "aplicar" dos ajustes de 15/10 da
   home: "faz tudo conforme o recomendado". */
.caso:hover .caso-complemento, .caso:has([data-state="checked"]) .caso-complemento { color: var(--sb-ds-neutral-700); }
.caso > [role="radio"] { margin-top: 4px; cursor: pointer; } /* 4 pixels: o círculo de 16 fica no meio da linha de 24 do título */
/* O anel do foco do teclado fica em volta do cartão inteiro, a área que recebe o clique, e não só no círculo, desde a etapa 2 da PR
   1 do super plano, pela decisão 4 da folha 1 e pelo critério 2.4.13 da WCAG, como as cores da página do módulo
   (.opcao-de-acabamento:has(:focus-visible)); o anel do círculo, do design system, sai. */
.caso:has([role="radio"]:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.caso > [role="radio"]:focus-visible { box-shadow: none; }
.caso-titulo { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--foreground); }
.caso-complemento { display: block; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
/* Os casos, quando o botão travado recebe o clique, ganham o anel azul da regra 68, com 2 pixels de branco entre o anel e os
   cartões, e o grupo cresce um pouco e volta, pela classe única do anel (.anel-do-que-falta), desde o "aplicar" do anel do que
   falta, de 31/10. */


/* ---------- O aviso que flutua embaixo, no centro (componentes/aviso.js) ---------- */

/* Desde o "aplicar" do Meu perfil, de 10/10: as medidas e as cores da parte 8 do estudo do Meu perfil e da ajuda,
   decididas na U2 e na U4 da E32, sobre o Sonner do design system sem os estilos dele. O aviso tem a largura do texto,
   de 356 a 560 pixels, no centro da faixa do Sonner; o ícone, o texto e o X ficam em 3 colunas, com 8 pixels entre elas,
   e o X de 32 pixels termina a 8 pixels da borda direita, para o desenho dele terminar a 16, como o ícone começa. O
   amarelo tem a borda accent-700, pela regra 109; o vermelho é o do design system, com o texto branco; e a confirmação é
   branca, com a borda cinza e o ícone de feito no azul principal, como no estudo. O seletor com [data-sonner-toast] vence
   os estilos do Sonner, que entram na página depois deste arquivo. Desde a etapa 2 do "aplicar" das microinterações, de 01/11,
   pela regra 149, o aviso entra em 0,25 segundo, com a curva de entrar, e sai em 0,2, com a curva de sair, como o médio da
   regra, no lugar dos 0,4 segundo do Sonner; a altura muda sem animação, porque a regra não anima a altura, e a cor do fundo e
   a sombra mudam no tempo da cor. O Sonner tira o aviso da página 0,2 segundo depois de começar a saída (TIME_BEFORE_UNMOUNT),
   no fim da saída nova. A transição que vale é a do estado de chegada: a do aviso que sai, na saída. */
[data-sonner-toast].aviso-flutuante {
  left: 0; right: 0; margin-inline: auto; width: fit-content; min-width: 356px; max-width: min(560px, calc(100vw - 32px));
  display: grid; grid-template-columns: 16px minmax(0, 1fr) 32px; column-gap: 8px; align-items: start;
  padding: 16px 8px 16px 16px; border: 1px solid var(--sb-ds-accent-700); border-radius: var(--radius);
  background: var(--sb-ds-accent-100); color: var(--foreground); box-shadow: var(--sombra-do-aviso); /* o fundo accent-100 e o texto preto do aviso amarelo, desde a etapa 4 da PR 1 do super plano, pela decisão 8 da folha 2 */ /* a sombra do aviso do design system, desde a etapa 1 da PR 1 do super plano (achado 17) */
  font-size: 14px; line-height: 20px; overflow-wrap: break-word;
  transition: transform var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar), opacity var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar),
    box-shadow var(--tempo-da-cor) var(--curva-de-mudar), background-color var(--tempo-da-cor) var(--curva-de-mudar);
  /* Com uma janela aberta, o design system tira o clique de tudo o que fica fora da janela, e o aviso, que aparece por
     cima dela, ficava com o X sem responder ao clique, como a conferência de 10/10 achou. O aviso recebe o clique também
     com a janela aberta, e a janela continua aberta. */
  pointer-events: auto;
}
/* O ícone de 16 pixels fica no meio da 1ª linha, de 20; o texto ocupa a coluna do meio; e o X de 32 pixels sobe 6 e desce
   6 pixels, para ficar no meio da 1ª linha. 6 pixels é exceção à grade de 8, pelo motivo da frase anterior. */
[data-sonner-toast].aviso-flutuante > .aviso-flutuante-icone { grid-column: 1; grid-row: 1; display: flex; align-items: center; height: 20px; } /* 20 pixels: a altura da 1ª linha, para o ícone de 16 ficar no meio dela */
[data-sonner-toast].aviso-flutuante > .aviso-flutuante-texto { grid-column: 2; grid-row: 1; min-width: 0; }
.aviso-flutuante-titulo { font-weight: 500; }
[data-sonner-toast].aviso-flutuante > .aviso-flutuante-fechar {
  grid-column: 3; grid-row: 1; position: static; transform: none; margin: -6px 0; /* -6 pixels: o X de 32 no meio da 1ª linha, de 20 */
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer;
}
.aviso-flutuante-fechar svg { width: 16px; height: 16px; }
/* O seletor começa por [data-sonner-toast], como o do X, para o fundo do ponteiro em cima vencer o fundo transparente do X;
   sem isso, o X do aviso amarelo não mudava com o ponteiro em cima, como a conferência do hover achou em 10/10. */
[data-sonner-toast].aviso-flutuante .aviso-flutuante-fechar:hover { background: var(--sb-ds-accent-300); } /* 2 tons acima do fundo accent-100 do aviso amarelo, desde o fim da PR 1 do super plano: com o accent-200, a mudança tinha 1,08:1 contra o fundo, e a conferência do ponteiro em cima a dava como mudança fraca */
[data-sonner-toast].aviso-flutuante[data-type="warning"] > .aviso-flutuante-icone { color: var(--sb-ds-accent-800); } /* o ícone do aviso amarelo, pela decisão 8 da folha 2 */
.aviso-flutuante-fechar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* O "Desfazer" do aviso, desde a 1ª PR do "aplicar" da tela 3, de 19/10, pela C26: um botão com a borda cinza, de 32 pixels
   de altura, com o ícone azul, na linha do título, e não o botão preto e cheio do Sonner, que faria a tela ter 2 botões
   cheios fora das listas, contra a regra 34. */
.aviso-flutuante-acao { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--primary); border-radius: 8px; background: var(--background); color: var(--primary); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer; } /* 12 pixels: o espaço dos lados do botão pequeno do design system; 8 pixels entre o ícone e o texto, como nos botões do design system, desde a PR de limpeza de 31/10, pela LM10, e 6 até ela */
.aviso-flutuante-acao svg { color: var(--primary); }
/* Desde a etapa 4 da PR 1 do super plano, pela 9A da folha 2, o "Desfazer" tem a borda e o texto azuis, como todo botão com borda;
   até a etapa 4, a borda era o cinza 500, e o texto, o preto, como a regra 106 pedia. */
.aviso-flutuante-acao:hover { background: var(--secondary); }
.aviso-flutuante-acao:active { background: var(--sb-ds-brand-200); } /* regra 119 */
.aviso-flutuante-acao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Desde a 2ª metade da etapa 17 da 4ª PR, pela C26 e pela tela 2 do aviso de baixo da folha da proposta do projeto em 3D
   (.estudo-sonner, linhas 364 a 377): o aviso com "Desfazer" ganha a 4ª coluna, a do botão, entre o texto e o X, e o botão fica na
   linha do título, no meio dela, como o X; até a 2ª metade da etapa 17, o botão caía na 2ª linha, embaixo do ícone, pela ordem do
   Sonner. 8 pixels: o espaço a mais entre o texto e o botão, que, com os 8 da coluna, dá os 16 da folha; -6 pixels: o botão de 32
   no meio da 1ª linha, de 20, como o X. A frase de apoio fica colada embaixo do título, no cinza 700, nos avisos brancos; nos
   avisos amarelo e vermelho, a frase continua como estava. */
[data-sonner-toast].aviso-flutuante.aviso-com-acao { grid-template-columns: 16px minmax(0, 1fr) auto 32px; }
[data-sonner-toast].aviso-flutuante.aviso-com-acao > .aviso-flutuante-acao { grid-column: 3; grid-row: 1; margin: -6px 0 -6px 8px; } /* -6 pixels: o botão de 32 no meio da 1ª linha, de 20, como o X */
[data-sonner-toast].aviso-flutuante.aviso-com-acao > .aviso-flutuante-fechar { grid-column: 4; }
[data-sonner-toast].aviso-flutuante[data-type="success"] .aviso-flutuante-apoio, [data-sonner-toast].aviso-flutuante[data-type="info"] .aviso-flutuante-apoio { margin: 0; color: var(--sb-ds-neutral-700); }
[data-sonner-toast].aviso-flutuante[data-type="error"] { border-color: var(--destructive); background: var(--destructive); color: var(--primary-foreground); }
[data-sonner-toast].aviso-flutuante[data-type="error"] .aviso-flutuante-fechar:hover { background: var(--sb-ds-destructive-700); }
/* O anel azul do foco tem pouco contraste sobre o vermelho, e por isso, no aviso vermelho, o anel fica branco. */
[data-sonner-toast].aviso-flutuante[data-type="error"] .aviso-flutuante-fechar:focus-visible { outline-color: currentColor; }
[data-sonner-toast].aviso-flutuante[data-type="success"] { border-color: var(--border); background: var(--background); color: var(--foreground); }
[data-sonner-toast].aviso-flutuante[data-type="success"] > .aviso-flutuante-icone { color: var(--primary); }
[data-sonner-toast].aviso-flutuante[data-type="success"] .aviso-flutuante-fechar:hover { background: var(--sb-ds-brand-200); }
/* Desde o "aplicar" da Página do projeto, de 15/10, o aviso branco que diz o que mudou na página, da função informar de
   componentes/aviso.js: branco, como a confirmação, com o ícone do "i" no azul principal, pela parte 13 do estudo das
   propostas para a Página do projeto e pela escolha 21 do plano. */
[data-sonner-toast].aviso-flutuante[data-type="info"] { border-color: var(--border); background: var(--background); color: var(--foreground); }
[data-sonner-toast].aviso-flutuante[data-type="info"] > .aviso-flutuante-icone { color: var(--primary); }
[data-sonner-toast].aviso-flutuante[data-type="info"] .aviso-flutuante-fechar:hover { background: var(--sb-ds-brand-200); }
[data-sonner-toast].aviso-flutuante[data-type="info"] .aviso-flutuante-fechar:active { background: var(--sb-ds-brand-300); }
/* O X pressionado fica 1 tom mais escuro que com o ponteiro em cima, pela regra 119. */
[data-sonner-toast].aviso-flutuante .aviso-flutuante-fechar:active { background: var(--sb-ds-accent-400); } /* 1 tom acima do ponteiro em cima, pela regra 119 */
[data-sonner-toast].aviso-flutuante[data-type="error"] .aviso-flutuante-fechar:active { background: var(--sb-ds-destructive-800); }
[data-sonner-toast].aviso-flutuante[data-type="success"] .aviso-flutuante-fechar:active { background: var(--sb-ds-brand-300); }
/* O clique de novo no botão travado, com o aviso aberto (U2): a cor do aviso escurece 1 tom por 1 segundo, e o aviso
   cresce 1% e volta. A animação usa a propriedade scale, e não o transform, que o Sonner usa para pôr o aviso no lugar;
   as 2 classes trocam a cada clique, para a animação recomeçar. Quem pediu menos movimento vê só a cor mudar. */
[data-sonner-toast].aviso-flutuante.aviso-de-novo-0, [data-sonner-toast].aviso-flutuante.aviso-de-novo-1 { background: var(--sb-ds-accent-200); } /* 1 tom acima do accent-100, desde a etapa 4 da PR 1 do super plano */
[data-sonner-toast].aviso-flutuante[data-type="error"].aviso-de-novo-0, [data-sonner-toast].aviso-flutuante[data-type="error"].aviso-de-novo-1 { background: var(--sb-ds-destructive-700); }
[data-sonner-toast].aviso-flutuante.aviso-de-novo-0 { animation: aviso-cresce-0 0.4s ease-out 1; }
[data-sonner-toast].aviso-flutuante.aviso-de-novo-1 { animation: aviso-cresce-1 0.4s ease-out 1; }
@keyframes aviso-cresce-0 { 50% { scale: 1.01; } }
@keyframes aviso-cresce-1 { 50% { scale: 1.01; } }
/* A saída do aviso, pela regra 149, desde a etapa 2 do "aplicar" das microinterações: 0,2 segundo, com a curva de sair. A 2ª linha
   do seletor repete as marcas da regra do Sonner para o aviso de trás que sai, que dá 0,5 segundo ao movimento, para vencer o peso
   dela. */
[data-sonner-toast].aviso-flutuante[data-removed="true"],
[data-sonner-toast].aviso-flutuante[data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"] {
  transition: transform var(--tempo-do-medio-ao-fechar) var(--curva-de-sair), opacity var(--tempo-do-medio-ao-fechar) var(--curva-de-sair),
    box-shadow var(--tempo-da-cor) var(--curva-de-mudar), background-color var(--tempo-da-cor) var(--curva-de-mudar);
}
/* Para quem pediu menos movimento, o aviso só aparece e some, pela transparência, nos mesmos tempos, e não anda, pela regra 149: na
   entrada, o aviso já está no lugar dele, e, na saída, o lugar muda só depois de o aviso sumir, pela espera da transição do
   transform. O Sonner tira toda transição do aviso com !important para quem pediu menos movimento, e por isso estas regras usam o
   !important, com mais peso que a dele; até a etapa 2 do "aplicar" das microinterações, a regra daqui ficava sem efeito, e o aviso
   aparecia e sumia de uma vez. A cor do fundo continua mudando no tempo da cor. */
@media (prefers-reduced-motion: reduce) {
  [data-sonner-toast].aviso-flutuante.aviso-de-novo-0, [data-sonner-toast].aviso-flutuante.aviso-de-novo-1 { animation: none; }
  [data-sonner-toast].aviso-flutuante {
    transition: opacity var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar), background-color var(--tempo-da-cor) var(--curva-de-mudar) !important;
  }
  [data-sonner-toast].aviso-flutuante[data-removed="true"] {
    transition: transform 0s linear var(--tempo-do-medio-ao-fechar), opacity var(--tempo-do-medio-ao-fechar) var(--curva-de-sair),
      background-color var(--tempo-da-cor) var(--curva-de-mudar) !important;
  }
}
/* Enquanto o aviso de falha está parado embaixo, a página ganha embaixo a altura dele, e a rolagem que leva um elemento
   ao foco deixa o mesmo espaço, para o aviso não cobrir o elemento com o foco (ajustes técnicos da E55). A altura vem
   de componentes/aviso.js; sem aviso, a página fica com os 40 pixels de baixo de sempre. */
html { scroll-padding-bottom: var(--espaco-do-aviso, 0px); }
/* Os 2 lugares que o leitor de tela lê, os de componentes/aviso.js, ficam presos à janela: no fim da página, eles somavam
   1 pixel à altura dela, que a conferência da página do serviço achou em 10/10. */
.anuncios-dos-avisos { position: fixed; left: 0; bottom: 0; }
.conteudo { padding-bottom: max(40px, var(--espaco-do-aviso, 0px)); }


/* ---------- A tela 2: a escolha dos módulos, a página do módulo e os Módulos, o resumo do projeto ---------- */
/* Desde o "aplicar" da tela 2, de 11/10 (telas/escolha-dos-modulos.js, telas/pagina-do-modulo.js e telas/modulos.js), com
   os valores do estudo da tela 2 (estudos/estudo-tela-2-modulos.html). O título e o botão de voltar ficam na borda da faixa,
   como na página do serviço, pela regra 8, e as 2 colunas passam a 1 quando a faixa fica estreita, pelo item 19 do plano;
   os 768 pixels em que isso acontece são escolha deste "aplicar", o mesmo limite do celular da home. A barra do topo é
   fixa, com 49 pixels, e por isso o que fica parado ao rolar fica a 73 pixels do alto da janela: os 49 da barra e os 24 da
   D51. */
.tela2-cabecalho { margin: 0 16px; }
.tela2-corpo { margin: 16px 16px 0 16px; }
.nao-encontrado-texto { margin-top: 16px; max-width: 37em; color: var(--muted-foreground); }
.nao-encontrado-texto p { margin: 0; }
.nao-encontrado-texto p + p { margin-top: 8px; }

/* A escolha dos módulos. */
.busca-de-modulo { display: grid; row-gap: 8px; max-width: 480px; }
/* A escolha dos módulos na troca (C16), desde a etapa 20 da 4ª PR do "aplicar" da tela 3, como a folha da proposta do projeto em 3D
   (linhas 489 a 492): a caixa azul clara, com 24 pixels de espaço dentro e o canto de 12, o título de 20 pixels e a frase 8 pixels
   embaixo, no cinza 700 sobre o azul claro, pela regra 132, com no máximo 37em por linha, pela regra 8; a busca fica 24 pixels
   embaixo da caixa, como os tipos da folha (linha 493). Desde a PR 2 do super plano, pelo ponto 1 da parte "O que a 4ª PR trouxe a
   esta folha", da folha 3 do super plano, decidido por Aline Miyaki em 20/10, a caixa passa do azul claro ao cinza do design system,
   o fundo das caixas que só informam, como a caixa de "Personalizar este módulo", porque o azul fica só no que se clica, pela regra
   35; a frase continua no cinza 700, com 9,51:1 sobre o cinza, pela regra 132. */
.escolha-da-troca { padding: 24px; border-radius: 8px; background: var(--muted); } /* 8 pixels de canto, o do cartão pela regra 136, desde a PR 2 */
.escolha-da-troca-titulo { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.escolha-da-troca-titulo:focus { outline: none; }
.escolha-da-troca-frase { margin: 8px 0 0 0; max-width: 37em; color: var(--sb-ds-neutral-700); }
.tela2-corpo.depois-da-troca { margin-top: 24px; }
/* Desde o "aplicar" dos ajustes da tela 2, de 15/10, pelas D68 a D71 e pela parte 1 do estudo dos ajustes: o título de
   cada parte tem 20 pixels, o texto embaixo dele vai até o fim da faixa, pela exceção da regra 8, e as partes ficam a 64
   pixels uma da outra: os 56 pixels do fim de cada parte e os 8 de cima do título. A 3ª parte tem os grupos com pelo menos a
   altura da janela menos os 49 da barra do topo (item 2 das escolhas, D71). Desde a PR da biblioteca do super plano, o título
   rola com a parte, pela LB18, que muda a D70: até a PR da biblioteca, ele ficava parado no alto, a 49 pixels do alto da
   janela, com o fundo branco 16 pixels para fora dos 2 lados e, parado, a linha cinza embaixo. A D71 continua e passa a
   segurar a fileira dos cômodos de "Todos os módulos", pela LB20: com a altura dos grupos, a fileira clicada fica no mesmo
   lugar da tela também quando o cômodo tem poucos módulos. Até 15/10, os títulos tinham 16 pixels, e as partes ficavam a 32
   pixels uma da outra. */
.parte-da-escolha { margin-top: 0; }
.parte-da-escolha:first-of-type { margin-top: 56px; }
.parte-da-escolha:not([data-el="parte-3"])::after { content: ""; display: block; height: 56px; }
.parte-da-escolha-titulo { margin: 0; padding-top: 8px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; }
.parte-da-escolha-texto { margin: 0; color: var(--sb-ds-neutral-600); }
.parte-da-escolha[data-el="parte-3"] .grupos-dos-tipos { min-height: calc(100vh - 49px); } /* 49 pixels: a barra do topo, com 48 e a linha de 1 embaixo (D71) */
.cartoes { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cartao-modulo { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; background: var(--background); overflow: hidden; }
.cartao-modulo:hover { background: var(--secondary); border-color: var(--primary); }
.cartao-modulo:hover .cartao-nome { color: var(--primary); }
.cartao-imagem { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; background: var(--muted); color: var(--sb-ds-neutral-500); }
.cartao-imagem img { width: 100%; height: 100%; object-fit: contain; }
/* Desde o "aplicar" dos ajustes da tela 2, de 15/10, pela D77 e pela parte 8 do estudo dos ajustes: a foto e a imagem do
   interior ficam uma em cima da outra, no mesmo lugar, e, com o ponteiro em cima do cartão ou com o foco do teclado nele, a
   foto dá lugar ao interior em 0,15 segundo; quem pediu menos movimento ao sistema vê a troca sem a passagem. */
.cartao-imagem .cartao-capa, .cartao-imagem .cartao-interior { position: absolute; inset: 0; transition: opacity 0.15s; }
.cartao-interior { opacity: 0; }
.cartao-modulo:is(:hover, :focus-within) .cartao-interior { opacity: 1; }
.cartao-modulo:is(:hover, :focus-within) .cartao-capa { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cartao-imagem .cartao-capa, .cartao-imagem .cartao-interior { transition: none; } }
.cartao-link { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 8px; align-items: start; padding: 16px; color: inherit; text-decoration: none; outline: none; } /* o nome e o "+" começam na mesma linha em todos os cartões, também quando um nome quebra em 2 linhas */
.cartao-link::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.cartao-link:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }
.cartao-nome { font-weight: 500; }
.cartao-mais { display: flex; justify-content: flex-end; margin-top: 2px; color: var(--primary); } /* 2 pixels: o "+" de 16 fica no meio da 1ª linha, de 20 */
/* Desde o "aplicar" dos ajustes da tela 2, de 15/10, pela D63 e pela parte 2 do estudo dos ajustes: os selos de montagem e
   de parede são 2 botões de ícone de 24 pixels no canto de cima da foto, a 8 pixels das 2 bordas e a 8 pixels um do outro,
   por cima do clique do cartão; o de montagem no amarelo do selo, com a borda da regra 109, e o da parede branco, com a
   borda cinza, como o selo da parede de antes. Com o ponteiro em cima, cada um escurece 1 tom, pela regra 81, e mais 1
   pressionado, pela regra 119. Até 15/10, o selo amarelo era texto, no canto de cima, e o cinza, no de baixo. */
.sinais-do-cartao { position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; gap: 8px; }
.sinal-no-cartao { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; padding: 0; border-radius: 8px; cursor: pointer; } /* 8 pixels: o canto do selo do design system, pela 11A da folha 2 */
.sinal-no-cartao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sinal-parede { border: 1px solid var(--sb-ds-neutral-300); background: var(--background); color: var(--sb-ds-neutral-700); }
.sinal-parede:hover { background: var(--sb-ds-neutral-200); }
.sinal-parede:active { background: var(--sb-ds-neutral-300); }
/* A explicação com título: o título numa linha, em preto, e o texto embaixo, como as explicações longas da página do
   projeto, pela D63 e pela regra 79. */
.explicacao-do-detalhe .informacao-titulo { display: block; color: var(--foreground); font-weight: 500; }
.tipos-de-modulo { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tipo-de-modulo { display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; height: 32px; padding: 0 22px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--sb-ds-neutral-700); font: inherit; white-space: nowrap; cursor: pointer; } /* 22 pixels: os 12 do botão pequeno do design system e 10, a metade dos 16 do sinal de feito e dos 4 até o nome, para o botão já ter a largura da forma escolhida (item 16 das escolhas); 4 pixels: o sinal fica junto do nome */
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, o
   tipo sem escolha ganha o azul mais claro do design system (brand-50), o texto azul e a borda azul clara (brand-400); o
   escolhido, com o ponteiro em cima, o brand-200, com o texto no brand-800, que passa de 4,5:1 nele; e o pressionado fica 1 tom
   acima, pela regra 119: o azul claro no tipo sem escolha e o brand-300 no escolhido. Até a etapa 1, o ponteiro em cima dava o
   azul claro do escolhido. */
.tipo-de-modulo:hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); color: var(--primary); }
.tipo-de-modulo:active { background: var(--secondary); }
/* O tipo escolhido segue a regra 123, pela D83: a borda de 2 pixels, 1 de borda e 1 de sombra por dentro, o texto em
   negrito e o sinal de feito, no azul claro; com o ponteiro em cima, passa ao brand-200, pela regra 81. Os outros tipos
   continuam com a cor de sempre, como nas listas de opções da tela 3. O nome reserva a largura dele em negrito, num
   ::after escondido com o mesmo texto, para o botão não mudar de largura com o negrito. Até 15/10, o escolhido tinha a
   borda de 1 pixel, o fundo azul claro, que é o do ponteiro em cima, e o peso 500. */
/* Desde a etapa 2 da PR 1 do super plano, pela decisão 4 da folha 1, os tipos são as opções de um grupo de escolha de 1, com o
   aria-checked no lugar do aria-pressed, e o mesmo vale para os outros grupos de escolha de 1 deste arquivo: as cores e a espessura
   do painel das cores, "De que lado", os ambientes do painel do total, as texturas da casa, as cores da tela 3 e "Por dentro" em
   grupo. */
.tipo-de-modulo[aria-checked="true"] { padding: 0 12px; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--secondary); color: var(--primary); font-weight: 600; } /* 12 pixels: o espaço do botão pequeno do design system; o sinal de feito ocupa os 10 que sobram dos 22 de .tipo-de-modulo */
.tipo-de-modulo[aria-checked="true"]:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
.tipo-de-modulo[aria-checked="true"]:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); }
.tipo-de-modulo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tipo-rotulo { display: inline-grid; }
.tipo-rotulo::after { content: attr(data-texto); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
/* Desde a PR da biblioteca do super plano, as classes dos botões dos tipos vestem a fileira dos cômodos, pela LB20, com a mesma
   aparência: 16 pixels embaixo do texto da parte e 32 até os cartões da 1ª parte, como até os grupos da 3ª (LB16). */
.tipos-de-modulo + .cartoes { margin-top: 32px; }
.grupos-dos-tipos { margin-top: 32px; display: grid; row-gap: 32px; }
.grupo-do-tipo-titulo { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; } /* 16 pixels: o título de cada tipo, pela D69; até 15/10, 14 */
.grupo-do-tipo-conta { margin-left: 8px; font-weight: 400; color: var(--sb-ds-neutral-600); }
.parte-sem-modulo, .escolha-sem-modulo { margin: 32px 0 0 0; max-width: 37em; color: var(--sb-ds-neutral-600); }
.busca-sem-resultado { margin-top: 32px; }
.busca-sem-resultado-titulo { margin: 0; font-weight: 600; }
.busca-sem-resultado .botao-de-texto { margin-top: 8px; }
/* Desde a PR da biblioteca do super plano, pela LB13: "Buscar em todos os cômodos" e "Limpar a busca" ficam lado a lado, a 24
   pixels um do outro, como no estudo da PR da biblioteca; e, na escolha dos módulos, o bloco fica embaixo da 1ª parte, com a
   fileira dos cômodos (LB16), a 64 pixels dela, a distância entre 2 partes (D69): os 56 do fim da parte e estes 8. */
.busca-sem-resultado-acoes { display: flex; flex-wrap: wrap; column-gap: 24px; } /* LB27: 24 pixels, e não os 8 da regra 45, porque os 2 são botões só de texto, sem borda, e, a 8, tendem a ser lidos como 1 frase só */
.parte-da-escolha + .busca-sem-resultado { margin-top: 8px; }
/* A barra que volta ao rolar para cima na escolha dos módulos, desde a PR da biblioteca do super plano, pela LB19 e pelo estudo da
   PR da biblioteca (parte 5): fixa embaixo da barra do topo, na largura da janela, com o fundo branco, a linha cinza embaixo e o
   conteúdo na faixa, como a página; escondida, ela sobe e passa por trás da barra do topo, e fica fora da tecla Tab e do leitor de tela,
   como a busca da aba "Decoração" (regra 144). Desde a etapa 3 do "aplicar" das microinterações, de 01/11, pela regra 144 e pelos tempos
   do que é médio da regra 149, a barra volta em 0,25 segundo, com a curva de entrar, e some em 0,2, com a curva de sair; cada lado da
   troca tem a transição dele, porque a transição que vale é a do estado para onde a barra vai. Para quem pediu menos movimento ao
   computador, a barra só aparece e some, pela transparência, nos mesmos tempos, sem subir nem descer. A visibilidade muda no fim do
   sumir, para a barra continuar à vista enquanto some, e no começo do aparecer. Até a etapa 3, a barra voltava e sumia em 0,2 segundo,
   com a mesma curva, e de uma vez para quem pediu menos movimento. A página da escolha fica sem a ancoragem da rolagem do navegador,
   porque é a escolha que deixa a fileira clicada no mesmo lugar da tela (LB20 e LB24, telas/escolha-dos-modulos.js), e a do navegador
   mexia na rolagem sem que a barra soubesse. */
.barra-da-escolha { position: fixed; top: 49px; left: 0; right: 0; z-index: 10; box-sizing: border-box; height: 64px; background: var(--background); box-shadow: inset 0 -1px 0 var(--border); transform: translateY(-100%); visibility: hidden; transition: transform var(--tempo-do-medio-ao-fechar) var(--curva-de-sair), visibility 0s linear var(--tempo-do-medio-ao-fechar); } /* 49 pixels: a barra do topo, com 48 e a linha de 1 embaixo; z-index 10: embaixo da barra do topo, que tem 20, para a barra escondida passar por baixo dela */
.barra-da-escolha.a-vista { transform: none; visibility: visible; transition: transform var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar), visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .barra-da-escolha { transform: none; opacity: 0; transition: opacity var(--tempo-do-medio-ao-fechar) var(--curva-de-sair), visibility 0s linear var(--tempo-do-medio-ao-fechar); }
  .barra-da-escolha.a-vista { opacity: 1; transition: opacity var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar), visibility 0s; }
}
.barra-da-escolha-dentro { box-sizing: border-box; display: flex; align-items: center; gap: 16px; height: 100%; padding: 0 16px; }
.barra-da-escolha [data-slot="input"] { flex: none; width: 256px; height: 32px; } /* 32 pixels: a altura dos botões dos cômodos ao lado, para o campo e os botões ficarem alinhados, como no estudo aprovado; o campo do design system só existe com 36 */
.barra-da-escolha .tipos-de-modulo { margin-top: 0; flex-wrap: nowrap; }
html:has(.barra-da-escolha) { overflow-anchor: none; }
/* Desde o "aplicar" dos ajustes da tela 2, de 15/10, pela D64 e pela parte 3 do estudo dos ajustes: a sugestão de módulo é
   1 botão do tamanho de um cartão, na largura da lista, com a aparência dos cartões dos módulos, branco, com a borda, e o
   cartão inteiro recebe o clique; com o ponteiro em cima, fica azul claro, com a borda e a pergunta azuis, pela regra 81, e
   pressionado, no brand-200, pela regra 119. No fim da lista, o cartão fica a 64 pixels do último cartão, pela D69; embaixo
   da busca sem resultado, a 32 pixels do bloco "Nenhum módulo tem…", como a linha de antes, porque ali não há partes para
   separar (item 3 das escolhas do plano). Até 15/10, a pergunta ficava em cinza, e só o botão de texto recebia o clique. */
.sugestao-de-modulo { margin: 64px 0 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; width: 100%; box-sizing: border-box; padding: 24px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; }
.busca-sem-resultado + .sugestao-de-modulo { margin-top: 32px; }
.sugestao-de-modulo:hover { background: var(--secondary); border-color: var(--primary); }
.sugestao-de-modulo:hover .sugestao-pergunta { color: var(--primary); }
.sugestao-de-modulo:active { background: var(--sb-ds-brand-200); }
.sugestao-de-modulo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sugestao-pergunta { font-size: 16px; line-height: 24px; font-weight: 600; }
.sugestao-acao { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 500; }

/* A página do módulo. */
.modulo-topo { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px; }
.selos-do-titulo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Os selos da app, desde a etapa 4 da PR 1 do super plano, pela decisão 7 da folha 2: todo selo é o Badge do design system, com 20
   pixels de altura, 12 de letra, 8 de canto e só a 1ª letra maiúscula, e a app muda só as cores. Sem a borda, o selo fica com os 20
   pixels: os 2 de cima e de baixo do Badge e a linha de 16. O selo cinza que abre uma explicação, como "Precisa de furos na parede",
   escurece 1 tom com o ponteiro em cima, pela regra 81, e mais 1 pressionado, pela regra 119, como o selo cinza clicável da folha 2. */
.selo-cinza { border: 0; background: var(--muted) !important; color: var(--sb-ds-neutral-700) !important; font-weight: 600; }
.selo-azul { border: 0; background: var(--secondary) !important; color: var(--primary) !important; font-weight: 600; }
.selo-cinza-clicavel { font-family: inherit; cursor: pointer; }
.selo-cinza-clicavel:hover { background: var(--sb-ds-neutral-200) !important; }
.selo-cinza-clicavel:active { background: var(--sb-ds-neutral-300) !important; }
.selo-cinza-clicavel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
.pagina-do-modulo { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 336px; column-gap: 32px; align-items: start; }
/* A página do módulo e a tela 3 ficam a 32 pixels do topo da página, pela 11B da folha 2, desde a etapa 4 da PR 1 do super plano
   (.pagina-do-modulo e .projetar-tela); até a etapa 4, eram 24. */
.coluna-da-foto { position: sticky; top: 73px; display: grid; row-gap: 8px; } /* 73 pixels: os 49 da barra do topo e 24, para a coluna parar 24 pixels abaixo da barra */
.foto-do-modulo { display: flex; align-items: center; justify-content: center; height: 400px; border-radius: 8px; background: var(--muted); color: var(--sb-ds-neutral-500); overflow: hidden; }
.foto-do-modulo img { width: 100%; height: 100%; object-fit: contain; }
.nota-da-foto { margin: 0; color: var(--sb-ds-neutral-600); }
.grupo-do-modulo + .grupo-do-modulo { margin-top: 24px; }
.rotulo-do-grupo { margin: 0 0 8px 0; padding: 0; color: var(--sb-ds-neutral-600); }
.rotulo-com-i { display: flex; align-items: center; gap: 4px; } /* 4 pixels: o "i" fica junto do rótulo que ele explica */
.rotulo-com-i .botao-informacao { margin: -2px 0; } /* -2 pixels: o "i" de 24 cabe na linha de 20 do rótulo, sem descer o grupo */
.coluna-do-modulo .linha-medidas { display: block; margin: 0; }
.coluna-do-modulo .linha-medidas + .linha-medidas { margin-top: 8px; }
.frase-do-fogao { margin: 8px 0 0 0; max-width: 37em; color: var(--sb-ds-neutral-600); }
/* A linha do vão do fogão, desde a PR 2 do super plano, com o "i" do PL7 junto, como o "i" de um rótulo. */
.coluna-do-modulo .linha-do-vao-do-fogao { display: flex; align-items: center; gap: 4px; } /* 4 pixels: o "i" fica junto da linha que ele explica, como .rotulo-com-i */
.linha-do-vao-do-fogao .botao-informacao { margin: -2px 0; } /* -2 pixels: o "i" de 24 cabe na linha de 20, sem descer a frase de baixo */
/* O ícone da régua do guia fica 8 pixels depois da palavra "Medidas", e não os 4 do "i", desde o "aplicar" dos ajustes da
   tela 2, de 15/10, pelas partes 1 e 8 do estudo da tela 3. */
.rotulo-com-i.rotulo-com-regua { gap: 8px; }
.rotulo-com-regua .projetar-icone-botao { margin: -6px 0; } /* -6 pixels: o botão do guia de medir, de 32 × 32 pela 9E da folha 2, cabe na linha de 20 do rótulo sem descer o grupo, desde a etapa 4 da PR 1 do super plano */
.acabamentos { margin: 0; padding: 0; border: 0; min-width: 0; border-radius: 8px; }
.acabamentos:focus { outline: none; }
/* Desde a etapa 6 da PR 1 do super plano: a legenda "Cor" flutua, como "O que aconteceu?" da janela de ajuda (.casos-pergunta), e o
   anel do que falta (.acabamentos.anel-do-que-falta) passa a contornar a legenda e as cores, sem cruzar o texto da legenda. */
.acabamentos > .rotulo-do-grupo { float: left; width: 100%; }
.acabamentos > .rotulo-do-grupo + * { clear: both; }
.opcoes-de-acabamento { display: grid; row-gap: 8px; }
.opcao-de-acabamento { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 16px 16px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: inherit; font: inherit; text-align: left; cursor: pointer; } /* 12 pixels: o espaço do campo do design system */
/* Desde a etapa 20 da 4ª PR do "aplicar" da tela 3, a cor escolhida deixa de ter a aparência da cor com o ponteiro em cima, pelo
   defeito 1 do levantamento das inconsistências da app, contra a regra 123, e segue os 3 tons em escada da decisão 1A da folha 1 do
   super plano, como a linha do módulo escolhido no resumo: com o ponteiro em cima, a cor sem escolha ganha o azul mais claro do
   design system (brand-50), o nome azul e a borda azul clara de 1 pixel (brand-400); a escolhida tem o azul claro (brand-100), a
   borda de 2 pixels no azul principal e o nome azul em negrito, como as listas de opções da tela 3, e continua com a bolinha
   marcada do design system, pela decisão 3; a escolhida com o ponteiro em cima fica 1 tom mais escura (brand-200), com a borda no
   azul principal; e a pressionada fica 1 tom acima da cor com o ponteiro em cima, pela regra 119: o azul claro na cor sem escolha e
   o brand-300 na escolhida. As outras cores ficam com a cor de sempre, pela regra 123, e a cor indisponível não muda com o ponteiro
   em cima, pela decisão 2 da folha 1. Até a etapa 20, a escolhida e a com o ponteiro em cima tinham a mesma borda azul de 1 pixel
   e o mesmo azul claro. */
.opcao-de-acabamento:not(.indisponivel):hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); }
.opcao-de-acabamento:not(.indisponivel):hover .opcao-nome { color: var(--primary); }
.opcao-de-acabamento:not(.indisponivel):active { background: var(--secondary); }
/* Desde a etapa 4 da PR 1 do super plano, pela SP35 da lista das decisões do super plano, a bolinha do design system da cor escolhida
   tem o anel no azul principal, como o ponto; a da cor sem escolha continua com o anel no cinza claro do design system (--input). O
   mesmo vale nos casos da janela de ajuda (.caso). */
.opcao-de-acabamento [role="radio"][data-state="checked"], .caso > [role="radio"][data-state="checked"] { border-color: var(--primary); }
.opcao-de-acabamento [role="radio"] { cursor: pointer; } /* o círculo do design system vem com a seta, e a opção inteira mostra a mãozinha, pela regra 49 */
.opcao-de-acabamento:has([data-state="checked"]) { padding: 7px 11px; border: 2px solid var(--primary); background: var(--secondary); } /* 7 e 11 pixels: com a borda de 2, o conteúdo não anda, como em .projetar-opcao-marcada */
.opcao-de-acabamento:has([data-state="checked"]) .opcao-nome { color: var(--primary); font-weight: 600; }
.opcao-de-acabamento:has([data-state="checked"]):hover { background: var(--sb-ds-brand-200); border-color: var(--primary); }
.opcao-de-acabamento:has([data-state="checked"]):active { background: var(--sb-ds-brand-300); }
/* O texto azul sobre o brand-200 e o brand-300 passa ao brand-800 do design system, com 5,65:1 sobre o brand-200 e 4,51:1 sobre o
   brand-300, pela medida no Chrome sem janela de 20/10, porque o azul principal tem só 4,46:1 e 3,56:1 sobre esses 2 tons, abaixo dos
   4,5:1 do texto (WCAG 1.4.3); o brand-800 é o azul mais claro do design system que passa nos 2, e o brand-900 tem 7,12:1 e 5,69:1. */
.opcao-de-acabamento:has([data-state="checked"]):hover .opcao-nome, .opcao-de-acabamento:has([data-state="checked"]):active .opcao-nome { color: var(--sb-ds-brand-800); }
.opcao-de-acabamento:has(:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.opcao-nome { font-weight: 500; }
/* As marcas de cada cor, desde a etapa 20: "Já no projeto" (C12), o polegar do recomendado (desde a etapa 15 da PR 3 do super plano, no
   lugar do selo "recomendado") e "Parecido", lado a lado, 8 pixels entre elas. O
   selo "Já no projeto" é o da folha (linha 465): o fundo branco, a borda cinza 400 e o texto cinza 800, para continuar à vista sobre
   o azul da cor escolhida e da cor com o ponteiro em cima. */
.marcas-da-opcao { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.marca-no-projeto { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--sb-ds-neutral-400); border-radius: 8px; background: var(--background) !important; color: var(--sb-ds-neutral-800) !important; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; } /* desde a etapa 4 da PR 1 do super plano, o Badge do design system, pela decisão 7 da folha 2; 1 pixel: os 2 do selo em cima e embaixo, menos a borda, que deixa de ser feita de sombra; 8 pixels: os 8 dos lados do Badge do design system, dentro da borda, desde o fim da PR 1 */
/* A caixa "Os materiais do <cor>" (C22), desde a etapa 20: a explicação de sempre, pela regra 79, com 320 pixels de largura, como a
   folha (linha 482), para a caixa não mudar de tamanho de uma cor para outra; o título em preto, numa linha própria, e os 2
   materiais nas 2 linhas da regra 128, com o nome em preto, 8 pixels entre as partes, como a folha. */
.explicacao-do-detalhe.caixa-dos-materiais { box-sizing: border-box; width: var(--largura-da-explicacao, 320px); display: grid; row-gap: 8px; }
.caixa-dos-materiais .informacao-titulo { margin: 0; }
.caixa-dos-materiais .material-em-texto .material-nome { color: var(--foreground); }
/* O polegar do Branco, desde a etapa 15 da PR 3 do super plano, pela 20C e pela SP85: na linha da cor, no lugar do selo "Recomendado",
   no azul principal; e, na última linha da caixa, o polegar e o título "Recomendado", ou "Parecido e recomendado", com o porquê
   embaixo, colado ao título, pela regra 79. */
.polegar-da-opcao { display: inline-grid; place-items: center; color: var(--primary); }
.materiais-recomendado { display: grid; }
.caixa-dos-materiais .materiais-recomendado-titulo { display: flex; align-items: center; gap: 4px; } /* 4 pixels: o polegar junto da palavra do título */
.materiais-recomendado-titulo svg { flex: none; color: var(--primary); }
/* A caixa cinza de "Personalizar este módulo" (C5 e T6), desde a etapa 20, pela regra 126 e pela folha (linhas 466 a 468): o fundo
   cinza do design system, 24 pixels de espaço dentro, a pergunta em negrito, em preto, e o botão na largura da caixa, 16 pixels
   embaixo da pergunta. */
.caixa-do-personalizar { padding: 24px; border-radius: 8px; background: var(--muted); }
.caixa-do-personalizar-pergunta { margin: 0 0 16px 0; font-weight: 600; color: var(--foreground); }
/* O selo da troca (C16), desde a etapa 20, no lugar de "Ainda não está no projeto". Desde a PR 2 do super plano, pelo ponto 1 da parte
   "O que a 4ª PR trouxe a esta folha", da folha 3 do super plano, o selo passa do azul claro da folha (linha 470) ao cinza dos selos
   que só informam, como "Ainda não está no projeto", "Parecido" e "Indisponível na loja", pela regra 35: o mesmo fundo e o mesmo
   texto de .selo-cinza. */
.selo-da-troca { border: 0; background: var(--muted) !important; color: var(--sb-ds-neutral-700) !important; font-weight: 600; }
/* A frase das medidas da troca (C16), colada na linha das medidas que ela explica, como a folha (linha 486). */
.medidas-da-troca { margin: 4px 0 0 0; color: var(--sb-ds-neutral-600); } /* 4 pixels: a frase colada na linha das medidas */
/* O texto do botão da ação principal quebra a linha quando não cabe, como "Colocar no ambiente" com o nome do ambiente, que vai até
   255 caracteres e não corta (item 30 do plano); com 1 linha, o botão fica com os 40 pixels do design system. */
.botao-largo.botao-que-quebra { height: auto; min-height: 40px; white-space: normal; text-align: center; overflow-wrap: anywhere; padding-top: 8px; padding-bottom: 8px; }
/* A cor indisponível, desde a etapa 1 da PR 1 do super plano, pela decisão 2 da folha 1, de 19/10, na aparência única do que
   não se clica: o fundo cinza claro (muted), com a borda na cor do fundo; o nome no cinza 500, com 4,35:1 sobre o cinza claro;
   a amostra a 40%; a bolinha apagada, com a borda no cinza 300; e o motivo no cinza 600, com 7,17:1. Até a etapa 1, o fundo era
   o cinza 200, e o nome, o cinza 400, com 2,05:1. */
.opcao-de-acabamento.indisponivel { cursor: not-allowed; background: var(--muted); border-color: var(--muted); color: var(--sb-ds-neutral-500); }
.opcao-de-acabamento.indisponivel .amostra { opacity: 0.4; }
.opcao-de-acabamento.indisponivel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.opcao-marca { width: 16px; height: 16px; }
.bolinha-apagada { box-sizing: border-box; border: 1px solid var(--sb-ds-neutral-300); border-radius: 50%; } /* a bolinha apagada do que não se clica, pela decisão 2 da folha 1, na cor indisponível da página do módulo */
/* "Indisponível na loja", "Recomendado" e "Parecido", na lista das cores, passam ao Badge do design system desde a etapa 4 da PR 1 do
   super plano, pela decisão 7 da folha 2, com as classes .selo-cinza e .selo-azul; as classes .opcao-sem-estoque e .marca-parecida
   saíram, e .marca-recomendada fica só para os estudos que a usam sem defini-la, como o da proposta do projeto em 3D, com o canto
   de 8 pixels da 11A. Cada classe de selo abaixo traz o selo inteiro, e não só as cores, para valer também no selo dos estudos,
   que não é o Badge. */
.marca-recomendada { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 8px; background: var(--secondary); color: var(--primary); font-size: 12px; line-height: 16px; font-weight: 600; } /* 2 e 8 pixels: o espaço e o canto do selo do design system */
.frase-do-acabamento { margin: 8px 0 0 0; color: var(--sb-ds-neutral-600); }
/* Desde o "aplicar" dos ajustes da tela 2, de 15/10, os materiais da página do módulo são 2 blocos de texto, sem a caixa,
   pela D62 e pela parte 4 do estudo dos ajustes: a amostra à esquerda, no meio das 2 linhas; em cima, em cinza, o tipo e a
   marca; embaixo, o nome em negrito, que quebra a linha quando não cabe na coluna, em vez de fazer a página rolar de lado,
   pela regra 41; e 16 pixels entre a chapa e a fita. Até 15/10, os materiais eram as etiquetas, com a regra .etiquetas-todas
   que deixava a etiqueta quebrar. Desde a etapa 20 da 4ª PR do "aplicar" da tela 3, o bloco "Materiais" saiu da página (C22), e
   os 2 materiais ficam na caixa "Os materiais do <cor>", que abre com o ponteiro em cima de cada cor, com as mesmas 2 linhas;
   as regras do bloco (.materiais-em-texto) e da frase sem cor escolhida (.sem-acabamento) ficam, porque 3 estudos da tela 2
   ainda usam .materiais-em-texto, e a app não usa mais as 2. */
.materiais-em-texto { display: grid; row-gap: 16px; }
.material-em-texto { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.material-em-texto .amostra { grid-row: 1 / 3; }
.material-em-texto .material-cima { grid-column: 2; font-size: 14px; line-height: 20px; }
.material-em-texto .material-nome { grid-column: 2; font-size: 14px; line-height: 20px; font-weight: 600; }
.sem-acabamento { margin: 0; min-height: 96px; color: var(--sb-ds-neutral-600); } /* 96 pixels: os 2 materiais de 2 linhas de 20, com 16 entre eles, para nada andar quando eles somem; a frase fica no alto, onde a chapa fica */
.preco-base { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.preco-base.sem-valor { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--sb-ds-neutral-600); }
.acoes-do-modulo { margin-top: 24px; display: grid; row-gap: 8px; }
.botao-largo { width: 100%; }
/* Desde a PR 2 do super plano, pela SPT49: na troca de um módulo que não tem nenhuma cor na loja, o clique em "Colocar no lugar do
   <módulo>" travado leva o foco a "Voltar à escolha dos módulos", com o mesmo anel, pela regra 68. Desde o "aplicar" do anel do que
   falta, de 31/10, o anel das cores, de "Personalizar este módulo" e de "Voltar à escolha dos módulos" vem da classe única do anel
   (.anel-do-que-falta). */
/* A janela do guia: a lista de texto da regra 52, com o título de cada item em preto, com 16 pixels, e o complemento
   embaixo, em cinza, com 14; o número começa na borda do texto de cima, e o texto do item, 24 pixels depois. */
.guia-intro { margin: 0; color: var(--sb-ds-neutral-700); }
.guia-lista { list-style: none; margin: 16px 0 0 0; padding: 0; display: grid; row-gap: 16px; }
.guia-lista li { display: grid; grid-template-columns: 24px minmax(0, 1fr); }
.guia-numero { font-size: 16px; line-height: 24px; color: var(--sb-ds-neutral-600); font-variant-numeric: tabular-nums; }
.guia-item-titulo { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--foreground); }
.guia-item-texto { display: block; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-600); }

/* Os Módulos, o resumo do projeto. */
.cabecalho-do-projeto { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nome-e-numero { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 16px; row-gap: 8px; min-width: 0; }
.titulo-com-nome { margin: 0; }
.nome-editavel { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; margin: 0 -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; } /* 8 pixels para fora e para dentro: o fundo do ponteiro em cima não encosta nas letras, e o texto fica na borda da faixa */
.nome-editavel:hover { background: var(--secondary); }
.nome-editavel:active { background: var(--sb-ds-brand-200); }
.nome-editavel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nome-texto.sem-nome { color: var(--sb-ds-neutral-600); }
.nome-acao { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; } /* 6 pixels: o espaço do botão pequeno do design system */
.numero-do-projeto { color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.campo-do-nome { display: grid; row-gap: 8px; width: 100%; max-width: 560px; }
.rotulo-com-opcional { display: inline-flex; align-items: baseline; gap: 8px; }
.opcional { font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-600); }
.campo-do-nome-linha { display: flex; align-items: center; gap: 8px; }
.campo-do-nome-linha [data-slot="input"] { flex: 1; min-width: 0; }
.campo-do-nome > .frase-do-que-falta { margin-top: 0; } /* desde o "aplicar" do anel do que falta, de 31/10, pela AF4: a linha reservada da frase do que falta do nome do módulo, na tela 3, fica a 8 pixels do campo, pelo espaço entre as linhas do campo, como a linha do estado do nome do projeto */
.linha-do-estado { margin: 0; min-height: 20px; color: var(--sb-ds-neutral-600); } /* 20 pixels: a altura de 1 linha da frase do estado, reservada */
.resumo-do-projeto { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 336px; column-gap: 32px; align-items: start; }
.coluna-do-painel { position: sticky; top: 73px; } /* 73 pixels: os 49 da barra do topo e 24, como a coluna da foto */
.icone-botao { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--primary); cursor: pointer; }
.icone-botao:hover { background: var(--sb-ds-brand-200); }
.icone-botao:active { background: var(--sb-ds-brand-300); }
.icone-botao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.icone-botao.botao-travado { color: var(--sb-ds-neutral-500); cursor: not-allowed; }
.icone-botao.botao-esperando { cursor: progress; color: var(--sb-ds-neutral-600); }
.selo-sem-clique { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid; border-radius: 8px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; } /* 1 pixel: os 2 do selo do design system em cima e embaixo, menos a borda da regra 109; 8 pixels dos lados, dentro da borda, como o Badge do design system, desde o fim da PR 1 do super plano; 8 pixels de canto, pela 11A da folha 2 */
.painel-do-total { padding: 24px; border-radius: calc(var(--radius) + 4px); background: var(--muted); }
.painel-rotulo { margin: 0; color: var(--sb-ds-neutral-600); }
.painel-total { margin: 4px 0 0 0; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; } /* 4 pixels: o rótulo e o valor ficam juntos, como 1 grupo */
.painel-total .esqueleto-do-total { display: block; width: 200px; height: 48px; border-radius: 8px; }
/* Pela regra 113, desde a etapa 3 do "aplicar" das microinterações, de 01/11: a linha cinza do total deixa de pulsar depois de 5
   segundos, pela classe sem-pulsar (telas/modulos.js, totalSemPulsar), e fica parada para quem pediu menos movimento ao computador; até
   a etapa 3, ela ficava fora das regras das outras linhas cinza, que valem dentro de .carregando e de .esqueletos. */
.painel-total .esqueleto-do-total.sem-pulsar { animation: none; }
@media (prefers-reduced-motion: reduce) { .painel-total .esqueleto-do-total { animation: none; } }
.painel-total:focus { outline: none; } /* desde o "aplicar" do anel do que falta, de 31/10, pela AF4: o lugar do total que calcula recebe o foco só pelo clique em "Preparar o envio do projeto" travado, e o anel do que falta já mostra o lugar, sem o contorno do navegador por cima */
/* O total do modo do back-end, desde a F4b, pela A2: sem o preço estimado na tela, o lugar do total traz a frase do preço exato no
   tamanho das frases do painel, e não no do valor (telas/modulos.js, painel-total-no-envio). */
.painel-total.painel-total-no-envio { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; color: var(--sb-ds-neutral-700); }
.painel-total-no-envio p { margin: 0; }
.painel-mudanca, .painel-calculando { margin: 4px 0 0 0; display: flex; align-items: center; gap: 8px; color: var(--sb-ds-neutral-700); } /* 4 pixels: a frase fica junto do total */
.painel-mudanca svg, .painel-calculando { color: var(--sb-ds-neutral-600); } /* cinza, e não azul: pela regra 35, o azul fica só no que é clicável */
/* O total que não foi calculado, desde a etapa 5 da PR 1 do super plano, pela decisão 19B da folha 3: a frase, o "Tentar agora"
   com a borda azul e também o rótulo do total no centro do painel. Desde o "aplicar" das explicações do resumo, de 31/10, pela
   ER1, o rótulo fica sem o "i", e a linha que abre "Como o total do projeto é calculado" fica embaixo, com o título à esquerda,
   como nos outros estados, porque ela é uma parte do painel, como as do painel do módulo. */
.total-nao-calculado { margin-top: 4px; display: grid; row-gap: 8px; justify-items: center; color: var(--sb-ds-neutral-600); text-align: center; } /* 4 pixels: a frase fica junto do rótulo do total, como em .painel-mudanca */
.total-nao-calculado p { margin: 0; }
.painel-do-total.total-que-falhou .painel-rotulo { justify-content: center; text-align: center; }
.avisos-do-painel { margin-top: 24px; display: grid; row-gap: 16px; }
/* Desde a PR 2 do super plano, com 1 aviso para cada cor indisponível e para cada módulo com problema nas máquinas (SP3 e SP66), o
   painel do total, parado no alto, vai no máximo até 8 pixels do pé da janela do navegador, e os avisos rolam dentro dele, para
   "Ver o orçamento" continuar à vista (ponto P12 da leitura da PR 2). A área que rola tem 4 pixels a mais de cada lado, para o anel
   azul do aviso, de 2 pixels com 2 de folga, não ser cortado. Abaixo de 768 pixels, o painel deixa de ficar parado e não rola. */
@media (min-width: 768px) {
  .coluna-do-painel > .painel-do-total { display: flex; flex-direction: column; max-height: calc(100vh - 73px - 8px); box-sizing: border-box; } /* 73 pixels: o alto do painel parado; 8: o espaço até o pé da janela */
  .coluna-do-painel > .painel-do-total > * { flex: none; }
  .coluna-do-painel > .painel-do-total > .avisos-do-painel { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin: 20px -4px 0; padding: 4px; } /* 20 e 4 pixels: os 24 de antes, com os 4 da folga do anel dentro da área que rola */
  /* Desde o "aplicar" do estudo de 04/11: com "Como o total do projeto é calculado" e "Quanto este móvel custaria com um marceneiro"
     abertas, o painel passava de 1.000 pixels de altura, e "Preparar o envio do projeto" ficava abaixo da janela de 768, pela medida
     do navegador do Claude de 05/11. Por isso, o conteúdo de cada linha aberta rola dentro dela, e os títulos das 2 linhas e o botão
     continuam à vista. A área que rola tem 4 pixels a mais de cada lado, para o anel do foco das horas, de 2 pixels com 2 de folga. */
  .coluna-do-painel > .painel-do-total > .partes-do-modulo { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .coluna-do-painel > .painel-do-total > .partes-do-modulo > .parte-do-modulo { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .coluna-do-painel > .painel-do-total > .partes-do-modulo > .parte-do-modulo > .linha-que-abre { flex: none; }
  .coluna-do-painel > .painel-do-total > .partes-do-modulo .dentro-da-parte { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 4px 4px 16px; } /* 4 pixels: a folga do anel do foco, dentro da área que rola */
}
.avisos-do-painel .aviso [data-slot="alert-description"] { display: grid; row-gap: 8px; }
.producao { margin: 24px 0 0 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start; color: var(--foreground); }
.producao > svg { margin-top: 2px; color: var(--primary); } /* 2 pixels: o sinal de feito fica no meio da 1ª linha */
.acao-do-painel { margin-top: 24px; }
/* A frase do T73, embaixo de "Ver o orçamento", no lugar da nota que a D66 tirou, desde 15/10. Ela fica sempre na página,
   vazia, para o leitor de tela anunciar a frase quando ela aparece, e só ganha o espaço de cima quando tem a frase. */
.ainda-calculando { margin: 0; color: var(--sb-ds-neutral-600); text-align: center; }
.ainda-calculando:not(:empty) { margin-top: 8px; }
.projeto-enviado h2:focus { outline: none; } /* o título da forma não se clica */
/* A forma do projeto enviado, desde o "aplicar" dos ajustes da tela 2, de 15/10 (componentes/projeto-enviado.js): os botões
   um embaixo do outro, a 8 pixels, na largura de 200 pixels da ação da lista vazia, como a parte 10 do estudo dos ajustes.
   Desde o "aplicar" do projeto enviado, do mesmo dia, só o pagamento liberado sem a Página do projeto usa a forma, como
   caso temporário, e a forma curta do erro passou à janela do erro. */
.acoes-do-enviado { display: grid; row-gap: 8px; }
/* A linha da situação do projeto, embaixo do título da tela 2, desde o "aplicar" do projeto enviado, de 15/10, como na
   página da proposta: 16 pixels embaixo do título e 8 pixels entre o ícone, o texto e o botão (escolha 8 do plano). No
   projeto devolvido, o ícone de atenção, no amarelo 800 do design system, e o "i" com a frase do T75, a 4 pixels do texto,
   como nos rótulos com "i" (PE2). A linha do erro, com o ícone de alerta e o botão de texto "Ver o que acontece agora" (PE4,
   .situacao-erro), saiu de componentes/projeto-enviado.js na PR 5 do super plano. */
.situacao-do-projeto { margin: 16px 0 0 0; display: flex; align-items: center; gap: 8px; color: var(--foreground); font-weight: 500; }
.situacao-do-projeto > svg { flex: none; }
.situacao-devolvido > svg { color: var(--sb-ds-accent-800); }
.situacao-do-projeto .botao-informacao { margin: -2px 0 -2px -4px; } /* -4 pixels: o "i" fica a 4 pixels do texto; -2 pixels: o "i" de 24 cabe na linha */
/* O título da janela do erro, com o ícone de alerta, no vermelho do design system, antes do texto, no meio da 1ª linha. */
.titulo-do-erro { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.titulo-do-erro > svg { margin-top: 4px; color: var(--destructive); } /* 4 pixels: o ícone de 16 no meio da 1ª linha, de 24 */
/* O resumo só para ler, no erro ao gerar a lista das peças (PE5), com a linha sem o fundo e sem a mãozinha (.linha-para-ler e
   .linha-sem-link) e o TPE8 no lugar do total (.sem-total), saiu de telas/modulos.js na PR 5 do super plano. */
/* Os passos numerados, na forma curta do erro e na janela "Mudar o projeto enviado?": o número num círculo de 24 pixels, com
   o texto 32 pixels depois, pela regra 47, e o título de cada passo em preto, com 16 pixels, com o complemento embaixo, em
   cinza, com 14, pela regra 52; 16 pixels entre 2 passos. */
.passos-numerados { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 16px; text-align: left; }
.passos-numerados li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.passo-numero { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid var(--sb-ds-neutral-400); border-radius: 9999px; color: var(--foreground); font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.passo-titulo { display: block; color: var(--foreground); font-size: 16px; line-height: 24px; }
.passo-complemento { display: block; color: var(--muted-foreground); font-size: 14px; line-height: 20px; }

/* O carregar e o erro da regra 113, na tela 2 e na home (componentes/carregamento.js). */
.carregando { margin-top: 32px; }
.carregando-cartoes .esqueletos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.esqueletos .esqueleto.esqueleto-cartao { width: auto; height: 176px; border-radius: 8px; }
.carregando-modulo .esqueletos { display: grid; grid-template-columns: minmax(0, 1fr) 336px; grid-template-rows: repeat(4, 20px); column-gap: 32px; row-gap: 16px; }
.esqueletos .esqueleto.esqueleto-foto { grid-row: 1 / span 4; width: auto; height: 400px; border-radius: 8px; }
.esqueletos .esqueleto.esqueleto-linha { width: auto; height: 20px; } /* 20 pixels: a altura de 1 linha de texto */
.esqueletos .esqueleto.esqueleto-linha-curta { width: 50%; height: 20px; } /* 20 pixels: a altura de 1 linha de texto */
.carregando-resumo .esqueletos { display: grid; grid-template-columns: minmax(0, 1fr) 336px; column-gap: 32px; row-gap: 16px; }
.esqueletos .esqueleto.esqueleto-linha-de-modulo { grid-column: 1; width: auto; height: 112px; border-radius: 8px; }
.esqueletos .esqueleto.esqueleto-painel { grid-column: 2; grid-row: 1 / span 2; width: auto; height: 240px; border-radius: 12px; }
/* Na home, os estados ficam no lugar da lista, com a margem da lista; o texto começa no ponto do texto do campo de busca e da
   1ª coluna da lista, pela regra 47. */
.estado-da-lista { margin: 32px 16px 0 16px; }
.estado-da-lista.com-texto { padding: 0 13px; } /* 13 pixels: a borda de 1 e o espaço interno de 12 do campo de busca, pela regra 47 */
.estado-da-lista .carregando, .estado-da-lista .nao-carregou, .estado-da-lista .busca-sem-resultado { margin-top: 0; }
.carregando-lista .esqueletos { row-gap: 12px; } /* 12 pixels: com a linha cinza de 48, cada linha ocupa os 60 pixels de uma linha da lista */
.esqueletos .esqueleto.esqueleto-linha-da-lista { width: auto; height: 48px; border-radius: 8px; }
.carregando-ainda { margin: 16px 0 0 0; color: var(--sb-ds-neutral-600); }
/* Desde a etapa 5 da PR 1 do super plano, pela decisão 19B da folha 3, a frase e o "Tentar agora", o botão pequeno com a borda
   azul (componentes/carregamento.js, TentarAgora), ficam no centro do lugar do que não carregou, como a lista vazia da regra 53. */
.nao-carregou { margin: 32px auto 0 auto; display: grid; row-gap: 8px; justify-items: center; max-width: 37em; color: var(--sb-ds-neutral-600); text-align: center; }
.nao-carregou p { margin: 0; }
/* O caso d da página do módulo: a foto e o preço base que não carregaram mostram a frase no próprio lugar, sem o espaço de
   cima do bloco que não carregou. */
.foto-que-falhou { padding: 24px; }
.foto-que-falhou .nao-carregou, .nao-carregou.preco-que-falhou { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .carregando .esqueleto { animation: none; } }

/* As 2 colunas passam a 1 coluna quando a faixa fica estreita, pela regra 8; o jeito estreito de cada tela continua com a
   sessão 6 do plano das telas. */
@media (max-width: 767px) {
  .pagina-do-modulo, .resumo-do-projeto { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .coluna-da-foto, .coluna-do-painel { position: static; }
  .cartoes, .carregando-cartoes .esqueletos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .cartoes, .carregando-cartoes .esqueletos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- O 3D do protótipo (componentes/palco-do-prototipo.js) ---------- */

/* O 3D ocupa o tamanho que a tela dá a ele, com o fundo no cinza 50 do design system, o mesmo do canvas, e o canto de 8
   pixels da folha da proposta do projeto em 3D (.estudo-3d, linha 125). A borda cinza fica num ::after, por cima do canvas,
   porque, na folha, a borda era uma sombra interna da caixa, que o canvas cobre. */
.palco { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: var(--sb-ds-neutral-50); }
.palco::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
/* A área do desenho se arrasta para girar a vista, e por isso mostra a mão aberta e, enquanto a pessoa arrasta, a mão
   fechada; a regra 49 fala do que se clica, e o clique no 3D da tela 3 não escolhe nada (pergunta 61). */
.palco-area { position: absolute; inset: 0; border-radius: inherit; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.palco-area.palco-arrastando { cursor: grabbing; }
/* O foco do teclado fica para dentro da borda, porque a caixa do 3D corta o que passa dela (regra 38). */
.palco-area:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.palco-canvas { display: block; width: 100%; height: 100%; }
/* Os botões do 3D, no canto de cima, à direita, a 8 pixels das bordas, como a folha (.estudo-botoes-3d, linha 127). */
.palco-botoes { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 8px; }
/* O 3D que não abriu: a frase da folha no meio da caixa (.estudo-3d-sem-biblioteca, linha 134), com no máximo 37em por
   linha, pela regra 8. */
.palco-nao-abriu { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--sb-ds-neutral-700); }
.palco-nao-abriu p { max-width: 37em; margin: 0; }
/* O carregar da regra 113, com o componente Carregando: a linha cinza ocupa o 3D, a 16 pixels das bordas, e a frase da
   espera longa fica no meio, como o estado do 3D da folha (.estudo-esqueleto-3d e .estudo-estado-frase, linhas 248 a 250). */
.palco .carregando-ainda-nao { position: absolute; }
.palco .carregando.palco-carregando { position: absolute; inset: 0; z-index: 3; margin: 0; display: grid; place-content: center; padding: 24px; text-align: center; }
.palco-carregando .esqueletos { position: absolute; inset: 16px; display: block; }
.esqueletos .esqueleto.esqueleto-palco { width: auto; height: 100%; border-radius: 8px; }
.palco-carregando .carregando-ainda { position: relative; margin: 0; max-width: 37em; color: var(--sb-ds-neutral-700); }
/* Desde a 4ª PR do "aplicar" da tela 3, o 3D do resumo do projeto. O módulo é clicável e mostra a mãozinha (regra 49); fora dos
   módulos, a mão aberta continua dizendo que o arrastar gira a vista. */
.palco-area.palco-sobre-modulo { cursor: pointer; }
.palco-area.palco-sobre-modulo.palco-arrastando { cursor: grabbing; }
/* Desde a etapa 32 da PR das vistas e da usabilidade, a imagem dos módulos do resumo (U2): fora dos módulos, a seta, porque o
   arrastar com o botão esquerdo não faz nada, como a imagem do estudo da usabilidade (.estudo-parado, linha 129); a mãozinha em cima
   de um módulo, que se clica; e a mão fechada enquanto a rodinha apertada move a vista para o lado, como o palco. */
.palco-area.palco-imagem { cursor: default; }
.palco-area.palco-imagem.palco-sobre-modulo { cursor: pointer; }
.palco-area.palco-imagem.palco-arrastando { cursor: grabbing; }
/* O número de cada módulo e as medidas do módulo escolhido, em HTML, por cima do desenho, como a folha (.estudo-sobre-o-3d,
   .estudo-numero-3d e .estudo-cota, linhas 137 a 140): o número com 24 por 18 pixels, 11 de letra e 4 de canto, e a medida com
   2 e 12 pixels de espaço, 14 de letra e 4 de canto, no preto do design system, com o texto branco. Os 18, os 2 e os 4 pixels
   são os da folha, que copia a etiqueta do palco. */
.palco-sobre { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; }
.palco-numero { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; min-width: 24px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 4px; background: var(--foreground); color: var(--background); font-size: 11px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } /* 18 e 4 pixels: as medidas da folha, que copia a etiqueta do palco 3D, como diz o comentário acima */
.palco-cota { position: absolute; transform: translate(-50%, -50%); margin: 0; padding: 2px 12px; border: 0; border-radius: 4px; background: var(--foreground); color: var(--background); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } /* 2 e 12 pixels: as medidas da folha, que copia a etiqueta do palco 3D */
/* A medida que abre o campo da distância (C9) é um botão: a mãozinha, o cinza 700 com o ponteiro em cima, porque o preto não
   escurece mais, e o cinza 800, 1 tom acima, pressionado (regras 81 e 119), e o foco do teclado (regra 38). */
button.palco-cota { pointer-events: auto; cursor: pointer; }
button.palco-cota:hover { background: var(--sb-ds-neutral-700); }
button.palco-cota:active { background: var(--sb-ds-neutral-800); }
button.palco-cota:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Desde o "aplicar" da escolha do módulo, de 30/10, pela etapa 4 do plano, na imagem dos módulos do resumo, o número de cada módulo
   é um botão (regra 38), num rótulo com o lugar do selo do aviso 8 pixels à direita do número (regras 45 e 84): o motor do 3D põe
   o meio do número no ponto do módulo, pelo transform do rótulo, e o selo anda com o número. O número tem a mãozinha (regra 49), o
   cinza 700 com o ponteiro em cima e o cinza 800 pressionado, como a medida que se clica (regras 81 e 119), e o anel azul do foco
   da app (regra 38); a caixa azul do módulo escolhido continua no 3D. O lugar vazio do selo some, para o espaço de 8 pixels não
   contar no rótulo do módulo sem aviso. */
.palco-rotulo-do-numero { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-12px, -50%); }
.palco-rotulo-do-numero[hidden] { display: none; }
.palco-rotulo-do-numero .palco-numero { position: static; flex: none; transform: none; }
button.palco-numero-botao { margin: 0; border: 0; font-family: inherit; pointer-events: auto; cursor: pointer; }
button.palco-numero-botao:hover { background: var(--sb-ds-neutral-700); }
button.palco-numero-botao:active { background: var(--sb-ds-neutral-800); }
button.palco-numero-botao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.palco-selo-do-numero { display: inline-flex; pointer-events: auto; }
.palco-selo-do-numero:empty { display: none; }
/* A dica do canto de cima, à esquerda, como a folha (.estudo-dica-3d, linha 135): 8 pixels da borda e 12 do topo, para ficar no
   meio da altura dos botões de 32 pixels; 4 e 8 pixels de espaço e 6 de canto, os da folha; e o branco a 92 em cada 100. */
.palco-dica { position: absolute; left: 8px; top: 12px; z-index: 3; display: inline-flex; flex-direction: column; max-width: calc(100% - 144px); box-sizing: border-box; margin: 0; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--background) 92%, transparent); box-shadow: inset 0 0 0 1px var(--border); color: var(--sb-ds-neutral-700); font-size: 12px; line-height: 16px; pointer-events: none; } /* 12, 4 e 8 pixels: a dica no meio da altura dos botões de 32, com os espaços da folha */
/* O 3D do resumo que não carregou, como a tela 7 da parte 2 da folha (.estudo-3d-estado, linhas 379 a 383): a frase e o "Tentar
   agora" no meio da caixa, com 16 pixels entre eles. */
.palco .nao-carregou.palco-nao-carregou { position: absolute; inset: 0; z-index: 3; margin: 0; max-width: none; display: grid; place-content: center; justify-items: center; row-gap: 16px; padding: 24px; text-align: center; color: var(--sb-ds-neutral-700); }
.palco-nao-carregou p { max-width: 37em; }

/* ---------- O resumo do projeto com o 3D, desde a 1ª metade da etapa 17 da 4ª PR (telas/modulos.js) ---------- */

/* O 3D fica no alto da coluna da lista, com 360 pixels de altura, como a folha da proposta do projeto em 3D (.estudo-3d, linha
   126), e a lista fica 32 pixels embaixo do que vem antes dela, o 3D ou o bloco das medidas (folha, linha 2260; regra 45). */
.resumo-3d { position: relative; height: 448px; } /* 448 pixels, desde o "aplicar" da escolha do módulo, de 30/10, pela EM1: a imagem fica mais alta sem a lista embaixo */
/* Com o item preso ao ponteiro (C18), o 3D inteiro recebe o clique que coloca o item, e por isso mostra a mãozinha (regra 49). */
.palco-area.palco-colocando { cursor: pointer; }
.palco-area.palco-colocando.palco-arrastando { cursor: grabbing; }
/* O campo da distância digitada (C9), no lugar da medida em que a pessoa clicou, por cima dos números e das medidas, que ficam
   no z-index 2, e dos botões do 3D, no 5: 96 pixels de largura, o campo curto da folha (linha 350), e 32 de altura, a do botão
   pequeno do design system, com a borda, o ponteiro em cima e o anel dos campos da regra 110. */
/* Desde a PR 2 do super plano, o campo da distância fica numa caixa no lugar da medida, com a frase de erro da SPT57 embaixo dele,
   dentro do 3D, a 4 pixels do campo, como a frase do estado da regra 67, no branco, para ser lida por cima do 3D, em vermelho e com o
   círculo com "!", pela regra 30 (achado 6 da 2ª passada). */
.cota-digitada-caixa { position: absolute; z-index: 6; transform: translate(-50%, -50%); width: 96px; height: 32px; }
.cota-digitada-caixa .cota-digitada { position: static; transform: none; }
.cota-digitada-erro { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 8px; border-radius: 8px; background: var(--background); color: var(--destructive); font-size: 14px; line-height: 20px; white-space: nowrap; box-shadow: var(--sombra-lg); } /* 4 pixels: a frase junto do campo, como a frase do estado da regra 67, e o espaço dentro da caixa da frase */
.cota-digitada-erro:empty { visibility: hidden; }
.cota-digitada { position: absolute; z-index: 6; transform: translate(-50%, -50%); box-sizing: border-box; width: 96px; height: 32px; margin: 0; padding: 0 8px; border: 1px solid var(--sb-ds-neutral-500); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; text-align: center; }
.cota-digitada:hover { border-color: var(--sb-ds-neutral-700); }
.cota-digitada:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--sb-ds-brand-100); } /* 3 pixels: o anel do campo do design system */
.cota-digitada[aria-invalid="true"], .cota-digitada[aria-invalid="true"]:focus { border-color: var(--destructive); }
/* O convite das medidas do espaço (C2), embaixo do 3D do resumo, saiu na etapa 33 da PR das vistas e da usabilidade, pela U5, e as
   regras dele (.convite-do-espaco), na etapa 34, porque nada mais as usa. */
/* O bloco das medidas do espaço, na ordem da C23, 16 pixels embaixo do 3D, com a borda e 24 pixels de espaço dentro, como a folha
   (.estudo-espaco, linhas 324 a 353): o título com o livro aberto (C6 e M2); os 3 campos lado a lado, com 16 pixels entre eles e
   192 de largura, para a frase do estado de cada campo caber em 1 linha embaixo dele (regra 67); "O que já existe no seu
   espaço", 16 pixels depois da linha reservada da frase do estado, que já soma 24 embaixo do campo; o que a pessoa colocou, a 8
   pixels do subtítulo; os 8 botões, a 8 pixels do subtítulo, ou a 16 do último item; e a frase do espaço, 24 pixels embaixo. */
.espaco-do-resumo { margin-top: 16px; padding: 24px; border: 1px solid var(--border); border-radius: 8px; }
.espaco-topo { display: flex; align-items: center; gap: 8px; }
.espaco-titulo { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); }
.espaco-topo .projetar-icone-botao { margin: -4px 0; } /* -4 pixels: o livro de 32 pixels fica no meio da linha de 24 do título, sem aumentar o topo */
.espaco-campos { margin-top: 16px; display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 8px; }
.espaco-campos > .projetar-campo { width: 192px; }
.espaco-subtitulo { margin: 16px 0 0 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); }
.itens-do-espaco { margin: 8px 0 0 0; padding: 0; list-style: none; display: grid; row-gap: 8px; }
/* Cada item colocado, numa linha cinza, como a folha (.estudo-item-do-espaco, linha 343): 12 pixels em cima, para a linha ficar
   mais baixa que o bloco, e 0 embaixo, porque a linha reservada da frase do estado dos campos já dá 24 pixels embaixo do campo.
   O nome e a lixeira ficam no meio da altura do campo de 36 pixels, que começa 22 pixels abaixo do alto do rótulo, de 14, pela
   medida no Chrome sem janela: o nome, de 24, a 28 pixels do alto; a lixeira, de 32, a 24. Os rótulos, o "mm" e a frase ficam
   no cinza 700 sobre o cinza da linha, pela
   regra 132, e os campos, com os 96 pixels do campo curto da folha (linha 350). */
.item-do-espaco { display: flex; align-items: flex-start; gap: 16px; padding: 12px 16px 0; border-radius: 8px; background: var(--muted); } /* 12 pixels: a linha fica mais baixa que o bloco, como na folha */
.item-do-espaco-nome { min-width: 64px; margin-top: 28px; font-weight: 600; line-height: 24px; color: var(--foreground); } /* 28 pixels: o nome de 24 no meio da altura do campo de 36, como diz o comentário acima */
.item-do-espaco .projetar-campo-linha [data-slot="input"] { flex-basis: 96px; width: 96px; }
.item-do-espaco .projetar-campo-rotulo { font-weight: 400; color: var(--sb-ds-neutral-700); }
.item-do-espaco .projetar-campo-linha { color: var(--sb-ds-neutral-700); }
.item-do-espaco-tirar { margin-top: 24px; margin-left: auto; }
.botoes-do-espaco { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.itens-do-espaco + .botoes-do-espaco { margin-top: 16px; }
/* Da PR 2 do super plano até a etapa 33 da PR das vistas e da usabilidade, pela decisão 25B da folha 4, o bloco das medidas ficava
   na janela "As medidas do seu espaço", por cima do 3D do resumo; desde a etapa 33, pela U5 e pela U6, ele fica só na aba "Medidas"
   do "Como fica na sua casa", e as regras da janela (.janela-das-medidas) saíram na etapa 34, porque nada mais as usa. As regras
   acima, de .espaco-do-resumo a .item-do-espaco, ficam para o bloco de antes. */
/* Os 3 campos, um embaixo do outro, pela decisão 22, a 16 pixels um do outro, na largura da janela; "O que já existe no seu
   espaço" 16 pixels depois do último campo, e cada item numa linha cinza, com o nome e a lixeira em cima e os campos embaixo, que
   quebram a linha quando não cabem, pela SP61, a 8 pixels um do outro na linha e a 16 entre as linhas. */
.medidas-do-espaco-campos { display: grid; row-gap: 16px; }
.medidas-do-espaco .espaco-subtitulo { margin-top: 16px; }
.medidas-do-espaco .item-do-espaco { display: grid; row-gap: 8px; padding: 12px 16px; } /* 12 pixels em cima e embaixo, como a linha cinza do item no bloco de antes, e agora também embaixo, porque a linha reservada embaixo dos campos fica dentro do campo */
.item-do-espaco-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.medidas-do-espaco .item-do-espaco-nome { margin-top: 0; }
.medidas-do-espaco .item-do-espaco-tirar { margin: -4px 0; } /* -4 pixels: a lixeira de 32 pixels no meio da linha de 24 do nome */
.item-do-espaco-campos { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 8px; }
.item-do-espaco-campos > .campo-com-linhas { width: 152px; } /* 152 pixels: o campo curto de 96, o "mm" e a frase de erro em 2 linhas, sem alargar o campo (achado 15 da 2ª passada) */
/* A linha embaixo de cada campo, pela C46, pela F4T21 e pela regra 67: as linhas de agora ficam por cima das linhas reservadas, na
   mesma célula, e as reservadas, escondidas, guardam a altura das linhas mais longas que o campo pode ter, na largura de agora, para
   nada andar quando uma linha aparece ou muda (ponto P5 da leitura da PR 2). A linha do que fica livre fica no azul principal, com
   o sinal de feito, pela regra 35 e pela C46; a do que falta e a de erro, em vermelho, com o círculo com "!", pela regra 30. */
.linhas-do-campo { display: grid; margin-top: 4px; } /* 4 pixels: as linhas ficam junto do campo, como a frase do estado da regra 67 */
.linhas-do-campo > * { grid-area: 1 / 1; display: grid; row-gap: 4px; align-content: start; } /* 4 pixels: as 2 linhas de uma parede dos lados juntas, como 1 grupo */
.linhas-do-campo-reserva { visibility: hidden; }
.linha-do-campo { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start; margin: 0; font-size: 14px; line-height: 20px; color: var(--destructive); }
.linha-do-campo > svg { margin-top: 2px; } /* 2 pixels: o ícone de 16 no meio da 1ª linha, de 20 */
.linha-do-campo-livre { color: var(--primary); }
.item-do-espaco .linha-do-campo-falta { color: var(--destructive); }
/* A linha embaixo do 3D do resumo, pela decisão 25B da folha 4 (.estudo-25b-resumo): o resultado das medidas, em azul com o sinal de
   feito, ou o que falta, em vermelho com o "!", e, até a etapa 33 da PR das vistas e da usabilidade, "Mudar as medidas do espaço", à
   direita, na borda cinza de 1 pixel, 16 pixels embaixo do 3D, como o convite. Desde a etapa 33, pela U5, o botão à direita é "Ver
   como fica na sua casa", com borda, como o estudo (estudos/estudo-usabilidade-tela-2-e-casa.html, .estudo-linha-do-espaco, linhas 180
   a 184), com 8 pixels de espaço em volta dele; sem medida, o botão fica sozinho, à direita, sem a borda da linha. */
.linha-das-medidas { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 16px; border: 1px solid var(--border); border-radius: 8px; } /* 8 pixels à direita, em cima e embaixo: o espaço em volta do botão */
.linha-das-medidas-estado { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start; flex: 1; min-width: 0; margin: 0; color: var(--primary); font-size: 14px; line-height: 20px; }
.linha-das-medidas-estado:empty { display: block; }
.linha-das-medidas-estado > svg { margin-top: 2px; } /* 2 pixels: o ícone de 16 no meio da 1ª linha, de 20 */
.linha-das-medidas-falta { color: var(--destructive); }
.linha-das-medidas > :is(a, button) { flex: none; }
.linha-das-medidas.linha-so-com-o-botao { justify-content: flex-end; padding: 0; border: 0; }
/* O botão do item que está preso ao ponteiro fica como a opção escolhida da decisão 1A: o azul claro, a borda no azul principal e
   o texto azul. Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, os 3 tons em escada: com o ponteiro em cima, o
   botão sem escolha ganha o azul mais claro do design system (brand-50), o texto azul e a borda azul clara (brand-400); o
   escolhido ganha o texto em negrito, com a largura do negrito guardada (.nome-com-o-negrito-guardado), e, com o ponteiro em
   cima, o brand-200, com o texto no brand-800; e o pressionado fica 1 tom acima, pela regra 119. Pela decisão 3 da folha 1, o
   escolhido troca o "+" pelo sinal de feito, antes do texto (telas/modulos.js). Os seletores repetem as classes do botão com
   borda do design system, para passar na frente do ponteiro em cima de todos os botões com borda (regra 81). */
.botoes-do-espaco [data-slot="button"][aria-pressed="true"] { background: var(--secondary); border-color: var(--primary); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); font-weight: 600; }
.botoes-do-espaco .sb-ds-button.border.bg-background:not([aria-pressed="true"]):hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); color: var(--primary); }
.botoes-do-espaco .sb-ds-button.border.bg-background:not([aria-pressed="true"]):active { background: var(--secondary); color: var(--primary); }
.botoes-do-espaco .sb-ds-button.border.bg-background[aria-pressed="true"]:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
.botoes-do-espaco .sb-ds-button.border.bg-background[aria-pressed="true"]:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); }
/* A frase do espaço (.frase-do-espaco), no fim do bloco das medidas (C23) e, depois, na escolha do "Duplicar" do resumo, saiu com
   a escolha do "Duplicar", na etapa 33 da PR das vistas e da usabilidade, pela U3, e as regras dela, na etapa 34, porque nada mais as
   usa. */

/* ---------- A barra do módulo escolhido, o menu do botão direito e a janela do nome do ambiente, desde a 2ª metade da etapa 17 da 4ª
   PR (telas/modulos.js e componentes/janela-do-ambiente.js); desde a etapa 34 da PR das vistas e da usabilidade, a barra fica só no
   "Como fica na sua casa" (telas/modulos/ver-como-fica-na-sua-casa.js), pela U7 ---------- */

/* A barra do módulo escolhido (C20), embaixo, no meio, dentro do 3D, 8 pixels acima da borda de baixo, como a folha
   (.estudo-barra-do-modulo, linhas 143 a 148): a borda, o canto de 8 e a sombra, 8 pixels entre as partes, e 12 à esquerda, para o
   nome começar um pouco mais longe da borda que os botões, como na folha; quando não cabe na largura do 3D, a barra passa a 2
   linhas. Fica por cima dos números e das medidas (z-index 2) e embaixo dos botões do canto (z-index 5). */
.barra-do-modulo { position: absolute; left: 50%; bottom: 8px; z-index: 3; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: max-content; max-width: calc(100% - 16px); padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); box-shadow: var(--sombra-md); white-space: nowrap; } /* 12 pixels: o nome um pouco mais longe da borda que os botões, como na folha; desde a etapa 1 da PR 1 do super plano, a sombra das caixas que abrem por cima (shadow-md) do design system, pelo achado 17 */
/* O nome em negrito, cortado com reticências depois de 240 pixels, com o nome inteiro na explicação, pela regra 31 (NomeDaLinha); 8
   pixels a mais até o 1º botão, como na folha. Até a etapa 34 da PR das vistas e da usabilidade, a barra do resumo tinha também o
   número do módulo (.barra-do-modulo-numero), que saiu, porque o "Como fica na sua casa" não mostra os números dos módulos. */
.barra-do-modulo-nome { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-right: 8px; font-weight: 600; color: var(--foreground); }
.barra-do-modulo-nome .linha-nome { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 600; }
/* Os botões da barra são os botões pequenos com borda do design system, com o ícone no azul principal, como na folha (linha 148);
   o seletor conta também o "Duplicar", que fica dentro da explicação do botão travado e por isso tem o data-slot da explicação. */
.barra-do-modulo :is(button, a) svg { color: var(--primary); }
.barra-do-modulo .botao-travado svg { color: currentColor; } /* o "Duplicar" travado, com o ícone no cinza 500 do texto, pela decisão 2 da folha 1, desde a etapa 1 da PR 1 do super plano */
.barra-do-modulo .selo-atencao svg { color: currentColor; } /* o selo amarelo ao lado do nome, com o ícone na cor do texto do selo, como no painel do módulo do resumo, desde o "aplicar" do anel do que falta, de 31/10, pela AF3 */

/* A escolha do "Duplicar" (C17), com "Quantas cópias" (.escolha-do-duplicar e .contador), saiu do resumo na etapa 33 da PR das vistas
   e da usabilidade, pela U3, que faz 1 cópia na hora, e as regras dela, na etapa 34, porque nada mais as usa. */

/* O botão de uma escolha num grupo, no "De que lado" do "Duplicar" (BotaoDeEscolha, em telas/modulos.js), como a folha
   (.estudo-segmentos, linhas 395 e 396): 36 pixels de altura, 16 de espaço dos lados, e o escolhido pela regra 123, com a borda de 2 pixels no azul principal, o azul claro, o texto azul em negrito e o
   sinal de feito; com o ponteiro em cima, o azul claro, e o escolhido 1 tom mais escuro, pela regra 81; pressionado, 1 tom acima,
   pela regra 119. Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, os 3 tons em escada, também na espessura da
   chapa do painel das cores e nos nomes da janela do 1º ambiente: com o ponteiro em cima, o botão sem escolha ganha o azul mais
   claro do design system (brand-50), o texto azul e a borda azul clara (brand-400), e o pressionado, o azul claro; até a etapa 1,
   o ponteiro em cima dava o azul claro do escolhido. */
.botoes-de-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.botao-de-escolha { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 36px; padding: 0 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer; } /* 36 pixels: a altura do botão do design system */
.botao-de-escolha:hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); color: var(--primary); }
.botao-de-escolha:active { background: var(--secondary); color: var(--primary); }
/* O aria-checked, desde a etapa 2 da PR 1 do super plano, na espessura do painel das cores e em "De que lado", que passam a grupos
   de escolha de 1, pela decisão 4 da folha 1; os nomes da janela do 1º ambiente continuam com o aria-pressed, pela mesma decisão. */
.botao-de-escolha:is([aria-pressed="true"], [aria-checked="true"]) { padding: 0 15px; border: 2px solid var(--primary); background: var(--secondary); color: var(--primary); font-weight: 600; } /* 15 pixels: a borda de 2 sem mudar a altura do botão, pela regra 123 */
.botao-de-escolha:is([aria-pressed="true"], [aria-checked="true"]):hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* o brand-800 sobre o brand-200 e o brand-300, desde as correções da etapa 20 */
.botao-de-escolha:is([aria-pressed="true"], [aria-checked="true"]):active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); }
.botao-de-escolha:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* O menu do botão direito (C28 e C29), o menu do design system, como a folha (.estudo-menu-3d, linhas 300 a 313): 224 pixels de
   largura no mínimo, os itens de 32 pixels com o ícone no cinza 700, a mãozinha, pela regra 49, e, com o ponteiro em cima, com o
   foco do teclado ou com a lista ao lado aberta, o azul claro e o texto azul, pela regra 81; pressionado, 1 tom acima, pela regra
   119. "Tirar do projeto" fica no vermelho do design system. A lista dos ambientes tem 160 pixels no mínimo, e o nome sem ícone
   guarda o lugar dele, para começar no ponto do texto de "Novo ambiente". */
.ancora-do-menu { position: absolute; width: 0; height: 0; pointer-events: none; }
.menu-do-3d { min-width: 224px; }
.menu-do-3d.menu-do-3d-lista { min-width: 160px; }
.menu-do-3d [role="menuitem"] { gap: 8px; cursor: pointer; }
.menu-do-3d [role="menuitem"] svg { color: var(--sb-ds-neutral-700); }
.menu-do-3d [role="menuitem"]:not([data-variant="destructive"]):focus, .menu-do-3d [role="menuitem"]:not([data-variant="destructive"])[data-highlighted], .menu-do-3d [role="menuitem"][data-state="open"] { background-color: var(--secondary) !important; color: var(--primary) !important; }
.menu-do-3d [role="menuitem"]:not([data-variant="destructive"]):active { background-color: var(--sb-ds-brand-200) !important; }
.menu-do-3d [role="menuitem"][data-variant="destructive"] svg { color: var(--destructive); }
.menu-do-3d-item-com-lista > svg:last-child { margin-left: auto; padding-left: 16px; box-sizing: content-box; } /* 16 pixels entre o nome e a seta, como na folha (linha 310) */
.menu-do-3d-sem-icone { display: inline-block; flex: none; width: 16px; }

/* A janela do nome do ambiente novo, na forma de 18/10 da folha (janelaDoAmbiente, linhas 2111 a 2118, e .estudo-janela .estudo-campo,
   linha 427): o campo 32 pixels embaixo da frase, pelo espaço entre os blocos da janela da regra 50, com a largura da janela, 40 pixels de
   altura e o texto de 16, e a linha reservada da frase do estado embaixo dele, pela regra 67. */
.campo-do-ambiente { display: grid; row-gap: 8px; }
.campo-do-ambiente-rotulo { font-weight: 500; }
.campo-do-ambiente [data-slot="input"] { height: 40px; font-size: 16px; line-height: 24px; }
/* Desde a etapa 2 da PR 1 do super plano, a linha reservada é a frase do que falta da decisão 5 da folha 1 (.frase-do-que-falta), com
   a forma da frase do estado, logo abaixo: o ícone de 16 pixels fica no meio da linha pelo align-items, sem os 2 pixels do grid. */
.campo-do-ambiente-estado > svg { flex: none; margin-top: 0; }
.campo-do-ambiente-estado { display: flex; align-items: center; gap: 8px; min-height: 20px; margin: -4px 0 0; color: var(--destructive); font-size: 14px; line-height: 20px; } /* -4 pixels: a frase do estado a 4 pixels do campo, como a dos campos das medidas */

/* ---------- O painel do total do resumo, com os ambientes, os 3 avisos amarelos e o painel das cores, desde a etapa 18 da 4ª PR
   (telas/modulos.js) ---------- */

/* O botão de texto com o ícone, como "Ver como fica na sua casa" e "Novo ambiente" (C13): o ícone a 8 pixels do texto, sem o espaço
   de cima do botão de texto da app, porque o espaço vem do grupo, e na largura do texto, para o sublinhado da regra 81 ficar só nele. */
.botao-de-texto.botao-de-texto-com-icone { margin-top: 0; display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
/* Os ambientes no painel do total do resumo (.ambientes-do-painel, .ambiente-lugar e .ambiente-do-painel), com o título, o "+",
   "Organizar os ambientes", o sofá e a linha de cada ambiente, e o nome do ambiente aberto em cima do 3D (.ambiente-aberto) saíram
   do resumo na etapa 33 da PR das vistas e da usabilidade, pela U4, que passa os ambientes às abas em cima da imagem dos módulos, e as
   regras deles, na etapa 34, porque nada mais as usa. */
/* Desde a PR 2 do super plano, pela decisão 25 da folha 4, a linha acima do 3D tem o nome do ambiente aberto, com 2 ambientes ou
   mais, e "Escolher mais um módulo", à direita; com 1 ambiente, só o botão, à direita, como a folha 4 (.estudo-25b-acima). A linha
   fica 16 pixels acima do 3D, como o nome ficava. */
.acima-do-3d { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.acima-do-3d .escolher-mais { flex: none; margin-left: auto; }
/* Desde a etapa 33 da PR das vistas e da usabilidade, pela U4, as abas dos ambientes ficam no lugar do nome do ambiente aberto, com a
   largura que sobra à esquerda de "Escolher mais um módulo", como o estudo (estudos/estudo-usabilidade-tela-2-e-casa.html,
   .estudo-acima-da-imagem, linhas 178 e 179); as abas que não cabem vão para "Mais ambientes" (componentes/ambientes-do-projeto.js). */
.acima-do-3d > .abas-dos-ambientes { flex: 1 1 auto; min-width: 0; }
/* A frase de que só os módulos do ambiente aberto mudam de cor, com 2 ambientes ou mais, no começo do bloco "O que muda em cada
   módulo", 8 pixels embaixo do título do bloco, no cinza 700 do texto do bloco. */
.painel-das-cores-so-o-ambiente { margin: 8px 0 0; color: var(--sb-ds-neutral-700); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }

/* Os 3 avisos amarelos do painel do total, pela M4, no jeito do aviso das máquinas da tela 3 (.projetar-aviso-das-maquinas): 12
   pixels de espaço dentro e 8 entre as partes, o título em negrito com o ícone numa linha própria, e o texto e os botões a partir da
   borda do ícone, um embaixo do outro, com os botões na largura do aviso e o texto que quebra a linha. O amarelo e a borda são os de
   antes, pela regra 109 (.aviso-atencao). */
.avisos-do-painel .aviso-do-painel { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 12px; border: 1px solid var(--sb-ds-accent-700); border-radius: 8px; font-size: 14px; line-height: 20px; } /* 12 pixels: o espaço interno do aviso das máquinas */
.aviso-do-painel p { margin: 0; }
.aviso-do-painel-linha { display: flex; align-items: flex-start; gap: 8px; }
.aviso-do-painel-linha > svg { flex: none; margin-top: 2px; } /* 2 pixels: o ícone de 16 no meio da 1ª linha, de 20 */
.aviso-do-painel-titulo { font-weight: 600; }
.aviso-do-painel [data-slot="button"], .aviso-do-painel [data-slot="tooltip-trigger"] { width: 100%; height: auto; min-height: 36px; padding-top: 7px; padding-bottom: 7px; white-space: normal; } /* 7 pixels: os 36 de altura do botão do design system, com a linha de 20 e a borda de 1, e o botão cresce com o texto que quebra a linha */
.aviso-do-painel .botao-atualizar { min-height: 32px; padding-top: 5px; padding-bottom: 5px; } /* 32 e 5 pixels: o botão pequeno do design system, com a linha de 20 e a borda de 1 */

/* O painel "Mudar a cor de todos os módulos" (C7), no lugar do painel do total, como a folha (.estudo-painel-de-cores, linhas 430 a
   460): a caixa branca com a borda, o canto de 12, 16 pixels de espaço dentro e a sombra. */
.painel-das-cores { box-sizing: border-box; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--background); box-shadow: var(--sombra-md); } /* desde a etapa 1 da PR 1 do super plano, a sombra das caixas que abrem por cima (shadow-md) do design system, pelo achado 17; desde a etapa 4, os 10 pixels de canto da janela do design system, pela 11A da folha 2 */
.painel-das-cores-topo { display: grid; grid-template-columns: minmax(0, 1fr) 32px; column-gap: 8px; align-items: start; }
.painel-das-cores-titulo { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); }
.painel-das-cores .fechar-o-painel { margin-top: -4px; color: var(--sb-ds-neutral-700); } /* -4 pixels: o X de 32 no meio da linha do título, de 24, como o X das janelas */
.painel-das-cores-espessura { margin-top: 16px; display: grid; justify-items: start; row-gap: 8px; }
.painel-das-cores-rotulo { margin: 0; font-weight: 600; color: var(--foreground); }
.painel-das-cores-ajuda { margin: 0; color: var(--sb-ds-neutral-700); }
/* A lista das cores, com 216 pixels e a rolagem própria, e as linhas de cima e de baixo, como a folha (linha 437). */
.painel-das-cores-lista { margin-top: 16px; max-height: 216px; overflow-y: auto; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.painel-das-cores-grupo + .painel-das-cores-grupo { margin-top: 16px; }
.painel-das-cores-grupo-titulo { margin: 0; font-weight: 600; color: var(--foreground); }
.painel-das-cores-linhas { margin-top: 8px; display: grid; row-gap: 4px; } /* 4 pixels: as cores do mesmo grupo ficam juntas, como a folha */
/* Cada cor: a amostra de 24 pixels, o nome e a linha curta da chapa, em 12 pixels; com o ponteiro em cima, o azul claro e o nome
   azul, pela regra 81; pressionada, 1 tom acima, pela regra 119; a escolhida pela regra 123, com a borda de 2 pixels, o nome azul em
   negrito e o sinal de feito no canto da amostra; e a desabilitada no cinza da cor desabilitada da tela 3 (.projetar-chip). O anel do
   foco fica por dentro da linha, porque a lista corta o que passa da borda dela. Desde a etapa 1 da PR 1 do super plano, pela
   decisão 1A da folha 1, os 3 tons em escada: com o ponteiro em cima, a cor sem escolha ganha o azul mais claro do design system
   (brand-50), o nome azul e a borda azul clara (brand-400); pressionada, o azul claro; e a escolhida, pressionada, o brand-300,
   com o nome no brand-800. Pela decisão 2 da folha 1, a cor desabilitada fica na aparência única do que não se clica: o fundo
   cinza claro, sem borda, o nome no cinza 500, a amostra a 40% e o motivo, "Indisponível na loja", no cinza 600. Até a etapa 1,
   o ponteiro em cima dava o azul claro da escolhida, e o nome da desabilitada ficava no cinza 600, com a amostra inteira. */
.cor-da-lista { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-items: center; width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--foreground); font: inherit; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer; } /* 6 pixels: a linha da cor com 44 de altura, com o nome e a chapa, como a folha */
.cor-da-lista:not([aria-checked="true"]):not([aria-disabled="true"]):hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); }
.cor-da-lista:not([aria-checked="true"]):not([aria-disabled="true"]):hover .cor-da-lista-nome { color: var(--primary); }
.cor-da-lista:not([aria-checked="true"]):not([aria-disabled="true"]):active { background: var(--secondary); }
.cor-da-lista[aria-checked="true"] { padding: 5px 7px; border: 2px solid var(--primary); background: var(--secondary); } /* 5 e 7 pixels: a borda de 2 sem mudar o tamanho, pela regra 123 */
.cor-da-lista[aria-checked="true"]:hover { background: var(--sb-ds-brand-200); }
.cor-da-lista[aria-checked="true"]:active { background: var(--sb-ds-brand-300); }
.cor-da-lista[aria-checked="true"] .cor-da-lista-nome { color: var(--primary); font-weight: 600; }
.cor-da-lista[aria-checked="true"]:hover .cor-da-lista-nome, .cor-da-lista[aria-checked="true"]:active .cor-da-lista-nome { color: var(--sb-ds-brand-800); } /* o brand-800 sobre o brand-200 e o brand-300, desde as correções da etapa 20 */
.cor-da-lista[aria-disabled="true"], .cor-da-lista[aria-disabled="true"]:hover { background: var(--muted); border-color: var(--muted); cursor: not-allowed; }
.cor-da-lista[aria-disabled="true"] .cor-da-lista-nome, .cor-da-lista[aria-disabled="true"]:hover .cor-da-lista-nome { color: var(--sb-ds-neutral-500); }
.cor-da-lista[aria-disabled="true"] .cor-da-lista-chapa { color: var(--sb-ds-neutral-600); }
.cor-da-lista[aria-disabled="true"] .projetar-amostra { opacity: 0.4; }
.cor-da-lista:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cor-da-lista-amostra { position: relative; display: inline-flex; width: 24px; height: 24px; }
.cor-da-lista-amostra .projetar-amostra { width: 24px; height: 24px; border-radius: 6px; } /* 6 pixels de canto, pela SP46: 1/4 do lado de 24 */
.cor-da-lista-feito { position: absolute; right: -6px; top: -6px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); } /* 6 pixels: o sinal de feito no canto da amostra, como a folha e a tela 3 */
.cor-da-lista-texto { display: grid; min-width: 0; }
.cor-da-lista-nome { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-weight: 500; }
.cor-da-lista-parecido, .cor-da-lista-chapa { color: var(--sb-ds-neutral-700); font-size: 12px; line-height: 16px; font-weight: 400; } /* o cinza 700, também sobre o azul claro da escolhida, pela regra 132 */
/* "O que muda em cada módulo:", 16 pixels embaixo da lista, com 16 pixels entre os módulos, o dobro dos 8 do rótulo à lista, pela
   fala de Aline Miyaki de 17/10 na C7, e o lugar de 20 pixels do ícone de cada resultado: o sinal de feito no círculo azul na cor que
   muda, o mesmo sinal no círculo cinza na cor que já está no módulo e, desde a 6C, o triângulo amarelo na espessura que muda. */
.painel-das-cores-resultado { margin-top: 16px; }
.painel-das-cores-efeitos { margin: 8px 0 0; padding: 0; list-style: none; display: grid; row-gap: 16px; }
.painel-das-cores-efeitos li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; align-items: start; color: var(--sb-ds-neutral-700); font-size: 14px; line-height: 20px; }
.painel-das-cores-efeitos b { color: var(--foreground); font-weight: 600; }
.efeito-icone { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; } /* 20 pixels: o círculo tem a altura da linha de 20 e a largura da coluna do ícone */
.efeito-icone svg { stroke-width: 3; }
/* Desde a PR 2 do super plano, o sinal de "muda" fica no círculo cinza 700 do design system, com o sinal branco, e não mais no azul,
   porque não se clica, pela regra 35 (achado 16 da 2ª passada, ponto P14 da leitura da PR 2); o "já está" continua no cinza claro. */
.efeito-muda .efeito-icone { background: var(--sb-ds-neutral-700); color: var(--background); }
.efeito-ja .efeito-icone { background: var(--sb-ds-neutral-200); color: var(--sb-ds-neutral-800); }
/* Desde a etapa 3 da PR 1 do super plano, pela 6C da folha 2, a espessura que muda tem o triângulo dos avisos amarelos, de 16 pixels,
   sem o círculo, no amarelo 800 do ícone do aviso das máquinas, no lugar do ponto de exclamação no círculo amarelo. */
.efeito-espessura .efeito-icone { color: var(--sb-ds-accent-800); }
.efeito-espessura .efeito-icone svg { stroke-width: 2; }
/* O botão que confirma, 24 pixels embaixo da lista "O que muda em cada módulo", mais longe do que os módulos ficam entre si, à direita,
   como a folha (linha 460). */
.painel-das-cores-rodape { margin-top: 24px; display: flex; justify-content: flex-end; }

/* ---------- "Ver como fica na sua casa", desde a etapa 19 da 4ª PR (telas/modulos/ver-como-fica-na-sua-casa.js) ---------- */

/* A parte ocupa a janela inteira embaixo da barra do topo, como a folha (.estudo-casa, linhas 533 a 588), que ocupa a moldura toda:
   fixa, de 49 pixels do alto, a altura da barra, até o fim da janela, com o topo e, embaixo, o 3D e o painel de 336 pixels. */
.casa { position: fixed; top: 49px; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--background); } /* 49 pixels: a altura da barra do topo, com a linha */
/* O topo, com 64 pixels de altura, como a folha, 24 pixels de espaço dos lados e entre as partes e a linha embaixo. Desde a 2ª metade
   da etapa 10 da PR 2 do super plano, o topo tem só "Voltar ao resumo do projeto" e o total (C32); o nome do projeto, o do ambiente e
   o "Salvo" saíram (.casa-projeto, .casa-nome e .casa-salvo). */
.casa-topo { display: flex; align-items: center; gap: 24px; min-height: 64px; box-sizing: border-box; padding: 8px 24px; border-bottom: 1px solid var(--border); }
.casa-topo .casa-voltar { flex: none; margin: 0; }
.casa-total { flex: none; margin: 0 0 0 auto; font-size: 18px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--foreground); }
/* Desde a PR 2 do super plano, pela C35 da folha da proposta do projeto em 3D (.estudo-casa-com-trilho, linhas 607 e 614): o 3D, o
   painel de 336 pixels e o trilho de 96, como a tela 3; com o painel escondido, o 3D ocupa a largura dele, e o trilho fica. */
.casa-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 336px 96px; min-height: 0; }
.casa-corpo.casa-sem-painel { grid-template-columns: minmax(0, 1fr) 96px; }
.casa-sem-dados { padding: 24px; }
/* O 3D sem o canto e sem a borda, porque ocupa a área inteira, como a folha (.estudo-casa-corpo .estudo-3d, linha 548). */
.casa-3d { position: relative; min-height: 0; }
.casa-3d .palco { border-radius: 0; }
.casa-3d .palco::after { box-shadow: none; }
/* A barra do item escolhido é a do módulo escolhido do resumo (.barra-do-modulo). Na janela de até 1.159 pixels, o 3D fica com até
   823 pixels de largura, e a barra mais larga, com o nome cortado em 240 pixels, "Girar" e "Tirar", passaria por cima de "Desenho" e
   "Realista", no canto de baixo, à direita; por isso, a barra fica no meio do espaço à esquerda deles, que ocupam 176 pixels, mais 8. */
@media (max-width: 1159px) { .casa-3d:has([data-el="casa-vistas"]) .barra-do-modulo { left: calc((100% - 184px) / 2); max-width: calc(100% - 200px); } } /* desde a PR 2 do super plano, só com "Desenho" e "Realista", que aparecem com ?realista=sim (SP73) */
/* O aviso de baixo (componentes/aviso.js) fica 8 pixels acima da barra do item escolhido, pela regra 102 e pela 14ª rodada da lista
   das decisões do super plano, porque o aviso no lugar de sempre, 24 pixels acima da borda da janela, cobria "Girar" e "Tirar". A
   barra fica 8 pixels acima da borda de baixo do 3D, que é a da janela, e tem 50 pixels de altura: os botões de 32, 8 de espaço em
   cima e embaixo e a borda de 1. O aviso fica nessa altura em toda esta parte, também sem a barra, porque no lugar de sempre ele
   cobria também a parte de cima de "Desenho" e "Realista", que ocupam os 42 pixels de baixo, à direita, nas janelas de 900 e de
   1.280 pixels, e assim o aviso não anda quando a barra aparece e some. */
html:has([data-el="casa"]) [data-sonner-toaster][data-y-position="bottom"] { bottom: calc(8px + 50px + 8px); } /* 66 pixels: a barra, a 8 da borda, com 50 de altura, e 8 entre a barra e o aviso */
/* "Desenho" e "Realista" (C21 e T7), no canto de baixo, à direita, a 8 pixels das bordas, como a folha (.estudo-vistas, linhas 560 a
   563): os 2 botões pequenos, de 24 pixels de altura e 12 de letra, dentro da caixa branca com 4 pixels de espaço, o espaço do grupo
   de botões do design system, e 4 entre eles. O escolhido fica no azul claro, com o texto azul e em negrito; o outro, com o ponteiro
   em cima, ganha o azul mais claro, como a aba fechada da decisão 1B, para não ficar igual ao escolhido (regra 123). Cada nome reserva
   a largura do negrito, para nada andar quando a escolha muda. */
.casa-vistas { position: absolute; right: 8px; bottom: 8px; z-index: 5; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); box-shadow: var(--sombra-xs); } /* desde a etapa 1 da PR 1 do super plano, a sombra shadow-xs do design system, pela variável, pelo achado 17 */
.casa-vistas button { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--sb-ds-neutral-700); font: inherit; font-size: 12px; line-height: 16px; font-weight: 500; cursor: pointer; } /* 4 pixels: o ícone colado no nome; 6: o canto do botão de dentro */
.casa-vistas button:hover { background: var(--sb-ds-brand-50); color: var(--primary); }
.casa-vistas button:active { background: var(--sb-ds-brand-100); } /* regra 119 */
.casa-vistas button[aria-checked="true"] { background: var(--secondary); color: var(--primary); font-weight: 600; }
.casa-vistas button[aria-checked="true"]:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* o brand-800 sobre o brand-200 e o brand-300, desde as correções da etapa 20 */
.casa-vistas button[aria-checked="true"]:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); } /* regra 119 */
.casa-vistas button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Desde a etapa 34 da PR das vistas e da usabilidade do super plano, o grupo das vistas do 3D, "Perspectiva | De cima | De frente"
   (V2 e V3), com a aparência do grupo "Desenho | Realista", no canto de cima, à esquerda, a 8 pixels das bordas, como os botões do
   canto de cima, à direita, e como o estudo das vistas do palco (.estudo-no-alto, linha 122). */
.casa-vistas.casa-vistas-do-3d { left: 8px; top: 8px; right: auto; bottom: auto; }
/* Desde a VU10 da lista das decisões do estudo da usabilidade, nas janelas com menos de 1.024 pixels, os 3 botões do grupo das vistas
   têm 4 pixels de espaço dentro, de cada lado, no lugar de 8, com o nome de cada vista à vista, porque, na janela de 900, o grupo
   terminava a 3 pixels de "Desfazer a última mudança". */
@media (max-width: 1023px) { .casa-vistas.casa-vistas-do-3d button { padding: 0 4px; } } /* 4 pixels: a metade do espaço de dentro, para o grupo caber ao lado dos botões do canto de cima, à direita */
/* A planta pequena da vista "De frente" (V4, 3ª versão), como o estudo das vistas do palco (.estudo-planta, linhas 127 a 144): 8 pixels
   embaixo do grupo das vistas, que tem 34 de altura, na caixa branca do grupo; o rótulo "Escolha a parede" em cima do desenho, em 12
   pixels, no cinza 700, a 4 pixels do desenho, que ele nomeia; o desenho de 128 × 104 pixels, com o chão no cinza 100, o cone azul
   claro, os módulos no branco, com a borda no cinza 600, o escolhido no brand-200, com a borda azul, e o ponto azul de onde a pessoa
   olha. Cada parede é um botão de borda azul, de 16 pixels de grossura, por fora do chão, como os botões de borda da app (regra 81):
   o azul claro com o ponteiro em cima, 1 tom acima pressionado (regra 119), e o azul cheio na parede à vista. O seletor começa por
   .casa-planta para passar por cima de .casa-vistas button, que tira a borda e o fundo. */
.casa-vistas.casa-planta { left: 8px; top: 50px; right: auto; bottom: auto; flex-direction: column; align-items: flex-start; gap: 0; } /* 50 pixels: 8 embaixo do grupo das vistas, que fica a 8 do alto e tem 34 de altura */
.casa-planta-rotulo { margin: 0 0 4px; padding: 0 4px; color: var(--sb-ds-neutral-700); font-size: 12px; line-height: 16px; font-weight: 500; } /* 4 pixels: o rótulo colado ao desenho que ele nomeia */
.casa-planta-desenho { position: relative; width: 128px; height: 104px; }
.casa-planta-desenho > svg { position: absolute; inset: 0; }
.casa-planta-chao { fill: var(--sb-ds-neutral-100); }
.casa-planta-cone { fill: var(--sb-ds-brand-100); stroke: var(--sb-ds-brand-400); stroke-width: 1; }
.casa-planta-modulo { fill: var(--background); stroke: var(--sb-ds-neutral-600); stroke-width: 1; }
.casa-planta-modulo.casa-planta-escolhido { fill: var(--sb-ds-brand-200); stroke: var(--primary); }
.casa-planta-olho { fill: var(--primary); }
.casa-planta .casa-planta-parede { position: absolute; display: block; box-sizing: border-box; padding: 0; border: 1px solid var(--primary); border-radius: 4px; background: var(--background); cursor: pointer; } /* 4 pixels: o canto do selo pequeno, como o das amostras de 16 pixels, pela regra 136 */
.casa-planta .casa-planta-parede:hover { background: var(--sb-ds-brand-100); }
.casa-planta .casa-planta-parede:active { background: var(--sb-ds-brand-200); }
.casa-planta .casa-planta-parede[aria-checked="true"] { background: var(--primary); }
.casa-planta .casa-planta-parede[aria-checked="true"]:hover { background: var(--sb-ds-brand-800); }
.casa-planta .casa-planta-parede[aria-checked="true"]:active { background: var(--sb-ds-brand-900); }
/* As medidas do espaço escritas nas paredes, nas vistas "De cima" e "De frente" (U6), por cima do desenho e embaixo do grupo das
   vistas, da planta pequena e dos botões do 3D, cortadas na borda do 3D: a caixa preta das medidas do 3D (button.palco-cota), que
   se clica, com o cinza 700 com o ponteiro em cima, como a medida do módulo escolhido; na parede sem a medida, "Colocar a medida",
   no branco, com o texto azul e a borda azul tracejada, como o estudo da usabilidade (.estudo-sem-medida, linha 150), com o azul
   claro com o ponteiro em cima e 1 tom acima pressionado. A borda de 1 pixel entra no lugar de 1 pixel do espaço de dentro, para a
   caixa ficar com a altura das outras. */
.casa-medidas-das-paredes { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; }
.casa-medidas-das-paredes .palco-cota { transform: none; } /* o lugar de cada caixa vem pela borda dela, e não pelo meio, como as medidas do módulo escolhido */
button.palco-cota.casa-medida-sem-valor { padding: 1px 11px; border: 1px dashed var(--primary); background: var(--background); color: var(--primary); } /* 1 e 11 pixels: a borda de 1 pixel entra no lugar de 1 pixel do espaço de dentro, de 2 e 12, da caixa preta */
button.palco-cota.casa-medida-sem-valor:hover { background: var(--secondary); }
button.palco-cota.casa-medida-sem-valor:active { background: var(--sb-ds-brand-200); }
.casa-vista-nome, .casa-aba-nome { display: inline-grid; }
.casa-vista-nome::after, .casa-aba-nome::after { content: attr(data-texto); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
/* A imagem realista cobre o 3D, no cinza 100, com o ícone da imagem de 48 pixels no meio, como a folha (.estudo-imagem-realista,
   linhas 564 e 565), e a borda tracejada da espera (P5), 8 pixels para dentro da borda do 3D, porque o 3D corta o que passa dela. */
.casa-realista { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; background: var(--sb-ds-neutral-100); color: var(--sb-ds-neutral-700); outline: 1px dashed var(--sb-ds-neutral-500); outline-offset: -8px; }
/* A frase da imagem realista, no canto de baixo, à esquerda, com a caixa e a letra da dica do 3D (.palco-dica), 8 pixels para dentro
   da borda tracejada, e até 16 pixels antes de "Desenho" e "Realista", que ocupam 176 pixels mais os 8 da borda. */
.casa-realista-frase { position: absolute; left: 16px; bottom: 16px; z-index: 5; display: flex; align-items: flex-start; gap: 8px; max-width: calc(100% - 216px); box-sizing: border-box; margin: 0; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--background) 92%, transparent); box-shadow: inset 0 0 0 1px var(--border); color: var(--sb-ds-neutral-700); font-size: 12px; line-height: 16px; } /* 4 e 8 pixels: a caixa da dica do 3D, como em .palco-dica */
.casa-realista-frase svg { flex: none; margin-top: 2px; } /* 2 pixels: o ícone de 12 no meio da 1ª linha, de 16 */
/* O painel "Como fica na sua casa", como a folha (.estudo-casa-painel, linhas 549 a 551): 24 pixels de espaço, a linha à esquerda e o
   título de 18 pixels; o conteúdo da aba rola dentro do painel. Desde a PR 2 do super plano, o título é o nome da aba aberta com o
   ambiente, como "Parede da Sala", com o "i" ao lado nas abas "Parede" e "Teto" (C35, C51 e T31), e as abas ficam no trilho. */
.casa-painel { display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; padding: 24px; border-left: 1px solid var(--border); background: var(--background); }
.casa-titulo { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere; }
/* O trilho, desde a PR 2 do super plano, pela C35 (.estudo-casa-trilho, linhas 608 a 615): 24 pixels em cima e embaixo e 8 dos lados,
   com a linha à esquerda; no alto, "Esconder o painel" ou "Mostrar o painel", separado das abas por uma linha, porque muda o painel, e
   não o que o painel mostra; e as abas, uma embaixo da outra, com a aparência das páginas do trilho da tela 3 (.projetar-trilho), pela
   decisão 1B da folha 1 e pela regra 51: a aberta tem a barra azul de 2 pixels à esquerda e o texto azul em negrito. O cômodo de
   "Parede" tem a parede do fundo num tom mais claro, que fica azul com o ponteiro em cima e na aba aberta (C43). */
.casa-trilho { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; box-sizing: border-box; padding: 24px 8px; border-left: 1px solid var(--border); background: var(--background); }
.casa-abas { display: flex; flex-direction: column; gap: 8px; }
.casa-trilho :is([role="tab"], .casa-trilho-painel) { --cor-da-parede-do-fundo: var(--sb-ds-neutral-500); }
.casa-trilho :is([role="tab"], .casa-trilho-painel):hover, .casa-trilho [role="tab"][aria-selected="true"] { --cor-da-parede-do-fundo: var(--sb-ds-brand-600); }
.casa-trilho .projetar-trilho-separador { flex: none; margin: 0 8px; } /* as linhas depois de "Esconder o painel" e antes de "Foto", como a de "Preço" na tela 3, com os 8 pixels de espaço do trilho em cima e embaixo */
/* O conteúdo da aba, 16 pixels embaixo do título, rola dentro do painel; os 4 pixels de espaço em volta, com a margem de -4, guardam o
   anel do foco dos itens da borda, que a área que rola cortaria. */
.casa-aba-conteudo { flex: 1; min-height: 0; margin: 12px -4px 0; padding: 4px; overflow-y: auto; } /* 12 e 4 pixels: os 12 e os 4 de espaço dão os 16 embaixo do título; os 4 em volta, com a margem de -4, guardam o anel do foco */
/* A aba "Medidas" (C33): o botão de texto "Ver como medir o seu espaço" no alto (SPT60) e os 3 campos 16 pixels embaixo dele. */
.casa-ver-como-medir + .medidas-do-espaco { margin-top: 16px; }
/* A busca da aba "Decoração", como a folha (.estudo-busca-da-decoracao, linhas 553 a 556): o campo do design system, de 40 pixels de
   altura, com a lupa dentro, a 12 pixels da borda, e o texto 40 pixels depois da borda, pela regra 110. */
/* Desde a etapa 34 da PR das vistas e da usabilidade, pela U10, a busca fica num lugar parado no alto da área que rola, com o fundo
   branco, que some para cima quando a pessoa rola a lista para baixo e volta quando ela rola para cima (telas/modulos/ver-como-fica-
   na-sua-casa.js). Desde a etapa 3 do "aplicar" das microinterações, de 01/11, pela regra 144 e pelos tempos do que é médio da regra
   149, a busca volta em 0,25 segundo, com a curva de entrar, e some em 0,2, com a curva de sair, e cada lado da troca tem a transição
   dele; para quem pediu menos movimento ao computador, ela só aparece e some, pela transparência, nos mesmos tempos, sem subir nem
   descer, e, escondida, deixa o clique passar aos itens que ficam embaixo dela. Até a etapa 3, a busca voltava e sumia em 0,2 segundo,
   com a mesma curva, e de uma vez para quem pediu menos movimento. As margens de -4 pixels cobrem o espaço de 4 pixels da área que
   rola, que guarda o anel do foco; e os 8 pixels de fundo embaixo da busca, com a margem de -8, separam a busca dos itens que passam
   por baixo dela, sem mudar o lugar do que vem depois. */
.casa-busca-lugar { position: sticky; top: -4px; z-index: 2; margin: -4px -4px -8px; padding: 4px 4px 8px; background: var(--background); transition: transform var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar); } /* -4 e 4 pixels: cobrem o espaço que guarda o anel do foco; -8 e 8 pixels: o fundo embaixo da busca */
.casa-busca-lugar.casa-busca-escondida { transform: translateY(-100%); transition: transform var(--tempo-do-medio-ao-fechar) var(--curva-de-sair); }
@media (prefers-reduced-motion: reduce) {
  .casa-busca-lugar { transition: opacity var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar); }
  .casa-busca-lugar.casa-busca-escondida { transform: none; opacity: 0; pointer-events: none; transition: opacity var(--tempo-do-medio-ao-fechar) var(--curva-de-sair); }
}
.casa-busca { position: relative; display: block; }
.casa-busca > svg { position: absolute; left: 12px; top: 12px; z-index: 1; color: var(--sb-ds-neutral-700); pointer-events: none; } /* 12 pixels: o ícone de 16 no meio do campo de 40 */
.casa-busca [data-slot="input"] { height: 40px; padding-left: 40px; }
/* Quantos itens a busca achou, 16 pixels embaixo do campo, e os achados 8 pixels embaixo da frase; sem a busca, a frase fica vazia e
   sem espaço, e o 1º grupo fica 16 pixels embaixo do campo. */
.casa-achados { margin: 16px 0 0; font-weight: 600; color: var(--foreground); }
.casa-achados:empty { margin: 0; }
.casa-limpar-a-busca { margin-top: 8px; }
.casa-grupo { margin-top: 16px; }
.casa-grupo-titulo { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--foreground); }
/* Os itens, 3 por linha, com 8 pixels entre eles, como a folha (linhas 577 a 581): a imagem de 72 pixels e o nome de 12 pixels,
   colados, a 4 pixels um do outro; 8 pixels de espaço dentro, para o nome ficar a 8 pixels da borda (regra 12 da lista "Antes de
   mostrar uma tela"). Com o ponteiro em cima, o item ganha o azul claro e o nome azul (regra 81); o item preso ao ponteiro fica com a
   borda de 2 pixels no azul principal e o nome em negrito, como a escolha da decisão 1A. */
.casa-grade-itens { margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* O nome que não cabe na largura do item, como "Computador", de 12 pixels, nos 72 de dentro, quebra pela separação das sílabas do
   português, como "Computa-dor", e não no meio de uma sílaba. */
.casa-item { display: grid; justify-items: center; align-content: start; row-gap: 4px; min-width: 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; font-size: 12px; line-height: 16px; text-align: center; hyphens: auto; overflow-wrap: break-word; cursor: pointer; } /* 4 pixels: o nome fica junto da imagem */
.casa-item img { display: block; width: 72px; height: 72px; object-fit: contain; pointer-events: none; }
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, os 3 tons em escada: com o ponteiro em cima, o item sem
   escolha ganha o azul mais claro do design system (brand-50), o nome azul e a borda azul clara (brand-400); o item preso ao
   ponteiro ganha o azul claro (brand-100) e, com o ponteiro em cima, o brand-200, com o nome no brand-800; e o pressionado fica 1
   tom acima, pela regra 119. Pela decisão 3 da folha 1 e pelo plano do super plano, o item preso tem o sinal de feito antes do
   nome (telas/modulos/ver-como-fica-na-sua-casa.js). Até a etapa 1, o ponteiro em cima dava o azul claro, e o item preso, sem o
   fundo, ficava igual a ele com o ponteiro em cima. */
.casa-item:not([aria-pressed="true"]):hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); color: var(--primary); }
.casa-item:not([aria-pressed="true"]):active { background: var(--secondary); color: var(--primary); }
.casa-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.casa-item[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--secondary); color: var(--primary); font-weight: 600; }
.casa-item[aria-pressed="true"]:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
.casa-item[aria-pressed="true"]:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); }
.casa-item-feito { display: inline-block; margin-right: 4px; vertical-align: -2px; } /* 4 pixels: o sinal colado ao nome; -2 pixels: o sinal de 12 no meio da linha de 16 */
/* As texturas, em quadrados de 64 pixels, 4 por linha, com 8 pixels entre eles, como a folha (linhas 582 a 587): a imagem de cada
   textura, a borda no cinza 400, o anel azul de 2 pixels com o ponteiro em cima e, no escolhido, a borda de 2 pixels no azul principal
   e o sinal de feito num círculo de 20 pixels, a 4 do canto de cima, à direita. O quadrado da aba "Parede" se arrasta até uma parede
   (C31), e por isso o navegador não arrasta a imagem. Com a barra de rolagem que o sistema mostra ao lado do conteúdo, como a de 15
   pixels do Chrome com o mouse ligado, a largura do painel não cabe 4 quadrados de 64, e cada quadrado fica com a largura que sobra,
   como 62 pixels, sem passar da borda. */
.casa-grade-texturas { margin-top: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 64px)); gap: 8px; }
.casa-textura { position: relative; width: 100%; aspect-ratio: 1; box-sizing: border-box; padding: 0; border: 1px solid var(--sb-ds-neutral-400); border-radius: 8px; overflow: hidden; background: var(--background); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.casa-textura img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, os 3 tons em escada, na forma que cabe numa foto, em que o
   fundo não aparece: com o ponteiro em cima, a textura sem escolha ganha a borda azul clara (brand-400), de 1 pixel, com mais 1 por
   fora; a escolhida tem a borda de 2 pixels no azul principal e, com o ponteiro em cima, o anel de 2 pixels no tom seguinte
   (brand-200); e o pressionado fica 1 tom acima, pela regra 119. Até a etapa 1, o ponteiro em cima dava o anel brand-200 à textura
   sem escolha, e a escolhida não mudava com o ponteiro em cima. */
.casa-textura:not([aria-checked="true"]):hover { border-color: var(--sb-ds-brand-400); box-shadow: 0 0 0 1px var(--sb-ds-brand-400); }
.casa-textura:not([aria-checked="true"]):active { border-color: var(--sb-ds-brand-400); box-shadow: 0 0 0 2px var(--sb-ds-brand-200); }
.casa-textura:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.casa-textura[aria-checked="true"] { border: 2px solid var(--primary); }
.casa-textura[aria-checked="true"]:hover { box-shadow: 0 0 0 2px var(--sb-ds-brand-200); }
.casa-textura[aria-checked="true"]:active { box-shadow: 0 0 0 2px var(--sb-ds-brand-300); }
.casa-textura.casa-textura-arrastando { cursor: grabbing; }
.casa-textura-feito { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); } /* 6 pixels: com a borda de 2 da textura escolhida, o sinal fica a 8 da borda de fora, como em .projetar-visual-feito */
/* O quadrado arrastado, de 48 pixels, preso ao ponteiro, 8 pixels à direita e embaixo dele, para a ponta do ponteiro ficar à vista. */
.casa-textura-arrastada { position: fixed; z-index: 30; width: 48px; height: 48px; box-sizing: border-box; border: 2px solid var(--primary); border-radius: 8px; overflow: hidden; transform: translate(8px, 8px); pointer-events: none; box-shadow: var(--sombra-lg); background: var(--background); } /* desde a etapa 1 da PR 1 do super plano, a sombra das janelas (shadow-lg) do design system, para o quadrado arrastado ficar por cima de tudo, pelo achado 17 */
.casa-textura-arrastada img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Desde a PR 2 do super plano, "Salvar a foto neste computador" fica sozinho na aba "Foto" (C36 e SP10), no alto da aba, logo embaixo
   do título, porque a aba não tem mais nada, sem a imagem realista. Até a PR 2, o botão ficava no fim do painel, em todas as abas. */
.casa-foto { display: flex; }

/* ---------- Os ambientes do projeto, desde a 2ª metade da etapa 10 da PR 2 do super plano (componentes/ambientes-do-projeto.js,
   componentes/janela-do-ambiente.js, telas/modulos/ver-como-fica-na-sua-casa.js e telas/modulos.js) ---------- */

/* A coluna do 3D do "Ver como fica na sua casa": as abas dos ambientes em cima e o 3D embaixo, com a altura que sobra (C32). */
.casa-coluna-do-3d { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.casa-coluna-do-3d > .casa-3d { flex: 1 1 auto; }
/* As abas dos ambientes (C32), como a folha (.estudo-abas-dos-ambientes, linhas 157 a 165): a barra de 48 pixels, com a linha cinza
   de 1 pixel embaixo e 8 pixels de espaço dos lados e entre as partes; cada aba com 12 pixels de espaço dos lados, o espaço da aba do
   design system, e a aba aberta pela decisão 1B da folha 1 e pela regra 51, com a barra de 2 pixels no azul principal embaixo, em
   cima da linha cinza, e o texto azul em negrito, sem fundo, como os 2 lados do vão da tela 3 (.projetar-partes); com o ponteiro
   em cima, a aba fechada ganha o azul mais claro (brand-50) e o texto azul, e a aberta, o azul claro (brand-100); pressionada, 1 tom
   acima, pela regra 119. */
.abas-dos-ambientes { position: relative; flex: none; display: flex; align-items: stretch; gap: 8px; box-sizing: border-box; height: 48px; padding: 0 8px; border-bottom: 1px solid var(--border); background: var(--background); }
.abas-dos-ambientes-lista { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.aba-do-ambiente-lugar { position: relative; display: flex; flex: none; }
.aba-do-ambiente-lugar .ancora-do-menu.ancora-embaixo { top: calc(100% + 1px); } /* 1 pixel: a aba passa 1 pixel da barra, por cima da linha cinza, e o menu fica 8 pixels abaixo da aba */
.aba-do-ambiente { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; height: 48px; margin-bottom: -1px; padding: 2px 12px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; background: none; color: var(--sb-ds-neutral-700); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; cursor: pointer; touch-action: none; } /* -1 pixel: a barra azul cobre a linha cinza da barra; 2 pixels em cima: o texto no meio, com a barra de 2 embaixo; 4 pixels: a seta colada em "Mais ambientes", como a seta do número do total da folha; 12 pixels: o espaço da aba do design system */
.aba-do-ambiente:hover, .abas-dos-ambientes-mais[data-state="open"] { background: var(--sb-ds-brand-50); color: var(--primary); }
.aba-do-ambiente:active { background: var(--sb-ds-brand-100); }
.aba-do-ambiente[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--primary); font-weight: 600; }
.aba-do-ambiente[aria-selected="true"]:hover { background: var(--sb-ds-brand-100); }
.aba-do-ambiente[aria-selected="true"]:active { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* o brand-800 sobre o brand-200, como as outras abas */
.aba-do-ambiente:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } /* -2 pixels: o anel do foco dentro da barra das abas */
/* O nome da aba, cortado com "…" a partir de 160 pixels, pela SP70, e com a largura do negrito reservada, para a aba não mudar de
   largura quando abre, pela regra 123, como os nomes do trilho (.casa-aba-nome). */
.aba-do-ambiente-nome { display: grid; min-width: 0; max-width: 160px; }
.aba-do-ambiente-nome > .linha-nome, .aba-do-ambiente-nome::after { grid-area: 1 / 1; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: inherit; }
.aba-do-ambiente-nome::after { content: attr(data-texto); height: 0; visibility: hidden; font-weight: 600; }
.aba-do-ambiente-lugar.aba-saindo { opacity: 0.4; }
.aba-do-ambiente-lugar.antes-daqui::before, .aba-do-ambiente-lugar.depois-daqui::after { content: ""; position: absolute; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--primary); } /* 2 pixels, como a borda da escolha, pela regra 123, e 1 de canto, a metade da linha */
.aba-do-ambiente-lugar.antes-daqui::before { left: -5px; } /* -5 pixels: a linha azul de 2 pixels no meio do espaço de 8 entre as abas */
.aba-do-ambiente-lugar.depois-daqui::after { right: -5px; } /* -5 pixels: a linha azul de 2 pixels no meio do espaço de 8 entre as abas */
.abas-dos-ambientes-acoes { display: flex; flex: none; align-items: center; gap: 8px; }
/* A medida das abas, fora da vista e sem ocupar lugar, para a conta das abas que cabem. */
.abas-dos-ambientes-medida { position: absolute; left: 0; top: 0; display: flex; gap: 8px; width: max-content; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.abas-dos-ambientes-medida > * { flex: none; }
/* A âncora do menu do botão direito numa aba ou numa linha dos ambientes, no canto de baixo, à esquerda (C32). */
.ancora-do-menu.ancora-embaixo { left: 0; top: 100%; }
/* O item travado de um menu, como "Excluir o ambiente" com módulos, na aparência única do que não se clica, pela decisão 2 da folha 1 e
   pela regra 49: o fundo cinza claro, o texto e o ícone no cinza 500 e o ponteiro de proibido, também com o ponteiro em cima; com o
   foco do teclado, o anel azul, pela regra 38. */
.menu-do-3d [role="menuitem"].menu-item-travado, .menu-do-3d [role="menuitem"].menu-item-travado:focus, .menu-do-3d [role="menuitem"].menu-item-travado[data-highlighted] { background-color: var(--muted) !important; color: var(--sb-ds-neutral-500) !important; cursor: not-allowed; }
.menu-do-3d [role="menuitem"].menu-item-travado svg { color: var(--sb-ds-neutral-500); }
.menu-do-3d [role="menuitem"].menu-item-travado:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } /* -2 pixels: o anel dentro do item, como nas abas */
/* O menu do design system põe o foco no item que está embaixo do ponteiro; por isso, com o ponteiro em cima, o item travado fica
   sem o anel, e o que não se clica não muda com o ponteiro em cima, pela regra 49. O anel continua com o teclado. */
.menu-do-3d [role="menuitem"].menu-item-travado:hover { outline: none; }
/* O ambiente sem módulos (C42), como a folha (.estudo-ambiente-vazio, linhas 602 e 603): o título e o "i" no meio do 3D e, embaixo,
   "Trazer módulos de outro ambiente", 16 pixels abaixo; o 3D continua girando em volta, porque só o título e o botão recebem o
   ponteiro. */
.casa-ambiente-vazio { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; row-gap: 16px; padding: 24px; text-align: center; pointer-events: none; }
.casa-ambiente-vazio > * { pointer-events: auto; }
.casa-ambiente-vazio-titulo { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); }
/* O pé do 3D do resumo (.rodape-do-3d), com "Ver como fica na sua casa" e a barra do módulo escolhido (C50), saiu na etapa 33 da PR
   das vistas e da usabilidade, pela U5 e pela U7, e as regras dele, na etapa 34, porque nada mais as usa. */

/* O quadro "Os ambientes do projeto" (C40), como a folha (.estudo-quadro-dos-ambientes e .estudo-cartao-do-ambiente, linhas 210 a 251):
   a janela de 896 pixels, para caber 4 cartões lado a lado, a exceção da regra 50 que a etapa 12 escreve; o título, os cartões e o
   rodapé em coluna, a 32 pixels um do outro, e os cartões rolam dentro da janela quando não cabem, com 4 pixels de folga para o
   anel do foco e o anel do que falta. */
.janela-da-app.janela-dos-ambientes { width: 896px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 32px; overflow: hidden; }
.janela-dos-ambientes > :is([data-slot="dialog-header"], [data-slot="dialog-footer"]) { flex: none; }
.quadro-dos-ambientes { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: -4px; padding: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 16px; align-items: start; } /* -4 e 4 pixels: a folga do anel do foco e do anel do que falta, que a área que rola cortaria; cada linha com a altura do cartão mais alto dela, porque, sem o max-content, a grade que rola espremia as 2 linhas na altura da janela, pela medida no Chrome em 25/10 */
.cartao-do-ambiente { position: relative; min-height: 160px; box-sizing: border-box; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); } /* 8 pixels de canto, o do cartão pela regra 136, menor que os 10 da janela em volta dele, pela decisão de Aline Miyaki de 25/10 no chat da PR 2 */
.cartao-do-ambiente.cartao-alvo { padding: 15px; border: 2px solid var(--primary); background: var(--secondary); } /* 15 pixels: a borda de 2 sem mudar o tamanho do cartão, como a folha */
.cartao-do-ambiente.cartao-saindo { opacity: 0.4; }
.cartao-do-ambiente.antes-daqui::before, .cartao-do-ambiente.depois-daqui::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--primary); } /* 2 pixels, como a borda da escolha, e 1 de canto, a metade da linha */
.cartao-do-ambiente.antes-daqui::before { left: -9px; } /* -9 pixels: a linha azul de 2 pixels no meio do espaço de 16 entre os cartões */
.cartao-do-ambiente.depois-daqui::after { right: -9px; } /* -9 pixels: a linha azul de 2 pixels no meio do espaço de 16 entre os cartões */
/* O topo do cartão: a alça, o nome com a linha dos módulos e do valor, e o lápis e a lixeira, os 3 botões só de ícone de 32 pixels, pela
   9E da folha 2; o desenho da alça começa na borda do conteúdo do cartão, e o nome fica na linha do meio dos botões. */
.cartao-do-ambiente-topo { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "alca nome acoes" ". conta conta"; align-items: start; margin: -4px -8px 0; } /* -4 pixels: o meio dos botões de 32 na linha de 24 do nome; -8: o desenho da alça e da lixeira na borda do conteúdo */
.cartao-do-ambiente-topo > :first-child { grid-area: alca; }
.cartao-do-ambiente-texto { display: contents; }
.cartao-do-ambiente-texto > .cartao-do-ambiente-nome { grid-area: nome; padding-top: 4px; } /* 4 pixels: o nome volta à borda de cima do conteúdo, depois dos -4 do topo */
.cartao-do-ambiente-texto > .cartao-do-ambiente-conta { grid-area: conta; padding-right: 8px; } /* 8 pixels: a linha termina na borda do conteúdo, depois dos -8 do topo */
.cartao-do-ambiente-acoes { grid-area: acoes; }
.cartao-do-ambiente-nome { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); hyphens: auto; overflow-wrap: break-word; } /* o nome que não cabe na largura do cartão, como "Lavanderia" na janela de 900 pixels, quebra pela separação das sílabas do português, como os itens da decoração (.casa-item), e não no meio de uma sílaba */
.cartao-do-ambiente-conta { margin: 0; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-700); font-variant-numeric: tabular-nums; }
.cartao-do-ambiente-acoes { display: flex; }
.alca-do-ambiente { color: var(--sb-ds-neutral-700); touch-action: none; }
.pecas-do-ambiente { margin-top: 16px; display: grid; row-gap: 8px; border-radius: 8px; }
.peca-lugar { position: relative; }
/* A foto de cada módulo: a foto de 48 pixels e o nome, como a folha (.estudo-peca, linhas 223 a 233); com o ponteiro em cima, o azul
   claro e o nome azul, porque o clique abre o menu, pela regra 81; com o Ctrl, a foto escolhida fica com a borda de 2 pixels, o nome
   em negrito e o sinal de feito, pela regra 123; e o módulo que acabou de chegar, ou que vai mudar pelo menu aberto, fica com a borda
   azul, sem o selo "Mudado agora" (C47). */
.peca-do-ambiente { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; align-items: center; width: 100%; box-sizing: border-box; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--background); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; touch-action: none; } /* 4 pixels: a foto perto da borda da peça, como a folha; 12 pixels de canto: os 8 da foto, pela regra 136, mais os 4 de espaço, para os 2 cantos ficarem com o mesmo centro */
.peca-do-ambiente:hover { background: var(--secondary); color: var(--primary); }
.peca-do-ambiente:active { background: var(--sb-ds-brand-200); }
.peca-do-ambiente:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.peca-do-ambiente img { display: block; width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--sb-ds-neutral-50); pointer-events: none; } /* 8 pixels de canto, o da foto, pela regra 136 */
.peca-nome { min-width: 0; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.peca-do-ambiente:is(.peca-nova, .peca-escolhida) { padding: 3px; border: 2px solid var(--primary); background: var(--secondary); } /* 3 pixels: a borda de 2 sem mudar o tamanho da peça */
.peca-do-ambiente.peca-escolhida { grid-template-columns: 48px minmax(0, 1fr) 16px; }
.peca-escolhida .peca-nome { font-weight: 600; color: var(--primary); }
.peca-sinal { display: flex; color: var(--primary); }
.peca-do-ambiente.peca-saindo { opacity: 0.4; }
/* A alça do arrastar na foto de cada módulo, desde a etapa 35 da PR das vistas e da usabilidade, pela U8, como o estudo
   (estudos/estudo-usabilidade-tela-2-e-casa.html, .estudo-peca-alca, linhas 294 a 296): os 6 pontos no cinza 700, perto da borda da
   direita da foto, no meio da altura, à vista só com o ponteiro em cima da foto ou com o foco do teclado nela; com o ponteiro em cima
   da alça, o brand-200 e o azul principal, e a mão aberta, que fecha enquanto a pessoa arrasta. O canto é o de 8 pixels dos botões só
   com o ícone (.icone-botao), e não o de 6 do estudo, pela regra 45. */
.peca-do-ambiente { position: relative; }
.peca-alca { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 24px; height: 32px; border-radius: 8px; color: var(--sb-ds-neutral-700); cursor: grab; touch-action: none; } /* 4 pixels: a alça perto da borda da foto, como o estudo */
.peca-do-ambiente:hover .peca-alca, .peca-do-ambiente:focus-visible .peca-alca, .peca-do-ambiente.peca-saindo .peca-alca { display: flex; }
.peca-alca:hover { background: var(--sb-ds-brand-200); color: var(--primary); }
.peca-do-ambiente.peca-saindo, .peca-do-ambiente.peca-saindo .peca-alca { cursor: grabbing; }
/* O que acompanha o ponteiro enquanto a pessoa arrasta uma aba, uma linha, um cartão ou a foto de um módulo, 8 pixels à direita e
   embaixo do ponteiro, inclinado, com a sombra das janelas, como a folha (.estudo-aba-fantasma, .estudo-cartao-fantasma e
   .estudo-peca-fantasma), por cima da janela aberta. */
.fantasma-do-arrasto { position: fixed; z-index: 70; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); box-shadow: var(--sombra-lg); transform: translate(8px, 8px) rotate(-3deg); pointer-events: none; cursor: grabbing; }
.fantasma-da-aba, .fantasma-da-linha { padding: 6px 12px; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; } /* 6 pixels: a linha de 20 numa caixa de 32, a altura de um botão pequeno */
.fantasma-do-cartao { width: 176px; padding: 16px; border-radius: 8px; } /* 8 pixels: o canto do cartão, pela regra 136 */
.fantasma-da-peca { display: grid; grid-template-columns: 48px auto; column-gap: 8px; align-items: center; max-width: 240px; padding: 4px; } /* 4 pixels: como a peça */
/* Com o quadro aberto, o aviso de baixo continua recebendo o ponteiro, para o "Desfazer" do aviso funcionar: a janela do design system
   tira o ponteiro de tudo o que fica fora dela. */
html:has(.janela-dos-ambientes) [data-sonner-toast]:not([data-visible="false"]) { pointer-events: auto; }
/* A janela do nome do ambiente (C39), como a folha (.estudo-sugestoes-titulo e .estudo-sugestoes, linhas 236 e 237): "Sugestões de
   nome", 16 pixels abaixo da linha reservada do campo, e os botões 8 pixels abaixo, todos numa linha na janela de 576 pixels. */
.nome-e-sugestoes { display: grid; }
.sugestoes-de-nome-titulo { margin: 16px 0 0; color: var(--sb-ds-neutral-700); font-size: 14px; line-height: 20px; }
.botoes-de-escolha.sugestoes-de-nome { margin-top: 8px; }

/* ---------- A tela 3, a Projetar (telas/projetar.js e telas/projetar/), desde a 1ª PR do "aplicar" da tela 3 ---------- */

/* A tela usa a largura inteira da faixa, pela regra 8, com o 3D à esquerda, o painel de 336 pixels e o trilho de 96, a 24
   pixels um do outro, como a folha da tela 3 na versão mais recente (.estudo-x-tela, linha 752). Com "Esconder o painel", o
   painel some, e o 3D passa a ocupar a largura dele (decisão 49). O 3D e o trilho ficam parados no alto ao rolar, a 73 pixels
   do alto da janela: os 49 da barra do topo e os 24 da D51, como a foto da página do módulo. Toda classe começa por
   "projetar-", pelo item 15 das escolhas do plano. */
.projetar { margin: 0 16px; }
.projetar-topo { display: grid; row-gap: 0; }
.projetar-titulo-e-acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; row-gap: 8px; }
.projetar-titulo-e-selos { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px; min-width: 0; }
.projetar-titulo { margin: 0; min-width: 0; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; overflow-wrap: anywhere; } /* a palavra longa quebra, para o nome de até 255 caracteres sem espaço não criar rolagem horizontal, pela regra 41 */
.projetar-titulo:focus { outline: none; }
.projetar-nome-editavel .nome-texto { overflow-wrap: anywhere; }
.projetar-campo-do-nome { max-width: 560px; }
.projetar-nome-da-biblioteca { margin: 0; color: var(--sb-ds-neutral-600); font-size: 14px; line-height: 20px; } /* o nome da biblioteca embaixo do nome dado, em cinza, pela decisão 26 e pela regra 130 */
.projetar-tela { position: relative; margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 336px 96px; column-gap: 24px; align-items: start; }
.projetar-tela[data-recolhido] { grid-template-columns: minmax(0, 1fr) 96px; }
.projetar-tela[data-recolhido] .projetar-painel { display: none; }
.projetar-tela[data-com-janela] { min-height: 736px; } /* 736 pixels: a janela de até 720 e 16 de espaço */
.projetar-3d { position: sticky; top: 73px; height: 520px; display: grid; } /* 73 pixels: os 49 da barra do topo e 24 de espaço, para o 3D ficar parado embaixo dela */
.projetar-tela[data-recolhido] .projetar-3d { height: 600px; }
.projetar-medidas-3d { position: absolute; top: 16px; left: 16px; z-index: 5; margin: 0; color: var(--sb-ds-neutral-700); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; pointer-events: none; }
/* Os botões do 3D, das 3 telas com 3D (BotaoDo3D, em componentes/palco-do-prototipo.js). Desde a etapa 1 da PR 1 do super plano:
   pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, o botão sem marca ganha o azul mais claro do
   design system (brand-50), o ícone azul e a borda azul clara (brand-400), e não mais o brand-200 de antes, que era mais azul que o
   botão marcado; o marcado tem o azul claro (brand-100) e a borda de 2 pixels e, com o ponteiro em cima, o brand-200; e o
   pressionado fica 1 tom acima, pela regra 119. Pela decisão 2, o botão desligado, como "Desfazer a última mudança" sem mudança,
   fica na aparência única do que não se clica: o fundo cinza claro, sem a borda e sem a sombra, e o ícone no cinza 500; até a
   etapa 1, ele ficava branco, com o ícone no cinza 400. Pelo achado 17 da 2ª passada, a sombra é a shadow-xs do design system. */
.projetar-botao-3d { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--sb-ds-neutral-700); cursor: pointer; box-shadow: var(--sombra-xs); }
/* Desde a etapa 6 da PR 1 do super plano, pela SP43 e pela 9C da folha 2, o ícone de "Desfazer a última mudança" fica azul, porque o
   botão muda o projeto; os outros botões do 3D mudam só a vista e ficam no cinza 700. Travado, ele fica no cinza do botão travado. */
.projetar-botao-3d.projetar-botao-3d-projeto:not([aria-disabled="true"]) { color: var(--primary); }
.projetar-botao-3d:not([aria-pressed="true"]):not([aria-expanded="true"]):not([aria-disabled="true"]):hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); color: var(--primary); }
.projetar-botao-3d:not([aria-pressed="true"]):not([aria-expanded="true"]):not([aria-disabled="true"]):active { background: var(--secondary); color: var(--primary); } /* regra 119 */
.projetar-botao-3d:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Desde a PR 2 do super plano, "Ver como mexer no 3D", com o quadro aberto (aria-expanded), fica como o botão marcado. */
.projetar-botao-3d:is([aria-pressed="true"], [aria-expanded="true"]) { background: var(--secondary); color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.projetar-botao-3d:is([aria-pressed="true"], [aria-expanded="true"]):hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* desde a 2ª PR: o botão marcado, como "Mostrar as portas", também muda com o ponteiro em cima, pela regra 81, como a cor marcada */
.projetar-botao-3d:is([aria-pressed="true"], [aria-expanded="true"]):active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); } /* regra 119 */
/* O quadro "Como mexer no 3D" (componentes/como-mexer-no-3d.js), desde a PR 2 do super plano, pela C38 e pela decisão 21 da folha 4,
   como a folha (.estudo-quadro-de-ajuda, linhas 620 a 639): 8 pixels embaixo dos botões do 3D, que ficam 8 pixels abaixo do alto do
   3D e têm 32 pixels, e 8 pixels das bordas dos lados do 3D, por cima dele; a caixa de janela, com 10 pixels de canto, pela regra
   136, e a sombra das janelas do design system (shadow-lg), pelo achado 17; o conteúdo rola dentro do quadro quando o 3D é baixo.
   Os grupos ficam lado a lado, com 24 pixels entre eles, e passam para a linha de baixo quando a coluna teria menos de 176 pixels. */
.como-mexer { position: absolute; top: 48px; left: 8px; right: 8px; z-index: 6; box-sizing: border-box; max-height: calc(100% - 56px); overflow-y: auto; padding: 16px 24px 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--background); box-shadow: var(--sombra-lg); text-align: left; }
.como-mexer:focus { outline: none; }
.como-mexer:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.como-mexer-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.como-mexer-titulo { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); }
.como-mexer-grupos { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 16px 24px; }
.como-mexer-grupo-titulo { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--foreground); }
.como-mexer-linhas { margin: 8px 0 0; padding: 0; list-style: none; display: grid; row-gap: 8px; }
.como-mexer-linhas li.como-mexer-com-desenho { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.como-mexer-acao { display: block; color: var(--foreground); font-size: 14px; line-height: 20px; }
.como-mexer-como { display: block; margin-top: 4px; color: var(--sb-ds-neutral-700); font-size: 12px; line-height: 16px; } /* 4 pixels: o "como" colado no "o que se faz", como a folha; as caixinhas das teclas ficam na linha do texto, separadas pelo espaço, e o texto quebra palavra por palavra, como "Segure ⌘ e clique nos outros" */
.como-mexer-tecla { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 4px; border: 1px solid var(--sb-ds-neutral-400); border-radius: 4px; background: var(--muted); color: var(--foreground); font: inherit; font-size: 12px; line-height: 16px; font-weight: 600; } /* 20 pixels e 4 de canto: a caixinha da tecla, menor que o selo, para caber na linha do texto de 16, como a folha */
.como-mexer-mouse { display: block; }
.como-mexer-mouse .como-mexer-corpo { fill: var(--background); stroke: var(--sb-ds-neutral-700); stroke-width: 1.5; }
.como-mexer-mouse > path { fill: none; stroke: var(--sb-ds-neutral-700); stroke-width: 1.5; stroke-linejoin: round; }
.como-mexer-mouse > path.como-mexer-azul { fill: var(--primary); }
.como-mexer-mouse .como-mexer-rodinha { fill: var(--background); stroke: var(--sb-ds-neutral-700); stroke-width: 1.5; }
.como-mexer-mouse rect.como-mexer-azul { fill: var(--primary); stroke: var(--primary); stroke-width: 1.5; }
.como-mexer-mouse .como-mexer-seta path { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.como-mexer-alvo { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--sb-ds-neutral-700); }
.projetar-botao-3d[aria-disabled="true"], .projetar-botao-3d[aria-disabled="true"]:hover { background: var(--muted); border-color: var(--muted); box-shadow: none; color: var(--sb-ds-neutral-500); cursor: not-allowed; }
.projetar-painel { min-width: 0; }
.projetar-carregando .esqueleto-tres-d { width: 100%; height: 320px; border-radius: 12px; }
.projetar-carregando .esqueleto-titulo { width: 360px; height: 32px; }

/* O trilho das páginas, pela decisão 38: cada página com o ícone e o nome e o sinal de feito no canto do ícone da página
   mudada, no azul do sucesso (decisão 39). Desde a etapa 1 da PR 1 do super plano, pela decisão 1B da folha 1, de 19/10, a
   página aberta tem a barra azul de 2 pixels à esquerda e o texto azul em negrito, sem o fundo, no lugar da caixa com a borda de
   2 pixels da decisão 38; a fechada, com o ponteiro em cima, ganha o azul mais claro do design system (brand-50) e o texto azul;
   a aberta, com o ponteiro em cima, o azul claro (brand-100); e o pressionado fica 1 tom acima, pela regra 119, como as abas
   "Decoração", "Parede" e "Piso" (.casa-aba). A barra fica na borda da esquerda, com 7 pixels de espaço, para o conteúdo não
   andar: os 8 de espaço e o 1 da borda transparente. */
.projetar-trilho { position: sticky; top: 73px; display: flex; flex-direction: column; gap: 8px; } /* 73 pixels: os 49 da barra do topo e 24 de espaço, como o 3D */
.projetar-abas { display: flex; flex-direction: column; gap: 8px; } /* desde a PR 3 do super plano, pela decisão 21B da folha 4: a lista das abas, embaixo de "Esconder o painel", com o espaço de antes entre as abas */
/* Desde a PR 3 do super plano, pela SP91: as abas antes de "Preço" rolam dentro desta lista, entre "Esconder o painel" e a aba
   "Preço", que ficam parados, com a altura que telas/projetar.js mede (useTrilhoQueRola), para a aba "Preço" e o total do módulo
   ficarem à vista em qualquer altura de janela. A rolagem para os lados fica desligada, para a lista não ganhar uma 2ª barra
   embaixo. */
.projetar-abas-que-rolam { display: flex; flex-direction: column; gap: 8px; margin: -4px; padding: 4px; overflow-x: hidden; overflow-y: auto; } /* 4 pixels: os 2 de folga e os 2 do anel do foco das abas, que a borda da lista que rola cortaria; a margem de -4 deixa as abas no lugar de antes. Com a barra de rolagem que ocupa espaço, a margem da direita passa a -4 menos a largura da barra, medida em telas/projetar.js, para as abas continuarem com 96 pixels */
.projetar-abas-que-rolam > * { flex: none; } /* as abas e a linha antes de "Opções avançadas" ficam com a altura delas: sem isso, na lista que rola, a linha encolhia a 0 pixel e sumia */
/* Desde a PR 2 do super plano, as abas do trilho do "Ver como fica na sua casa" e o botão "Esconder o painel" do alto dele têm a mesma
   aparência das páginas deste trilho (C35), pelos seletores com .casa-trilho; desde a PR 3, o botão "Esconder o painel" do alto deste
   trilho também (.projetar-trilho-painel), pela decisão 21B. */
:is(.projetar-trilho [role="tab"], .casa-trilho [role="tab"], .casa-trilho-painel, .projetar-trilho-painel) { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--sb-ds-neutral-700); font: inherit; font-size: 12px; line-height: 16px; text-align: center; cursor: pointer; } /* 4 pixels: o ícone colado ao nome da página. Desde a 3ª PR, 8 pixels de cada lado no botão estreito, de 96 pixels, pela folga da regra 43: com 4, "O micro-ondas" ficava a 3,9 pixels da borda do botão escolhido */
:is(.projetar-trilho [role="tab"], .casa-trilho [role="tab"], .casa-trilho-painel, .projetar-trilho-painel):hover { background: var(--sb-ds-brand-50); color: var(--primary); }
:is(.projetar-trilho [role="tab"], .casa-trilho [role="tab"], .casa-trilho-painel, .projetar-trilho-painel):active { background: var(--sb-ds-brand-100); } /* regra 119 */
:is(.projetar-trilho, .casa-trilho) [role="tab"][aria-selected="true"] { padding-left: 7px; border-left: 2px solid var(--primary); border-radius: 0 8px 8px 0; color: var(--primary); font-weight: 600; } /* 7 pixels: com a barra de 2, o conteúdo não anda */
:is(.projetar-trilho, .casa-trilho) [role="tab"][aria-selected="true"]:hover { background: var(--sb-ds-brand-100); }
:is(.projetar-trilho, .casa-trilho) [role="tab"][aria-selected="true"]:active { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* regra 119; o brand-800 sobre o brand-200 */
:is(.projetar-trilho [role="tab"], .casa-trilho [role="tab"], .casa-trilho-painel, .projetar-trilho-painel):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-trilho-icone { position: relative; display: inline-flex; align-items: center; min-height: 24px; }
.projetar-trilho-feito { position: absolute; top: -6px; right: -12px; display: inline-flex; border-radius: 50%; background: var(--background); color: var(--primary); } /* -6 e -12 pixels: o sinal de feito em cima do canto do ícone, pela decisão 39 */
.projetar-trilho-feito svg { width: 16px; height: 16px; stroke-width: 2.5; }
.projetar-trilho-separador { display: block; height: 1px; margin: 8px; background: var(--border); } /* 1 pixel: a linha que separa, da largura de uma borda */
.projetar-trilho-valor { display: block; color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.projetar-trilho [role="tab"][aria-selected="true"] .projetar-trilho-valor { color: var(--primary); }
.projetar-trilho-ajuste { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--sb-ds-accent-700); border-radius: 8px; font-size: 12px; line-height: 16px; font-weight: 600; white-space: normal; } /* 4 pixels: o espaço do ícone; 1 pixel: os 2 do selo em cima e embaixo, menos a borda; 8 pixels: os 8 dos lados do Badge do design system, dentro da borda, desde o fim da PR 1 do super plano */
/* Desde as correções da etapa 20 da 4ª PR, .projetar-trilho-ajuste tem a borda de 1 pixel no accent-700, pela regra 109, como os outros amarelos.
   Desde a etapa 4 da PR 1 do super plano, o selo é o Badge do design system, pela decisão 7 da folha 2, com 12 de letra, 8 de canto e o
   espaço do selo; no trilho, de 80 pixels por dentro, "Mude 1 escolha" não cabe em 1 linha com esse espaço e quebra em 2, e por isso o
   selo fica com 36 pixels de altura, e não 20. */

/* As páginas do painel: o título da página, de 18 pixels, e as seções, com a linha entre elas, como a folha (linhas 764 a
   768); cada seção tem o título e, à direita, o ícone de voltar ao recomendado (decisão 76). */
.projetar-pagina-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.projetar-pagina-acoes { display: inline-flex; align-items: center; gap: 8px; } /* desde a PR 3 do super plano, pela SP84: o ícone de voltar das medidas e o livro do guia, lado a lado, na linha do título de "Medidas" */
.projetar-pagina-titulo { margin: 0; font-size: 18px; line-height: 28px; font-weight: 600; }
.projetar-secao { padding: 24px 0; border-top: 1px solid var(--border); }
.projetar-pagina-topo + .projetar-secao, .projetar-secao-primeira { border-top: 0; padding-top: 16px; }
.projetar-secao > * + * { margin-top: 16px; }
.projetar-secao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.projetar-secao-titulo { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.projetar-secao-linha { padding-top: 24px; border-top: 1px solid var(--border); }
.projetar-pecas { margin: 4px 0 0; color: var(--sb-ds-neutral-600); font-size: 14px; line-height: 20px; } /* 4 pixels: a frase das peças colada ao título do grupo, como o complemento da regra 52 */
.projetar-secao-topo + .projetar-pecas { margin-top: 4px; } /* 4 pixels: como a linha de cima */
/* A frase "<cor> é a cor recomendada." (.projetar-rec-cor) saiu na etapa 15 da PR 3 do super plano, pela decisão 97. */
.projetar-frase { margin: 0; color: var(--foreground); }
.projetar-cinza { color: var(--sb-ds-neutral-600); }
.projetar-nota-tela { margin: 8px 0 0; color: var(--sb-ds-neutral-600); font-size: 14px; line-height: 20px; }
.projetar-rotulo { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
/* Desde a etapa 4 da PR 1 do super plano, pela 9C da folha 2, o ícone do botão só de ícone fica azul quando o botão muda o projeto
   ou abre uma ajuda, como voltar ao recomendado e o guia de medir, e cinza quando fecha uma janela, como o X da janela flutuante,
   no cinza 500 do X das outras janelas (.projetar-fechar). Até a etapa 4, os 3 ficavam no cinza 600. */
.projetar-icone-botao { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--primary); cursor: pointer; }
.projetar-icone-botao.projetar-fechar { color: var(--muted-foreground); }
.projetar-icone-botao:hover { background: var(--sb-ds-brand-200); color: var(--primary); }
.projetar-icone-botao:active { background: var(--sb-ds-brand-300); } /* regra 119 */
.projetar-icone-botao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-voltar-icone { margin: -4px 0; } /* -4 pixels: o ícone de 32 fica na linha de 24 do título, como o X da janela */
/* O selo "Recomendado" da tela 3 (.projetar-selo-recomendado) passou ao polegar (.projetar-polegar) na etapa 15 da PR 3 do super plano,
   pela 20E e pelo polegar em tudo o que é recomendado, da folha 4. */

/* "Medidas": o desenho da caixa com as setas (decisão 46) e os campos com a faixa ao lado do rótulo (regra 122). */
.projetar-caixa-desenho { display: block; width: 100%; height: auto; }
.projetar-caixa-alto { fill: var(--sb-ds-neutral-200); stroke: var(--sb-ds-neutral-500); stroke-width: 1.5; }
.projetar-caixa-lado { fill: var(--sb-ds-neutral-300); stroke: var(--sb-ds-neutral-500); stroke-width: 1.5; }
.projetar-caixa-frente { fill: var(--sb-ds-neutral-100); stroke: var(--sb-ds-neutral-500); stroke-width: 1.5; }
.projetar-caixa-desenho g line { stroke: var(--sb-ds-neutral-400); stroke-width: 1.5; }
.projetar-caixa-desenho g text { fill: var(--sb-ds-neutral-600); font-size: 12px; }
.projetar-caixa-desenho g[data-ativa] line { stroke: var(--sb-ds-neutral-900); stroke-width: 3; }
.projetar-caixa-desenho g[data-ativa] text { fill: var(--sb-ds-neutral-900); font-weight: 600; }
/* O nome e a seta de cada medida se clicam, desde a PR 3 do super plano, pela M1: a área do clique é um retângulo sem cor, e, com o
   ponteiro em cima, o nome e a seta ficam no azul principal, com a mãozinha, pelas regras 49 e 81. */
.projetar-caixa-desenho g[data-clicavel] { cursor: pointer; }
.projetar-caixa-area { fill: transparent; }
.projetar-caixa-desenho g[data-clicavel]:hover line { stroke: var(--primary); }
.projetar-caixa-desenho g[data-clicavel]:hover text { fill: var(--primary); }
.projetar-campo-topo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.projetar-campo-rotulo { font-weight: 500; }
.projetar-campo-faixa { color: var(--sb-ds-neutral-600); font-size: 14px; line-height: 20px; }
.projetar-campo-linha { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--sb-ds-neutral-600); }
.projetar-campo-linha [data-slot="input"] { flex: 0 1 120px; width: 120px; min-width: 0; font-variant-numeric: tabular-nums; } /* desde a 3ª PR, o campo fica menor que 120 pixels quando falta espaço, como dentro da caixa do que apareceu, para o "mm" ficar a 8 pixels da borda, pela regra 43 */
.projetar-campo-estado { display: flex; align-items: center; gap: 8px; min-height: 20px; margin: 4px 0 0; color: var(--destructive); font-size: 14px; line-height: 20px; } /* 4 pixels: a frase do estado fica junto do campo, em 1 linha reservada, pela regra 67 */
.projetar-campo-erro [data-slot="input"], .projetar-campo-erro [data-slot="input"]:hover, .projetar-campo-erro [data-slot="input"]:focus { border-color: var(--destructive); }

/* "Acabamento": os chips de cor (decisão 30), as listas de opções (regra 123), a linha que abre (decisão 29), a caixa das
   opções avançadas e a lista do resumo, como a folha (linhas 1168 a 1201 e 1018 a 1022). */
.projetar-amostra { position: relative; display: inline-block; flex: none; width: 16px; height: 16px; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent); } /* 4 pixels de canto, pela SP46: o canto da amostra é 1/4 do lado, até 8 pixels, e 1/4 de 16 é 4, que o design system não tem */
.projetar-amostra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* O contorno fica também por cima da foto, porque a foto do Branco é branca e, sem ele, a amostra some no fundo branco. */
.projetar-amostra::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent); pointer-events: none; }
.projetar-tom-branco { background: var(--sb-ds-neutral-100); }
.projetar-tom-preto { background: var(--sb-ds-neutral-800); }
.projetar-tom-madeira { background: var(--sb-ds-accent-700); }
.projetar-tom-cinza { background: var(--sb-ds-neutral-500); }
.projetar-tom-cinza-claro { background: var(--sb-ds-neutral-300); }
.projetar-tom-grafite { background: var(--sb-ds-neutral-700); }
.projetar-tom-areia { background: var(--sb-ds-accent-200); }
.projetar-tom-carvalho { background: var(--sb-ds-accent-600); }
.projetar-tom-nogueira { background: var(--sb-ds-accent-800); }
.projetar-tom-azul { background: var(--sb-ds-brand-700); }
.projetar-tom-vermelho { background: var(--sb-ds-destructive-700); }
.projetar-tom-madeira-clara { background: var(--sb-ds-accent-400); }
.projetar-tom-azul-claro { background: var(--sb-ds-brand-300); }
.projetar-tom-nude { background: var(--sb-ds-destructive-100); }
.projetar-tom-rosado { background: var(--sb-ds-destructive-300); }
.projetar-tom-cinza-medio { background: var(--sb-ds-neutral-400); }
.projetar-tom-cinza-escuro { background: var(--sb-ds-neutral-600); }
.projetar-tom-verde { background: var(--sb-ds-neutral-600); } /* o design system não tem verde; o Verti e o Tangara ficam no cinza 600, como na folha */
.projetar-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.projetar-chip { display: grid; justify-items: center; align-content: start; row-gap: 4px; width: 72px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; font-size: 12px; line-height: 16px; text-align: center; hyphens: auto; overflow-wrap: break-word; cursor: pointer; } /* 72 pixels: 4 cores numa fileira dos 336 pixels do painel; 9 pixels dos lados e a separação das sílabas do português, desde a etapa 15 da PR 3 do super plano, pela decisão 100: com a borda de 1, o texto fica a 9 pixels da borda, e, na cor escolhida, com a borda de 2 e 8 de espaço, a 8, sem o conteúdo andar */
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, a
   cor sem escolha ganha o azul mais claro do design system (brand-50), o nome azul e a borda azul clara (brand-400); a escolhida,
   com o ponteiro em cima, o brand-200, com o nome no brand-800, que passa de 4,5:1 nele; e o pressionado fica 1 tom acima, pela
   regra 119. "Outras cores" abre uma janela, e não é uma cor, e por isso fica com o azul claro do que abre outro lugar, pela
   regra 81. Pela decisão 2, a cor indisponível fica na aparência única do que não se clica: o fundo cinza claro, sem borda, o nome
   no cinza 500, a amostra a 40% e o motivo, "Indisponível na loja", no cinza 600, com a explicação "Indisponível na loja.", pelo
   defeito 4 (telas/projetar/paginas/acabamento.js). Até a etapa 1, o ponteiro em cima dava o azul claro da escolhida, e a cor
   indisponível tinha a borda e o nome no cinza 600, com a amostra inteira. */
.projetar-chip:not(.projetar-chip-mais):not([aria-checked="true"]):not([aria-disabled="true"]):hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); color: var(--primary); }
.projetar-chip:not(.projetar-chip-mais):not([aria-checked="true"]):not([aria-disabled="true"]):active { background: var(--secondary); } /* regra 119 */
.projetar-chip.projetar-chip-mais:hover { background: var(--secondary); border-color: var(--border); color: var(--primary); }
.projetar-chip.projetar-chip-mais:active { background: var(--sb-ds-brand-200); }
.projetar-chip[aria-checked="true"] { padding: 7px 8px; border: 2px solid var(--primary); background: var(--secondary); color: var(--primary); font-weight: 600; } /* 7 pixels em cima e embaixo: com a borda de 2, o conteúdo não anda; 8 dos lados, pela decisão 100 */
.projetar-chip[aria-checked="true"]:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
.projetar-chip[aria-checked="true"]:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); }
.projetar-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-chip[aria-disabled="true"], .projetar-chip[aria-disabled="true"]:hover { background: var(--muted); border-color: var(--muted); color: var(--sb-ds-neutral-500); cursor: not-allowed; }
.projetar-chip[aria-disabled="true"] .projetar-amostra { opacity: 0.4; }
.projetar-chip[aria-disabled="true"] .projetar-chip-sub { color: var(--sb-ds-neutral-600); }
.projetar-chip .projetar-amostra { width: 32px; height: 32px; border-radius: 8px; } /* 8 pixels de canto, pela SP46: 1/4 do lado de 32, o teto da amostra */
.projetar-chip-amostra { position: relative; display: block; }
.projetar-chip-feito { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); box-shadow: 0 0 0 2px var(--background); } /* -6 pixels: o sinal de feito em cima do canto da amostra, pela decisão 69 */
.projetar-chip-feito svg { width: 12px; height: 12px; stroke-width: 3; } /* 12 pixels: o ícone de feito dentro do círculo de 16 */
.projetar-chip-sub { color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; font-weight: 400; } /* 12 pixels, desde a etapa 4 da PR 1 do super plano, pela decisão 7 da folha 2 */
/* O polegar do recomendado, no azul principal, desde a etapa 15 da PR 3 do super plano, no cartão da cor, no cartão com desenho e,
   depois da última palavra do nome, na lista de opções, pela decisão 101; até a etapa 15, só o cartão da cor parecida que era a
   recomendada tinha o polegar (.projetar-chip-polegar), pela decisão 7 da folha 2. */
.projetar-polegar { display: inline-grid; place-items: center; color: var(--primary); }
.projetar-polegar-junto { white-space: nowrap; }
.projetar-polegar-junto .projetar-polegar { vertical-align: -3px; } /* -3 pixels: o ícone de 16 no meio da linha de 20 do nome */
.projetar-chip-mais-icone { display: grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box; border: 1px dashed var(--sb-ds-neutral-400); border-radius: 4px; color: var(--primary); }
.projetar-chip-largo { width: 120px; }
.projetar-janela .projetar-chip { width: 80px; } /* 80 pixels, desde a PR 3 do super plano, pela SP93: 3 cores por fileira na janela de 320, pela decisão 100, também com a barra de rolagem que ocupa espaço, como no Windows e no Mac com mouse: com a barra de 15 pixels deste Mac, sobram 271 pixels, e 3 cartões de 80 com os 2 espaços de 8 pedem 256; com 88, desde a etapa 15, cabiam só 2; até a etapa 15, 56 */
.projetar-janela .projetar-chip.projetar-chip-largo { width: 120px; }
.projetar-fileira-rotulo { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.projetar-portas-modo { display: grid; row-gap: 16px; }
.projetar-opcoes { display: grid; row-gap: 8px; }
.projetar-opcao { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); cursor: pointer; } /* 12 pixels: o espaço interno dos campos e das opções do design system */
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, a
   opção sem escolha ganha o azul mais claro do design system (brand-50), o nome azul e a borda azul clara (brand-400); a escolhida
   tem o azul claro (brand-100), a borda de 2 pixels e o nome azul em negrito e, com o ponteiro em cima, o brand-200, com o nome no
   brand-800, que passa de 4,5:1 nele; e o pressionado fica 1 tom acima, pela regra 119. Pela decisão 3, o sinal da escolhida é só
   a bolinha, com a aparência da bolinha do design system (RadioGroupItem): 16 pixels, a borda de 1 pixel na cor dos campos do design
   system (--input), a sombra shadow-xs e o ponto azul de 8 pixels; o círculo azul com o feito depois do nome saiu (controles.js).
   Pela decisão 2, a opção indisponível fica na aparência única do que não se clica: o fundo cinza claro, sem borda, o nome no cinza
   500, a bolinha apagada, com a borda no cinza 300, e o motivo no cinza 600; a opção usa o aria-disabled, e não o disabled do
   navegador, e por isso continua recebendo o foco do teclado. Até a etapa 1, o ponteiro em cima dava o azul claro da escolhida, e
   a bolinha era a do navegador. */
.projetar-opcao:not(.projetar-opcao-marcada):not(.projetar-opcao-desabilitada):hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); }
.projetar-opcao:not(.projetar-opcao-marcada):not(.projetar-opcao-desabilitada):hover .projetar-opcao-texto > span:first-child { color: var(--primary); }
.projetar-opcao:not(.projetar-opcao-marcada):not(.projetar-opcao-desabilitada):active { background: var(--secondary); }
.projetar-opcao.projetar-opcao-marcada { padding: 7px 11px; border: 2px solid var(--primary); background: var(--secondary); } /* 7 e 11 pixels: com a borda de 2, o conteúdo não anda */
.projetar-opcao.projetar-opcao-marcada:hover { background: var(--sb-ds-brand-200); }
.projetar-opcao.projetar-opcao-marcada:active { background: var(--sb-ds-brand-300); }
.projetar-opcao.projetar-opcao-marcada .projetar-opcao-texto > span:first-child { font-weight: 600; color: var(--primary); }
.projetar-opcao.projetar-opcao-marcada:hover .projetar-opcao-texto > span:first-child, .projetar-opcao.projetar-opcao-marcada:active .projetar-opcao-texto > span:first-child { color: var(--sb-ds-brand-800); }
.projetar-opcao:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-opcao input { display: grid; place-content: center; box-sizing: border-box; width: 16px; height: 16px; margin: 0; border: 1px solid var(--input); border-radius: 50%; background: var(--background); box-shadow: var(--sombra-xs); appearance: none; -webkit-appearance: none; cursor: pointer; }
.projetar-opcao input:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
/* Desde a etapa 4 da PR 1 do super plano, pela SP35 da lista das decisões do super plano: a bolinha da opção escolhida tem o ponto e
   o anel no azul principal, e a da opção sem escolha continua com o anel no cinza claro do design system (--input). */
.projetar-opcao input:checked { border-color: var(--primary); }
.projetar-opcao input:focus-visible { outline: none; } /* o anel do foco fica na opção inteira, pela regra .projetar-opcao:has(input:focus-visible) */
.projetar-opcao-desabilitada, .projetar-opcao-desabilitada:hover { background: var(--muted); border-color: var(--muted); color: var(--sb-ds-neutral-500); cursor: not-allowed; }
.projetar-opcao-desabilitada input { border-color: var(--sb-ds-neutral-300); background: none; box-shadow: none; cursor: not-allowed; }
.projetar-opcao-texto { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.projetar-opcao-texto > span:first-child { font-weight: 500; }
.projetar-opcao-sub { grid-column: 2 / -1; color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; }
.projetar-opcao.projetar-opcao-com-foto { grid-template-columns: 16px 48px minmax(0, 1fr); column-gap: 12px; row-gap: 0; } /* 12 pixels: entre a foto e o texto, como na folha da tela 3 */
.projetar-opcao-com-foto > input, .projetar-opcao-com-foto > .projetar-opcao-foto { grid-row: 1 / span 2; }
.projetar-opcao-com-foto > .projetar-opcao-sub { grid-column: 3; }
.projetar-opcao-foto { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: var(--background); } /* 8 pixels: o canto da foto, pela 11A da folha 2, desde a etapa 4 da PR 1 do super plano */
.projetar-linha-mais { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; } /* 12 pixels: o espaço interno dos campos e das opções do design system */
.projetar-linha-mais:hover { background: var(--secondary); }
.projetar-linha-mais:active { background: var(--sb-ds-brand-200); } /* regra 119 */
.projetar-linha-mais:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-linha-mais > span { display: grid; min-width: 0; }
.projetar-linha-mais > svg { flex: none; color: var(--primary); }
.projetar-linha-mais-nome { font-weight: 600; }
/* A seta gira em 0,25 segundo ao abrir e em 0,2 ao fechar, e muda sem girar para quem pediu menos movimento, pela MI2 e pela regra
   149, desde a etapa 2 do "aplicar" das microinterações, de 01/11; até essa etapa, girava em 0,15 segundo, também com menos movimento. */
.projetar-linha-que-abre > svg { transition: transform var(--tempo-do-medio-ao-fechar) var(--curva-de-mudar); }
.projetar-linha-que-abre[aria-expanded="true"] > svg { transform: rotate(180deg); transition-duration: var(--tempo-do-medio-ao-abrir); } /* a seta para baixo vira 180° com a linha aberta, desde a etapa 3 da PR 1 do super plano, pela 6B da folha 2; até a etapa 3, a seta para a direita virava 90° */
@media (prefers-reduced-motion: reduce) { .projetar-linha-que-abre > svg { transition: none; } }
.projetar-grupo + .projetar-grupo { margin-top: 8px; }
.projetar-grupo-corpo { display: grid; row-gap: 16px; margin: 8px 0 0 8px; padding: 8px 0 8px 16px; border-left: 2px solid var(--border); } /* o nível de baixo recua 24 pixels, pela regra 89 */
.projetar-frase-da-espessura { margin: 0; color: var(--foreground); font-size: 14px; line-height: 20px; }
.projetar-frase-da-espessura + .projetar-frase-da-espessura { margin-top: 8px; } /* desde a 3ª PR, 8 pixels entre 2 frases do mesmo aviso, como "Esta cor só existe na chapa de 18 mm de espessura." e "As portas também passaram à chapa de 18 mm.", que ficavam coladas, pelo pedido de Aline Miyaki de 19/10 */
.projetar-misturado { padding: 16px; border-radius: 8px; background: var(--muted); }
.projetar-misturado-titulo { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.projetar-misturado-apoio { margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.projetar-avancadas { display: grid; row-gap: 8px; padding: 16px; border-radius: 12px; background: var(--muted); }
.projetar-avancadas-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.projetar-avancadas-apoio { margin: -4px 0 8px; color: var(--sb-ds-neutral-700); font-size: 14px; line-height: 20px; } /* o cinza 700 no fundo cinza, pela regra 132 */
.projetar-avancadas .projetar-cinza { color: var(--sb-ds-neutral-700); } /* regra 132: o cinza 600 não chega a 4,5:1 no fundo cinza */
.projetar-resumo { display: grid; row-gap: 4px; margin-top: 4px; } /* 4 pixels: os itens do resumo colados ao nome da linha, como o complemento da regra 52 */
.projetar-resumo-item { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start; color: var(--foreground); font-size: 14px; line-height: 20px; font-weight: 400; }
.projetar-resumo-item > .projetar-amostra { margin-top: 2px; } /* 2 pixels: a amostra de 16 fica no meio da 1ª linha, de 20 */
.projetar-resumo-item:has(.projetar-resumo-fita) { grid-template-columns: 24px minmax(0, 1fr); }
.projetar-resumo-valor { color: var(--sb-ds-neutral-700); }
.projetar-resumo-mais { padding-left: 24px; color: var(--sb-ds-neutral-700); font-size: 14px; line-height: 20px; }
.projetar-resumo-fita { display: grid; place-items: center; width: 24px; height: 20px; } /* 20 pixels: a altura da linha do texto ao lado */

/* As janelas flutuantes (decisão 48 e item 14): à esquerda do painel, sobre o 3D, a 8 pixels do painel; a 2ª, à esquerda da
   1ª, a 8 pixels dela, ou sobre ela, sem passar da borda da tela; 720 pixels de altura no máximo, com o corpo que rola. */
.projetar-janela { position: absolute; top: 48px; right: calc(336px + 96px + 24px + 8px); z-index: 20; display: flex; flex-direction: column; box-sizing: border-box; max-height: 720px; border: 1px solid var(--sb-ds-neutral-400); border-radius: 10px; background: var(--background); box-shadow: 0 8px 24px color-mix(in srgb, var(--foreground) 12%, transparent); }
.projetar-janela-2 { top: 96px; right: min(calc(336px + 96px + 24px + 8px + 320px + 8px), calc(100% - 320px)); z-index: 21; }
/* 48 e 96 pixels, desde a 2ª PR, pelo item 2 das decisões de 19/10 do chat da 2ª PR: as janelas abrem abaixo dos 4 botões do 3D, que ocupam de 8 a 40 pixels a partir do alto do 3D, e o "Desfazer" fica ao alcance com as janelas abertas */
.projetar-tela[data-recolhido] .projetar-janela { right: calc(96px + 24px + 8px); }
.projetar-janela-borda { position: absolute; top: 0; bottom: 0; left: -6px; z-index: 2; width: 12px; cursor: ew-resize; touch-action: none; } /* 12 pixels: a área de arrastar, com a metade para fora da janela */
.projetar-janela-borda::after { content: ""; position: absolute; top: 50%; left: 4px; width: 4px; height: 32px; margin-top: -16px; border-radius: 2px; background: var(--sb-ds-neutral-500); } /* a alça de 4 por 32 pixels, no meio da borda */
.projetar-janela-borda:hover::after, .projetar-janela-borda:focus-visible::after { background: var(--primary); }
.projetar-janela-borda:focus-visible { outline: none; }
.projetar-janela-cabeca { flex: none; display: grid; row-gap: 4px; padding: 16px; border-bottom: 1px solid var(--border); cursor: grab; touch-action: none; } /* 4 pixels: o caminho, o título e a frase da janela juntos, como 1 cabeçalho só */
.projetar-janela-cabeca[data-arrastando] { cursor: grabbing; }
.projetar-caminho { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; } /* 4 pixels: o "›" entre os passos do caminho */
.projetar-migalha { padding: 0; border: 0; background: none; color: var(--sb-ds-neutral-600); font: inherit; text-decoration: underline; text-decoration-color: var(--sb-ds-neutral-300); text-underline-offset: 2px; cursor: pointer; }
.projetar-migalha:hover { color: var(--primary); text-decoration-color: currentColor; }
.projetar-migalha:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }
.projetar-janela-topo { display: flex; align-items: center; gap: 8px; }
.projetar-janela-topo .projetar-icone-botao { margin: -4px 0; } /* -4 pixels: o X de 32 pixels centrado na linha de 24 do título, pela regra 50 */
.projetar-janela-topo .projetar-icone-botao:last-child { margin-right: -8px; } /* -8 pixels: o desenho do X termina na borda do conteúdo */
.projetar-janela-titulo { flex: 1; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.projetar-janela-titulo:focus { outline: none; }
.projetar-janela-sub { margin: 0; color: var(--sb-ds-neutral-600); font-size: 14px; line-height: 20px; }
.projetar-janela-corpo { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 16px; border-radius: 0 0 10px 10px; } /* 10 pixels: o canto da janela do design system, pela 11A da folha 2, desde a etapa 4 da PR 1 do super plano; relative, desde a 2ª PR: a bolinha escondida de cada opção rola com o corpo, e o clique numa opção de baixo não rola a página */
.projetar-janela-corpo > * + * { margin-top: 16px; }
.projetar-jsec { display: grid; row-gap: 16px; } /* desde a 3ª PR, 16 pixels entre os controles de uma parte da janela, pela regra 45: com 8, um campo e a pergunta seguinte ficavam colados, como "Altura do vão do cabide de baixo" e "Onde ficam os cabides" */
.projetar-jsec > .projetar-com-i:first-child, .projetar-jsec > .projetar-jsec-titulo:first-child { margin-bottom: -8px; } /* o título continua a 8 pixels do que ele nomeia, pela regra 46 */
.projetar-jsec + .projetar-jsec, .projetar-opcoes-da-fita + .projetar-jsec, .projetar-paleta + .projetar-jsec { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.projetar-jsec-titulo { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.projetar-paleta { display: grid; row-gap: 8px; }
.projetar-paleta-titulo { margin: 16px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.projetar-usadas > .projetar-paleta-titulo { margin-top: 0; margin-bottom: 8px; }
.projetar-linhas-da-janela { display: grid; row-gap: 8px; }
.projetar-linha-da-peca { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; text-align: left; cursor: pointer; }
.projetar-linha-da-peca:hover { background: var(--secondary); }
.projetar-linha-da-peca:active { background: var(--sb-ds-brand-200); } /* regra 119 */
.projetar-linha-da-peca:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-linha-da-peca > svg { flex: none; color: var(--sb-ds-neutral-500); }
.projetar-linha-da-peca:hover > svg { color: var(--primary); }
.projetar-linha-da-peca-marca { display: grid; place-items: center; flex: none; }
.projetar-linha-cor .projetar-amostra { width: 32px; height: 32px; border-radius: 8px; } /* 8 pixels de canto, pela SP46: 1/4 do lado de 32, o teto da amostra; até a etapa 6 da PR 1 do super plano, 6 */
.projetar-linha-fita { display: grid; place-items: center; width: 48px; height: 40px; }
.projetar-linha-da-peca-texto { display: grid; flex: 1; min-width: 0; }
.projetar-linha-da-peca-titulo { font-size: 14px; line-height: 20px; font-weight: 600; }
.projetar-linha-da-peca-sub { color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; }
.projetar-linha-da-peca:hover .projetar-linha-da-peca-sub { color: var(--sb-ds-neutral-700); } /* regra 132: o cinza no azul claro */
.projetar-opcoes-da-fita { display: grid; row-gap: 8px; }
/* As opções da fita. Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o
   ponteiro em cima, a opção sem escolha ganha o azul mais claro do design system (brand-50), o nome azul e a borda azul clara
   (brand-400); a escolhida, com o ponteiro em cima, o brand-200, com o nome no brand-800; e o pressionado fica 1 tom acima, pela
   regra 119. Pela decisão 3, o sinal é a bolinha do design system à esquerda (.projetar-bolinha), no lugar do anel e do círculo
   com o feito à direita. Até a etapa 1, o ponteiro em cima dava o azul claro da escolhida, e a escolhida não mudava com ele. */
.projetar-op { border: 1px solid var(--border); border-radius: 8px; background: var(--background); overflow: hidden; }
.projetar-op-marcada { border: 2px solid var(--primary); }
.projetar-op:not(.projetar-op-marcada):has(> .projetar-op-escolha:hover) { border-color: var(--sb-ds-brand-400); }
.projetar-op-escolha { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; }
.projetar-op-marcada .projetar-op-escolha { padding: 7px; background: var(--secondary); } /* 7 pixels: com a borda de 2, o conteúdo não anda */
.projetar-op:not(.projetar-op-marcada) .projetar-op-escolha:hover { background: var(--sb-ds-brand-50); }
.projetar-op:not(.projetar-op-marcada) .projetar-op-escolha:hover .projetar-op-nome { color: var(--primary); }
.projetar-op:not(.projetar-op-marcada) .projetar-op-escolha:active { background: var(--secondary); }
.projetar-op-marcada .projetar-op-escolha:hover { background: var(--sb-ds-brand-200); }
.projetar-op-marcada .projetar-op-escolha:active { background: var(--sb-ds-brand-300); }
.projetar-op-escolha:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.projetar-op-foto { display: grid; place-items: center; flex: none; width: 48px; height: 48px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; background: var(--background); } /* 8 pixels: o canto da foto, pela 11A da folha 2, desde a etapa 4 da PR 1 do super plano */
.projetar-op-nome { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; }
.projetar-op-marcada .projetar-op-nome { color: var(--primary); font-weight: 600; }
.projetar-op-marcada .projetar-op-escolha:hover .projetar-op-nome, .projetar-op-marcada .projetar-op-escolha:active .projetar-op-nome { color: var(--sb-ds-brand-800); }
/* A bolinha do design system (RadioGroupItem), desenhada nas listas em que a escolha do navegador fica escondida para o leitor de
   tela, como as opções da fita e os conteúdos do vão, pela decisão 3 da folha 1, desde a etapa 1 da PR 1 do super plano: 16 pixels,
   a borda de 1 pixel na cor dos campos do design system (--input), a sombra shadow-xs e, na escolhida, o ponto azul de 8 pixels. */
.projetar-bolinha { display: grid; place-content: center; flex: none; box-sizing: border-box; width: 16px; height: 16px; border: 1px solid var(--input); border-radius: 50%; background: var(--background); box-shadow: var(--sombra-xs); }
.projetar-bolinha[data-marcada]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.projetar-bolinha[data-marcada] { border-color: var(--primary); } /* o anel azul na escolhida, pela SP35, desde a etapa 4 da PR 1 do super plano */
.projetar-fita-chapa { fill: var(--sb-ds-neutral-100); stroke: none; }
.projetar-fita-sem { stroke: var(--sb-ds-neutral-400); stroke-width: 1; }
.projetar-fita-com { stroke: var(--primary); stroke-width: 4; stroke-linecap: square; }
.projetar-fita-puxador { stroke: var(--sb-ds-neutral-600); stroke-width: 2; stroke-linecap: round; }
.projetar-fita-legenda { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.projetar-fita-legenda text { fill: var(--sb-ds-neutral-600); font-family: inherit; font-size: 12px; }
.projetar-fita-legenda .projetar-fita-com { stroke-width: 6; }

/* O aviso das máquinas da MadMais, pela decisão 94: amarelo, com a borda accent-700 da regra 109, logo embaixo da escolha que
   causou o problema, e cada correção num botão (decisão 36). */
.projetar-aviso-das-maquinas { display: grid; row-gap: 8px; padding: 12px; border: 1px solid var(--sb-ds-accent-700); border-radius: 8px; background: var(--sb-ds-accent-100); color: var(--foreground); font-size: 14px; line-height: 20px; } /* 12 pixels: o espaço interno dos campos e das opções do design system */
.projetar-aviso-das-maquinas p { margin: 0; }
.projetar-aviso-das-maquinas-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.projetar-aviso-das-maquinas-titulo svg { flex: none; color: var(--sb-ds-accent-800); }
/* Desde a etapa 4 da PR 1 do super plano, pela decisão 8 da folha 2: cada botão de correção ocupa a largura do aviso, com o texto à
   esquerda e a seta, no que leva a outro lugar, na borda da direita, pela 6I; e, pela 9A, o botão tem a borda e o texto azuis, no
   lugar da borda cinza 500 e do texto preto. O mesmo botão pequeno, fora do aviso, como "Colocar porta nas 2 frentes sem porta",
   continua na largura do texto. */
.projetar-correcoes { display: grid; justify-items: stretch; row-gap: 8px; }
.projetar-correcoes > .projetar-botao-pequeno { width: 100%; }
.projetar-correcoes .seta-no-fim { margin-left: auto; }
.projetar-botao-pequeno { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; box-sizing: border-box; border: 1px solid var(--primary); border-radius: 8px; background: var(--background); color: var(--primary); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; text-align: left; cursor: pointer; } /* 4 e 12 pixels: o botão pequeno, de 32 pixels de altura, como o botão pequeno do design system */
.projetar-botao-pequeno svg { flex: none; color: var(--primary); }
.projetar-botao-pequeno:hover { background: var(--secondary); }
.projetar-botao-pequeno:active { background: var(--sb-ds-brand-200); } /* regra 119 */
.projetar-botao-pequeno:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* O anel azul da regra 68 no lugar a que a correção, o atalho da cor e o salvar travado levam: desde a etapa 2 da PR 1 do super
   plano, pela decisão 5 da folha 1, é o anel com folga das outras telas (.anel-do-que-falta), sem o azul claro de 6 pixels e sem
   os 2 segundos de antes, em telas/projetar.js. */

/* "Preço", pela decisão 54: o total e as linhas do custo no desenho do detalhe do preço da página do projeto. */
.projetar-total { margin: 4px 0 0; font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; } /* 4 pixels: o total colado ao título da página */
.projetar-custos { list-style: none; margin: 8px 0 0; padding: 0; }
.projetar-custo { border-top: 1px solid var(--border); }
.projetar-custos > .projetar-custo:first-child { border-top: 0; }
.projetar-custo-gatilho, .projetar-custo-linha { display: grid; grid-template-columns: 16px minmax(0, 1fr) 112px 24px; column-gap: 8px; align-items: start; box-sizing: border-box; width: calc(100% + 16px); margin: 0 -8px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--foreground); font: inherit; font-size: 14px; line-height: 20px; text-align: left; } /* -8 e 8 pixels: o fundo do ponteiro em cima passa 8 pixels da coluna, e o texto fica no lugar */
.projetar-custo-gatilho { cursor: pointer; }
.projetar-custo-gatilho:hover { background: var(--secondary); }
.projetar-custo-gatilho:hover .projetar-custo-nome { color: var(--primary); }
.projetar-custo-gatilho:active { background: var(--sb-ds-brand-200); } /* regra 119 */
.projetar-custo-gatilho:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.projetar-custo-gatilho > svg:first-child, .projetar-custo-linha > svg:first-child { margin-top: 2px; color: var(--sb-ds-neutral-600); } /* 2 pixels: o ícone de 16 no meio da 1ª linha, de 20 */
.projetar-custo-gatilho > svg:last-child { justify-self: end; margin-top: 2px; color: var(--primary); transition: transform var(--tempo-do-medio-ao-fechar) var(--curva-de-mudar); } /* 2 pixels: a seta de 16 no meio da 1ª linha, de 20; o giro em 0,2 segundo ao fechar e em 0,25 ao abrir, pela MI2, desde a etapa 2 do "aplicar" das microinterações, no lugar dos 0,15 de antes */
.projetar-custo-gatilho[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); transition-duration: var(--tempo-do-medio-ao-abrir); } /* a seta para baixo vira 180°, desde a etapa 3 da PR 1 do super plano, pela 6B da folha 2 */
@media (prefers-reduced-motion: reduce) { .projetar-custo-gatilho > svg:last-child { transition: none; } }
.projetar-custo-nome { display: grid; font-weight: 500; }
.projetar-custo-nome .projetar-cinza { font-weight: 400; }
.projetar-custo-gatilho:hover .projetar-cinza { color: var(--sb-ds-neutral-700); } /* regra 132 */
.projetar-custo-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.projetar-custo-itens { list-style: none; margin: 0; padding: 0 0 8px 24px; } /* o nível de baixo começa 24 pixels depois, pela regra 89 */
.projetar-custo-item { display: grid; grid-template-columns: minmax(0, 1fr) 112px 24px; column-gap: 8px; padding: 4px 0; font-size: 14px; line-height: 20px; } /* 4 pixels: as linhas do detalhe do custo, como as do detalhe do preço da tela 4 */
.projetar-custo-item > span:first-child { display: grid; }
.projetar-custo-item-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.projetar-item-material { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; }
.projetar-item-material > .projetar-amostra { grid-row: 1 / span 2; align-self: center; }
.projetar-item-material .material-cima { color: var(--sb-ds-neutral-600); }
.projetar-item-material .material-nome { font-weight: 600; }
.projetar-item-material + .projetar-cinza { padding-left: 24px; }

/* A faixa embaixo do painel, com "Salvar e colocar no projeto" (decisões 22 e 52), parada embaixo ao rolar, como a forma
   "faixa" da folha (.estudo-x-canto, linhas 895 a 906): ela começa na borda do painel e vai até o fim do trilho. Desde 19/10,
   o preço fica só no botão "Preço" do trilho, pelo pedido de Aline Miyaki no chat da 1ª PR, e a faixa mostra à esquerda do
   botão só a frase do ajuste das máquinas, quando ela existe. */
.projetar-faixa { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 16px; margin: 24px 0 0 calc(100% - 456px); padding: 12px 0 16px; border-top: 1px solid var(--border); background: var(--background); } /* 456 pixels: o painel, o espaço de 24 e o trilho */
.projetar-tela[data-recolhido] + .projetar-faixa { margin-left: 0; }
.projetar-faixa-info { display: grid; flex: 1; min-width: 0; }
/* "Salvar e colocar no projeto", desde a etapa 4 da PR 1 do super plano, pela 9D da folha 2: o botão grande do design system, de 40
   pixels (size "lg", em telas/projetar.js), na largura do texto, que não encolhe ao lado da frase do ajuste. */
.projetar-salvar { flex: none; }
.projetar-falta { margin: 0; color: var(--sb-ds-neutral-700); font-size: 14px; line-height: 20px; }

/* O guia "Como medir o seu espaço", com 1 desenho em cada item e 640 pixels de largura, pela C6: a exceção da regra 50. */
.janela-da-app.janela-do-guia-de-medir { width: 640px; max-width: calc(100vw - 32px); }
/* O guia cabe sem rolagem numa tela de 800 pixels de altura, pela regra 50: a lista fica a 32 pixels do texto de cima, o
   espaço entre blocos da janela, sem os 16 a mais do guia da página do módulo, e os itens, a 8 pixels um do outro, pela
   regra 45. O guia da página do módulo, na tela 2, fica como está. */
.janela-do-guia-de-medir .guia-lista { margin-top: 0; row-gap: 8px; }
.guia-de-medir-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.guia-de-medir-item > span:last-child { display: grid; }
.guia-de-medir-desenho { display: block; width: 80px; height: 64px; }
.guia-de-medir-desenho .guia-parede { fill: var(--sb-ds-neutral-100); stroke: var(--sb-ds-neutral-500); }
.guia-de-medir-desenho .guia-lado { fill: none; stroke: var(--sb-ds-neutral-400); }
.guia-de-medir-desenho .guia-rodape { fill: var(--sb-ds-neutral-400); }
.guia-de-medir-desenho .guia-piso { fill: var(--sb-ds-neutral-100); }
.guia-de-medir-desenho .guia-movel { fill: var(--sb-ds-neutral-300); }
.guia-de-medir-desenho .guia-parede-planta { fill: none; stroke: var(--sb-ds-neutral-600); stroke-width: 3; }
.guia-de-medir-desenho .guia-objeto { fill: var(--background); stroke: var(--sb-ds-neutral-600); }
.guia-de-medir-desenho .guia-medida { stroke: var(--primary); stroke-width: 1.5; }
.guia-de-medir-desenho .guia-ponta { fill: var(--primary); }

/* ---------- A tela 3, desde a 2ª PR do "aplicar": "Por dentro", "Portas e frentes" e "Puxador" ---------- */

/* As medidas são as da folha da tela 3 na versão mais recente (linhas 1093 a 1444), com as classes "projetar-", pelo item 15
   das escolhas do plano. */
.projetar-secao-topo + .projetar-sub { margin-top: 4px; } /* 4 pixels: a frase colada ao título da seção, como o complemento da regra 52 */
.projetar-sub { margin: 4px 0 0; color: var(--sb-ds-neutral-600); font-size: 14px; line-height: 20px; } /* 4 pixels: a frase junto do título, como o complemento da regra 52 */
.projetar-icone-24 { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* O "Revisar" do trilho, pela decisão 43: a borda azul e o olho, como o selo da folha do estudo da tela 3 (linha 612). */
.projetar-trilho-revisar { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--primary); border-radius: 8px; background: var(--background) !important; color: var(--primary) !important; font-size: 12px; line-height: 16px; font-weight: 600; white-space: normal; } /* desde a etapa 4 da PR 1 do super plano, o Badge do design system, pela decisão 7 da folha 2; 4 pixels: o espaço do ponto; 1 pixel: os 2 do selo em cima e embaixo, menos a borda; 8 pixels: os 8 dos lados do Badge do design system, dentro da borda, desde o fim da PR 1, porque, com 7, a conferência de espaço da tela 3 achou o texto "Mudou" a 7 pixels da borda */
/* Desde a etapa 5 do "aplicar" das microinterações, de 01/11, pela MI17 e pela regra 149: o selo "Mudou" aparece em 0,25 segundo, só
   pela transparência, quando entra na aba, e some na hora, quando a pessoa sai da página dele, como antes (SP41); para quem pediu menos
   movimento, fica igual, porque a transparência não muda o tamanho nem o lugar de nada. Até essa etapa, ele aparecia na hora. */
.projetar-trilho-revisar { animation: aparecer-pela-transparencia var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar) backwards; }
/* O ponto azul de 8 pixels no lugar do olho, pela M7 do estudo das melhorias, de 19/10: a aba em que algo mudou ganha um ponto,
   como nos design systems que o estudo consultou. */
.projetar-ponto-azul { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }

/* O desenho de "Por dentro" e de "Portas e frentes": os botões das colunas em cima, a caixa com a chapa de fora de 4 pixels, as
   colunas, os vãos e as frentes, e as larguras embaixo. */
.projetar-desenho { display: grid; row-gap: 4px; margin-top: 8px; user-select: none; } /* 4 pixels: os botões das colunas, a caixa e as larguras juntos, como 1 desenho */
.projetar-cabecas { display: flex; gap: 8px; } /* 8 pixels: a largura da divisória no desenho, para cada botão ficar em cima da coluna dele */
.projetar-cabeca { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--sb-ds-neutral-500); border-radius: 8px; background: var(--background); color: var(--foreground); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; cursor: pointer; } /* a borda no cinza 500, com 4,74:1 contra o branco, para o botão se ver como botão */
.projetar-cabeca > svg { width: 16px; height: 16px; flex: none; color: var(--sb-ds-neutral-500); }
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, a
   coluna sem escolha ganha o azul mais claro do design system (brand-50), o nome azul e a borda azul clara (brand-400), no lugar
   da borda azul principal de antes; a escolhida, com o ponteiro em cima, o brand-200, com o nome no brand-800; e o pressionado
   fica 1 tom acima, pela regra 119. A coluna com o aviso das máquinas continua com a borda amarela, pela regra 84. */
button.projetar-cabeca:hover { border-color: var(--sb-ds-brand-400); background: var(--sb-ds-brand-50); color: var(--primary); }
button.projetar-cabeca:hover > svg, button.projetar-cabeca[aria-pressed="true"] > svg { color: var(--primary); }
button.projetar-cabeca[aria-pressed="true"] { padding: 0 7px; border: 2px solid var(--primary); background: var(--secondary); color: var(--primary); font-weight: 600; } /* 7 pixels: com a borda de 2, o texto não anda */
button.projetar-cabeca[aria-pressed="true"]:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
button.projetar-cabeca:active { background: var(--secondary); } /* regra 119 */
button.projetar-cabeca[aria-pressed="true"]:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); }
button.projetar-cabeca[aria-pressed="true"]:hover > svg, button.projetar-cabeca[aria-pressed="true"]:active > svg { color: var(--sb-ds-brand-800); }
button.projetar-cabeca:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
button.projetar-cabeca[data-ajuste] { border-color: var(--sb-ds-accent-700); } /* a coluna com o aviso das máquinas, pela regra 84 */
.projetar-cabeca-texto { height: 24px; border: 0; background: none; color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; font-weight: 400; cursor: default; } /* o número da coluna que não abre nada fica como texto */
.projetar-cabeca-curto { display: none; }
.projetar-cabecas[data-rotulo="curto"] .projetar-cabeca-longo { display: none; }
.projetar-cabecas[data-rotulo="curto"] .projetar-cabeca-curto { display: inline; }
.projetar-d-caixa { display: flex; flex-direction: column; height: 264px; border: 4px solid var(--sb-ds-neutral-500); border-radius: 4px; background: var(--sb-ds-neutral-500); } /* 4 pixels: a grossura da chapa de fora no desenho */
.projetar-d-linha { display: flex; min-height: 0; }
.projetar-d-linha-relativa { position: relative; }
.projetar-d-col { position: relative; display: flex; flex-direction: column; min-width: 0; flex-basis: 0; }
.projetar-d-col::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 2px solid transparent; pointer-events: none; }
.projetar-d-col[data-realcado]::after { border-color: var(--sb-ds-brand-300); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.projetar-d-col[data-escolhida]::after { border-color: var(--primary); }
.projetar-esp { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 0; flex-basis: 0; padding: 2px 8px; border: 0; border-radius: 0; background: var(--background); color: var(--sb-ds-neutral-700); font: inherit; font-size: 12px; line-height: 16px; text-align: center; overflow: hidden; cursor: pointer; container-type: inline-size; } /* 2 pixels: o ícone colado ao nome curto, no vão pequeno */
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, ou
   com o realce da linha do vão na janela, o vão sem escolha ganha o azul mais claro do design system (brand-50), o nome azul e a
   borda azul clara (brand-400), por dentro; o vão aberto, com o ponteiro em cima, o brand-200, com o nome no brand-800; e o
   pressionado fica 1 tom acima, pela regra 119. Até a etapa 1, o ponteiro em cima dava o azul claro do vão aberto. */
.projetar-esp:hover, .projetar-esp[data-realcado] { background: var(--sb-ds-brand-50); color: var(--primary); box-shadow: inset 0 0 0 1px var(--sb-ds-brand-400); }
.projetar-esp:active { background: var(--secondary); } /* regra 119 */
.projetar-esp:focus-visible, .projetar-alca:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.projetar-esp[aria-pressed="true"] { background: var(--secondary); color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); font-weight: 600; }
.projetar-esp[aria-pressed="true"]:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* o vão aberto também muda com o ponteiro em cima, pela regra 81 */
.projetar-esp[aria-pressed="true"]:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); } /* regra 119 */
.projetar-esp[data-vazio] { color: var(--primary); font-weight: 500; }
.projetar-esp[data-vazio]::before { content: ""; position: absolute; inset: 4px; border: 1px dashed var(--sb-ds-brand-400); border-radius: 4px; pointer-events: none; } /* 4 pixels: o tracejado fica dentro do vão, pela decisão 68 */
.projetar-esp[data-ajuste] { outline: 1px solid var(--sb-ds-accent-700); outline-offset: -1px; background: var(--sb-ds-accent-100); } /* o vão com o aviso das máquinas, pela regra 84, com a borda do amarelo da regra 109; desde a etapa 4 da PR 1 do super plano, o contorno de 1 pixel no lugar da sombra de 2, que o modo de alto contraste do Windows apaga, porque o vão do desenho não tem borda, e a borda mudaria o tamanho dele */
.projetar-esp[data-tipo="eletro"] { background: var(--sb-ds-neutral-800); color: var(--background); }
.projetar-esp[data-tipo="eletro"]:hover, .projetar-esp[data-tipo="eletro"][aria-pressed="true"] { background: var(--sb-ds-neutral-700); color: var(--background); }
.projetar-esp[data-tipo="nicho"] { background: var(--sb-ds-neutral-100); }
.projetar-esp > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 72px) { .projetar-esp > span { display: none; } } /* na coluna estreita, fica só o ícone; o nome fica no rótulo do botão */
.projetar-esp-dividido { display: flex; min-height: 0; flex-basis: 0; }
.projetar-esp-dividido > .projetar-esp { flex: 1 1 0; min-width: 0; }
.projetar-alca { position: relative; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: var(--sb-ds-neutral-500); touch-action: none; }
.projetar-alca-v { width: 8px; cursor: ew-resize; }
.projetar-alca-h { height: 8px; cursor: ns-resize; }
.projetar-alca::after { content: ""; border-radius: 2px; background: var(--background); }
.projetar-alca-v::after { width: 2px; height: 16px; } /* 2 pixels: o traço da alça, no meio dos 8 pixels dela */
.projetar-alca-h::after { width: 16px; height: 2px; } /* 2 pixels: o traço da alça, no meio dos 8 pixels dela */
.projetar-alca:hover, .projetar-alca:active { background: var(--primary); }
.projetar-balao { position: absolute; z-index: 5; padding: 0 8px; border-radius: 6px; background: var(--sb-ds-neutral-900); color: var(--background); font-size: 12px; line-height: 24px; font-weight: 600; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; } /* 6 pixels de canto: o do Tooltip do design system */
.projetar-alca-v .projetar-balao { top: -32px; left: 50%; transform: translateX(-50%); }
.projetar-alca-h .projetar-balao { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.projetar-alca:not(:hover):not(:focus-visible):not(:active) .projetar-balao { display: none; }
.projetar-fixa { flex: none; background: var(--sb-ds-neutral-500); }
.projetar-fixa-v { width: 8px; }
.projetar-fixa-h { height: 8px; }
.projetar-d-larguras { display: flex; gap: 8px; color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.projetar-d-larguras > span { min-width: 0; flex-basis: 0; text-align: center; }

/* As frentes no desenho (decisão 74): as folhas com o puxador e as dobradiças, e a frente sem porta, tracejada. */
.projetar-d-caixa-fr { background: var(--sb-ds-neutral-500); }
.projetar-fr-col { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-height: 0; } /* 4 pixels: a folga entre 2 frentes, no desenho */
.projetar-fr-canto { display: flex; gap: 4px; flex: 1 1 0; min-height: 0; } /* 4 pixels: a folga entre 2 frentes, no desenho, como em .projetar-fr-col */
.projetar-fr-canto > .projetar-fr-col { flex: 1 1 0; min-width: 0; }
.projetar-fr { position: relative; display: grid; place-items: start center; min-width: 0; min-height: 0; flex-basis: 0; padding: 0; border: 0; background: var(--sb-ds-neutral-300); color: var(--sb-ds-neutral-600); font: inherit; font-size: 12px; line-height: 16px; container-type: inline-size; overflow: hidden; }
button.projetar-fr { cursor: pointer; }
.projetar-fr-folhas { position: absolute; inset: 2px; display: flex; gap: 2px; } /* 2 pixels: a folga entre as 2 portas e em volta delas */
.projetar-fr[data-tipo="gavetas"] .projetar-fr-folhas { flex-direction: column; }
.projetar-fr-folha { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; box-sizing: border-box; border: 1px solid var(--sb-ds-neutral-400); border-radius: 2px; background: var(--background); }
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, ou
   com o realce da linha da frente na janela, a frente sem escolha ganha o azul mais claro do design system (brand-50) e a borda
   azul clara (brand-400), por dentro; a frente aberta tem o azul claro (brand-100), a borda de 2 pixels e o nome em negrito e, com o
   ponteiro em cima, o brand-200; e o pressionado fica 1 tom acima, pela regra 119. Até a etapa 1, o ponteiro em cima dava o azul
   claro da frente aberta. */
button.projetar-fr:not([aria-pressed="true"]):hover, .projetar-fr[data-realcado]:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--sb-ds-brand-400); }
button.projetar-fr:hover .projetar-fr-folha, .projetar-fr[data-realcado] .projetar-fr-folha { background: var(--sb-ds-brand-50); }
button.projetar-fr:active .projetar-fr-folha { background: var(--secondary); } /* regra 119 */
.projetar-fr[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--primary); }
.projetar-fr[aria-pressed="true"] .projetar-fr-folha { border-color: var(--primary); background: var(--secondary); }
.projetar-fr[aria-pressed="true"] .projetar-fr-rotulo { font-weight: 600; }
button.projetar-fr[aria-pressed="true"]:hover .projetar-fr-folha { background: var(--sb-ds-brand-200); } /* a frente aberta também muda com o ponteiro em cima, pela regra 81 */
button.projetar-fr[aria-pressed="true"]:active .projetar-fr-folha { background: var(--sb-ds-brand-300); } /* regra 119 */
button.projetar-fr:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.projetar-fr-pux { position: absolute; border-radius: 2px; background: var(--sb-ds-neutral-600); }
.projetar-fr-pux-v { top: 50%; width: 3px; height: 24px; margin-top: -12px; } /* 3 pixels: o puxador em pé, no desenho */
.projetar-fr-pux-h { left: 50%; width: 24px; height: 3px; margin-left: -12px; } /* 3 pixels: o puxador deitado, no desenho; -12 pixels: a metade dos 24 dele, para ficar no meio */
.projetar-fr-dob { position: absolute; width: 3px; height: 8px; background: var(--sb-ds-neutral-700); } /* as 2 dobradiças, no lado em que a porta gira */
.projetar-fr-rotulo { position: relative; z-index: 1; max-width: calc(100% - 16px); margin-top: 8px; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, var(--background) 88%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* o nome fica no alto da frente, para não cobrir o puxador */
button.projetar-fr .projetar-fr-rotulo { color: var(--primary); font-weight: 500; }
@container (max-width: 64px) { .projetar-fr-rotulo { display: none; } } /* na frente estreita, o nome fica no rótulo do botão */
.projetar-fr[data-tipo="sem"], .projetar-fr[data-tipo="aberto"], .projetar-fr[data-tipo="dividido"] { place-items: center; align-content: center; gap: 2px; background: var(--background); } /* 2 pixels: o "+" fica junto do nome da frente, no desenho */
.projetar-fr[data-tipo="sem"] .projetar-fr-rotulo, .projetar-fr[data-tipo="aberto"] .projetar-fr-rotulo, .projetar-fr[data-tipo="dividido"] .projetar-fr-rotulo { margin-top: 0; }
.projetar-fr[data-tipo="sem"]::before { content: ""; position: absolute; inset: 4px; border: 1px dashed var(--sb-ds-brand-400); border-radius: 4px; pointer-events: none; } /* 4 pixels: a borda tracejada da frente sem porta fica 4 pixels para dentro, como a folga entre 2 frentes */
button.projetar-fr[data-tipo="sem"]:hover { background: var(--sb-ds-brand-50); } /* desde a etapa 1 da PR 1 do super plano, o azul mais claro, pela decisão 1A da folha 1 */
button.projetar-fr[data-tipo="sem"]:active { background: var(--secondary); }
button.projetar-fr[data-tipo="sem"][aria-pressed="true"] { background: var(--secondary); }
button.projetar-fr[data-tipo="sem"][aria-pressed="true"]:hover { background: var(--sb-ds-brand-200); }
.projetar-fr-mais { position: relative; z-index: 1; display: grid; place-items: center; color: var(--primary); }
.projetar-fr-eletro { display: grid; place-items: center; min-height: 0; flex-basis: 0; background: var(--sb-ds-neutral-800); color: var(--background); font-size: 12px; line-height: 16px; }
.projetar-fr-aberto { display: grid; place-items: center; width: 100%; background: var(--background); color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; }
.projetar-fr-faixa { display: grid; place-items: center; flex: 0 0 20%; background: var(--sb-ds-neutral-200); color: var(--sb-ds-neutral-700); font-size: 12px; line-height: 16px; writing-mode: vertical-rl; } /* 20%: a faixa do canto, mais estreita que a porta */
.projetar-fr-correr { position: absolute; inset: 0; display: flex; padding: 4px 0; border-top: 4px solid var(--sb-ds-neutral-700); border-bottom: 4px solid var(--sb-ds-neutral-700); } /* 4 pixels: os trilhos de cima e de baixo */
.projetar-fr-correr .projetar-fr-folha { box-shadow: -2px 0 0 var(--sb-ds-neutral-400); }
.projetar-fr-correr .projetar-fr-folha + .projetar-fr-folha { margin-left: -8px; } /* 8 pixels: uma porta passa por trás da outra */
.projetar-fr-correr .projetar-fr-folha:nth-child(even) { margin-top: 4px; margin-bottom: 4px; } /* a porta do trilho de trás aparece menor */

/* Os desenhos pequenos das escolhas (decisões 44, 72 e 74). */
.projetar-mini, .projetar-mini-fr, .projetar-mini-parte { display: block; flex: none; fill: none; stroke: var(--sb-ds-neutral-600); stroke-width: 1.5; }
.projetar-mini[height="64"] { width: 30px; height: 48px; } /* 48 pixels de altura: o desenho alto, na proporção de 40 por 64 */
.projetar-mini-faixa { fill: var(--sb-ds-neutral-200); stroke: none; }
.projetar-mini-fr .projetar-mini-faixa { fill: var(--background); }
.projetar-mini-pux { stroke: var(--sb-ds-neutral-700); stroke-width: 2.5; stroke-linecap: round; }
.projetar-mini-dob { stroke: var(--sb-ds-neutral-800); stroke-width: 3; }
.projetar-mini-vazio { stroke: var(--sb-ds-brand-400); stroke-dasharray: 3 2; }
.projetar-mini-seta { stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.projetar-mini-fr .projetar-mini-destaque { fill: var(--sb-ds-brand-200); }
.projetar-visual-marcado .projetar-mini, .projetar-visual-marcado .projetar-mini-fr { stroke: var(--primary); }
.projetar-visual-marcado .projetar-mini .projetar-mini-faixa { fill: var(--sb-ds-brand-200); }
.projetar-visual-marcado .projetar-mini-fr .projetar-mini-faixa { fill: var(--sb-ds-brand-100); }

/* Os cartões com o desenho, com o sinal de feito no canto do escolhido, pela regra 123. */
.projetar-visuais { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.projetar-visual { position: relative; display: grid; justify-items: center; align-content: start; row-gap: 8px; padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--sb-ds-neutral-700); font-size: 12px; line-height: 16px; text-align: center; hyphens: auto; overflow-wrap: break-word; cursor: pointer; } /* 9 pixels dos lados e a separação das sílabas do português, desde a etapa 15 da PR 3 do super plano, pela decisão 100: com a borda de 1, o texto fica a 9 pixels da borda, e, no cartão escolhido, com a borda de 2 e 8 de espaço, a 8, sem o conteúdo andar */
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, o
   cartão sem escolha ganha o azul mais claro do design system (brand-50), o nome azul e a borda azul clara (brand-400); o
   escolhido, com o ponteiro em cima, o brand-200, com o nome no brand-800; e o pressionado fica 1 tom acima, pela regra 119. Até a
   etapa 1, o ponteiro em cima dava o azul claro do escolhido. */
.projetar-visual:hover { background: var(--sb-ds-brand-50); border-color: var(--sb-ds-brand-400); color: var(--primary); }
.projetar-visual:active { background: var(--secondary); } /* regra 119 */
.projetar-visual-marcado { padding: 7px 8px; border: 2px solid var(--primary); background: var(--secondary); color: var(--primary); font-weight: 600; } /* 7 pixels em cima e embaixo: com a borda de 2, o conteúdo não anda; 8 dos lados, pela decisão 100 */
/* As linhas do nome do cartão com o mesmo tamanho, desde a etapa 15 da PR 3 do super plano: no cartão escolhido, em negrito, a linha
   mais comprida, com o espaço do fim, passava dos 8 pixels da decisão 100, pela conferência de espaço da tela 3. */
.projetar-visual > span { text-wrap: balance; }
.projetar-visual-marcado:hover { border-color: var(--primary); background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
.projetar-visual-marcado:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); }
.projetar-visual:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-visual > .projetar-polegar { margin-top: -4px; } /* -4 pixels: o polegar fica junto do nome da escolha, como o selo de antes da etapa 15 da PR 3 do super plano */
.projetar-visual-feito { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); } /* 6 pixels: com a borda de 2, a marca fica a 8 pixels da borda de fora */
.projetar-visual-feito svg { width: 12px; height: 12px; stroke-width: 3; } /* 12 pixels: o sinal de feito no círculo de 16 */
.projetar-visual-texto, .projetar-visual-texto.projetar-visual-marcado { padding-left: 24px; padding-right: 24px; } /* 24 pixels: o texto não passa por baixo do sinal de feito */

/* A lista dos conteúdos do vão, com a foto ao lado do nome e as opções do escolhido dentro da borda dele (decisões 85 e 88). */
.projetar-conteudos { display: grid; row-gap: 8px; }
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, o
   conteúdo sem escolha ganha o azul mais claro do design system (brand-50), o nome azul e a borda azul clara (brand-400); o
   escolhido, com o ponteiro em cima, o brand-200, com o nome no brand-800; e o pressionado fica 1 tom acima, pela regra 119. Pela
   decisão 3, o sinal é a bolinha do design system à esquerda (.projetar-bolinha), no lugar do anel e do círculo com o feito à
   direita. Até a etapa 1, o ponteiro em cima dava o azul claro do escolhido. */
.projetar-conteudo { border: 1px solid var(--border); border-radius: 8px; background: var(--background); overflow: hidden; }
.projetar-conteudo-marcado { border: 2px solid var(--primary); }
.projetar-conteudo:not(.projetar-conteudo-marcado):has(> .projetar-conteudo-escolha:hover) { border-color: var(--sb-ds-brand-400); }
.projetar-conteudo-escolha { display: flex; align-items: center; gap: 8px; padding: 8px 9px; cursor: pointer; } /* 9 pixels dos lados: com a borda de 2 do escolhido, o conteúdo não anda, e o texto fica a 8 pixels da borda, pelo ponto 12 da lista "Antes de mostrar uma tela", desde a 3ª PR */
.projetar-conteudo-marcado .projetar-conteudo-escolha { padding: 7px 8px; background: var(--secondary); } /* 7 e 8 pixels: com a borda de 2, o conteúdo não anda, e o texto fica a 8 pixels da borda */
.projetar-conteudo:not(.projetar-conteudo-marcado) .projetar-conteudo-escolha:hover { background: var(--sb-ds-brand-50); }
.projetar-conteudo:not(.projetar-conteudo-marcado) .projetar-conteudo-escolha:hover .projetar-conteudo-nome { color: var(--primary); }
.projetar-conteudo:not(.projetar-conteudo-marcado) .projetar-conteudo-escolha:active { background: var(--secondary); }
.projetar-conteudo-marcado .projetar-conteudo-escolha:hover { background: var(--sb-ds-brand-200); }
.projetar-conteudo-marcado .projetar-conteudo-escolha:active { background: var(--sb-ds-brand-300); }
.projetar-conteudo-escolha:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.projetar-conteudo-foto { display: grid; place-items: center; flex: none; width: 48px; height: 48px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; background: var(--background); object-fit: contain; } /* 8 pixels: o canto da foto, pela 11A da folha 2, desde a etapa 4 da PR 1 do super plano */
.projetar-conteudo-foto-vazia { border-style: dashed; border-color: var(--sb-ds-neutral-400); }
.projetar-conteudo-nome { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; }
.projetar-conteudo-marcado .projetar-conteudo-nome { color: var(--primary); font-weight: 600; }
.projetar-conteudo-marcado .projetar-conteudo-escolha:hover .projetar-conteudo-nome, .projetar-conteudo-marcado .projetar-conteudo-escolha:active .projetar-conteudo-nome { color: var(--sb-ds-brand-800); }
.projetar-conteudo-extra { display: grid; row-gap: 16px; padding: 16px 8px 7px; border-top: 1px solid var(--sb-ds-brand-200); } /* 8 pixels dos lados: o texto a 8 pixels da borda, desde a 3ª PR */

/* As abas dos tipos do que vai no vão, com o sinal de feito no tipo do que está no vão. Desde a etapa 1 da PR 1 do super plano,
   pela decisão 1B da folha 1, de 19/10, sem a faixa cinza das abas do design system: a aba aberta tem a barra azul de 2 pixels
   embaixo e o texto azul em negrito, sem o fundo azul claro; a fechada, com o ponteiro em cima, ganha o azul mais claro do design
   system (brand-50) e o texto azul; a aberta, com o ponteiro em cima, o azul claro (brand-100); e o pressionado fica 1 tom acima,
   pela regra 119, como as abas "Decoração", "Parede" e "Piso" (.casa-aba). As abas passam de 3 a 2 fileiras, e por isso a linha
   cinza de 1 pixel fica embaixo de cada aba, sem espaço entre as abas da mesma fileira, e não embaixo do grupo; 8 pixels entre as
   fileiras. 6 pixels embaixo: com a barra de 2, os 8 de cima. Até a etapa 1, a aba aberta tinha o fundo azul claro e a sombra. */
.projetar-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
.projetar-tipos [role="tab"] { position: relative; display: grid; justify-items: center; row-gap: 2px; padding: 8px 4px 6px; border: 0; border-radius: 8px 8px 0 0; background: transparent; box-shadow: inset 0 -1px 0 var(--border); color: var(--sb-ds-neutral-700); font: inherit; font-size: 12px; line-height: 16px; cursor: pointer; } /* 2 pixels: o ícone colado ao nome, como antes */
.projetar-tipos [role="tab"]:hover { background: var(--sb-ds-brand-50); color: var(--primary); }
.projetar-tipos [role="tab"]:active { background: var(--sb-ds-brand-100); } /* regra 119 */
.projetar-tipos [role="tab"][aria-selected="true"] { background: transparent; box-shadow: inset 0 -2px 0 var(--primary); color: var(--primary); font-weight: 600; } /* a aba aberta, pela decisão 1B */
.projetar-tipos [role="tab"][aria-selected="true"]:hover { background: var(--sb-ds-brand-100); } /* a aba aberta também muda com o ponteiro em cima, pela regra 81 */
.projetar-tipos [role="tab"][aria-selected="true"]:active { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* regra 119 */
.projetar-tipos [role="tab"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-tipo-atual { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); } /* 14 pixels: o sinal de feito no tipo do que está no vão */
.projetar-tipo-atual svg { width: 10px; height: 10px; stroke-width: 3; } /* 10 pixels: o sinal de feito no círculo de 14 */
.projetar-instr { margin: 8px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; }

/* Os 2 lados do vão dividido ao meio, em 2 abas lado a lado. Desde a etapa 1 da PR 1 do super plano, pela decisão 1B da folha 1,
   de 19/10, como as abas "Decoração", "Parede" e "Piso" (.casa-aba): a aba aberta tem a barra azul de 2 pixels embaixo e o nome
   azul, sem a caixa com a borda de 2 pixels de antes; a fechada, com o ponteiro em cima ou com o realce do lado no desenho, ganha o
   azul mais claro do design system (brand-50) e o nome azul; a aberta, com o ponteiro em cima, o azul claro (brand-100); o
   pressionado fica 1 tom acima, pela regra 119; e a fileira tem a linha cinza de 1 pixel embaixo, que a barra azul cobre. 6 pixels
   embaixo: com a barra de 2, os 8 de cima. */
.projetar-partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; border-bottom: 1px solid var(--border); }
.projetar-partes [role="tab"] { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: -1px; padding: 8px 8px 6px; border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; background: none; color: var(--foreground); font: inherit; text-align: left; cursor: pointer; } /* -1 pixel: a barra azul cobre a linha cinza da fileira */
.projetar-partes [role="tab"]:hover, .projetar-partes [role="tab"][data-realcado] { background: var(--sb-ds-brand-50); }
.projetar-partes [role="tab"]:hover .projetar-parte-nome, .projetar-partes [role="tab"][data-realcado] .projetar-parte-nome { color: var(--primary); }
.projetar-partes [role="tab"]:active { background: var(--sb-ds-brand-100); } /* regra 119 */
.projetar-partes [role="tab"][aria-selected="true"] { border-bottom-color: var(--primary); background: none; }
.projetar-partes [role="tab"][aria-selected="true"]:hover, .projetar-partes [role="tab"][aria-selected="true"][data-realcado] { background: var(--sb-ds-brand-100); }
.projetar-partes [role="tab"][aria-selected="true"]:active { background: var(--sb-ds-brand-200); }
.projetar-partes [role="tab"][aria-selected="true"]:active .projetar-parte-nome { color: var(--sb-ds-brand-800); } /* o brand-800 sobre o brand-200, como em .casa-aba */
.projetar-partes [role="tab"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-parte-texto { display: grid; min-width: 0; }
.projetar-parte-nome { font-size: 14px; line-height: 20px; font-weight: 600; }
.projetar-partes [role="tab"][aria-selected="true"] .projetar-parte-nome { color: var(--primary); }
.projetar-parte-sub { color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; }
.projetar-partes [role="tab"]:hover .projetar-parte-sub, .projetar-partes [role="tab"][aria-selected="true"] .projetar-parte-sub { color: var(--sb-ds-neutral-700); } /* regra 132 */
.projetar-partes [role="tab"][aria-selected="true"] .projetar-mini-parte { stroke: var(--primary); }
.projetar-partes [role="tab"][aria-selected="true"] .projetar-mini-faixa { fill: var(--sb-ds-brand-200); }

/* O bloco de uma escolha com a ilustração de 64 pixels à esquerda (decisão 28), e de 48 na janela. */
.projetar-ilus { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.projetar-janela .projetar-ilus { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; } /* 48 e 12 pixels: o texto ao lado da imagem cabe na janela de 320 */
.projetar-ilus-img { box-sizing: border-box; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); object-fit: contain; color: var(--sb-ds-neutral-600); }
.projetar-janela .projetar-ilus-img { width: 48px; height: 48px; }
.projetar-ilus-desenho .projetar-icone-24 { width: 32px; height: 32px; }
.projetar-ilus-texto { display: grid; row-gap: 8px; min-width: 0; }
.projetar-ilus-texto > * { min-width: 0; } /* desde a 3ª PR, o campo e o "mm" cabem na coluna estreita, como dentro da caixa do que apareceu, sem passar da borda */
.projetar-ilus-texto > p { margin: 0; }
.projetar-ilus-linha-nome { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.projetar-ilus-titulo { font-weight: 600; line-height: 24px; overflow-wrap: break-word; }
.projetar-ilus-faixa { color: var(--sb-ds-neutral-600); font-size: 14px; line-height: 20px; }
.projetar-ilus-sub { margin: 0; color: var(--sb-ds-neutral-600); font-size: 14px; line-height: 20px; }

/* Os botões de menos e de mais, o controle deslizante, o liga e desliga e a lista que abre, nas escolhas da tela 3. Desde a etapa 4
   da PR 1 do super plano, pela 9A da folha 2, o "−" e o "+" têm a borda e o sinal azuis, como o "−" e o "+" do "Duplicar"
   (.contador-botao), no lugar da borda cinza 500 e do sinal preto. */
.projetar-passos { display: inline-flex; align-items: center; gap: 8px; }
.projetar-passos button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--primary); border-radius: 8px; background: var(--background); color: var(--primary); font-size: 16px; line-height: 24px; cursor: pointer; }
.projetar-passos button:not([aria-disabled="true"]):hover { background: var(--secondary); border-color: var(--primary); }
.projetar-passos button:not([aria-disabled="true"]):active { background: var(--sb-ds-brand-200); } /* regra 119 */
.projetar-passos button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* O botão no limite, desde a etapa 1 da PR 1 do super plano, pela decisão 2 da folha 1, de 19/10: o aria-disabled, e não o
   disabled do navegador, para o botão continuar recebendo o foco do teclado e abrir a explicação do limite (Passos, em
   telas/projetar/controles.js), na aparência única do que não se clica: o fundo cinza claro, sem borda e o sinal no cinza 500.
   Até a etapa 1, o botão usava o disabled e tinha a borda no cinza 300. */
.projetar-passos button[aria-disabled="true"], .projetar-passos button[aria-disabled="true"]:hover { cursor: not-allowed; border-color: var(--muted); background: var(--muted); color: var(--sb-ds-neutral-500); }
.projetar-passos output { min-width: 56px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } /* 56 pixels: o valor mais longo, "200 mm", e os botões não andam */
.projetar-deslizante { display: grid; row-gap: 8px; }
/* Desde a 3ª PR, o balão, as marcas e "recomendado" da decisão 50, como na folha final (linhas 858 a 873): 32 pixels em cima
   do controle para o balão de 24, com a ponta de 4; o meio do botão de arrastar, de 16 pixels, em "posição × (largura − 16)
   + 8"; e as marcas a 8 pixels de cada ponta, no meio do botão de arrastar. 6 pixels de canto, o do Tooltip do design system. */
.projetar-deslizar { position: relative; padding-top: 32px; }
.projetar-bolha { position: absolute; top: 0; left: calc(var(--pos) * (100% - 16px) + 8px); transform: translateX(var(--ancora, -50%)); padding: 0 8px; border-radius: 6px; background: var(--sb-ds-neutral-900); color: var(--background); font-size: 12px; line-height: 24px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.projetar-bolha::after { content: ""; position: absolute; left: var(--seta, 50%); bottom: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); } /* -4 pixels: a ponta do balão, um quadrado de 8 girado, sai 4 pixels embaixo dele */
.projetar-marcas { position: relative; height: 8px; margin: 0 8px; } /* 8 pixels, desde a etapa 15 da PR 3 do super plano: a palavra "Recomendado" embaixo das marcas saiu, pela 20E; até a etapa 15, 24 */
.projetar-marca { position: absolute; top: 0; width: 1px; height: 6px; background: var(--sb-ds-neutral-400); } /* 1 e 6 pixels: o traço de cada marca da régua, dentro dos 8 da linha das marcas */
.projetar-liga { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.projetar-liga > span { display: grid; min-width: 0; }
.projetar-liga-nome { font-weight: 600; line-height: 24px; overflow-wrap: break-word; }
.projetar-lista-que-abre { width: 100%; cursor: pointer; } /* a mãozinha da regra 49, que o botão da lista do design system não tem, como em .perfil-escolha */

/* As larguras das colunas e a coluna de largura própria, no painel de "Por dentro". */
.projetar-larguras-bloco { display: grid; row-gap: 8px; }
.projetar-larguras-bloco > p { margin: 0; }
.projetar-larguras { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.projetar-larguras .projetar-campo-linha { margin-top: 4px; } /* 4 pixels: o nome da coluna colado ao campo */
.projetar-larguras .projetar-campo-linha [data-slot="input"] { width: 100%; min-width: 0; padding: 0 8px; }
.projetar-larguras .projetar-campo-linha > span { display: none; } /* o "mm" fica no título do bloco, "As larguras das colunas, em mm", como na folha */
.projetar-larguras .projetar-campo-rotulo { font-size: 12px; line-height: 16px; color: var(--sb-ds-neutral-700); font-weight: 400; }
.projetar-largura-resto { display: grid; row-gap: 4px; align-content: start; color: var(--sb-ds-neutral-700); font-size: 12px; line-height: 16px; } /* 4 pixels: o nome fica junto do valor, como o nome da coluna junto do campo */
.projetar-largura-resto output { display: flex; align-items: center; box-sizing: border-box; height: 36px; padding: 0 8px; border-radius: 6px; background: var(--muted); color: var(--foreground); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } /* 36 pixels: a altura do campo do design system, como os campos ao lado */
.projetar-largura-variavel { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: end; }
.projetar-largura-variavel > div > .projetar-rotulo + * { margin-top: 8px; }
.projetar-seg { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 8px; background: var(--muted); } /* 4 pixels: os botões de 32 numa faixa de 40, com 4 entre eles */
/* "Por dentro" em grupo (Segmentos, em telas/projetar/paginas/por-dentro.js). Desde a etapa 1 da PR 1 do super plano, pela decisão
   1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, o botão sem escolha ganha o azul mais claro do design
   system (brand-50), o texto azul e a borda azul clara (brand-400), por dentro; o escolhido tem o azul claro (brand-100), a borda de
   2 pixels e o texto azul em negrito, no lugar do branco de antes, e, com o ponteiro em cima, o brand-200, com o texto no
   brand-800; e o pressionado fica 1 tom acima, pela regra 119. Pela decisão 3 e pelo plano do super plano, o escolhido tem o sinal
   de feito antes do texto, e cada botão já tem a largura da forma escolhida, com o sinal e o negrito, para nenhum botão andar com
   o clique (regra 123): 26 pixels dos lados sem o sinal, os 16 de antes e 10, a metade dos 16 do sinal e dos 4 até o texto, e 16
   com ele. */
.projetar-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 0 26px; border: 0; border-radius: 6px; background: transparent; color: var(--sb-ds-neutral-700); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; } /* 4 pixels: o sinal colado ao texto */
.projetar-seg button:not([aria-checked="true"]):hover { background: var(--sb-ds-brand-50); color: var(--primary); box-shadow: inset 0 0 0 1px var(--sb-ds-brand-400); }
.projetar-seg button:not([aria-checked="true"]):active { background: var(--secondary); color: var(--primary); }
.projetar-seg button[aria-checked="true"] { padding: 0 16px; background: var(--secondary); color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 2px var(--primary); }
.projetar-seg button[aria-checked="true"]:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
.projetar-seg button[aria-checked="true"]:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-800); }
.projetar-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-campo-de-dentro .projetar-ilus-sub { margin: 4px 0 0; } /* 4 pixels: a frase junto do título, como em .projetar-sub */

/* As linhas das janelas de "Por dentro" e de "Portas e frentes": o ícone do vão ou o desenho da frente, e o selo do ajuste. */
.projetar-linha-icone { display: grid; place-items: center; flex: none; width: 32px; height: 32px; box-sizing: border-box; border-radius: 6px; background: var(--sb-ds-neutral-100); color: var(--sb-ds-neutral-700); }
.projetar-linha-icone .projetar-icone-24 { width: 16px; height: 16px; }
.projetar-linha-icone-vazio { border: 1px dashed var(--sb-ds-brand-400); background: var(--background); color: var(--primary); }
.projetar-linha-fr { background: var(--sb-ds-neutral-100); }
.projetar-linha-da-peca[data-realcado] { background: var(--secondary); }
.projetar-selo-ajuste { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 4px; padding: 1px 8px; border: 1px solid var(--sb-ds-accent-700); border-radius: 8px; font-size: 12px; line-height: 16px; font-weight: 600; } /* 4 pixels: o espaço do ícone e o selo colado na linha das medidas do vão; 1 pixel: os 2 do selo em cima e embaixo, menos a borda; 8 pixels: os 8 dos lados do Badge do design system, dentro da borda, desde o fim da PR 1 do super plano */
/* Desde as correções da etapa 20 da 4ª PR, .projetar-selo-ajuste tem a borda de 1 pixel no accent-700, pela regra 109, como os outros amarelos.
   Desde a etapa 4 da PR 1 do super plano, o selo é o Badge do design system, pela decisão 7 da folha 2. */
/* A explicação de "Precisa de ajuste", desde a 2ª PR, pelas regras 84 e 85: o título em preto, numa linha, pela D63, e o
   motivo, a frase e as escolhas, cada um numa linha, com as escolhas numa lista com ponto; 4 pixels entre as linhas, porque
   são partes de 1 explicação só. */
.explicacao-do-detalhe .projetar-ajuste-motivo, .explicacao-do-detalhe .projetar-ajuste-frase { display: block; margin-top: 4px; } /* 4 pixels: entre as linhas de 1 explicação só */
.explicacao-do-detalhe .projetar-ajuste-escolhas { margin: 4px 0 0; padding-left: 16px; list-style: disc; } /* 4 pixels: entre as linhas de 1 explicação só, como diz o comentário acima */
/* O nome inteiro do conteúdo, antes do aviso, quando o vão cortado também precisa de ajuste, e o nome do conteúdo numa linha
   só, na lista "Os vãos da coluna" e nos 2 lados do vão dividido, pela regra 31, desde os achados 2 e 3 do estudo dos nomes. */
.explicacao-do-detalhe .projetar-ajuste-nome { display: block; margin-bottom: 8px; }
.projetar-uma-linha { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O "i" ao lado de um título ou de um nome, desde 19/10, pela frase nova da regra 24 da régua de escrita: 4 pixels depois do
   texto, como o .rotulo-com-i; -4 pixels em cima e embaixo, para o "i" de 24 caber na linha de 16 a 24 pixels do título sem
   descer o que vem abaixo; e, nas linhas alinhadas pela base do texto, o "i" fica no meio da linha. */
.projetar-i { flex: none; margin: -4px 0 -4px 4px; vertical-align: middle; } /* -4 e 4 pixels: o "i" de 24 cabe na linha do título e fica a 4 do texto */
.projetar-com-i { display: flex; align-items: center; min-width: 0; }
.projetar-com-i > :first-child { min-width: 0; }
.projetar-ilus-linha-nome .projetar-i, .projetar-campo-topo .projetar-i { align-self: center; margin-left: -4px; } /* -4 pixels: o vão de 8 da linha fica em 4 */
.projetar-liga-rotulo { cursor: pointer; }
.projetar-avancadas-titulo .projetar-i { margin-left: -4px; } /* -4 pixels: o vão de 8 do título fica em 4 */
.projetar-secao-titulo-com-i { flex: 1 1 auto; }
.projetar-secao-titulo-com-i > .projetar-secao-titulo { flex: 0 1 auto; }
.projetar-janela-titulo-com-i { flex: 1; }
.projetar-janela-titulo-com-i > .projetar-janela-titulo { flex: 0 1 auto; }
.explicacao-do-detalhe .projetar-i-frase { display: block; }
.explicacao-do-detalhe .projetar-i-frase + .projetar-i-frase { margin-top: 8px; }
.projetar-fixo { display: flex; align-items: center; gap: 8px; }
.projetar-atalho { margin-top: 16px; }
.projetar-atalho + .projetar-atalho { margin-top: 8px; } /* as 2 linhas das portas e das frentes de gaveta ficam juntas */
.projetar-conteudo-extra .projetar-atalho, .projetar-opcoes-soltas .projetar-atalho { margin-top: 0; }
.projetar-opcoes-soltas { display: grid; row-gap: 16px; margin-top: 16px; }
.projetar-opcoes-do-conteudo { display: grid; row-gap: 16px; }
.projetar-avancadas-do-conteudo { display: grid; row-gap: 8px; }
.projetar-avancadas-do-conteudo .projetar-avancadas-apoio { color: var(--sb-ds-neutral-600); }
.projetar-grupo-do-conteudo { border-top: 1px solid var(--border); }
.projetar-grupo-do-conteudo:last-child { border-bottom: 1px solid var(--border); }
.projetar-gatilho-do-grupo { padding: 8px; border: 0; border-radius: 0; background: none; }
.projetar-gatilho-do-grupo:hover .projetar-linha-mais-nome { color: var(--primary); }
.projetar-grupo-do-conteudo > .projetar-grupo-corpo { margin: 0 0 8px; padding: 8px 0 8px; border-left: 0; }

/* "Portas e frentes": o botão de colocar porta, as linhas das portas de correr e o botão que leva a "Por dentro". */
.projetar-acao-das-portas { margin: 16px 0 0; }
.projetar-linhas-de-dados { border-top: 1px solid var(--border); }
.projetar-linha-de-dado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 16px; align-items: center; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.projetar-linha-de-dado > span:first-child { color: var(--sb-ds-neutral-600); }
.projetar-ir-dentro { margin: 16px 0 0; }
.projetar-botao-com-seta { display: inline-flex; align-items: center; gap: 6px; margin-top: 0; text-align: left; } /* 6 pixels: o ícone colado ao texto, como o botão pequeno do design system */

/* "Puxador": o desenho de cada escolha (decisão 44), na porta cinza, no corpo do aéreo mais claro e na barra escura. */
.projetar-pux-desenho { display: block; width: 64px; height: 48px; }
.projetar-pux-desenho > svg { width: 100%; height: 100%; }
.projetar-pux-porta { fill: var(--sb-ds-neutral-300); stroke: var(--sb-ds-neutral-700); stroke-width: 1.5; }
.projetar-pux-corpo { fill: var(--sb-ds-neutral-100); stroke: var(--sb-ds-neutral-500); stroke-width: 1.5; }
.projetar-pux-barra { fill: var(--sb-ds-neutral-800); }
.projetar-pux-fino { stroke: var(--sb-ds-neutral-500); stroke-width: 1.5; }
.projetar-explicacao-do-puxador { display: grid; row-gap: 8px; margin-top: 8px; }

/* Desde a 3ª PR do "aplicar" da tela 3: "O módulo" e "Opções avançadas", como a folha (linhas 1030 a 1089 e 1382 a 1433). As
   opções ficam umas embaixo das outras, a 16 pixels, e o rótulo fica a 8 pixels do que ele nomeia, pela regra 45. */
.projetar-controles { display: grid; row-gap: 16px; }
.projetar-controles:empty { display: none; }
.projetar-controles > div > .projetar-com-i + *, .projetar-controles > div > .projetar-rotulo + *, .projetar-escolha-do-canto > .projetar-com-i + *, .projetar-escolha-da-porta > .projetar-com-i + *,
.projetar-topo-do-balcao > .projetar-com-i + *, .projetar-tp-lugar > .projetar-com-i + *, .projetar-tp-chapas > .projetar-com-i + *, .projetar-tp-chapas [data-revelar-de] > .projetar-rotulo + * { margin-top: 8px; }
.projetar-campo-do-ambiente { display: grid; row-gap: 8px; }
.projetar-campo-do-ambiente .projetar-lista-que-abre { max-width: 288px; }
.projetar-efeito { display: grid; row-gap: 8px; }
.projetar-efeito .projetar-nota-tela { margin: 0; }
.projetar-efeito .projetar-atalho { margin-top: 0; }
.projetar-visual-foto { display: block; width: 64px; height: 64px; object-fit: contain; }
/* A planta do módulo de canto, vista de cima (decisão 63). Desde a PR 3 do super plano, pela OC1, como a forma recomendada do estudo
   da parte "O canto": a legenda "Visto de cima" acima do desenho, a 8 pixels dele; as 2 paredes do canto no cinza 400; e os rótulos
   do módulo vizinho e da parte coberta no cinza 900. */
.projetar-planta-com-legenda { display: grid; row-gap: 8px; }
.projetar-legenda-do-desenho { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--sb-ds-neutral-700); }
.projetar-planta { display: block; width: 100%; height: auto; }
.projetar-planta text { fill: var(--sb-ds-neutral-700); font-size: 12px; }
.projetar-planta .projetar-planta-texto-forte { fill: var(--sb-ds-neutral-900); }
.projetar-planta-parede { fill: var(--sb-ds-neutral-400); }
.projetar-planta-modulo { fill: var(--sb-ds-neutral-100); stroke: var(--sb-ds-neutral-500); stroke-width: 1.5; }
.projetar-planta-escondida { fill: var(--sb-ds-neutral-300); stroke: var(--sb-ds-neutral-500); stroke-width: 1.5; }
.projetar-planta-vizinho { fill: var(--sb-ds-neutral-200); stroke: var(--sb-ds-neutral-700); stroke-width: 1.5; stroke-dasharray: 4 3; }
.projetar-planta-porta { stroke: var(--sb-ds-neutral-900); stroke-width: 4; }
/* O que segura o móvel no chão, de frente (decisão 64). */
.projetar-apoio { display: block; width: 64px; height: 64px; }
.projetar-apoio-caixa { fill: var(--sb-ds-neutral-100); stroke: var(--sb-ds-neutral-600); stroke-width: 1.5; }
.projetar-apoio-rodape { fill: var(--sb-ds-neutral-300); stroke: var(--sb-ds-neutral-600); stroke-width: 1.5; }
.projetar-apoio-parede, .projetar-apoio-chao { stroke: var(--sb-ds-neutral-700); stroke-width: 2; }
.projetar-apoio-chao-claro { stroke: var(--sb-ds-neutral-400); stroke-width: 2; }
/* A porta avulsa vista de cima (decisão 65). */
.projetar-posicao { display: block; width: 88px; height: 64px; }
.projetar-posicao-lateral { fill: var(--sb-ds-neutral-300); stroke: var(--sb-ds-neutral-600); stroke-width: 1.5; }
.projetar-posicao-dentro { fill: var(--sb-ds-neutral-100); }
.projetar-posicao-porta { fill: var(--sb-ds-neutral-700); }
.projetar-posicao-vizinha { fill: var(--sb-ds-neutral-400); }
/* Os lados à vista do tamponamento, vistos de cima (decisão 86). */
.projetar-lados { display: block; width: 48px; height: 48px; }
.projetar-lados-parede { fill: var(--sb-ds-neutral-300); }
.projetar-lados-caixa { fill: var(--sb-ds-neutral-100); stroke: var(--sb-ds-neutral-500); stroke-width: 1; }
.projetar-lados-chapa { fill: var(--sb-ds-neutral-700); }
.projetar-tp-lugar, .projetar-tp-chapas { display: grid; }
.projetar-tp-frase { margin: 16px 0; }
/* As chapas do tamponamento, com a caixa vista de frente (decisão 59): cada chapa é um botão em volta da caixa. */
.projetar-tp-chapas { row-gap: 8px; }
.projetar-tp-caixa { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; grid-template-rows: 24px 96px 24px; gap: 4px; } /* 4 pixels: as chapas encostam na caixa, como a folha */
.projetar-tp-centro { grid-column: 2; grid-row: 2; display: grid; place-items: center; border: 2px solid var(--sb-ds-neutral-500); border-radius: 2px; background: var(--sb-ds-neutral-100); color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; }
.projetar-tp-lado { box-sizing: border-box; padding: 0; border: 1px dashed var(--sb-ds-neutral-400); border-radius: 2px; background: var(--background); cursor: pointer; }
.projetar-tp-lado[data-tipo="aparente"] { border: 1px solid var(--sb-ds-neutral-700); background: var(--sb-ds-neutral-300); }
.projetar-tp-lado[data-tipo="parede"] { border: 1px solid var(--sb-ds-neutral-700); background: linear-gradient(var(--sb-ds-neutral-300), var(--sb-ds-neutral-300)) no-repeat; }
.projetar-tp-lado[data-pos="cima"][data-tipo="parede"], .projetar-tp-lado[data-pos="baixo"][data-tipo="parede"] { background-size: 24px 100%; background-position: right; }
.projetar-tp-lado[data-pos="esquerda"][data-tipo="parede"], .projetar-tp-lado[data-pos="direita"][data-tipo="parede"] { background-size: 100% 24px; background-position: bottom; }
/* Desde a etapa 1 da PR 1 do super plano, pela decisão 1A da folha 1, de 19/10, os 3 tons em escada: com o ponteiro em cima, a
   chapa sem escolha ganha o azul mais claro do design system (brand-50) e a borda azul clara (brand-400), no lugar da borda azul
   principal de antes; a escolhida tem o azul claro (brand-100) e a borda de 2 pixels, sem a sombra azul clara em volta de antes, e,
   com o ponteiro em cima, o brand-200; e o pressionado fica 1 tom acima, pela regra 119. O desenho da parede continua por cima do
   fundo, e a forma de cada chapa continua na legenda e no nome para o leitor de tela. */
.projetar-tp-lado:hover { border-color: var(--sb-ds-brand-400); background-color: var(--sb-ds-brand-50); } /* regra 81 */
.projetar-tp-lado:active { background-color: var(--secondary); } /* regra 119 */
.projetar-tp-lado[aria-pressed="true"] { border: 2px solid var(--primary); background-color: var(--secondary); } /* regra 123 */
.projetar-tp-lado[aria-pressed="true"]:hover { background-color: var(--sb-ds-brand-200); }
.projetar-tp-lado[aria-pressed="true"]:active { background-color: var(--sb-ds-brand-300); }
.projetar-tp-lado:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.projetar-tp-lado[data-pos="cima"] { grid-column: 1 / 4; grid-row: 1; }
.projetar-tp-lado[data-pos="baixo"] { grid-column: 1 / 4; grid-row: 3; }
.projetar-tp-lado[data-pos="esquerda"] { grid-column: 1; grid-row: 2; }
.projetar-tp-lado[data-pos="direita"] { grid-column: 3; grid-row: 2; }
.projetar-tp-legenda { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; color: var(--sb-ds-neutral-600); font-size: 12px; line-height: 16px; }
.projetar-tp-legenda span { display: inline-flex; align-items: center; gap: 4px; } /* 4 pixels: a amostra colada ao nome */
.projetar-tp-legenda i { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--sb-ds-neutral-700); background: var(--sb-ds-neutral-300); }
.projetar-tp-legenda i[data-tipo="sem"] { border-style: dashed; border-color: var(--sb-ds-neutral-400); background: var(--background); }
.projetar-tp-legenda i[data-tipo="parede"] { background: linear-gradient(var(--sb-ds-neutral-300), var(--sb-ds-neutral-300)) no-repeat right / 6px 100%, var(--background); }
.projetar-tp-chapas [data-revelar-de] { margin-top: 8px; }
.projetar-tp-modo > .projetar-rotulo + * { margin-top: 8px; }
.projetar-tp-modo + * { margin-top: 16px; }
.projetar-opcoes > .borda-do-que-apareceu { margin-top: 0; } /* a borda fica no vão de 8 pixels da lista, logo embaixo da escolhida */
/* Desde a 3ª PR, a caixa do que apareceu, na lista ao lado de uma ilustração, ocupa também a coluna da ilustração, de 64
   pixels e 16 de espaço na página, e de 48 e 12 na janela, para as opções de dentro dela, com a ilustração delas, não ficarem
   estreitas: as divisórias do nicho do Aparador tinham 140 pixels, e "Sem divisória" quebrava em 2 linhas. O pedido de
   Aline Miyaki, de 19/10: "o tamanho minimo disso aqui tem que ser maior". A ponta continua na opção escolhida. */
.projetar-ilus .projetar-opcoes > .borda-do-que-apareceu { margin-left: -80px; }
.projetar-janela .projetar-ilus .projetar-opcoes > .borda-do-que-apareceu { margin-left: -60px; } /* -60 pixels: os 48 e os 12 da janela, como os -80 da página são os 64 e os 16 */
/* As opções que a escolha mostra ficam a 16 pixels uma da outra dentro da caixa, como em .projetar-controles e na folha
   final (.estudo-d-junto-grade, linha 1426): antes, ficavam coladas, e Aline Miyaki achou, em 19/10, "muito grudadinho sem respiro". */
[data-el^="projetar-deps-"], [data-el="projetar-portas-separadas"], [data-el="projetar-tp-do-escolhido"], [data-el="projetar-topo-escolhido"] { display: grid; row-gap: 16px; }

/* ---------- A borda do amarelo (regra 109) ---------- */

/* Desde o "aplicar" do Meu perfil, de 10/10, pela regra 109 e pela U4 da E32: todo fundo amarelo sobre o branco ganha
   uma borda de 1 pixel no accent-700 do design system, com 4,93:1 contra o branco, porque o fundo amarelo tem só 1,33:1, e
   o modo de alto contraste do Windows apaga o fundo e deixa a borda. Com o ponteiro em cima, o fundo passa ao accent-400,
   como já passava, e a borda continua. São 6 classes: o botão de situação amarelo da home (.atencao), o aviso amarelo e o
   selo amarelo da página do serviço, a marca do preço desatualizado, a marca do meio, que usa a mesma classe da marca do
   preço, e a marca da folha impressa. Onde o elemento não tinha borda, o espaço de dentro perde 1 pixel, e a marca fica
   do mesmo tamanho. A etapa da linha do tempo, que também levava a classe .atencao, ficava de fora, porque o círculo dela
   já tem a borda accent-700; desde o "aplicar" da Página do projeto, de 15/10, ela leva a classe .c-atencao. */
.atencao:not(.c-etapa) { border: 1px solid var(--sb-ds-accent-700) !important; }
.aviso-atencao, .selo-atencao { border-color: var(--sb-ds-accent-700) !important; }
.marca-do-preco { border: 1px solid var(--sb-ds-accent-700); padding: 1px 5px; } /* 1 e 5 pixels: os 2 e os 6 de antes, menos a borda */
/* Desde a 26ª rodada da lista das decisões do super plano: a marca do meio volta a ter a borda própria, porque, desde a PR 5, nenhuma
   tela escreve a classe junto com .marca-do-preco, de que ela recebia a borda, e conferir-os-padroes.mjs não achava a borda dela. */
.marca-do-meio { border: 1px solid var(--sb-ds-accent-700); }
.marca-impressa { border: 1px solid var(--sb-ds-accent-700); padding: 0 3px; } /* 3 pixels: os 4 de antes, menos a borda */

/* A impressão do orçamento: o título, as etapas, o preço e os módulos, sem a barra do topo, sem os
   botões e sem a parte do envio. */
@media print {
  .barra, .pular, .nao-imprime, #parte-envio { display: none !important; }
  .so-impressao { display: block !important; }
  .botao-informacao, .linha-seta, .mais-materiais { display: none !important; }
  /* O detalhe aberto não vai para o papel: a folha do detalhe já leva todos os módulos. */
  .detalhe, [data-slot="dialog-overlay"] { display: none !important; }
  .conteudo { padding-top: 0; }
  .servico-corpo { max-width: none; }
  .bloco-cinza, .aviso, .selo-atencao, .amostra, .modulo-imagem, .material, .barra-parte, .marca-da-parte, .legenda-ponto, .marca-do-preco, .marca-impressa, .c-circulo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Desde o "aplicar" da Página do projeto, de 15/10, pelo acréscimo 2 de 15/10 do plano: no papel, o nome do módulo
     quebra a linha e sai inteiro, sem as reticências, porque o papel não abre a explicação com o nome inteiro, também com
     255 caracteres sem espaço; e o lápis e "Dar um nome", do título da etapa 1, não vão para o papel. */
  .de-modulo .modulo-titulo { flex-wrap: wrap; }
  .de-modulo .modulo-titulo .linha-nome { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .servico-nome .nome-acao { display: none !important; }
  /* Desde o "aplicar" da linha do tempo, de 16/10: a pergunta da compra e o anel azul não vão para o papel, porque a folha
     é o orçamento; e a parte do preço da etapa 4 em diante, que só existe na folha, fica com o espaço de cima das partes. */
  .caixa-da-pergunta { display: none !important; }
  .momento-bloco.anel-do-que-falta { box-shadow: none !important; } /* desde o "aplicar" do anel do que falta, de 31/10, com o "!important" e o peso de 2 classes, para passar por cima do "!important" da classe única do anel */
  .parte + .parte.so-impressao { margin-top: 48px; }
  /* Desde a PR 4 do super plano, pela etapa 21 do plano, com 2 ambientes ou mais: todos os ambientes saem no papel com os módulos
     deles, seja o que for que está aberto na tela, pela P1, porque o papel não abre o que está fechado; o selo do recorte à mão sai
     com o nome, no lugar do selo só com o ícone, e a marca do preço sai sem o ícone, com o fundo amarelo e "preço desatualizado" em
     palavras embaixo do valor, pela P2 e pela regra 90; e a foto do ambiente, a borda dela, o fundo cinza e a linha cinza da espera
     saem no papel, pela P3, porque o Chrome tira do papel os fundos e as sombras sem o print-color-adjust, que passa da foto às
     partes de dentro dela. */
  .linhas.modulos-do-ambiente.modulos-fechados { display: block !important; }
  .ambiente-titulo, .de-modulo.com-detalhe .modulo-titulo { flex-wrap: wrap; row-gap: 4px; } /* 4 pixels: o selo que quebra fica junto do nome, como na tela */
  .servico-corpo .linha-valor .marca-do-preco svg { display: none; }
  .marca-em-palavras { display: block !important; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--sb-ds-neutral-700); white-space: normal; }
  .foto-do-ambiente, .foto-pelo-3d { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Desde a PR 4 do super plano, pela SP127 e pela regra 128: na linha de cada módulo, as etiquetas da tela, que escondem no "+1
     material" a que não cabe, saem do papel, e as etiquetas do papel, a da chapa e a da fita, quebram a linha quando não cabem, com
     os espaços das etiquetas da tela. */
  .linha.de-modulo .etiquetas { display: none !important; }
  .etiquetas-no-papel { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; margin-left: 1px; } /* 1 pixel: a borda da 1ª etiqueta no traço do L de "Largura", como .de-modulo.com-detalhe .etiquetas */
}


/* ---------- Tablet e celular: em espera para a fase 2 ---------- */

/* Janela com menos de 768 pixels de largura: celular. */
@media (max-width: 767px) {
  .faixa-da-busca { flex-direction: column; }
  .faixa-da-busca .acao { width: 100%; }
  /* O campo de busca e o botão "Novo serviço" têm 44 pixels de altura, para o toque do dedo. */
  .faixa-da-busca input, .faixa-da-busca .acao button { height: 44px !important; } /* 44 pixels: a altura para o toque do dedo, no celular */
  .vazio { margin-top: 40px; }
  /* Na barra do topo, o botão "Serviços" e o nome do usuário saem; o logotipo já leva para a home. */
  .so-janela-larga { display: none !important; }
  .menu-usuario { padding: 0 8px; }
  .botao-ajuda { height: 40px; }
}
/* Janela com menos de 480 pixels: o botão de ajuda fica só com o ícone; o texto continua para o leitor de tela. */
@media (max-width: 479px) {
  .botao-ajuda { width: 40px; padding: 0; justify-content: center; }
  .botao-ajuda .rotulo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; /* 1 pixel: o texto fica só para o leitor de tela, como em .so-leitor */
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ajuda-com-texto { display: none; }
  .ajuda-so-icone { display: inline; }
}

/* ---------- PR 6 do super plano: a barra da página da escolha (componentes/barra-do-topo.js) ---------- */
/* Na página da escolha da entrada, o logotipo não tem link, pela SP148, e fica com a classe "marca" para continuar no mesmo
   lugar e com o mesmo tamanho do logotipo com link. O que não se clica não muda com o ponteiro em cima nem com o clique,
   pelas regras 49 e 81, e por isso a caixa azul escura de .marca:hover e de .marca:active não aparece nele. O ponteiro fica a
   seta comum, porque o logotipo sem link é um span, e não um link. */
.marca.marca-sem-link:hover, .marca.marca-sem-link:active { background: transparent; }


/* ---------- PR 6 do super plano: a página da escolha da entrada (telas/escolha-da-entrada.js, telas/so-no-computador.js,
   telas/versao-para-marceneiros.js e componentes/pagina-cinza.js) ---------- */

/* A página da escolha de 1 tela só, desde o "aplicar" da recepção com o vídeo, de 03/11/2026, pela AB5 e pela AB19 da lista das
   decisões do estudo, como o estudo (estudos/estudo-recepcao-com-video-2.css, .pg-corpo): a nuvem sem rosto, as boas-vindas e os 2
   botões, um embaixo do outro, no meio da área abaixo da barra do topo, soltos sobre o branco. A folha cinza com as cruzes, as 4
   telas, o balcão de cada tela, a pergunta, as faixas, as setas e a pausa saíram com as 4 telas. A área tem a altura da janela
   menos o espaço de cima e o de baixo do conteúdo (.conteudo). */
.entrada { box-sizing: border-box; min-height: calc(100dvh - 121px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; text-align: center; } /* 121 pixels: os 81 de cima e os 40 de baixo de .conteudo */
/* A nuvem sem rosto, com 96 pixels de largura e a 24 das boas-vindas, como o estudo; é para onde a nuvem do fim do vídeo desliza,
   pela AB17. */
.entrada-nuvem { display: block; width: 96px; height: auto; margin-bottom: 24px; }
/* As boas-vindas, com 36 pixels de letra, o text-4xl da escala do design system, pela regra 45, e a frase pequena embaixo. */
.entrada-frase { display: flex; flex-direction: column; margin: 0; color: var(--foreground); font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.entrada-frase:focus { outline: none; }
.entrada-frase-pequena { display: block; max-width: 37em; margin: 8px auto 0; color: var(--sb-ds-neutral-700); font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
/* Os 2 botões, a 40 pixels das boas-vindas, como o estudo, com a caixa das vagas ou a caixa da ajuda, quando aparecem. */
.entrada-escolha { display: flex; flex-direction: column; align-items: center; margin-top: 40px; }

/* "Projetar o seu móvel com a MadMais" em cima e "Usar a versão para marceneiros" embaixo, como botão de texto, pela EN1, a 8 pixels
   um do outro, o espaço entre controles da regra 45. Desde o "aplicar" da recepção com o vídeo, os 2 botões ficam embaixo das
   boas-vindas, sem a pergunta da tela 4, que saiu pela AB19. */
.entrada-acoes { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
/* Os 2 botões com a mesma largura, 352 pixels, pela SP155, e o cheio com 48 pixels de altura, a h-12 da escala do design system,
   e o texto de 16, o text-base, no lugar dos 40 e dos 14 do tamanho lg do botão (Button/tools.ts, linha 22), como exceção da regra
   45, pela mensagem de Aline Miyaki de 23/10 na EN1, como a exceção do botão de enviar da tela 4. O espaço dentro do botão fica nos
   24 pixels de cada lado do tamanho lg, pela SP155, e a largura passou dos 320 da folha 6 a 352, para caber o texto e a seta para
   a direita da regra 135, que entrou depois da folha. */
.entrada-botao-principal { box-sizing: border-box; width: 352px; height: 48px !important; padding: 0 24px !important; font-size: 16px !important; line-height: 24px; }
/* O foco do teclado nos botões do design system da página e das páginas cinza fica no azul principal, como na página do projeto,
   porque o anel do design system mede 2,52:1 sobre o branco, pela regra 38; o botão que abre uma explicação tem o data-slot
   "tooltip-trigger", e por isso entra pela classe. */
.entrada-botao-principal:focus-visible, .entrada [data-slot="button"]:focus-visible, .pagina-cinza [data-slot="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
/* "Usar a versão para marceneiros": sem borda e sem fundo, sublinhado com o ponteiro em cima, pelo pedido de Aline Miyaki na EN1,
   no lugar do fundo azul claro que a regra 81 dá ao botão sem caixa que ocupa mais que o texto; pressionado, o texto passa ao
   brand-800, pela regra 119. Travado, enquanto o botão de cima espera, ele tem a aparência do que não se clica, da regra 49
   (.botao-travado), sem o sublinhado. */
.entrada-botao-de-texto { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 352px; height: 48px; padding: 0 24px; border: 0; border-radius: 8px; background: none; color: var(--primary); font: inherit; font-size: 16px; line-height: 24px; font-weight: 500; cursor: pointer; }
.entrada-botao-de-texto:hover { text-decoration: underline; text-underline-offset: 3px; }
.entrada-botao-de-texto:active { color: var(--sb-ds-brand-800); text-decoration: underline; text-underline-offset: 3px; }
.entrada-botao-de-texto:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.entrada-botao-de-texto.botao-travado, .entrada-botao-de-texto.botao-travado:hover, .entrada-botao-de-texto.botao-travado:active { text-decoration: none; }

/* A caixa das vagas que acabaram, pela EN11, no lugar dos 2 botões: o fundo cinza do design system, 24 pixels dentro e 8 de canto,
   como a folha 6, e o texto cinza no cinza 700, pela regra 132. */
/* Desde o "aplicar" da recepção com o vídeo, a caixa fica no lugar dos 2 botões, a 40 pixels das boas-vindas, pelo espaço de cima de
   .entrada-escolha, e por isso fica sem a margem de cima. */
.entrada-caixa-das-vagas { box-sizing: border-box; max-width: 560px; margin: 0 auto; padding: 24px; border-radius: 8px; background: var(--muted); }
.entrada-caixa-titulo { margin: 0; color: var(--foreground); font-size: 16px; line-height: 24px; font-weight: 600; }
.entrada-caixa-titulo:focus { outline: none; }
.entrada-caixa-texto { margin: 8px auto 0; max-width: 37em; color: var(--sb-ds-neutral-700); text-wrap: pretty; } /* text-wrap: a última linha sem 1 palavra sozinha */
.entrada-acoes.entrada-acoes-da-caixa { height: auto; margin-top: 16px; }

/* A ajuda depois da falha, embaixo dos botões, pela EN9 e pela SP147, numa caixa que a separa dos 2 botões de cima, pelo pedido de
   Aline Miyaki de 28/10: o fundo cinza do design system, 16 pixels dentro e 8 de canto, como a caixa das vagas, com a frase no
   cinza 700, pela regra 132, e o botão pequeno com a borda azul, pela regra 81, que abre o WhatsApp da equipe. */
.entrada-ajuda { display: grid; justify-items: center; }
.entrada-ajuda:not(:empty) { margin-top: 16px; }
.entrada-caixa-da-ajuda { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 560px; padding: 16px 24px; border-radius: 8px; background: var(--muted); }
.entrada-ajuda-frase { margin: 0; max-width: 37em; color: var(--sb-ds-neutral-700); }

/* As páginas cinza da entrada (componentes/pagina-cinza.js): as páginas da tela pequena (EN2 e EN5), com a forma da página de quem
   saiu da conta (.saiu): o fundo cinza claro, o texto no cinza 700 e o conteúdo no meio, embaixo da barra do topo só com o
   logotipo, que fica com a classe .marca-sem-link da página da escolha. Desde o "aplicar" da recepção com o vídeo, de 03/11, a
   passagem "Abrindo o Cortecloud" (EN3) é a tela azul, na seção do "aplicar", logo abaixo, e a classe .passagem-texto saiu. */
.pagina-cinza { box-sizing: border-box; min-height: 100dvh; padding: 81px 16px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--muted); color: var(--sb-ds-neutral-700); text-align: center; } /* 81 pixels: os 49 da barra e os 32 do topo da página ao corpo, pela regra 45, como .conteudo */
.pagina-cinza-conteudo { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 37em; }
/* O título com 20 pixels de letra, o text-xl do design system, como a folha 6 desenha estas páginas na tela do celular. */
.pagina-cinza-titulo { margin: 0; max-width: 28em; color: var(--foreground); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.pagina-cinza-titulo:focus { outline: none; }
.pagina-cinza-texto { margin: 0; text-wrap: pretty; }
/* A frase da ajuda da EN5, com 12 pixels de letra, 24 pixels mais longe do texto de cima que os 16 entre os outros, como a folha 6. */
.pagina-cinza-ajuda { margin: 24px 0 0; font-size: 12px; line-height: 16px; text-wrap: pretty; }

/* ---------- O "aplicar" da recepção com o vídeo, de 03/11/2026 ----------
   Pelas etapas 1 a 5 do plano em product/plans/2026-11-03-10-16-24-aplicar-recepcao-com-video.md e pela lista das decisões do
   estudo (product/plans/2026-11-03-09-19-59-estudo-recepcao-com-video-decisoes.md), a partir dos estilos do estudo
   (estudos/estudo-recepcao-com-video-nuvem.css, estudo-recepcao-com-video.css e estudo-recepcao-com-video-2.css), sem a câmera lenta
   do estudo. O movimento da nuvem acompanha uma espera e não abre nem fecha nada, e por isso fica fora dos 4 tempos da regra 149,
   como o círculo que gira; a passagem do vídeo à página usa os tempos dela. */

/* A tela azul da passagem e da espera do vídeo (componentes/passagem.js), pela AB10: o azul do logo, sem a barra do topo, com a
   nuvem e a frase no meio, a 16 pixels uma da outra. */
.tela-azul { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--primary); color: var(--primary-foreground); }

/* A nuvem que passa pelos estados até existir (componentes/nuvem.js), pela AB13: o desenho tem 17% da largura da janela, sem máximo,
   e por isso a nuvem cresce com a tela, pela AB18; a nuvem ocupa 3/4 do desenho, e o resto guarda o lugar da chapa. */
.nuvem-svg { width: 17%; height: auto; overflow: visible; opacity: 0; transition: opacity 0.2s; }
.nuvem-anda .nuvem-svg { opacity: 1; }
.nuvem-sai .nuvem-svg { opacity: 0; }
/* O traço tem 1,5 pixel em qualquer tamanho da nuvem. A chapa é o branco a 12% sobre o azul. */
.nuvem-chapa { fill: color-mix(in srgb, var(--primary-foreground) 12%, transparent); stroke: var(--primary-foreground); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.3s; } /* 1,5 pixel: o traço fino do desenho, como o estudo */
.nuvem-peca { fill: var(--primary-foreground); fill-opacity: 0; stroke: var(--primary-foreground); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.7s ease-out, fill-opacity 0.3s ease-out, transform 1s ease-in-out; } /* 1,5 pixel: o traço fino do desenho, como o estudo */
.nuvem-lado { fill: var(--sb-ds-brand-200); opacity: 0; transition: opacity 0.25s, transform 0.5s ease-in-out; }
.nuvem-olho { fill: var(--primary); transform-box: fill-box; transform-origin: center; transform: scaleY(0); transition: transform 0.25s ease-out; }
.nuvem-sorriso { fill: none; stroke: var(--primary); stroke-width: 10; stroke-linecap: round; opacity: 0; transition: opacity 0.25s; } /* 10 unidades do desenho, de 768 de largura: o sorriso do último quadro do vídeo */
/* 1. O desenho: as 7 peças em traço, de baixo para cima, em 2,8 segundos, mais devagar que os outros estados, pela AB14. */
.nuvem-desenho .nuvem-peca { stroke-dashoffset: 0; transition-delay: calc(var(--i) * 0.35s), 0s, 0s; }
/* 2. O plano de corte: a chapa aparece, e as peças vão para o lugar delas na chapa, pelo script. */
.nuvem-plano .nuvem-chapa { opacity: 1; }
/* 3. O corte: as peças ficam brancas, uma depois da outra. */
.nuvem-corte .nuvem-peca { fill-opacity: 1; transition-delay: 0s, calc(var(--i) * 0.08s), 0s; }
/* 4. A montagem: a chapa some, e as peças voltam ao lugar delas na nuvem girando 1 volta, metade para cada lado, pelo script. */
.nuvem-montagem .nuvem-chapa { opacity: 0; }
.nuvem-montagem .nuvem-peca { transition-duration: 0.7s, 0.3s, 1.25s; }
/* 5. O 3D: a lateral das peças aparece atrás delas, como a grossura da chapa, e volta. */
.nuvem-3d .nuvem-lado { opacity: 1; }
/* 6. A nuvem pronta e acordada: os olhos abrem, piscam e olham para os 2 lados, e a nuvem sobe e desce, a cada 3 segundos. */
.nuvem-pronta .nuvem-olho { transform: scaleY(1); }
.nuvem-pronta.nuvem-acordada .nuvem-olho { animation: nuvem-pisca 3s ease-in-out infinite, nuvem-olha 3s ease-in-out infinite; }
.nuvem-pronta.nuvem-acordada .nuvem-svg { animation: nuvem-flutua 3s ease-in-out infinite; }
.nuvem-sorri .nuvem-sorriso { opacity: 1; }
/* A troca rápida para o estado pronto, quando o vídeo fica pronto antes de a volta terminar, em 0,4 segundo, pela AB1. */
.nuvem-rapido .nuvem-peca, .nuvem-rapido .nuvem-lado, .nuvem-rapido .nuvem-chapa { transition-duration: 0.4s !important; transition-delay: 0s !important; }
.nuvem-sem-transicao .nuvem-peca, .nuvem-sem-transicao .nuvem-lado, .nuvem-sem-transicao .nuvem-chapa, .nuvem-sem-transicao .nuvem-olho, .nuvem-sem-transicao .nuvem-svg, .nuvem-sem-transicao .nuvem-frase { transition: none !important; }
@keyframes nuvem-pisca { 0%, 20%, 24%, 100% { transform: scaleY(1); } 22% { transform: scaleY(0.08); } }
@keyframes nuvem-olha { 0%, 35%, 100% { translate: 0 0; } 45%, 55% { translate: -10px 0; } 65%, 75% { translate: 10px 0; } } /* 10 unidades do desenho: o olhar para os lados, como o estudo */
@keyframes nuvem-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } } /* 4 pixels: a nuvem sobe e desce pouco, como o estudo */
/* A frase, que aparece 0,3 segundo depois de a tela abrir, como a EN3, com o brilho que passa no texto, pela AB14: uma faixa branca
   anda da esquerda para a direita, a cada 2,4 segundos; o resto do texto fica com 85% de branco, com 4,75:1 de contraste sobre o
   azul, pela conta de 03/11 da lista das decisões, porque, com 70%, a parte mais apagada ficava com 3,74:1, abaixo dos 4,5:1. */
.nuvem-frase { min-height: 20px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; opacity: 0; } /* 20 pixels: a altura de 1 linha da letra de 14, para nada andar quando a frase aparece */
.nuvem-frase:focus { outline: none; }
.nuvem-anda .nuvem-frase { opacity: 1; }
.nuvem-texto { background: linear-gradient(90deg, color-mix(in srgb, var(--primary-foreground) 85%, transparent) 0%, color-mix(in srgb, var(--primary-foreground) 85%, transparent) 40%, var(--primary-foreground) 50%, color-mix(in srgb, var(--primary-foreground) 85%, transparent) 60%, color-mix(in srgb, var(--primary-foreground) 85%, transparent) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nuvem-brilho 2.4s linear infinite; }
@keyframes nuvem-brilho { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Quem pediu menos movimento vê a nuvem pronta e parada, com os olhos abertos, e a frase parada, em branco. */
.nuvem-menos .nuvem-svg, .nuvem-menos .nuvem-olho { animation: none !important; }
.nuvem-menos .nuvem-texto { animation: none; color: var(--primary-foreground); background: none; }

/* A nuvem azul parada (componentes/nuvem.js, nuvemAzul): as peças azuis com o vão branco entre elas, e, com o rosto, os olhos
   brancos com a pupila azul e o sorriso branco, como o último quadro do vídeo. */
.nuvem-azul-peca { fill: var(--primary); stroke: var(--background); stroke-width: 5; stroke-linejoin: round; } /* 5 unidades do desenho: o vão branco entre as peças do logo */
.nuvem-azul-olho { fill: var(--background); }
.nuvem-azul-pupila { fill: var(--primary); }
.nuvem-azul-sorriso { fill: none; stroke: var(--background); stroke-width: 10; stroke-linecap: round; } /* 10 unidades do desenho: o sorriso do último quadro do vídeo */

/* A recepção (componentes/recepcao.js): o vídeo cobre a janela inteira, pela AB9, e some em 0,2 segundo no fim, o tempo de fechar
   o que é médio, pela regra 149. */
.recepcao-video { position: fixed; inset: 0; z-index: 41; width: 100%; height: 100%; object-fit: cover; background: var(--background); transition: opacity var(--tempo-do-medio-ao-fechar) var(--curva-de-sair); }
.recepcao-video[hidden] { display: none; }
.recepcao-video-some { opacity: 0; }
/* Da tela azul à página, pela AB22: o azul some no tempo em que o vídeo some, enquanto a nuvem pronta desliza até a página. */
.tela-azul.recepcao-azul-some { opacity: 0; transition: opacity var(--tempo-do-medio-ao-fechar) var(--curva-de-sair); }
/* A nuvem do último quadro, que desliza até o alto da página em 0,4 segundo, o tempo da distância grande, começando e terminando
   devagar, porque fica na tela e só muda de lugar e de tamanho; o rosto some no mesmo tempo, pela AB17. Pelo "Pular o vídeo", a
   nuvem aparece antes, em 0,25 segundo. */
.recepcao-nuvem { position: fixed; left: 0; top: 0; z-index: 45; height: auto; transform-origin: 0 0; opacity: 0; pointer-events: none; transition: transform var(--tempo-do-grande) var(--curva-de-mudar), opacity var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar); }
.recepcao-nuvem-visivel { opacity: 1; }
.recepcao-nuvem :is(.nuvem-azul-olho, .nuvem-azul-pupila, .nuvem-azul-sorriso) { transition: opacity var(--tempo-do-grande) var(--curva-de-mudar); }
.recepcao-nuvem-sem-rosto :is(.nuvem-azul-olho, .nuvem-azul-pupila, .nuvem-azul-sorriso) { opacity: 0; }
.recepcao-sem-transicao, .recepcao-sem-transicao * { transition: none !important; }
/* A página antes da passagem: a barra do topo fica acima da janela, e as boas-vindas e os botões ficam 8 pixels abaixo do lugar
   deles, transparentes. Quando a classe sai, a barra desce, e os 2 grupos sobem, um depois do outro, em 0,25 segundo, o tempo de
   abrir o que é médio, pela regra 149: a barra depois de 0,2 segundo, as boas-vindas depois de 0,3 e os botões depois de 0,4, e a
   página termina de aparecer em 0,65 segundo, pela AB17. */
.recepcao-pagina .barra { transition: transform var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar) 0.2s; }
.recepcao-pagina .entrada-ola { transition: opacity var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar) 0.3s, transform var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar) 0.3s; }
.recepcao-pagina .entrada-escolha { transition: opacity var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar) 0.4s, transform var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar) 0.4s; }
.recepcao-antes .barra { transform: translateY(-49px); } /* 49 pixels: a altura da barra, com a linha de 1 embaixo, pela regra 48 */
.recepcao-antes :is(.entrada-ola, .entrada-escolha) { opacity: 0; transform: translateY(8px); }
/* "Ligar o som", no canto de baixo, à esquerda, e "Pular o vídeo", no canto de baixo, à direita, por cima do vídeo, pela AB3 e
   pela AB4: o fundo branco, a borda e o texto azuis, como no estudo, e, com o ponteiro em cima e pressionados, os tons da regra 81 e
   da regra 119. O anel do foco tem 3 voltas, azul, branca e azul, para aparecer sobre o azul e sobre o branco do vídeo. Os 2 crescem
   com a tela, pela AB18: 40 pixels de altura, a 24 dos cantos, até 1.439 pixels de largura; 48, a 32 dos cantos, de 1.440 a 1.919; e
   56, a 40 dos cantos, a partir de 1.920. Com som, o botão do som fica só com o ícone, quadrado. "Pular o vídeo" aparece em 0,25
   segundo, pela transparência, o tempo de abrir o que é médio. */
.recepcao-botao { position: fixed; z-index: 46; bottom: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: 40px; padding: 0 16px; border: 1px solid var(--primary); border-radius: 8px; background: var(--background); color: var(--sb-ds-brand-800); font: inherit; font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.recepcao-botao svg { width: 16px; height: 16px; flex: none; }
.recepcao-botao:hover { background: var(--sb-ds-brand-100); }
.recepcao-botao:active { background: var(--sb-ds-brand-200); }
.recepcao-botao:focus-visible { outline: 2px solid var(--background); outline-offset: 2px; box-shadow: 0 0 0 6px var(--primary); } /* 6 pixels: o azul por dentro e por fora do anel branco de 2 pixels, que fica a 2 pixels do botão */
.recepcao-som { left: 24px; }
.recepcao-pular { right: 24px; animation: recepcao-aparece var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar); }
.recepcao-so-icone { width: 40px; padding: 0; }
@keyframes recepcao-aparece { from { opacity: 0; } }
@media (min-width: 1440px) {
  .recepcao-botao { bottom: 32px; height: 48px; padding: 0 24px; font-size: 18px; line-height: 28px; }
  .recepcao-botao svg { width: 20px; height: 20px; } /* 20 pixels: o ícone da altura de 48 e da de 56, como o estudo, porque a escala de ícones do design system vai de 16 a 24 */
  .recepcao-som { left: 32px; }
  .recepcao-pular { right: 32px; }
  .recepcao-so-icone { width: 48px; padding: 0; }
}
@media (min-width: 1920px) {
  .recepcao-botao { bottom: 40px; height: 56px; font-size: 20px; }
  .recepcao-som { left: 40px; }
  .recepcao-pular { right: 40px; }
  .recepcao-so-icone { width: 56px; padding: 0; }
}

/* A janela "Vídeo de boas-vindas" (componentes/janela-do-video.js), pela AB16: 896 pixels de largura, a da exceção da regra 50 do
   quadro "Os ambientes do projeto", sem os botões do rodapé, com o vídeo a 16 pixels do título, como o estudo. */
.janela-da-app.janela-do-video { width: 896px; max-width: calc(100vw - 32px); row-gap: 16px; }
/* A miniatura de um vídeo do YouTube e a janela que toca o vídeo (componentes/janela-do-video-do-youtube.js), desde o "aplicar" do
   estudo de 04/11, pela DH4 e pela DH5, como as partes 4 e 5 do estudo (estudos/estudo-preco-loja-economia-e-dobradica.css,
   .estudo-video e seguintes): a capa de 256 × 144 pixels, com o círculo azul de 56 e o triângulo, e a duração no canto. Com o
   ponteiro em cima, o fundo passa ao azul claro, e o título, ao azul, pela regra 81; o vídeo da janela fica com 16:9, como o vídeo
   de boas-vindas. */
.miniatura-do-video { display: flex; align-items: center; gap: 16px; box-sizing: border-box; width: 100%; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.miniatura-do-video:hover { background: var(--secondary); }
.miniatura-do-video:hover .miniatura-do-video-titulo { color: var(--primary); }
.miniatura-do-video:active { background: var(--sb-ds-brand-200); }
.miniatura-do-video:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.miniatura-do-video-capa { position: relative; flex: none; width: 256px; height: 144px; border-radius: 8px; overflow: hidden; background: var(--sb-ds-neutral-200); }
.miniatura-do-video-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.miniatura-do-video-tocar { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); box-shadow: 0 0 0 2px var(--background); } /* -28 pixels: o círculo de 56 no meio da capa; 2: a borda branca, que separa o círculo da foto */
.miniatura-do-video-tocar svg { width: 24px; height: 24px; margin-left: 2px; } /* 2 pixels: o triângulo parece no meio só com 2 pixels para a direita */
.miniatura-do-video-tempo { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; border-radius: 4px; background: var(--sb-ds-neutral-900); color: var(--background); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } /* 4 pixels: o selo do tempo colado ao canto da foto, como no YouTube */
.miniatura-do-video-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* 4 pixels: o complemento colado ao título, pela regra 52 */
.miniatura-do-video-titulo { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--foreground); }
.miniatura-do-video-complemento { font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.guia-de-montagem-video-do-passo { display: block; margin-top: 16px; }
.guia-de-montagem-video-do-passo .miniatura-do-video { width: auto; max-width: min(100%, 640px); padding-right: 24px; } /* a miniatura com a largura do conteúdo dela, e não a do cartão inteiro do módulo; 24 pixels: o espaço depois do texto, como o espaço do cartão */
.janela-do-youtube iframe.janela-do-video-video { border: 0; }
/* A janela "Conheça a MadMais" (componentes/janela-da-loja.js), desde o "aplicar" do estudo de 04/11, como a parte 2 do estudo
   (estudos/estudo-preco-loja-economia-e-dobradica.css, .estudo-janela-da-loja e seguintes): 576 pixels, pela regra 50, e no máximo
   736 de altura, a de uma tela de 800 pixels com 32 de cada lado; o título e o X ficam parados, e o corpo rola por dentro, a exceção
   da regra 50 da DH2j, com 4 pixels de folga de cada lado para o anel do foco. */
.janela-da-app.janela-da-loja { display: flex; flex-direction: column; gap: 32px; overflow: hidden; max-height: min(736px, calc(100dvh - 32px)); }
.janela-da-loja > [data-slot="dialog-header"] { flex: none; }
.janela-da-loja-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: -4px; padding: 4px; display: grid; row-gap: 32px; } /* -4 e 4 pixels: a folga do anel do foco, que a área que rola cortaria */
.janela-da-loja-subtitulo { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); }
.janela-da-loja-onde .loja-linha svg { width: 16px; height: 16px; }
/* Os 4 passos numa linha em pé, pela DH2p, como a linha das etapas da Página do projeto: o ícone no círculo cinza de 40 pixels, o
   título no meio do círculo e a linha cinza de 2 pixels entre os círculos. */
.janela-da-loja-passos { margin: 16px 0 0; padding: 0; list-style: none; display: grid; row-gap: 16px; }
.janela-da-loja-passos li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.janela-da-loja-passos li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: -12px; width: 2px; background: var(--border); } /* 19 pixels: a linha de 2 no meio do círculo de 40; 44 e -12: 4 pixels de folga embaixo de um círculo e em cima do seguinte */
.janela-da-loja-passo-icone { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--muted); color: var(--sb-ds-neutral-700); } /* 9999 pixels: o círculo */
.janela-da-loja-passo-icone svg { width: 20px; height: 20px; } /* 20 pixels: o ícone no círculo de 40, como no estudo */
.janela-da-loja-passo-texto { display: grid; padding-top: 8px; } /* 8 pixels: o título de 24 no meio do círculo de 40 */
.janela-da-loja-passo-titulo { font-size: 16px; line-height: 24px; color: var(--foreground); }
.janela-da-loja-passo-complemento { font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
/* A fala do Módi, pela DH2m: o Módi inteiro, embaixo e à esquerda, e o balão ao lado, com a borda e a ponta do balão da linha do
   tempo da app, pela regra 79, e a ponta virada para o rosto do Módi. */
.janela-da-loja-fala { margin-top: 8px; display: flex; align-items: flex-end; gap: 16px; } /* 16 pixels: os 8 da ponta e 8 até o Módi, pela regra 91 */
.janela-da-loja-modi { flex: none; display: block; width: 88px; height: auto; }
.janela-da-loja-balao { position: relative; flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 16px; border: 1px solid var(--sb-ds-neutral-400); border-radius: 8px; background: var(--background); color: var(--foreground); font-size: 14px; line-height: 20px; }
.janela-da-loja-balao::before { content: ""; position: absolute; bottom: 29px; left: -9px; width: 16px; height: 16px; box-sizing: border-box; border-left: 1px solid var(--sb-ds-neutral-400); border-bottom: 1px solid var(--sb-ds-neutral-400); border-radius: 0 0 0 2px; background: var(--background); rotate: 45deg; } /* 29 pixels: o meio da ponta na altura do rosto do Módi; -9: o meio da ponta na borda do balão; 2: o canto da ponta, como na linha do tempo */
.janela-da-loja-balao p { margin: 0; }
.janela-da-loja-balao-link { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 500; text-decoration: none; cursor: pointer; }
.janela-da-loja-balao-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* 3 pixels: o sublinhado do botão de texto, pela regra 81 */
.janela-da-loja-balao-link svg { width: 16px; height: 16px; }
.janela-da-loja-balao-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* 4 pixels: o canto do anel do foco no link */
.janela-do-video-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--foreground); }

/* ---------- O "aplicar" do guia de montagem, de 29/10 ----------
   Pelas etapas 2 e 3 do plano em product/plans/2026-10-28-16-31-58-aplicar-guia-de-montagem.md. As classes do guia começam por
   "guia-de-montagem-", porque as classes "guia-" já são de outros guias, como o guia de medir. */
/* A caixa "Você já retirou as peças?", na etapa 5, é a .caixa-da-pergunta da pergunta da compra, pela regra 126, com o anel da
   chegada e a saída da folha impressa dela; o botão "Já retirei as peças" fica 16 pixels abaixo da pergunta, como as respostas
   da compra. */
.caixa-da-retirada-acao { margin-top: 16px; display: flex; }
/* O título do guia, na etapa 6, é o lugar da ação, pela regra 131: 8 pixels de espaço dentro e a mesma medida para fora, para o
   texto ficar no lugar, e o anel azul com a folga branca da regra 68 em volta do texto, como .momento-bloco, pela classe única do
   anel (.anel-do-que-falta), desde o "aplicar" do anel do que falta, de 31/10. */
.guia-de-montagem-titulo { width: fit-content; margin: -8px; padding: 8px; border-radius: 8px; }
/* O aviso amarelo da peça que faltou ou quebrou (GM37 e GT1), 16 pixels abaixo do título, como no estudo, com o jeito dos avisos
   amarelos largos da Página do projeto (.aviso-atencao e .aviso-com-botao), pela regra 109. */
.guia-de-montagem-aviso { margin-top: 16px; }
/* O que espera o time Alexandria ou a MadMais, com a borda tracejada só com ?pendentes=todos, pela P4, como .espera do estudo. */
.guia-de-montagem-pendente { outline: 1px dashed var(--sb-ds-neutral-500); outline-offset: 4px; border-radius: 2px; } /* 4 pixels: a borda tracejada não encosta no texto; 2 pixels: o canto da borda, como no estudo */

/* ---------- O corpo do guia de montagem, de 29/10: os blocos 1 a 4, a lista de montagem, a ajuda e o fim ----------
   Pelas etapas 4 a 8 do plano do "aplicar" do guia de montagem, com a aparência da 33ª versão do estudo
   (estudos/estudo-tela-4-guia-de-montagem.html), adaptada às regras da app: o canto de 8 pixels do cartão e de 10 do painel que
   abre por cima, pela regra 136; o texto corrido com até 37em, pela regra 8; e o cinza 700 sobre o fundo cinza e o azul claro,
   pela regra 132. */
.guia-de-montagem-bloco { margin-top: 32px; scroll-margin-top: 81px; } /* 81 pixels: a barra do topo, com 49, e os 32 do topo da página */
.guia-de-montagem-bloco + .guia-de-montagem-bloco { padding-top: 32px; border-top: 1px solid var(--border); }
.guia-de-montagem-bloco-titulo, .guia-de-montagem-o-que-precisa-titulo, .guia-de-montagem-fim-titulo { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.guia-de-montagem-bloco-texto { margin: 8px 0 0; max-width: 37em; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
/* Os itens de lista do guia, pela regra 52: o título preto de 16 pixels e o complemento cinza de 14, colado no título. */
.guia-de-montagem-item-titulo { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--foreground); }
.guia-de-montagem-item-complemento { display: block; max-width: 37em; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.guia-de-montagem-item-titulo .botao-informacao, .guia-de-montagem-peca-nome .botao-informacao { margin: -2px 0 -2px 4px; vertical-align: middle; } /* -2 pixels: o "i" de 24 cabe na linha de 20; 4 pixels: o "i" fica junto do nome, como no desenho das peças */
/* O que espera alguém, com a borda tracejada só com ?pendentes=todos (P4), também no passo e no cartão da ferramenta. */
li.guia-de-montagem-pendente, p.guia-de-montagem-pendente { border-radius: 8px; }

/* Os 2 desenhos em 3D de exemplo, escritos pelo comando estudos/desenhos-das-pecas/gerar-os-desenhos.mjs (GM11), com a mesma
   escala e os botões dos nomes no lugar pela porcentagem do desenho, como no estudo. */
.guia-de-montagem-desenhos { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 416px) minmax(0, 312px); gap: 32px; }
.guia-de-montagem-desenho { margin: 0; }
.guia-de-montagem-desenho-titulo { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.guia-de-montagem-desenho-area { position: relative; margin-top: 8px; }
.guia-de-montagem-desenho-area > svg { display: block; width: 100%; height: auto; }
.guia-de-montagem-desenho-area polygon { stroke: var(--sb-ds-neutral-500); stroke-width: 1; stroke-linejoin: round; }
.guia-de-montagem-face-cima { fill: var(--sb-ds-neutral-50); }
.guia-de-montagem-face-frente { fill: var(--sb-ds-neutral-200); }
.guia-de-montagem-face-direita { fill: var(--sb-ds-neutral-300); }
.guia-de-montagem-linha-do-nome { stroke: var(--sb-ds-neutral-700); stroke-width: 1; }
.guia-de-montagem-ponta-do-nome { fill: var(--sb-ds-neutral-700); stroke: var(--background); stroke-width: 1; }
.guia-de-montagem-nome-no-desenho { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9999px; background: var(--background); color: var(--foreground); font: inherit; font-size: 14px; line-height: 20px; white-space: nowrap; cursor: pointer; } /* 4 pixels: o "i" fica junto do nome, como no estudo */
.guia-de-montagem-nome-no-desenho svg { color: var(--primary); }
.guia-de-montagem-nome-no-desenho:hover { background: var(--secondary); color: var(--primary); }
.guia-de-montagem-nome-no-desenho:active { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
.guia-de-montagem-nome-no-desenho:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* A etiqueta de 1 lateral do projeto, com a peça pequena e a frase que a apresenta, 32 pixels abaixo dos desenhos, porque a
   etiqueta é outro assunto do bloco, como no estudo. */
.guia-de-montagem-etiqueta-na-peca { margin-top: 32px; display: flex; align-items: center; gap: 16px; max-width: 760px; } /* 760 pixels: a largura dos 2 desenhos, com os 32 entre eles */
.guia-de-montagem-etiqueta-na-peca .guia-de-montagem-bloco-texto { margin-top: 0; }
.guia-de-montagem-peca-com-etiqueta { flex: none; width: 120px; height: 96px; }
.guia-de-montagem-painel { fill: var(--muted); stroke: var(--sb-ds-neutral-500); stroke-width: 1; }
.guia-de-montagem-etiqueta-mini { fill: var(--background); stroke: var(--primary); stroke-width: 2; }
.guia-de-montagem-linha-da-etiqueta-mini { stroke: var(--sb-ds-neutral-400); stroke-width: 2; }
.guia-de-montagem-qr-da-etiqueta-mini { fill: var(--sb-ds-neutral-700); stroke: none; }
.guia-de-montagem-etiqueta { margin: 16px 0 0; max-width: 760px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--background); }
.guia-de-montagem-etiqueta svg { display: block; width: 100%; height: auto; }
.guia-de-montagem-etiqueta-espera { display: block; padding: 16px; color: var(--muted-foreground); }
.guia-de-montagem-contorno { fill: none; stroke: var(--foreground); stroke-width: 2; }
.guia-de-montagem-marca-do-campo circle { fill: var(--foreground); }
.guia-de-montagem-marca-do-campo text { fill: var(--background); font-family: var(--font-sans); font-size: 22px; font-weight: 600; } /* 22 pontos do desenho de 1000 × 500, que aparece com cerca de 16 pixels na tela, como no estudo */
.guia-de-montagem-nota-da-etiqueta { margin: 8px 0 0; max-width: 37em; color: var(--muted-foreground); }
/* As letras A a D, cada uma num círculo de 24 pixels no ponto do bloco, e o texto 32 pixels depois, pela regra 47. */
.guia-de-montagem-letras { margin: 16px 0 0; padding: 0; list-style: none; display: grid; row-gap: 16px; max-width: 760px; }
.guia-de-montagem-letras > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
.guia-de-montagem-letra { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9999px; background: var(--foreground); color: var(--background); font-size: 12px; line-height: 16px; font-weight: 600; }
/* O valor da etiqueta, como a etiqueta escreve, na caixa de campo da etiqueta, pela regra 93. Não é um selo: o canto de 2 pixels
   imita o campo impresso, como no estudo, e por isso a classe não leva "etiqueta" no nome, que conferir-os-padroes.mjs lê como selo. */
.guia-de-montagem-campo-impresso { display: inline-block; padding: 0 4px; border: 1px solid var(--foreground); border-radius: 2px; color: var(--foreground); font-family: Arial, sans-serif; line-height: 18px; white-space: nowrap; } /* 4 e 2 pixels: o espaço e o canto da caixa, como no desenho da etiqueta; 18 pixels: a caixa, com a borda, cabe na linha de 20 */
.guia-de-montagem-campo-impresso.grande { padding: 3px 8px; font-size: 16px; line-height: 24px; font-weight: 700; } /* 3 pixels: a caixa do número fica com 32 pixels de altura, com a borda */

/* As pilhas de peças e as ferramentas, 1 cartão para cada, em colunas de pelo menos 240 pixels que enchem a linha. */
.guia-de-montagem-pilhas, .guia-de-montagem-ferramentas { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 760px; }
.guia-de-montagem-pilha { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.guia-de-montagem-ferramenta { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.guia-de-montagem-quadro { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--sb-ds-neutral-500); }
.guia-de-montagem-ferramenta .guia-de-montagem-quadro { color: var(--foreground); }
.guia-de-montagem-o-que-precisa { margin-top: 32px; }
.guia-de-montagem-pilhas + .guia-de-montagem-bloco-texto { margin-top: 16px; }
/* As caixas "Montado" e as da lista, com a borda azul e o fundo branco, como a caixa da declaração, para a forma da caixa passar de
   3:1 contra o fundo, pelo critério 1.4.11 da WCAG; marcada, a caixa fica azul cheia. */
.guia-de-montagem-marcar-montado [role="checkbox"], .guia-de-montagem-tarefa-marcar [role="checkbox"] { cursor: pointer; background: var(--background); border-color: var(--primary); }
.guia-de-montagem-marcar-montado [role="checkbox"][data-state="checked"], .guia-de-montagem-tarefa-marcar [role="checkbox"][data-state="checked"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.guia-de-montagem-marcar-montado [role="checkbox"]:focus-visible, .guia-de-montagem-tarefa-marcar [role="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* O bloco 4: os módulos por ambiente, em cartões com o topo cinza, como no estudo. */
.guia-de-montagem-cartoes { margin-top: 16px; display: grid; row-gap: 16px; }
.guia-de-montagem-ambiente { margin: 16px 0 0; font-size: 16px; line-height: 24px; font-weight: 600; } /* 16 pixels: com os 16 da grade, o ambiente fica a 32 do cartão de cima e a 16 dos módulos dele */
.guia-de-montagem-ambiente:first-child { margin-top: 0; }
.guia-de-montagem-cartao { border: 1px solid var(--border); border-radius: 8px; scroll-margin-top: 73px; } /* 73 pixels: os 49 da barra do topo e 24 de folga */
.guia-de-montagem-cartao-topo { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 16px; column-gap: 16px; align-items: center; padding: 16px; border-radius: 7px; background: var(--muted); } /* 7 pixels: o canto de 8 do cartão, por dentro da borda de 1 */
/* Pela regra 88: o topo do cartão aberto fica parado embaixo da barra do topo enquanto os passos rolam, e sai aos poucos quando o
   cartão acaba, porque o topo fica dentro do cartão. */
.guia-de-montagem-cartao.aberto .guia-de-montagem-cartao-topo { position: sticky; top: 49px; z-index: 2; border-radius: 7px 7px 0 0; } /* 49 pixels: a barra do topo; 7 pixels: o canto, como acima */
.guia-de-montagem-cartao-topo:hover { background: var(--secondary); }
.guia-de-montagem-cartao-topo:hover .guia-de-montagem-cartao-nome { color: var(--primary); }
.guia-de-montagem-cartao-texto { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.guia-de-montagem-cartao-titulo { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.guia-de-montagem-cartao-gatilho { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.guia-de-montagem-cartao-gatilho::after { content: ""; position: absolute; inset: 0; border-radius: 7px; cursor: pointer; } /* 7 pixels: o canto do topo */
.guia-de-montagem-cartao-gatilho:focus-visible { outline: none; }
.guia-de-montagem-cartao-gatilho:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }
.guia-de-montagem-cartao-nome { font-size: 16px; line-height: 24px; font-weight: 600; }
.guia-de-montagem-cartao-numero { color: var(--sb-ds-neutral-700); font-weight: 400; } /* OE1: o "01." em cinza, no cinza 700 sobre o cinza do topo, pela regra 132 */
.guia-de-montagem-medidas { font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-700); font-variant-numeric: tabular-nums; }
.guia-de-montagem-medidas b { font-weight: 600; }
.guia-de-montagem-i-do-cartao, .guia-de-montagem-marcar-montado { position: relative; z-index: 1; display: inline-flex; }
.guia-de-montagem-cartao-direita { display: inline-flex; align-items: center; gap: 16px; }
.guia-de-montagem-cartao-pecas { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guia-de-montagem-cartao-direita .guia-de-montagem-i-do-cartao { margin-left: -12px; } /* -12 pixels: o "i" de muitas peças fica a 4 do número de peças, e não a 16 */
.guia-de-montagem-marcar-montado { align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 8px; font-weight: 500; cursor: pointer; }
.guia-de-montagem-marcar-montado:hover { background: var(--sb-ds-brand-200); }
.guia-de-montagem-seta { display: flex; color: var(--primary); }
/* A seta do cartão gira em 0,25 segundo ao abrir e em 0,2 ao fechar, e muda sem girar para quem pediu menos movimento, pela MI2 e
   pela regra 149, desde a etapa 2 do "aplicar" das microinterações, de 01/11; até essa etapa, virava na hora. */
.guia-de-montagem-seta svg { transition: rotate var(--tempo-do-medio-ao-fechar) var(--curva-de-mudar); }
.guia-de-montagem-cartao.aberto .guia-de-montagem-seta svg { rotate: 180deg; transition-duration: var(--tempo-do-medio-ao-abrir); }
@media (prefers-reduced-motion: reduce) { .guia-de-montagem-seta svg { transition: none; } }
.guia-de-montagem-cartao-corpo { padding: 24px 16px; }
.guia-de-montagem-cartao-corpo[hidden] { display: none; }
.guia-de-montagem-componentes-do-modulo { margin: 0 0 24px; display: flex; flex-direction: column; max-width: 640px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.guia-de-montagem-rotulo { color: var(--muted-foreground); }
.guia-de-montagem-componentes-do-passo { margin: 8px 0 0; display: flex; flex-wrap: wrap; column-gap: 8px; }
.guia-de-montagem-sem-ordem { margin-top: 0; }
/* Os passos, com o número num círculo de 24 pixels e o texto 32 pixels depois, pela regra 47, e 32 pixels entre os passos. */
.guia-de-montagem-passos { margin: 0; padding: 0; list-style: none; display: grid; row-gap: 32px; }
.guia-de-montagem-passos > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
.guia-de-montagem-passo-numero { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid var(--sb-ds-neutral-300); border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--sb-ds-neutral-700); font-variant-numeric: tabular-nums; }
/* As peças de cada passo: o nome, a quantidade na coluna de 72 pixels, a largura de "2 peças" mais 24, pela regra 77, e "Ver onde fica". */
.guia-de-montagem-pecas-do-passo { margin: 8px 0 0; padding: 0; list-style: none; max-width: 640px; }
.guia-de-montagem-pecas-do-passo li { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; column-gap: 24px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.guia-de-montagem-pecas-do-passo li:first-child { border-top: 0; }
.guia-de-montagem-peca-etiqueta, .guia-de-montagem-peca-qtd { color: var(--muted-foreground); }
.guia-de-montagem-peca-qtd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.guia-de-montagem-ver-onde-fica { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } /* 4 pixels: a seta de abrir outra aba fica junto do texto */

/* O botão "Lista de montagem", parado na borda direita do conteúdo, a 24 pixels da borda de baixo da janela (GM27): o lugar do
   botão não ocupa espaço, fica logo depois do título do guia, para o botão vir depois do título na ordem do teclado (GM24), e
   fica parado a 24 pixels do fim da janela até o fim do guia; o botão e o painel ficam por cima do conteúdo e embaixo da barra do
   topo, que tem o z-index 20. */
.guia-de-montagem-lista-lugar { position: sticky; top: calc(100vh - var(--distancia-da-lista, 24px)); z-index: 15; height: 0; } /* 24 pixels: a distância da borda de baixo da janela, da GM27; z-index 15: em cima do topo parado dos cartões, que tem 2, e embaixo da barra do topo */
/* Pela P11: enquanto um aviso de baixo está à vista, o guia (telas/guia-de-montagem.js) muda --distancia-da-lista, e o botão fica 8
   pixels acima do aviso mais alto. Na subida, o botão acompanha o aviso, que já entra com a animação dele; na descida, o botão volta
   em 0,2 segundo, e quem pediu menos movimento ao sistema vê o botão mudar de lugar sem movimento. Quando o guia acaba, o botão para
   no fim do guia, como sem o aviso, e fica 8 pixels acima do aviso ou mais alto. Desde a etapa 5 do "aplicar" das microinterações, de
   01/11, pela regra 149, a descida anda pela posição (transform), pelo script do guia, e não mais pela transição do "top" daqui, que
   refazia a página a cada quadro. */
.guia-de-montagem-botao-da-lista { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9999px; background: var(--background); color: var(--foreground); font: inherit; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); cursor: pointer; } /* 40 pixels: o botão parado é maior que os botões da página, para ser achado, como no estudo */
.guia-de-montagem-botao-da-lista svg { color: var(--primary); }
.guia-de-montagem-botao-da-lista:hover, .guia-de-montagem-botao-da-lista[aria-expanded="true"] { background: var(--secondary); color: var(--primary); }
.guia-de-montagem-botao-da-lista:active { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
.guia-de-montagem-botao-da-lista:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.guia-de-montagem-botao-da-lista-conta { color: var(--sb-ds-neutral-700); font-variant-numeric: tabular-nums; } /* o cinza 700, que passa de 4,5:1 também no azul claro do ponteiro em cima, pela regra 132 */
/* O painel abre acima do botão, a 8 pixels dele, pela regra 91, e nunca passa da altura da janela, pela regra 40. */
.guia-de-montagem-lista-painel { position: absolute; right: 0; bottom: 48px; box-sizing: border-box; width: 400px; max-height: calc(100vh - 120px - var(--distancia-da-lista, 24px)); overflow-y: auto; padding: 16px 24px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--background); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } /* 48 pixels: o botão de 40 e os 8 da regra 91; 120 pixels: a barra do topo, com 49, 16 de folga, o botão de 40 e os 8, arredondado para cima, mais a distância do botão à borda de baixo, que é 24 sem aviso e sobe com o aviso (P11) */
.guia-de-montagem-lista-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.guia-de-montagem-lista-titulo { margin: 0; font-weight: 600; }
.guia-de-montagem-lista-conta { margin: 0; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
/* A barra do progresso, desde a etapa 5 do "aplicar" das microinterações, de 01/11, pela MI19 e pela regra 149: a parte azul tem a
   largura inteira da barra e enche e esvazia pela escala na horizontal, a partir da esquerda (telas/guia-de-montagem.js), em 0,25
   segundo, com a curva de mudar, e não pela largura, que deixa a página mais lenta; para quem pediu menos movimento, ela não anda, e o
   pedaço que muda aparece ou some pela transparência, por uma cópia da barra de antes (.guia-de-montagem-progresso-antes). Até essa
   etapa, a barra mudava de largura na hora. */
.guia-de-montagem-progresso { position: relative; margin-top: 8px; height: 8px; border-radius: 9999px; background: var(--muted); overflow: hidden; }
.guia-de-montagem-progresso span { position: relative; display: block; width: 100%; height: 100%; background: var(--primary); transform-origin: left center; transition: transform var(--tempo-do-medio-ao-abrir) var(--curva-de-mudar); }
.guia-de-montagem-progresso .guia-de-montagem-progresso-antes { position: absolute; inset: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .guia-de-montagem-progresso span { transition: none; } }
.guia-de-montagem-tarefas-ambiente { margin: 16px 0 0; color: var(--muted-foreground); font-size: 12px; line-height: 16px; font-weight: 600; } /* 12 pixels: o nome do ambiente é o rótulo do grupo, menor que o nome do módulo, como no estudo */
.guia-de-montagem-tarefas { margin: 8px 0 0; padding: 0; list-style: none; }
/* Cada módulo numa faixa, com a divisória entre os módulos (GM26), e a linha inteira com o azul claro do ponteiro em cima, menos
   quando o ponteiro está em "Ver os passos" (GM25). */
.guia-de-montagem-tarefa { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "marcar marcar marcar" "pecas ir ."; column-gap: 16px; align-items: baseline; margin: 0 -8px; padding: 8px 8px 16px; border-radius: 8px; cursor: pointer; } /* -8 e 8 pixels: o fundo do ponteiro em cima passa 8 pixels da caixa de marcar, como no estudo */
.guia-de-montagem-tarefa + .guia-de-montagem-tarefa::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; border-top: 1px solid var(--border); }
.guia-de-montagem-tarefa:hover:not(:has(.guia-de-montagem-tarefa-ir:hover)) { background: var(--secondary); }
.guia-de-montagem-tarefa:hover:not(:has(.guia-de-montagem-tarefa-ir:hover)) .guia-de-montagem-tarefa-nome { color: var(--primary); }
.guia-de-montagem-tarefa:hover .guia-de-montagem-tarefa-pecas { color: var(--sb-ds-neutral-700); } /* o cinza 700 no azul claro, pela regra 132 */
.guia-de-montagem-tarefa-marcar { grid-area: marcar; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 0; cursor: pointer; } /* 4 pixels: o fundo do ponteiro em cima envolve o nome com folga, como no estudo */
.guia-de-montagem-tarefa.feita .guia-de-montagem-tarefa-nome { color: var(--muted-foreground); text-decoration: line-through; }
.guia-de-montagem-tarefa.feita:hover .guia-de-montagem-tarefa-nome { color: var(--sb-ds-neutral-700); }
.guia-de-montagem-tarefa-pecas { grid-area: pecas; padding-left: 24px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 24 pixels: as peças começam no nome, depois da caixa de 16 e do espaço de 8 */
.guia-de-montagem-tarefa-ir { grid-area: ir; margin-top: 0; }

/* A ajuda, numa caixa cinza à parte dos blocos, porque não é um passo da montagem, como no estudo. */
.guia-de-montagem-ajuda { margin-top: 32px; display: flex; align-items: center; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); }
.guia-de-montagem-ajuda-texto { flex: 1; margin: 0; max-width: 37em; color: var(--sb-ds-neutral-700); } /* o cinza 700 sobre o cinza da caixa, pela regra 132 */
.guia-de-montagem-ajuda [data-slot="button"] { margin-left: auto; }

/* O fim do guia, com a última caixa marcada (GM28 e GT14), e o convite do próximo móvel (OE11). A pergunta é a .caixa-da-pergunta
   da pergunta da compra, sem o recuo de 56 pixels do cartão do momento, pela regra 126. */
.guia-de-montagem-fim { margin-top: 32px; padding: 24px; border: 1px solid var(--border); border-radius: 8px; }
.guia-de-montagem-fim-titulo:focus { outline: none; }
.guia-de-montagem-pergunta.caixa-da-pergunta { margin: 16px 0 0; }
.guia-de-montagem-fim-texto { margin: 16px 0 0; max-width: 37em; color: var(--muted-foreground); }
.guia-de-montagem-fim-acoes { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.guia-de-montagem-link-copiado { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); } /* a frase de sucesso no azul principal, com o sinal de feito, pela exceção da regra 35 */
.guia-de-montagem-link-nao-copiado { color: var(--muted-foreground); }
.guia-de-montagem-desfazer { margin-top: 0; }
.guia-de-montagem-proximo-movel { margin-top: 32px; display: flex; align-items: center; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: 8px; }
.guia-de-montagem-proximo-movel [data-slot="button"] { margin-left: auto; }
/* O fim do guia guarda 72 pixels embaixo, os 32 entre blocos e os 40 do botão da lista, que para ali quando o guia acaba, para o
   botão não cobrir "Novo projeto", como no estudo. */
.guia-de-montagem-fim-do-guia { height: 72px; }


/* ---------- A escolha do módulo no resumo da tela 2, desde o "aplicar" da escolha do módulo, de 30/10 ---------- */

/* As linhas dos ambientes no painel do total, pela EM1, como a parte 2B do estudo da escolha do módulo (.estudo-p2b-ambientes): 16
   pixels do valor, ou da frase da mudança, às linhas, 8 entre as linhas e 24 até "Preparar o envio do projeto", pelo pedido de Aline
   Miyaki de 29/10; o valor na coluna de 112 pixels, com o "R$" na mesma vertical, pela regra 80; e a linha do ambiente aberto no preto,
   com o peso 500, e as outras no cinza 700, que tem 9,51:1 contra o cinza do painel, pela regra 132. */
.ambientes-do-total { margin: 16px 0 0; padding: 0; list-style: none; display: grid; row-gap: 8px; color: var(--sb-ds-neutral-700); font-variant-numeric: tabular-nums; }
.ambientes-do-total > li { display: grid; grid-template-columns: minmax(0, 1fr) 112px; column-gap: 16px; align-items: baseline; }
.ambientes-do-total > li.ambiente-aberto { color: var(--foreground); font-weight: 500; }
.ambiente-do-total-nome { min-width: 0; overflow-wrap: anywhere; }
.painel-do-total:focus { outline: none; }
.painel-do-total:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* O painel do módulo escolhido, pela EM10, na forma da variação 7 da folha do painel do módulo (estudos/estudo-tela-2-painel-do-
   modulo.html, .estudo-painel e .estudo-topo-com-foto): o fundo e o canto do painel do total, com 24 pixels dentro; em cima, a seta,
   a foto de 64 pixels e o texto, a 8 pixels um do outro, com a seta 8 pixels para fora, para o desenho dela ficar na borda do
   conteúdo, pela regra 50; o nome em 16 pixels, com o número em cinza; o nome da biblioteca, em cinza, colado no nome; e o valor, 4
   pixels embaixo, como 1 grupo. Com as 3 partes abertas, o painel passa da altura da janela, e o corpo rola por dentro, enquanto o
   topo fica parado: a altura vai até 24 pixels do pé da janela, pela conta de PainelDoModulo, em telas/modulos.js, a partir do alto
   do painel na tela; a altura daqui é a de quando a conta não roda, a partir dos 73 pixels do alto da coluna (.coluna-do-painel). */
.painel-do-modulo { display: flex; flex-direction: column; max-height: calc(100vh - 73px - 24px); box-sizing: border-box; padding: 24px 0; border-radius: calc(var(--radius) + 4px); background: var(--muted); } /* 73 e 24 pixels: o alto da coluna parada e a folga do pé da janela */
.painel-do-modulo-topo { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 0 24px 0 16px; } /* 16 pixels à esquerda: a seta de 32 fica 8 pixels para fora, e o desenho dela começa na borda do conteúdo, pela regra 50 */
.painel-do-modulo-voltar { flex: none; color: var(--sb-ds-neutral-700); }
.painel-do-modulo-voltar:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* no fundo cinza do painel, o brand-200 se vê, como nas ações da folha */
.painel-do-modulo-topo > .foto-pelo-3d { flex: none; } /* a foto de 64 pixels de componentes/foto-do-modulo.js, com o canto, a borda e o fundo da foto de cada ambiente (.foto-do-ambiente) */
.painel-do-modulo-texto { flex: 1 1 auto; min-width: 0; }
.painel-do-modulo-linha-do-nome { display: flex; align-items: flex-start; gap: 8px; }
.painel-do-modulo-nome { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.painel-do-modulo-numero, .painel-do-modulo-unidades { color: var(--sb-ds-neutral-700); font-weight: 400; }
.painel-do-modulo-linha-do-nome > [data-slot="badge"] { flex: none; margin-top: 2px; } /* 2 pixels: o selo de 20 no meio da linha do nome, de 24 */
.painel-do-modulo-biblioteca { margin: 0; color: var(--sb-ds-neutral-700); overflow-wrap: anywhere; }
.painel-do-modulo-valor { margin: 4px 0 0; font-size: 16px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; } /* 4 pixels: o valor fica colado no nome, como 1 grupo, como a folha */
.painel-do-modulo-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 12px; padding: 4px 24px 0; } /* 12 e 4 pixels: os 16 de antes até "Personalizar", com 4 dentro do corpo que rola, para o anel do que falta da AF1 e o anel do foco, de 4 pixels, não ficarem cortados em cima, desde o "aplicar" do anel do que falta, de 31/10 */
.painel-do-modulo-personalizar { width: 100%; justify-content: space-between; }
/* As 3 partes que abrem, como a opção 5 da folha (.estudo-partes e .estudo-linha-que-abre): a linha cinza em cima e entre as partes;
   cada parte é um botão de 40 pixels, com o título, o resumo à direita, em cinza, e a seta para baixo, que gira 180° quando a parte
   abre, pela regra 135; o fundo do ponteiro em cima vai 8 pixels além da borda do conteúdo, e o texto fica na borda. */
.partes-do-modulo { margin-top: 16px; border-top: 1px solid var(--border); }
.parte-do-modulo { border-bottom: 1px solid var(--border); }
.linha-que-abre { display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; align-items: center; column-gap: 8px; width: calc(100% + 16px); min-height: 40px; box-sizing: border-box; margin: 0 -8px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--foreground); font: inherit; font-weight: 500; text-align: left; cursor: pointer; } /* -8 pixels: o texto fica na borda do conteúdo, e o fundo do ponteiro em cima vai além dela */
/* Com o ponteiro em cima, o texto passa ao brand-800, com 5,65:1 contra o brand-200, e, pressionado, ao brand-900, com 5,69:1 contra
   o brand-300, pela medida do navegador do Claude de 30/10, porque o azul principal tinha 4,46:1 e 3,56:1, abaixo dos 4,5:1 do nível
   AA da WCAG, como o botão com borda pressionado da regra 81, achado pela conferência da tela 2 de 30/10. */
.linha-que-abre:hover { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); }
.linha-que-abre:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-900); }
.linha-que-abre:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.linha-que-abre-resumo { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--sb-ds-neutral-700); font-weight: 400; font-variant-numeric: tabular-nums; }
.linha-que-abre .seta-que-gira { width: 16px; height: 16px; transition: transform var(--tempo-do-medio-ao-fechar) var(--curva-de-mudar); } /* o giro em 0,2 segundo ao fechar e em 0,25 ao abrir, pela MI2, desde a etapa 2 do "aplicar" das microinterações; até essa etapa, 0,2 nos 2 sentidos */
.linha-que-abre[aria-expanded="true"] .seta-que-gira { transform: rotate(180deg); transition-duration: var(--tempo-do-medio-ao-abrir); }
@media (prefers-reduced-motion: reduce) { .linha-que-abre .seta-que-gira { transition: none; } }
.amostra-do-resumo { display: inline-flex; }
.amostra-do-resumo .projetar-amostra { width: 16px; height: 16px; border-radius: 4px; } /* 4 pixels: o canto da amostra de 16, pela regra 136, que o design system não tem */
.dentro-da-parte { display: grid; row-gap: 8px; padding: 0 0 16px; color: var(--sb-ds-neutral-700); }
.dentro-da-parte[hidden] { display: none; }
/* A linha "Quanto este móvel custaria com um marceneiro", do painel do total da tela 2, desde o "aplicar" do estudo de 04/11, pela DH3
   e pela DH3b (componentes/comparacao-com-o-marceneiro.js), na forma B do estudo (estudos/estudo-preco-loja-economia-e-dobradica.css,
   .estudo-fb): logo embaixo de "Como o total do projeto é calculado", sem a linha cinza dupla, como 2 linhas da mesma lista. */
.partes-do-modulo + .comparacao-do-marceneiro { margin-top: 0; border-top: 0; }
.marceneiro-dentro { row-gap: 0; }
.marceneiro-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.marceneiro-coluna { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.marceneiro-valor { margin: 0 0 8px; color: var(--sb-ds-neutral-700); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.marceneiro-valor-nosso { color: var(--foreground); font-size: 20px; line-height: 28px; font-weight: 700; }
.marceneiro-barra { display: flex; flex-direction: column; width: 96px; border-radius: 8px 8px 0 0; overflow: hidden; }
/* O azul e as listras azuis não se clicam: são a exceção da regra 35 da DH3. */
.marceneiro-azul { background: var(--primary); }
.marceneiro-cinza { background: var(--sb-ds-neutral-400); }
.marceneiro-vao, .marceneiro-amostra { display: block; background: repeating-linear-gradient(135deg, var(--sb-ds-brand-300) 0 3px, var(--sb-ds-brand-50) 3px 6px); } /* 3 e 6 pixels: as listras finas da economia, como no estudo */
.marceneiro-amostra { flex: none; width: 16px; height: 16px; border-radius: 4px; } /* 4 pixels: o canto da amostra de 16, pela regra 136 */
.marceneiro-nomes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sb-ds-neutral-500); text-align: center; font-size: 14px; line-height: 20px; color: var(--sb-ds-neutral-700); }
.marceneiro-nomes p { margin: 0; }
.marceneiro-nome-nosso { color: var(--foreground); font-weight: 500; }
.marceneiro-economia { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.marceneiro-economia-nome { display: inline-flex; align-items: center; gap: 8px; color: var(--sb-ds-neutral-700); font-size: 14px; line-height: 20px; }
.marceneiro-economia-valor { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* 4 pixels: o "i" colado ao valor que ele explica, como no estudo */
.marceneiro-horas { margin-top: 24px; }
.marceneiro-horas-rotulo { margin: 0; color: var(--foreground); font-size: 14px; line-height: 20px; font-weight: 500; }
.marceneiro-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.marceneiro-opcoes .botao-de-escolha { justify-content: center; gap: 4px; padding: 0 4px; } /* 4 pixels: o sinal de feito colado ao texto, para caber em 1/3 do painel, como no estudo */
.marceneiro-opcoes .botao-de-escolha[aria-checked="true"] { padding: 0 3px; } /* 3 pixels: os 4 de cima menos 1, pela borda de 2 do escolhido, da regra 123 */
/* As 4 ações da parte "Mais ações com o módulo", como as ações em texto da folha (.estudo-acoes e .estudo-acao): botões de 32 pixels,
   no azul principal, com o ícone na borda do conteúdo e o fundo do ponteiro em cima 8 pixels além dela, no brand-200, que se vê no
   cinza do painel; a linha cinza de 1 pixel antes de "Tirar do projeto", em vermelho, pela EM10; e a seta para a direita no fim de
   "Levar para outro ambiente", que abre o menu dos ambientes ao lado, pela regra 135. */
.acoes-do-modulo { display: grid; }
.acao-do-modulo { display: flex; align-items: center; gap: 8px; height: 32px; box-sizing: border-box; margin: 0 -8px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--primary); font: inherit; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; } /* -8 pixels: o ícone fica na borda do conteúdo */
.acao-do-modulo:hover, .acao-do-modulo[data-state="open"] { background: var(--sb-ds-brand-200); color: var(--sb-ds-brand-800); } /* o brand-800, com 5,65:1, como em .linha-que-abre */
.acao-do-modulo:active { background: var(--sb-ds-brand-300); color: var(--sb-ds-brand-900); } /* o brand-900, com 5,69:1 */
.acao-do-modulo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acao-do-modulo > svg { flex: none; width: 16px; height: 16px; }
.acao-do-modulo > .seta-no-fim { margin-left: auto; }
.acao-do-modulo[aria-busy="true"] { cursor: progress; color: var(--sb-ds-neutral-600); }
.acao-do-modulo.acao-vermelha { color: var(--sb-ds-destructive-700); } /* o destructive-700, com 5,89:1 contra o cinza do painel, porque o vermelho do design system tinha 4,43:1, pela medida de 30/10 */
.acao-do-modulo.acao-vermelha:hover, .acao-do-modulo.acao-vermelha:active { background: var(--sb-ds-destructive-100); color: var(--sb-ds-destructive-800); } /* no fundo cinza do painel, o vermelho mais claro tinha 1:1, como na folha; o texto no destructive-800, com 6,85:1 */
.separador-das-acoes { height: 1px; margin: 8px 0; background: var(--border); } /* 1 pixel: a linha cinza antes de "Tirar do projeto", pela EM10, como a linha do menu do design system */

/* O destaque do botão do nome, desde o "aplicar" do estudo de "Pular o vídeo" na espera e do destaque do botão do nome, de 03/11, pela
   AB23 e pela AB24 (componentes/destaque-do-nome.js): a tela escura é o preto a 50% das janelas do design system (bg-black/50), feita
   pela sombra do recorte em volta do botão do nome, e as 4 faixas transparentes pegam o clique fora do botão. */
.destaque-pega { position: fixed; z-index: 60; background: transparent; }
.destaque-recorte { position: fixed; z-index: 60; border-radius: 8px; box-shadow: 0 0 0 200vmax rgb(0 0 0 / 0.5); pointer-events: none; overflow: hidden; animation: aparecer-pela-transparencia var(--tempo-do-medio-ao-abrir) var(--curva-de-entrar); }
/* O brilho: 1 faixa clara passa pelo botão 1 vez, em 1,2 segundo, 0,3 segundo depois de a tela escurecer, como o brilho de "Abrindo
   o Cortecloud", da AB14; é uma exceção da regra 149, como a nuvem da passagem. */
.destaque-recorte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgb(255 255 255 / 0.55) 50%, transparent 75%); transform: translateX(-110%); animation: destaque-brilho 1.2s ease-in-out 0.3s 1 forwards; }
@keyframes destaque-brilho { to { transform: translateX(110%); } }
/* A caixa da explicação, com a aparência das explicações da app, pelas regras 32 e 79, e o espaço interno do Tooltip do design system,
   de 6 pixels em cima e embaixo e de 12 dos lados, pela regra 98; à direita, os 40 pixels do X. */
.destaque-caixa { position: fixed; z-index: 61; box-sizing: border-box; width: 296px; padding: 6px 40px 6px 12px; background: var(--popover); border: 1px solid var(--sb-ds-neutral-400); border-radius: 8px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); font-size: 14px; line-height: 20px; color: var(--muted-foreground); animation: aparecer-pela-transparencia var(--tempo-do-pequeno-ao-abrir) var(--curva-de-entrar); } /* 6 e 12 pixels: o espaço interno do Tooltip do design system */
.destaque-titulo { display: block; color: var(--foreground); font-weight: 600; }
.destaque-frase { display: block; }
/* O X, só de ícone, cinza, porque fecha, pela regra 81, com a área de clique de 24 pixels no canto da caixa. */
.destaque-x { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted-foreground); cursor: pointer; } /* 4 pixels: o X fica no canto da caixa, dentro dos 6 pixels de espaço interno, e o canto acompanha o tamanho de 24 */
.destaque-x:hover { background: var(--sb-ds-brand-200); }
.destaque-x:active { background: var(--sb-ds-brand-300); }
.destaque-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.destaque-x svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .destaque-recorte::after { display: none; animation: none; }
  .destaque-recorte, .destaque-caixa { animation: none; }
}

/* A tela de entrada sem a sessão do Cortecloud, do modo do back-end, desde a F4b (telas/entrada-pelo-cortecloud.js), na página
   cinza: os campos com a forma dos campos do Meu perfil, à esquerda, numa coluna de 384 pixels, e os 2 botões nas pontas, com 16
   pixels entre eles, pela regra 45. */
.entrada-pelo-cortecloud { width: 100%; max-width: 384px; }
.entrada-pelo-cortecloud .perfil-campo { width: 100%; text-align: left; }
.entrada-pelo-cortecloud-erro { color: var(--destructive); }
.entrada-pelo-cortecloud-acoes { display: flex; justify-content: flex-end; gap: 16px; width: 100%; margin-top: 8px; }