/* ========================================================================= laboratorio.css — Laboratório de Montagem (Etapa 1) ------------------------------------------------------------------------- Carregado DEPOIS do style.css e depende dele: todas as cores, fontes, raios, sombras e camadas vêm dos tokens de lá (--ac-*, --bg*, --vidro*, --raio*, --z-*). Aqui só existe o que é específico da bancada. Índice 1. Página 4. Bancada 2. Layout 5. Controles 3. Barras e painéis 6. Responsivo ========================================================================= */ /* ========================================================================= 1. PÁGINA ========================================================================= */ /* A página do laboratório não rola: a bancada é que se move. */ .pagina-lab { height: 100vh; height: 100dvh; /* dvh acompanha a barra do navegador no celular */ overflow: hidden; overscroll-behavior: none; } /* ========================================================================= 2. LAYOUT Cinco áreas fixas. A bancada é a única que estica. ========================================================================= */ .lab { /* A gaveta de código é position:fixed e precisa saber onde as barras terminam. Um número solto em dois lugares vira desalinho na primeira vez que alguém mudar a altura de uma delas. */ --h-topo: 60px; --h-rodape: 38px; display: grid; height: 100%; grid-template-columns: 248px minmax(0, 1fr) 268px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "topo topo topo" "esq bancada dir" "rodape rodape rodape"; background: var(--bg); } /* ========================================================================= 3. BARRAS E PAINÉIS ========================================================================= */ /* ---- Barra superior ---- */ .lab__topo { grid-area: topo; display: flex; align-items: center; gap: 18px; padding: 0 16px; height: var(--h-topo); background: var(--bg-elevado); border-bottom: 1px solid var(--borda); } .lab__voltar { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border: 1px solid var(--borda); border-radius: var(--raio-sm); color: var(--texto-medio); font-size: .88rem; font-weight: 600; transition: var(--suave); } .lab__voltar:hover { background: var(--bg-suave); color: var(--texto); border-color: var(--borda-forte); text-decoration: none; transform: translateX(-2px); } .lab__voltar .ico { width: 16px; height: 16px; } .lab__titulo { display: flex; align-items: center; gap: 11px; min-width: 0; } .lab__marca { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--ac-300), var(--ac-600)); box-shadow: 0 2px 8px color-mix(in srgb, var(--ac-500) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); } .lab__marca .ico { width: 19px; height: 19px; } .lab__titulo b { display: block; font-size: .95rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; } .lab__titulo span { display: block; font-size: .76rem; color: var(--texto-suave); line-height: 1.25; } .lab__acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* ---- Botão de simulação ---- */ .lab__simular { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border: 0; border-radius: var(--raio-sm); background: linear-gradient(145deg, var(--verde), #15803d); color: #fff; font-size: .87rem; font-weight: 650; cursor: pointer; box-shadow: 0 2px 10px color-mix(in srgb, var(--verde) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26); transition: transform var(--rapido), box-shadow var(--suave), filter var(--rapido); } .lab__simular:hover { filter: brightness(1.08); transform: translateY(-1px); } .lab__simular:active { transform: translateY(0) scale(.98); } .lab__simular .ico { width: 15px; height: 15px; } .lab__simular--ativo { background: linear-gradient(145deg, var(--coral), #b3341f); box-shadow: 0 2px 10px color-mix(in srgb, var(--coral) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26); animation: simulandoPulsa 2s ease-in-out infinite; } @keyframes simulandoPulsa { 0%, 100% { box-shadow: 0 2px 10px color-mix(in srgb, var(--coral) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26); } 50% { box-shadow: 0 2px 18px color-mix(in srgb, var(--coral) 65%, transparent), 0 0 26px -6px color-mix(in srgb, var(--coral) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26); } } /* ---- Alertas da verificação elétrica ---- */ .alertas { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100% - 120px)); } .alertas[hidden] { display: none; } .alerta { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: var(--raio-sm); border: 1px solid var(--borda); background: var(--vidro); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 10px 28px -12px rgba(8, 12, 20, .45); font-size: .82rem; text-align: left; cursor: pointer; transition: transform var(--rapido), border-color var(--rapido); } .alerta:hover { transform: translateX(3px); } .alerta__ico { flex-shrink: 0; margin-top: 1px; } .alerta__ico .ico { width: 17px; height: 17px; } .alerta__txt b { display: block; font-weight: 700; margin-bottom: 2px; } .alerta__txt span { color: var(--texto-medio); line-height: 1.45; } .alerta--erro { border-color: color-mix(in srgb, var(--coral) 55%, transparent); } .alerta--erro .alerta__ico { color: var(--coral); } .alerta--erro .alerta__txt b { color: var(--coral); } .alerta--aviso { border-color: color-mix(in srgb, var(--ambar) 55%, transparent); } .alerta--aviso .alerta__ico { color: var(--ambar); } .alerta--aviso .alerta__txt b { color: var(--ambar); } /* ---- Painéis laterais ---- */ .lab__painel { display: flex; flex-direction: column; padding: 0 16px 18px; background: var(--bg-elevado); overflow-y: auto; scrollbar-width: thin; } /* O título acompanha a rolagem: em lista longa, saber em que painel se está vale mais do que os 30px que ele ocupa. */ .lab__painel-cabeca { position: sticky; top: 0; z-index: 1; padding: 18px 0 12px; background: var(--bg-elevado); } .lab__painel--esq { grid-area: esq; border-right: 1px solid var(--borda); } .lab__painel--dir { grid-area: dir; border-left: 1px solid var(--borda); } .lab__painel-titulo { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-medio); } .lab__painel-ajuda { margin: 5px 0 0; font-size: .76rem; color: var(--texto-suave); } /* ---- Biblioteca ---- */ .biblioteca { display: flex; flex-direction: column; gap: 3px; } .biblioteca__grupo { margin: 18px 0 6px; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-suave); } .biblioteca__grupo:first-child { margin-top: 0; } /* Sem moldura: dez caixas empilhadas viram uma grade de linhas, que é justamente o peso visual que queremos tirar. O contorno aparece no hover, quando há um item em questão. */ .biblioteca__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--raio-sm); background: transparent; color: var(--texto-medio); font-size: .85rem; font-weight: 600; text-align: left; cursor: grab; /* Sem isto, arrastar no celular rola a página em vez de mover a peça */ touch-action: none; transition: border-color var(--rapido), background-color var(--rapido), color var(--rapido); } .biblioteca__item:hover { border-color: color-mix(in srgb, var(--ac-400) 45%, var(--borda)); background: var(--bg-suave); color: var(--texto); } .biblioteca__item:active, .biblioteca__item.arrastando { cursor: grabbing; opacity: .5; } .biblioteca__mini { width: 46px; height: 34px; flex-shrink: 0; /* A miniatura usa o desenho real do componente; object-fit mantém a proporção sem deformar peças largas como a protoboard. */ object-fit: contain; } .biblioteca__nome { min-width: 0; } /* ---- Peças na bancada ---- */ .peca { cursor: grab; } .peca--movendo { cursor: grabbing; } /* Retângulo invisível de captura: o clique pega a peça inteira, inclusive os vãos entre as pernas de um LED. */ .peca__alvo { fill: transparent; } .peca__contorno { fill: none; stroke: var(--ac-400); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; transition: opacity var(--rapido); } .peca:hover .peca__contorno { opacity: .4; } .peca--selecionada .peca__contorno { opacity: 1; stroke-dasharray: none; } /* Brilho da peça selecionada */ .peca--selecionada { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ac-400) 75%, transparent)); } /* ---- Acionadores: onde dá para MEXER na peça ---- A capa do botão, o eixo do potenciômetro, uma tecla do teclado. São transparentes — `transparent` ainda é pintura para efeito de pointer-events, ao contrário de `none`, e é isso que faz o clique chegar. O anel aparece só sob o cursor: é o convite. Sem ele ninguém descobre que a peça é mexível, porque não há nada na tela dizendo. */ .acionador { fill: transparent; stroke: var(--ac-400); stroke-width: 2.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: 0; cursor: pointer; transition: opacity var(--rapido), fill var(--rapido); } .acionador--giro { cursor: grab; } .acionador--giro:active { cursor: grabbing; } /* Passar o cursor pela peça mostra ONDE se pode mexer; parar em cima de uma região a acende. O preenchimento importa tanto quanto o anel: num zoom de 80% o tracejado sozinho some, e a mancha não. */ .peca:hover .acionador { opacity: .55; } .acionador:hover { opacity: 1 !important; fill: color-mix(in srgb, var(--ac-400) 22%, transparent); } .acionador:active { fill: color-mix(in srgb, var(--ac-400) 38%, transparent); } /* Com o Espaço a bancada inteira é pan, e com um fio em curso o clique pertence ao traçado: nos dois casos o convite some, para não prometer um gesto que não vai acontecer. */ .lab__bancada.pode-arrastar .acionador, .lab__bancada.ligando .acionador { opacity: 0 !important; pointer-events: none; } /* ---- Terminais ---- Desenhados só para a peça sob o cursor (ver laboratorio.js, seção 7b). Discretos em repouso, evidentes quando o cursor chega perto. */ .terminal { fill: color-mix(in srgb, var(--ac-400) 30%, transparent); stroke: var(--ac-500); stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: crosshair; transition: fill var(--rapido); } .terminal:hover { fill: var(--ac-400); stroke-width: 2; } /* A cor diz o papel do pino sem precisar de legenda */ .terminal--alimentacao { fill: color-mix(in srgb, #d13b3b 35%, transparent); stroke: #d13b3b; } .terminal--alimentacao:hover { fill: #d13b3b; } .terminal--terra { fill: color-mix(in srgb, var(--texto) 32%, transparent); stroke: var(--texto-medio); } .terminal--terra:hover { fill: var(--texto-medio); } .terminal--analogico { fill: color-mix(in srgb, #8a44c9 32%, transparent); stroke: #8a44c9; } .terminal--analogico:hover { fill: #8a44c9; } /* A base é grande e quase toda furo. O cursor precisa dizer onde ela pega: mão aberta no plástico (arrasta a placa), mira no furo (puxa fio). */ .peca--base { cursor: grab; } .peca--base.peca--movendo { cursor: grabbing; } /* Durante uma ligação o cursor vira mira em toda a bancada */ .lab__bancada.ligando .bancada__svg { cursor: crosshair; } /* ---- Fios ---- */ /* A sombra vai no GRUPO, não no traço: assim ela pega o fio e as duas capas de uma vez, com um recorte só, em vez de três. O deslocamento é pequeno de propósito — um cabo apoiado na bancada levanta um milímetro, não três centímetros; sombra demais viraria um fio flutuando. */ .fio { cursor: pointer; filter: drop-shadow(0 1.5px 1.5px rgba(12, 24, 34, .34)); } [data-tema="escuro"] .fio { filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, .55)); } /* Arrastar em cima do fio cria uma dobra ali: o cursor avisa. */ .fio:hover { cursor: grab; } .lab__bancada.movendo-vertice .fio { cursor: grabbing; } /* Traço largo e invisível: área de clique confortável sem engrossar o fio */ .fio__alvo { fill: none; stroke: transparent; stroke-width: 16; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .fio__linha { fill: none; stroke: currentColor; /* o grupo carrega a cor do fio */ stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke-width var(--rapido); } .fio:hover .fio__linha { stroke-width: 6; } .fio--selecionado .fio__linha { stroke-width: 6; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ac-400) 90%, transparent)); } /* Tracejado branco por cima marca o fio selecionado em qualquer cor */ .fio--selecionado .fio__alvo { stroke: #ffffff; stroke-width: 2; stroke-dasharray: 5 6; opacity: .8; } /* ---- Capas de jumper ---- A pecinha plástica da ponta do cabo, com o pino metálico entrando no furo. Sem ela o fio nasce do nada em cima do pino; com ela a ligação parece espetada, que é o que ela é. O corpo herda a cor do fio pelo currentColor do grupo — jumper de verdade tem a capa da mesma cor do cabo. */ .fio__capa { pointer-events: none; } .fio__capa-corpo { fill: currentColor; stroke: rgba(0, 0, 0, .35); stroke-width: .8; } /* Brilho reto no alto do corpo: dá o cilindro sem custar um gradiente */ .fio__capa-luz { fill: #ffffff; opacity: .28; } .fio__capa-metal { fill: #b9c0c7; stroke: #7d868e; stroke-width: .6; } /* Com corrente, a capa acende junto com o fio */ .fio--fluindo .fio__capa-metal { fill: #e8eef3; } /* ---- Simulação: corrente correndo pelo fio ---- Um pontilhado branco desliza sobre o fio colorido. A direção segue o sentido em que o fio foi desenhado — é um indicador de "este trecho está energizado", não o sentido real da corrente, que exigiria resolver o circuito inteiro. */ .fio__fluxo { fill: none; stroke: #ffffff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 14; vector-effect: non-scaling-stroke; pointer-events: none; opacity: 0; } .fio--fluindo .fio__fluxo { opacity: .95; animation: correnteAndando 1s linear infinite; } @keyframes correnteAndando { to { stroke-dashoffset: -15; } } /* Fio energizado ganha um halo suave da PRÓPRIA cor. O currentColor só funciona porque o desenharFio escreve a cor no style do grupo; antes disso o halo saía na cor do texto da página. */ .fio--fluindo .fio__linha { filter: drop-shadow(0 0 4px currentColor); } /* Trecho no terra: presente no circuito, mas sem corrente vinda dele */ .fio--aterrado .fio__linha { opacity: .85; } /* ---- Simulação: LED aceso ---- --intensidade vem do duty do PWM (ver aplicarLed no laboratorio.js). Sem PWM ela vale 1 e o halo é o de sempre; com analogWrite o halo encolhe e cresce junto com o valor, que é a prova visual do brilho variável. */ .peca--aceso { filter: drop-shadow(0 0 calc(10px * var(--intensidade, 1)) var(--brilho, #ffd0d0)) drop-shadow(0 0 calc(22px * var(--intensidade, 1)) var(--brilho, #ffd0d0)); opacity: calc(0.55 + 0.45 * var(--intensidade, 1)); } /* ---- Buzzer apitando ---- */ .buzzer__onda { color: var(--ac-400); vector-effect: non-scaling-stroke; animation: somSaindo 0.9s ease-out infinite; } @keyframes somSaindo { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: .9; } 100% { opacity: 0; transform: scale(1.15); } } .peca:has(.buzzer__onda) { transform-box: fill-box; transform-origin: center; } .peca--aceso .peca__alvo { fill: transparent; } /* ---- Peça com problema elétrico ---- */ .peca__alerta circle { fill: var(--coral); stroke: var(--bg-fundo); stroke-width: 2; vector-effect: non-scaling-stroke; } .peca__alerta text { fill: #fff; font-family: Inter, sans-serif; font-size: 18px; font-weight: 800; } .peca--problema .peca__contorno { opacity: 1; stroke: var(--coral); } /* ---- Alças de edição do caminho (vértices) ---- Cheia = dobra que existe. Vazada = convite para criar uma. O raio é dado em unidades de MUNDO, então elas crescem e encolhem com o zoom junto com o circuito; só o traço fica constante. */ .vertice { vector-effect: non-scaling-stroke; cursor: grab; transition: fill var(--rapido), r var(--rapido); } .vertice--dobra { fill: var(--ac-400); stroke: #fff; stroke-width: 2; } .vertice--dobra:hover { fill: var(--ac-500); } .vertice--novo { fill: color-mix(in srgb, var(--bg-fundo) 70%, transparent); stroke: var(--ac-400); stroke-width: 2; stroke-dasharray: 3 3; opacity: .65; } .vertice--novo:hover { opacity: 1; fill: var(--ac-300); stroke-dasharray: none; } .lab__bancada.movendo-vertice .bancada__svg, .lab__bancada.movendo-vertice .vertice { cursor: grabbing; } /* Fio temporário, enquanto o cursor procura o destino */ .fio-temp { fill: none; stroke: var(--ac-400); stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; /* não pode roubar o alvo no momento de soltar */ opacity: 0; } .fio-temp--ativo { opacity: 1; } /* Selo de AVISO: o problema não queima nada, só impede de funcionar. Cor de atenção em vez de vermelho — a diferença entre "está errado" e "vai estragar" precisa aparecer sem ler o texto. */ .peca__alerta--aviso circle { fill: #c8850f; } .peca--atencao .peca__contorno { opacity: 1; stroke: #c8850f; stroke-dasharray: 6 4; } /* ---- Encaixe nos furos ---- O contato perna-no-furo não é um cabo e não pode parecer um: o que se vê numa protoboard real é só a cabeça da perna afundada no furo. Daí o ponto pequeno, com um halo claro por baixo para destacá-lo do furo vazio. */ .encaixe { fill: var(--ac-500); stroke: #ffffff; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; } [data-tema="escuro"] .encaixe { stroke: #0b1416; } /* Fantasma do encaixe durante o arrasto */ .fantasma__furo { fill: none; stroke: var(--ac-500); stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; } .fantasma__caixa { fill: color-mix(in srgb, var(--ac-400) 14%, transparent); stroke: var(--ac-500); stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; pointer-events: none; } /* ---- Painel de propriedades ---- */ .propriedades { display: flex; flex-direction: column; flex: 1; } .prop__cabeca { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--borda); } .prop__mini { width: 48px; height: 38px; flex-shrink: 0; } .prop__nomes { min-width: 0; } .prop__nomes b { display: block; font-size: .93rem; font-weight: 700; letter-spacing: -.01em; } .prop__nomes span { display: block; font-size: .74rem; color: var(--texto-suave); } .prop__campo { margin-bottom: 4px; margin-bottom: 16px; } .prop__campo > label { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 650; color: var(--texto-medio); } .prop__entrada { width: 100%; padding: 9px 11px; background-color: var(--bg-suave); border: 1.5px solid transparent; border-radius: var(--raio-sm); outline: none; font-size: .86rem; color: var(--texto); transition: border-color var(--rapido), box-shadow var(--rapido), background-color var(--rapido); } .prop__entrada:hover { border-color: var(--borda); } .prop__entrada:focus { border-color: var(--ac-400); background-color: var(--bg-elevado); box-shadow: var(--glow); } select.prop__entrada { cursor: pointer; } .prop__ajuda { margin: 6px 0 0; font-size: .73rem; line-height: 1.45; color: var(--texto-suave); } /* Amostra da cor no cabeçalho do painel de um fio */ .prop__amostra-fio { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--borda); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } /* De / Para de um fio */ .prop__rota { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--bg-suave); } .prop__rota-item { display: flex; gap: 8px; align-items: baseline; font-size: .8rem; } .prop__rota-item span { color: var(--texto-suave); min-width: 32px; } .prop__rota-item b { color: var(--texto); font-weight: 600; overflow-wrap: anywhere; } .prop__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .prop__eixo { position: relative; } .prop__eixo span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-family: "JetBrains Mono", Consolas, monospace; font-size: .72rem; color: var(--texto-suave); pointer-events: none; } .prop__eixo .prop__entrada { padding-left: 26px; font-family: "JetBrains Mono", Consolas, monospace; font-size: .8rem; font-variant-numeric: tabular-nums; } /* ---- Diagnóstico elétrico no painel ---- */ .prop__problema { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--raio-sm); font-size: .81rem; line-height: 1.5; } .prop__problema b { font-size: .86rem; } .prop__problema code { padding: 6px 9px; border-radius: 6px; background: color-mix(in srgb, var(--texto) 8%, transparent); font-family: "JetBrains Mono", Consolas, monospace; font-size: .76rem; } .prop__problema--erro { background: color-mix(in srgb, var(--coral) 12%, transparent); border: 1px solid color-mix(in srgb, var(--coral) 42%, transparent); } .prop__problema--erro b { color: var(--coral); } .prop__problema--aviso { background: color-mix(in srgb, var(--ambar) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ambar) 42%, transparent); } .prop__problema--aviso b { color: var(--ambar); } /* Campo de comandos do Arduino */ .prop__codigo { font-family: "JetBrains Mono", Consolas, monospace; font-size: .78rem; line-height: 1.6; resize: vertical; } .prop__acoes { display: flex; gap: 8px; margin-top: 8px; } .prop__botao { flex: 1; padding: 8px 12px; border: 0; border-radius: var(--raio-sm); background: linear-gradient(145deg, var(--ac-400), var(--ac-600)); color: #fff; font-size: .8rem; font-weight: 650; cursor: pointer; transition: filter var(--rapido), transform var(--rapido); } .prop__botao:hover { filter: brightness(1.08); transform: translateY(-1px); } .prop__botao--leve { background: var(--bg-suave); color: var(--texto-medio); border: 1px solid var(--borda); } .prop__botao--leve:hover { background: var(--bg-elevado); filter: none; } .prop__ajuda--erro { color: var(--coral) !important; } /* Tabela de tensão por terminal */ .prop__terminais { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio-sm); overflow: hidden; } .prop__terminal { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 11px; font-size: .79rem; border-bottom: 1px solid var(--borda); } .prop__terminal:last-child { border-bottom: 0; } .prop__terminal span { color: var(--texto-medio); } .prop__tensao { font-family: "JetBrains Mono", Consolas, monospace; font-size: .76rem; font-weight: 600; padding: 2px 7px; border-radius: 5px; } .prop__tensao--viva { background: color-mix(in srgb, var(--coral) 18%, transparent); color: var(--coral); } .prop__tensao--terra { background: color-mix(in srgb, var(--texto) 12%, transparent); color: var(--texto-medio); } .prop__tensao--solta { background: var(--bg-suave); color: var(--texto-suave); } /* Botão secundário dentro de um campo do painel (ex.: endireitar o fio) */ /* Dois botões de ação cabem lado a lado sem apertar o painel */ .prop__acao + .prop__acao { margin-left: 6px; } .prop__acao { margin-top: 8px; padding: 7px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background-color: var(--bg-suave); color: var(--texto-medio); font-size: .78rem; font-weight: 600; cursor: pointer; transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido); } .prop__acao:hover { background-color: color-mix(in srgb, var(--ac-400) 12%, transparent); border-color: var(--ac-400); color: var(--ac-texto); } .prop__remover { margin-top: auto; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--coral) 40%, transparent); border-radius: var(--raio-sm); background-color: color-mix(in srgb, var(--coral) 10%, transparent); color: var(--coral); font-size: .84rem; font-weight: 650; cursor: pointer; transition: background-color var(--rapido), border-color var(--rapido); } .prop__remover:hover { background-color: color-mix(in srgb, var(--coral) 18%, transparent); border-color: var(--coral); } /* Estado vazio dos painéis. Nenhum botão finge adicionar componente que ainda não existe. */ .lab__vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; flex: 1; padding: 26px 14px; text-align: center; border: 1px dashed var(--borda-forte); border-radius: var(--raio); background: var(--bg-suave); color: var(--texto-suave); font-size: .84rem; } .lab__vazio b { color: var(--texto-medio); font-size: .9rem; font-weight: 650; } .lab__vazio-ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 3px; border-radius: 12px; background: var(--bg-elevado); border: 1px solid var(--borda); color: var(--texto-suave); } .lab__vazio-ico .ico { width: 20px; height: 20px; } /* ---- Barra inferior ---- */ .lab__rodape { grid-area: rodape; display: flex; align-items: center; gap: 18px; padding: 0 16px; height: var(--h-rodape); background: var(--bg-elevado); border-top: 1px solid var(--borda); font-size: .78rem; color: var(--texto-suave); } .lab__estado { display: inline-flex; align-items: center; gap: 7px; color: var(--texto-medio); font-weight: 600; } .lab__estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); } .lab__dica { margin-inline: auto; } .lab__dica kbd { padding: 2px 6px; border-radius: 5px; background: var(--bg-suave); border: 1px solid var(--borda); font-family: inherit; font-size: .73rem; font-weight: 600; color: var(--texto-medio); } /* Coordenadas em fonte monoespaçada e largura fixa: sem isso a barra "pula" a cada pixel de movimento do cursor. */ .lab__coords { min-width: 132px; text-align: right; font-family: "JetBrains Mono", Consolas, monospace; font-size: .74rem; font-variant-numeric: tabular-nums; } /* ========================================================================= 4. BANCADA ========================================================================= */ /* Fundo liso. Uma clareza radial muito suave no centro dá profundidade sem desenhar uma única linha — é o que substitui a grade. */ .lab__bancada { grid-area: bancada; position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 38%, color-mix(in srgb, var(--ac-300) 12%, var(--bg-fundo)) 0%, var(--bg-fundo) 62%); } .bancada__svg { display: block; width: 100%; height: 100%; /* touch-action: none entrega os gestos ao nosso código em vez de deixar o navegador rolar a página por baixo. */ touch-action: none; cursor: default; } /* Espaço pressionado: o cursor avisa que dá para arrastar */ .lab__bancada.pode-arrastar .bancada__svg { cursor: grab; } .lab__bancada.arrastando .bancada__svg { cursor: grabbing; } /* ========================================================================= 5. CONTROLES DA BANCADA ========================================================================= */ .bancada__controles { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 1px; padding: 5px; background: var(--vidro); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid var(--vidro-borda); border-radius: 14px; box-shadow: inset 0 1px 0 var(--vidro-brilho), 0 2px 6px -2px rgba(8, 12, 20, .18), 0 14px 34px -14px rgba(8, 12, 20, .32); } .bancada__btn { display: grid; place-items: center; width: 38px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--texto-medio); cursor: pointer; transition: background-color var(--rapido), color var(--rapido), transform var(--rapido); } .bancada__btn:hover { background: var(--bg-suave); color: var(--texto); } .bancada__btn:active { transform: scale(.93); } .bancada__btn .ico { width: 17px; height: 17px; } /* O indicador de zoom também é o botão que volta para 100% */ .bancada__btn--zoom { width: 38px; height: 30px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ac-texto); } /* Separador antes do botão de centralizar */ #btnCentralizar { margin-top: 5px; border-top: 1px solid var(--borda); border-radius: 0 0 9px 9px; padding-top: 3px; height: 37px; } /* Desfazer e refazer são EDIÇÃO, e o resto do grupo é navegação: o separador fica depois deles, não antes. */ #btnRefazer { margin-bottom: 5px; border-bottom: 1px solid var(--borda); border-radius: 9px 9px 0 0; padding-bottom: 3px; height: 37px; } /* Sem nada para desfazer o botão continua visível, e apagado: some a dúvida de "onde foi parar aquele botão". */ .bancada__btn[disabled] { opacity: .32; cursor: default; pointer-events: none; } /* ========================================================================= 6. RESPONSIVO A prioridade da Etapa 1 é desktop, mas a interface não pode quebrar. ========================================================================= */ @media (max-width: 1100px) { .lab { grid-template-columns: 210px minmax(0, 1fr) 226px; } } /* Abaixo de 900px os painéis laterais saem e a bancada ocupa a largura toda. Eles voltam sozinhos quando a janela cresce. */ @media (max-width: 900px) { .lab { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topo" "bancada" "rodape"; } .lab__painel { display: none; } .lab__dica { display: none; } } @media (max-width: 560px) { .lab__voltar-txt { display: none; } .lab__voltar { padding: 8px 11px; } .lab__titulo span { display: none; } .lab__coords { min-width: 0; } } /* Quem pediu menos movimento não ganha transição nenhuma aqui também */ @media (prefers-reduced-motion: reduce) { .lab__voltar:hover { transform: none; } .bancada__btn:active { transform: none; } } /* ========================================================================= MINI IDE ------------------------------------------------------------------------- A gaveta ocupa uma linha própria do grid, entre a bancada e o rodapé. Com ela fechada a linha some (grid-template-rows com 0), e a bancada recupera o espaço inteiro sem nenhum salto de layout. ========================================================================= */ /* Camada por cima da direita da tela, não uma faixa no grid: com a gaveta fechada a bancada tem 100% do espaço, sem nenhum salto de layout ao abrir — o que estava na tela continua exatamente onde estava. */ .ide { position: fixed; top: calc(var(--h-topo) + 1px); /* +1: a borda da barra */ bottom: calc(var(--h-rodape) + 1px); right: 0; z-index: 40; display: flex; flex-direction: column; width: min(540px, 100vw); background: var(--bg-elevado); border-left: 1px solid var(--borda); box-shadow: -18px 0 44px -20px rgba(8, 20, 24, .38); /* Fechada: fora da tela E fora do alcance de mouse, Tab e leitor de tela. `visibility` faz as três coisas; `display` mataria a transição. */ transform: translateX(100%); visibility: hidden; transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility .26s; } .ide--aberta { transform: none; visibility: visible; } @media (prefers-reduced-motion: reduce) { .ide { transition: none; } } /* ---- Barra da gaveta ---- */ /* Duas fileiras: título e ação principal em cima, escolha do projeto e as ações de apoio embaixo. Numa gaveta estreita, tudo numa linha só empurra o botão Rodar para fora da tela. */ .ide__topo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 9px 14px; border-bottom: 1px solid var(--borda); flex-shrink: 0; } .ide__titulo { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--texto); font-size: .9rem; font-weight: 700; } .ide__titulo [data-ico] { display: grid; place-items: center; color: var(--ac-500); } .ide__titulo [data-ico] svg { width: 17px; height: 17px; } .ide__exemplos { display: flex; align-items: center; gap: 8px; order: 3; flex-basis: 100%; } .ide__exemplos .ide__select { flex: 1; min-width: 0; } .ide__rotulo { color: var(--texto-suave); font-size: .78rem; font-weight: 600; } .ide__select { padding: 6px 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--bg-suave); color: var(--texto-medio); font-family: inherit; font-size: .8rem; cursor: pointer; } .ide__select:focus-visible { outline: 2px solid var(--ac-400); outline-offset: 1px; } .ide__botoes { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } /* Branco sobre --ac-600, e não --ac-texto sobre --ac-500: aquele token é o acento ESCURECIDO para texto sobre fundo claro; sobre o próprio acento dava 1,6:1. Assim fica acima de 4,5:1 nas sete paletas. */ .ide__rodar { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: var(--raio-sm); background: var(--ac-600); color: #fff; font-family: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; transition: background-color var(--rapido); } .ide__rodar:hover { background: color-mix(in srgb, var(--ac-600) 86%, #000); } .ide__rodar-ico { display: grid; place-items: center; } .ide__rodar-ico svg { width: 14px; height: 14px; } /* Rodando: o mesmo botão vira "parar", em vermelho */ .ide__rodar--parar { background: var(--coral); color: #fff; } .ide__rodar--parar:hover { background: color-mix(in srgb, var(--coral) 85%, #000); } /* Ações de apoio da barra da IDE: presentes, mas sem disputar com o Rodar */ .ide__secundario { padding: 7px 12px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--bg-suave); color: var(--texto-medio); font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color var(--rapido), color var(--rapido), background-color var(--rapido); } .ide__secundario:hover { border-color: var(--ac-400); color: var(--ac-texto); background: color-mix(in srgb, var(--ac-400) 12%, transparent); } .ide__secundario:disabled { opacity: .45; cursor: default; } .ide__secundario:disabled:hover { border-color: var(--borda); color: var(--texto-medio); background: var(--bg-suave); } .ide__fechar { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: transparent; color: var(--texto-suave); cursor: pointer; transition: color var(--rapido), border-color var(--rapido); } .ide__fechar:hover { color: var(--texto); border-color: var(--borda-forte); } .ide__fechar svg { width: 15px; height: 15px; } /* ---- Corpo: editor à esquerda, serial à direita ---- */ /* Estreita e alta: editor em cima, serial embaixo. Lado a lado sobrariam ~30 colunas de código, o que não serve para escrever nada. */ .ide__corpo { display: grid; grid-template-rows: minmax(0, 1fr) minmax(120px, 34%); flex: 1; min-height: 0; } /* ========================================================================= EDITOR ------------------------------------------------------------------------- Três camadas empilhadas com a MESMA métrica: · .editor__linhas régua de números, fora da área de rolagem lateral · .editor__pintura 
 colorido, atrás
     · .editor__texto