/* Cores dos temas (lib/tema.js põe data-tema="claro" ou "escuro" no <html>).
   --fundo também é o fundo da cena 3D. O claro é cinza suave, sem branco puro, para longas horas de uso. */
:root, :root[data-tema="escuro"] {
    color-scheme: dark;
    --fundo: #1e1e1e;
    --painel: #363636;
    --painel-borda: #141414;
    --campo: #1e1e1e;
    --botao: #292929;
    --texto: #8f8f8f;
    --texto-claro: #c8c8c8;
    --texto-forte: #e8e8e8;
    --texto-hover: #ffffff;
    --borda-hover: #8f8f8f;
    --borda-rodape: #4a4a4a;
    --sombra: #000000;
    --destaque: #e0a040;
    --destaque-hover: #f0b450;
    --destaque-texto: #e0a040;
    --sobre-destaque: #1e1e1e;
    --ativo-fundo: #5a4a12;
    --ativo-texto: #f0d060;
    --perigo: #e06c6c;
    --borda-perigo: #5a1a1a;
    --fundo-modal: rgba(0, 0, 0, 0.5);
}

:root[data-tema="claro"] {
    color-scheme: light;
    --fundo: #dfe2e6;
    --painel: #f4f5f7;
    --painel-borda: #c9ced5;
    --campo: #ffffff;
    --botao: #e4e7eb;
    --texto: #4b525b;
    --texto-claro: #353b42;
    --texto-forte: #1f2429;
    --texto-hover: #111417;
    --borda-hover: #7d858f;
    --borda-rodape: #bcc2c9;
    --sombra: rgba(0, 0, 0, 0.25);
    --destaque: #e0a040;
    --destaque-hover: #d4912c;
    --destaque-texto: #a4620c;
    --sobre-destaque: #1f2429;
    --ativo-fundo: #f3dfa6;
    --ativo-texto: #6b4c00;
    --perigo: #c0392b;
    --borda-perigo: #e2aaa3;
    --fundo-modal: rgba(30, 36, 42, 0.35);
}

* {
    padding: 0;
    margin-top: 0;
    font-family: 'Inter', sans-serif;
}

body {
    display: flex;
    background-color: var(--fundo);
    overflow: hidden;
}

#tower-container {
    position: relative;
    z-index: 1;
}

#forms {
    position: absolute;
    width: 140px;
    left: 10px;
    top: 6px;
    max-height: calc(100vh - 12px);
    overflow-y: auto;
    z-index: 2;
}

#formProjeto {
    display: flex;
    gap: 4px;
}

#formProjeto .botao {
    margin-top: 0;
    padding: 6px 0;
    font-size: 0.75rem;
    border: 2px solid var(--painel-borda);
    background-color: var(--painel);
}

#form1, #form3 {
    margin-top: 6px;
    border: 2px solid var(--painel-borda);
    padding: 0 10px 10px 10px;
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--texto);
    overflow-x: hidden;
}

.input-box{
    display: flex;
    flex-direction: column;
    margin: 10px 0 10px 0;
}

#form1 input {
    padding-left: 10px;
    width: 70px;
    margin-top: 5px;
    align-self: flex-start;
    border: none;
    background-color: var(--campo);
    height: 25px;
    border-radius: 5px;
    color: var(--texto);

}


#tipoTorre{
    width: 90%;
    margin-top: 5px;
    background-color: var(--campo);
    color: var(--texto);
    border-radius: 5px;
    border: none;
    height: 25px;
}

#loadButton{
    margin-left: 18px;
    border: none;
    background-color: var(--botao);
    padding: 0.6rem;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 400;
    color: var(--texto);
}

#loadButton:hover{
    box-shadow: 1px 1px 6px var(--sombra);
}

#csvFile{
    display: none;
}

#custom-file-upload {
    margin-top: 8px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: var(--botao);
    border-radius: 4px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#custom-file-upload:hover {
    box-shadow: 1px 1px 6px var(--sombra);
}

#fileNameDisplay {
    font-size: 0.93rem;
    font-weight: 400;
    color: var(--texto);
}

/* Balões de informação presos aos objetos (lib/baloes.js); não bloqueiam o clique na torre */
#baloes {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

#baloesLinhas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.balao {
    position: absolute;
    padding: 10px;
    border: 1px solid #9a9a9a;
    border-radius: 8px;
    background-color: #ffffff;
    /* Texto preto fixo: o color-scheme do tema escuro deixaria o texto herdado claro no balão branco */
    color: #000000;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    line-height: 1.21;
    white-space: nowrap;
    /* Arrastável para arrumar os prints */
    pointer-events: auto;
    cursor: move;
    user-select: none;
}

.balao.arrastado {
    border-color: #555555;
}

.balao hr {
    margin: 3px 0;
    border: none;
    border-top: 1px solid #bbbbbb;
}

.botao {
    margin-top: 0;
    padding: 6px 0;
    font-size: 0.75rem;
    border: 2px solid var(--painel-borda);
    background-color: var(--painel);
}

#form1, #form3 {
    margin-top: 6px;
    border: 2px solid var(--painel-borda);
    padding: 0 10px 10px 10px;
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--texto);
    overflow-x: hidden;
}

.input-box{
    display: flex;
    flex-direction: column;
    margin: 10px 0 10px 0;
}

#form1 input {
    padding-left: 10px;
    width: 70px;
    margin-top: 5px;
    align-self: flex-start;
    border: none;
    background-color: var(--campo);
    height: 25px;
    border-radius: 5px;
    color: var(--texto);

}


#tipoTorre{
    width: 90%;
    margin-top: 5px;
    background-color: var(--campo);
    color: var(--texto);
    border-radius: 5px;
    border: none;
    height: 25px;
}

#loadButton{
    margin-left: 18px;
    border: none;
    background-color: var(--botao);
    padding: 0.6rem;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 400;
    color: var(--texto);
}

#loadButton:hover{
    box-shadow: 1px 1px 6px var(--sombra);
}

#csvFile{
    display: none;
}

#custom-file-upload {
    margin-top: 8px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: var(--botao);
    border-radius: 4px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#custom-file-upload:hover {
    box-shadow: 1px 1px 6px var(--sombra);
}

#fileNameDisplay {
    font-size: 0.93rem;
    font-weight: 400;
    color: var(--texto);
}

#popup{
    width: 150px;
    font-size: 0.8rem;
    position: absolute;
    background-color: white;
    /* Texto preto fixo: o color-scheme do tema escuro deixaria o texto herdado claro no balão branco */
    color: #000000;
    border: none;
    padding: 10px;
    z-index: 1000;
    display: none;
    border-radius: 10px;
}

.arrow-left:after {
    content: '';
    position: absolute;
    top: 10px;
    left: -30px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 30px solid white;

}

.arrow-right:after {
    content: '';
    position: absolute;
    top: 10px;
    right: -30px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 30px solid white;
}

.status-a-retirar {
    color: red;
    font-weight: bold;
}

.status-existente {
    color: black;
    font-weight: normal;
}

.status-a-instalar {
    color: green;
    font-weight: bold;
}

.botao {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background-color: var(--botao);
    color: var(--texto);
    font-size: 0.85rem;
    cursor: pointer;
}

.botao:hover {
    box-shadow: 1px 1px 6px var(--sombra);
}

.botao:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

.botao-ativo {
    background-color: var(--ativo-fundo);
    color: var(--ativo-texto);
}

/* Vários itens selecionados com valores diferentes neste campo */
#editor-antena .campo-varios {
    font-style: italic;
}

#dicaEdicao {
    display: none;
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.4;
}

.botao-perigo {
    color: var(--perigo);
}

#editor-antena, #editor-suporte, #editor-plataforma {
    display: none;
    position: absolute;
    left: 164px;
    top: 12px;
    width: 250px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    z-index: 3;
    border: 2px solid var(--painel-borda);
    padding: 10px;
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--texto);
    font-size: 0.85rem;
}

#avisos {
    display: none;
    position: absolute;
    right: 12px;
    top: 12px;
    max-width: 280px;
    max-height: 40vh;
    overflow-y: auto;
    z-index: 3;
    border: 2px solid var(--borda-perigo);
    padding: 8px 10px;
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--perigo);
    font-size: 0.8rem;
    line-height: 1.5;
}

#avisos .aviso {
    color: var(--texto-claro);
    cursor: pointer;
}

#avisos .aviso:hover {
    text-decoration: underline;
}

#dialogSite, #dialogAdicionar {
    margin: auto; /* Centraliza; o reset global "* { margin-top: 0 }" removia a centralização padrão */
    width: 380px;
    border: 2px solid var(--painel-borda);
    padding: 14px;
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--texto);
    font-size: 0.85rem;
}

#dialogSite::backdrop, #dialogAdicionar::backdrop {
    background-color: var(--fundo-modal);
}

#dialogSite .editor-grid, #dialogAdicionar .editor-grid {
    grid-template-columns: 100px 1fr;
}

#btnSite {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.editor-titulo {
    font-size: 1rem;
    margin-bottom: 8px;
}

.editor-grid {
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 6px 8px;
    align-items: center;
}

.editor-grid input, .editor-grid select {
    width: 100%;
    box-sizing: border-box;
    height: 25px;
    padding-left: 6px;
    border: none;
    border-radius: 5px;
    background-color: var(--campo);
    color: var(--texto);
}

.editor-grid select:disabled, .editor-grid input:disabled {
    opacity: 0.5;
}

.editor-botoes {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.editor-botoes .botao {
    margin-top: 0;
}

.error-message {
    color: red;
    font-size: 0.9em;
    display: none;
}



#rodape {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
}

#rodape a {
    padding: 5px 12px;
    border: 1px solid var(--borda-rodape);
    border-radius: 999px;
    background-color: var(--botao);
    color: var(--texto-claro);
    text-decoration: none;
    cursor: pointer;
}

#rodape a:hover {
    border-color: var(--borda-hover);
    color: var(--texto-hover);
    box-shadow: 1px 1px 6px var(--sombra);
}

/* "Como usar" é o link mais útil para quem chega: mesma cor do botão de destaque */
#rodape a.rodape-destaque {
    border-color: var(--destaque-texto);
    color: var(--destaque-texto);
}

#rodape a.rodape-destaque:hover {
    background-color: var(--destaque);
    color: var(--sobre-destaque);
}

/* Atalhos ilustrados (lib/atalhos.js): faixa de baixo, entre o painel esquerdo e o rodapé (right vem do JS).
   Uma linha só: o que não cabe quebra para a segunda, escondida pela altura fixa. */
#atalhos {
    position: absolute;
    left: 164px;
    right: 520px;
    bottom: 12px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

#atalhos > button {
    flex: none;
    pointer-events: auto;
}

#atalhos.recolhida > button {
    opacity: 0.6;
}

#atalhos.recolhida > button:hover {
    opacity: 1;
}

.atalhos-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 16px;
    height: 44px;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.7rem;
    opacity: 0.65;
    transition: opacity 0.15s;
    pointer-events: auto;
}

.atalhos-lista:hover {
    opacity: 1;
}

#atalhos.recolhida .atalhos-lista {
    display: none;
}

.atalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    height: 44px;
    cursor: default;
    white-space: nowrap;
}

.atalho-gestos {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
    color: var(--texto-claro);
}

.atalho kbd {
    min-width: 20px;
    padding: 1px 5px;
    border: 1px solid var(--borda-rodape);
    border-bottom-width: 3px;
    border-radius: 4px;
    background-color: var(--botao);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
}

.atalho .mais {
    font-size: 0.7rem;
}

.atalho svg.mouse {
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.atalho svg.mouse .mouse-destaque {
    fill: var(--destaque-texto);
    stroke: none;
}

.atalho-divisor {
    align-self: center;
    width: 1px;
    height: 30px;
    background-color: var(--borda-rodape);
}

#boasVindas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100vw - 200px));
    z-index: 4;
    border: 2px solid var(--painel-borda);
    padding: 16px 20px 20px;
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--texto-claro);
    font-size: 0.9rem;
    line-height: 1.5;
}

#boasVindas[hidden] {
    display: none;
}

#boasVindas h2 {
    color: var(--texto-forte);
    font-size: 1.2rem;
    margin-bottom: 6px;
}

#boasVindas .botao {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.botao-destaque {
    color: var(--sobre-destaque);
    background-color: var(--destaque);
}

.botao-destaque:hover {
    background-color: var(--destaque-hover);
}

.boas-vindas-requisitos {
    margin: 14px 0 0;
    font-size: 0.75rem;
    color: var(--texto);
}

.boas-vindas-requisitos a {
    color: var(--destaque-texto);
}

#avisoHardware {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 480px));
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--destaque-texto);
    padding: 8px 10px 8px 14px;
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--texto-forte);
    font-size: 0.8rem;
    line-height: 1.4;
}

#avisoHardware[hidden] {
    display: none;
}

#avisoHardware a {
    color: var(--destaque-texto);
    white-space: nowrap;
}

#btnFecharAvisoHardware {
    border: none;
    background: none;
    color: var(--texto);
    font-size: 1.2rem;
    cursor: pointer;
}

#btnTema, #btnIdioma, .botao-rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--borda-rodape);
    border-radius: 50%;
    background-color: var(--botao);
    color: var(--texto-claro);
    cursor: pointer;
}

#btnTema:hover, #btnIdioma:hover, .botao-rodape:hover {
    border-color: var(--borda-hover);
    color: var(--texto-hover);
    box-shadow: 1px 1px 6px var(--sombra);
}

#btnTema svg, .botao-rodape svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

#dialogAdicionar {
    width: 340px;
}

#suporteSelecionado {
    display: none;
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--ativo-texto);
}


.dialog-texto {
    margin: 0 0 10px;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Carrossel de quadros do relatório (prints e vistas superiores), no lado direito */
#carrossel {
    position: absolute;
    right: 12px;
    top: 12px;
    bottom: 52px;
    width: 150px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#carrossel[hidden] {
    display: none;
}

#quadros {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px;
    scrollbar-width: thin;
}

.quadro {
    position: relative;
    flex: none;
    height: 100px;
    border: 2px solid var(--painel-borda);
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
    cursor: pointer;
}

.quadro img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Marca d'água nas prévias (o endereço vem de lib/marca.js, em --marca); no PDF ela é gravada na imagem */
.quadro::after, #painelMoldura::after {
    content: var(--marca, "");
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(91, 100, 112, 0.45);
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 0 2px #ffffff;
    pointer-events: none;
}

#painelMoldura {
    position: relative;
}

#painelMoldura::after {
    font-size: 0.85rem;
}

#painelMoldura:not(:has(#painelImagem[src]))::after {
    content: none;
}

.quadro:hover {
    box-shadow: 1px 1px 6px var(--sombra);
}

.quadro.selecionado {
    border-color: var(--destaque);
}

.quadro-titulo {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1px 6px;
    border-top-right-radius: 6px;
    background-color: var(--painel);
    color: var(--texto-claro);
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quadro-acoes {
    position: absolute;
    top: 4px;
    right: 4px;
    display: none;
    gap: 4px;
}

.quadro:hover .quadro-acoes, .quadro.selecionado .quadro-acoes {
    display: flex;
}

.quadro-acoes button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--painel);
    color: var(--texto-claro);
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 1px 1px 4px var(--sombra);
}

.quadro-acoes button[data-acao="excluir"]:hover {
    color: var(--perigo);
}

/* O "+" fica preso embaixo; os quadros rolam acima dele */
#quadroNovo {
    position: relative;
    flex: none;
}

#btnQuadroNovo {
    display: block;
    width: 100%;
    height: 100px;
    border: 2px dashed var(--borda-rodape);
    border-radius: 8px;
    background-color: transparent;
    color: var(--texto);
    font-size: 2.2rem;
    font-weight: 300;
    cursor: pointer;
}

#btnQuadroNovo:hover {
    border-color: var(--destaque);
    color: var(--destaque-texto);
    background-color: var(--painel);
    box-shadow: 1px 1px 8px var(--sombra);
}

#btnQuadroNovo.cheio {
    opacity: 0.6;
}

#contadorQuadros {
    position: absolute;
    right: 8px;
    bottom: 5px;
    font-size: 0.65rem;
    color: var(--texto);
    pointer-events: none;
}

/* À esquerda do "+": abrindo para cima, o menu saía da tela com o carrossel vazio */
#menuQuadro {
    position: absolute;
    right: calc(100% + 8px);
    bottom: 0;
    width: 190px;
    padding: 4px;
    border: 2px solid var(--painel-borda);
    border-radius: 8px;
    background-color: var(--painel);
    box-shadow: 1px 1px 8px var(--sombra);
}

#menuQuadro[hidden] {
    display: none;
}

#menuQuadro button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--texto-claro);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
}

#menuQuadro button:hover {
    background-color: var(--botao);
}

kbd {
    padding: 0 5px;
    border: 1px solid var(--borda-rodape);
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: inherit;
}

/* Com o carrossel, os avisos ficam à esquerda dele */
body.com-carrossel #avisos {
    right: 174px;
}

#btnIdioma {
    font-size: 0.65rem;
    font-weight: 600;
}

/* Celular e tablet: aviso por cima de tudo (a detecção fica no <head> do index.html) */
#bloqueioMovel {
    display: none;
}

.sem-computador #bloqueioMovel {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--fundo);
    color: var(--texto-claro);
    text-align: center;
    line-height: 1.5;
}

.sem-computador #bloqueioMovel > div {
    max-width: 420px;
}

.sem-computador #bloqueioMovel h2 {
    color: var(--texto-forte);
    font-size: 1.3rem;
}

.sem-computador #bloqueioMovel a {
    color: var(--destaque-texto);
}

.sem-computador #rodape, .sem-computador #atalhos, .sem-computador #boasVindas, .sem-computador #avisoHardware {
    display: none;
}

/* Lixeira: exclui todos os quadros */
#btnLimparQuadros {
    position: absolute;
    left: 6px;
    bottom: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--texto);
    cursor: pointer;
}

#btnLimparQuadros[hidden] {
    display: none;
}

#btnLimparQuadros:hover {
    color: var(--perigo);
}

#btnLimparQuadros svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quadro.novo {
    border-color: var(--destaque);
    box-shadow: 0 0 10px var(--destaque);
}

/* Painel ao lado do carrossel, ligado ao quadro por um funil */
#painelLateral {
    position: absolute;
    right: 226px;
    top: 12px;
    width: min(520px, calc(100vw - 420px));
    z-index: 5;
    padding: 10px;
    border: 2px solid var(--destaque);
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--texto-claro);
    font-size: 0.85rem;
    box-shadow: 1px 1px 12px var(--sombra);
}

/* Escolhendo a faixa: estreito, para deixar a torre livre para clicar nos objetos */
#painelLateral.modo-faixa {
    width: 320px;
}

#painelLateral[hidden] {
    display: none;
}

.painel-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: var(--texto-forte);
    font-weight: 600;
}

#btnFecharPainel {
    border: none;
    background: none;
    color: var(--texto);
    font-size: 1.2rem;
    cursor: pointer;
}

#painelImagem {
    display: block;
    width: 100%;
    max-height: calc(100vh - 220px);
    object-fit: contain;
    border-radius: 6px;
    background-color: #ffffff;
}

#painelImagem:not([src]) {
    display: none;
}

#painelAviso {
    color: var(--perigo);
    font-size: 0.75rem;
}

#painelAviso:empty {
    display: none;
}

.faixa-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.faixa-campos input {
    width: 64px;
    height: 25px;
    padding-left: 6px;
    border: none;
    border-radius: 5px;
    background-color: var(--campo);
    color: var(--texto-claro);
}

.faixa-campos .botao {
    width: auto;
    margin-top: 0;
    padding: 5px 12px;
}

#ligacaoPainel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

#ligacaoPainel polygon {
    fill: var(--destaque);
    fill-opacity: 0.12;
    stroke: var(--destaque);
    stroke-width: 1.5;
    stroke-opacity: 0.8;
}

/* Editor de item de troca: o outro item, com atalho */
#editorTroca {
    margin-top: 10px;
    padding: 6px 8px;
    border-left: 3px solid var(--destaque);
    background-color: var(--botao);
    font-size: 0.75rem;
    line-height: 1.4;
}

#editorTroca[hidden] {
    display: none;
}

#editorTroca .botao {
    margin-top: 4px;
}

/* ⇄ ao lado das duas RRUs selecionadas, como um balão pequeno */
#btnTrocarRRU {
    position: fixed;
    z-index: 4;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid #ffd400;
    border-radius: 50%;
    background-color: var(--painel);
    color: var(--texto);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 6px var(--sombra);
}

#btnTrocarRRU:hover {
    background-color: #ffd400;
    color: #1e1e1e;
}

#btnTrocarRRU[hidden] {
    display: none;
}

#btnSupRemover[hidden], #btnEditarSuporte[hidden] {
    display: none;
}

/* Atalho do editor do item para o editor do suporte dele */
.botao-link {
    margin-top: 8px;
    width: 100%;
    font-size: 0.75rem;
}

#editor-suporte .editor-nota, #editor-plataforma .editor-nota {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--texto-claro);
}

/* Arrasto do vento: parâmetros à esquerda, resultado à direita */
#dialogArrasto {
    margin: auto;
    width: min(1100px, 96vw);
    max-height: 92vh;
    border: 2px solid var(--painel-borda);
    padding: 14px;
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--texto);
    font-size: 0.85rem;
}

.vento-corpo {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.vento-parametros {
    flex: 0 0 260px;
}

.vento-check {
    display: flex;
    gap: 6px;
    align-items: center;
}

.vento-check input {
    width: auto;
}

#ventoResultado {
    flex: 1;
    min-width: 0;
}

#ventoResultado table {
    border-collapse: collapse;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

#ventoResultado th, #ventoResultado td {
    padding: 2px 6px;
    text-align: right;
    border-bottom: 1px solid var(--borda-rodape);
}

#ventoResultado .vento-descricao, #ventoResultado .vento-resumo th {
    text-align: left;
}

.vento-tabela {
    max-height: 48vh;
    overflow: auto;
    margin-top: 6px;
}

.vento-tabela thead th {
    position: sticky;
    top: 0;
    background-color: var(--painel);
}

/* Retirados só contam na situação atual; novos, só na final */
.vento-atual td {
    color: var(--perigo);
}

.vento-final td {
    color: #1a9a35;
}

.vento-diferenca {
    margin: 6px 0;
    font-size: 0.8rem;
}

.vento-memoria {
    margin-top: 8px;
    font-size: 0.75rem;
}

.vento-memoria ul {
    margin: 4px 0 4px 18px;
    padding: 0;
}

.vento-formulas {
    margin: 4px 0;
    font-family: monospace;
}

/* Menu das paisagens, acima do botão do rodapé */
#menuPaisagem {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    padding: 4px;
    border: 1px solid var(--borda-rodape);
    border-radius: 10px;
    background-color: var(--painel);
    box-shadow: 1px 1px 8px var(--sombra);
}

#menuPaisagem[hidden] {
    display: none;
}

#menuPaisagem button {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--texto);
    text-align: left;
    cursor: pointer;
}

#menuPaisagem button:hover {
    background-color: var(--botao);
}

#menuPaisagem button.ativo {
    color: var(--destaque-texto);
    font-weight: 600;
}

/* Painel de desempenho: canto inferior direito, acima do rodapé */
#painelDesempenho {
    position: absolute;
    right: 12px;
    bottom: 52px;
    z-index: 3;
    width: 300px;
    padding: 8px 12px 10px;
    border: 1px solid var(--borda-rodape);
    border-radius: 10px;
    background-color: var(--painel);
    color: var(--texto);
    font-size: 0.75rem;
    box-shadow: 1px 1px 8px var(--sombra);
}

#painelDesempenho[hidden] {
    display: none;
}

.painel-desempenho-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    color: var(--texto-forte);
}

#btnFecharDesempenho {
    border: none;
    background: none;
    color: var(--texto);
    font-size: 1.1rem;
    cursor: pointer;
}

#painelDesempenho table {
    width: 100%;
    border-collapse: collapse;
}

#painelDesempenho th {
    padding: 2px 8px 2px 0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    color: var(--texto-claro);
}

#painelDesempenho td {
    padding: 2px 0;
    text-align: right;
    color: var(--texto-forte);
    font-variant-numeric: tabular-nums;
}

#painelDesempenho p {
    margin: 6px 0 0;
    color: var(--texto-claro);
    line-height: 1.4;
}