/* /Components/AnaliseDoBanco.razor.rz.scp.css */
/* --------------------------------------------------------------------------
   O ScrollViewer "desbalanco": os quatro blocos empilhados, centrados na página.

   No XAML os blocos estão em StackPanels com HorizontalAlignment="Left"; aqui ficam
   centrados, que é o que a vista de tabelas já faz e o que dá conta de telas largas
   sem deixar tudo encostado numa borda.
   -------------------------------------------------------------------------- */
.painel[b-n0ic9fdbv4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 calc(14px * var(--fw)) calc(24px * var(--fh));
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(13px * var(--fw));
}

/* fail_table_title / graphics_title / Diagramas: Font_30, negrito, centralizados */
.titulo[b-n0ic9fdbv4] {
    margin: calc(16px * var(--fh)) 0 calc(8px * var(--fh));
    font-size: calc(20px * var(--fw));
    font-weight: 700;
    text-align: center;
}

.indisponivel[b-n0ic9fdbv4] {
    margin: calc(6px * var(--fh)) 0;
    color: var(--erro);
    text-align: center;
}

/* --------------------------------------------------------------------------
   fail_table — quatro colunas de largura fixa, sem divisas, como o Grid do XAML
   -------------------------------------------------------------------------- */
.tb-falhas[b-n0ic9fdbv4] {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.tb-falhas th[b-n0ic9fdbv4],
.tb-falhas td[b-n0ic9fdbv4] {
    width: calc(200px * var(--fw));
    height: calc(24px * var(--fh));
    padding: 0 calc(8px * var(--fw));
    text-align: center;
    font-size: calc(14px * var(--fw));
}

/* o cabeçalho e a coluna dos rótulos são os negritos de Create_fail_table */
.tb-falhas th[b-n0ic9fdbv4] { font-weight: 700; }
.tb-falhas td.rotulo[b-n0ic9fdbv4] { font-weight: 700; }

/* fail_alarm e fail_trip: Font_20, negrito, nas duas cores da proteção */
.fail-alarme[b-n0ic9fdbv4],
.fail-desligamento[b-n0ic9fdbv4] {
    margin: calc(8px * var(--fh)) 0 0;
    font-size: calc(14px * var(--fw));
    font-weight: 700;
    text-align: center;
}

.fail-alarme[b-n0ic9fdbv4] { color: #DFDF00; }
.fail-desligamento[b-n0ic9fdbv4] { color: #FF0000; }

/* --------------------------------------------------------------------------
   Superior — a barra do unifilar
   -------------------------------------------------------------------------- */
.barra-unifilar[b-n0ic9fdbv4] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(8px * var(--fw));
    margin-bottom: calc(8px * var(--fh));
}

.bt-unifilar[b-n0ic9fdbv4] {
    display: inline-flex;
    align-items: center;
    gap: calc(6px * var(--fw));
    height: calc(27px * var(--fh));
    padding: 0 calc(12px * var(--fw));
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.bt-unifilar img[b-n0ic9fdbv4] { height: calc(16px * var(--fh)); width: auto; }

/*
    Os três botões de fase seguem o mesmo desenho dos botões de tabela: o da fase em
    uso some e o rótulo aparece no lugar, superposto, para a largura não mudar.
*/
.fases[b-n0ic9fdbv4] { display: inline-flex; gap: calc(6px * var(--fw)); }

.slot-fase[b-n0ic9fdbv4] { display: inline-grid; }
.slot-fase > *[b-n0ic9fdbv4] { grid-area: 1 / 1; }

/* centralização pelo flex, e não a implícita do <button> — ver .bt-vista */
.bt-fase[b-n0ic9fdbv4],
.rotulo-fase[b-n0ic9fdbv4] {
    box-sizing: border-box;
    width: calc(84px * var(--fw));
    height: calc(27px * var(--fh));
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
}

.bt-fase[b-n0ic9fdbv4] { cursor: pointer; }

.rotulo-fase[b-n0ic9fdbv4] { font-weight: 700; }

.invisivel[b-n0ic9fdbv4] { visibility: hidden; }

/* lb1_bank_unit1..4: FontWeight="ExtraBold", centralizados */
.rotulos-tela[b-n0ic9fdbv4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(6px * var(--fh));
}

.rotulo-banco[b-n0ic9fdbv4] {
    font-size: calc(14px * var(--fw));
    font-weight: 800;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   unifilar_scroll

   A segunda região rolável da aplicação. Vale aqui o mesmo cuidado da área das
   tabelas: "safe center" mantém o diagrama centrado enquanto ele cabe e devolve o
   alinhamento ao início quando não cabe — com "center" puro, o que passa da borda
   esquerda não entra no scrollWidth e fica inalcançável.
   -------------------------------------------------------------------------- */
.rolagem-unifilar[b-n0ic9fdbv4] {
    width: 100%;
    max-height: 60vh;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;
    justify-content: safe center;
}

.para-png[b-n0ic9fdbv4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(10px * var(--fh)) calc(30px * var(--fw));
}

/*
    lb2_bank_unit1..4 existem só para o PNG. No UWP eles são mostrados e escondidos
    à mão em volta do RenderTargetBitmap; aqui ficam fora do fluxo o tempo todo e
    quem os desenha é o exportador, que lê texto, cor e tamanho daqui.
*/
.rotulos-png[b-n0ic9fdbv4] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.rotulo-png[b-n0ic9fdbv4] { font-weight: 800; text-align: center; display: block; }
.rotulo-png.grande[b-n0ic9fdbv4] { font-size: 80px; }
.rotulo-png.medio[b-n0ic9fdbv4] { font-size: 60px; }

/* o Grid do diagrama: uma imagem por célula, sem espaço entre elas */
.diagrama[b-n0ic9fdbv4] {
    display: grid;
    gap: 0;
    line-height: 0;
}

.diagrama img[b-n0ic9fdbv4] { display: block; }

/* --------------------------------------------------------------------------
   O gráfico, com a mesma moldura do GraficoFase
   -------------------------------------------------------------------------- */
[b-n0ic9fdbv4] .grafico {
    width: 100%;
    max-width: calc(900px * var(--fw));
    margin: 0;
}
/* /Components/Capacitancias.razor.rz.scp.css */
.barra[b-iwa4ppn1em] {
    width: 100%;
    border-bottom: 1px solid var(--linha);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(13px * var(--fw));
    flex: 0 0 auto;
}

.linha[b-iwa4ppn1em] {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--fw));
    width: 100%;
    padding: calc(6px * var(--fh)) calc(14px * var(--fw));
    box-sizing: border-box;
}

.linha.superior[b-iwa4ppn1em] { flex-wrap: wrap; gap: calc(8px * var(--fw)); }
.linha.inferior[b-iwa4ppn1em] { border-top: 1px solid var(--linha); }

.separador[b-iwa4ppn1em] { flex: 1; }
.status[b-iwa4ppn1em] { color: var(--textos-fracos); font-size: calc(12px * var(--fw)); }
.status.falha[b-iwa4ppn1em] { color: var(--erro); font-weight: 600; }
.projeto-ativo[b-iwa4ppn1em] { font-weight: 600; }

/* --------------------------------------------------------------------------
   1ª linha
   -------------------------------------------------------------------------- */
.bloco-check[b-iwa4ppn1em] { display: flex; flex-direction: column; justify-content: center; gap: 2px; }

.check-med-desv[b-iwa4ppn1em] {
    align-items: center;      /* alinhado ao centro do texto de duas linhas */
    white-space: nowrap;
    display: flex;

    gap: calc(6px * var(--fw));
    line-height: 1.25;
    cursor: pointer;
}

/* a caixa nativa tem tamanho fixo: entra no dimensionamento como o resto */
.check-med-desv input[type="checkbox"][b-iwa4ppn1em] {
    flex: 0 0 auto;
    margin: 0;
    width: calc(13px * var(--fw));
    height: calc(13px * var(--fh));
}

/* a entrada 12 do dicionário quebra a linha depois de "Entrar com" */
.check-med-desv span[b-iwa4ppn1em] { white-space: pre-line; }

.check-med-desv input:disabled[b-iwa4ppn1em] { cursor: default; }
.check-med-desv input:disabled + span[b-iwa4ppn1em] { color: var(--textos-fracos); }



/*
    display:flex com align-items/justify-content no centro, e não a centralização
    implícita do <button>: com altura fixa e rótulo de duas linhas, aquela deixava o
    texto fora do eixo — medido em .bt-tabela, 3,7px de folga acima contra 1,3 abaixo.
    O flex centra pelos dois eixos qualquer que seja o --fh, que é o que muda com a
    resolução da tela.
*/
.bt-vista[b-iwa4ppn1em], .bt-placa-med[b-iwa4ppn1em] {
    height: calc(43px * var(--fh));   /* mesma altura mesmo com rótulo de uma linha só */
    flex: 0 0 auto;
    width: calc(169px * var(--fw));   /* largura do maior rótulo, igual para todos */
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    line-height: 1.25;
    padding: 4px 10px;
    white-space: pre-line;
    text-align: center;
    cursor: pointer;
}

.bt-placa-med[b-iwa4ppn1em] { font-weight: 600; }

/* balanceando pelas medidas: fundo azul da fase A, com o texto branco do par (cores_fixas[4]) */
.bt-placa-med.por-medidas[b-iwa4ppn1em] {
    background: rgb(0, 153, 255);
    color: #FFFFFF;
    border-color: rgb(0, 122, 204);
}

.erro-med[b-iwa4ppn1em] { display: flex; align-items: center; gap: 4px; }
.erro-med .rotulo[b-iwa4ppn1em] { white-space: nowrap; }

.cx-erro[b-iwa4ppn1em] {
    width: calc(52px * var(--fw));
    font: inherit;
    font-weight: 700;
    text-align: center;
    border: 1px solid var(--linha);
    padding: 2px 0;
}

.labels-erro[b-iwa4ppn1em] { display: flex; align-items: center; gap: 12px; }

.label-fase[b-iwa4ppn1em] {
    font-size: calc(12px * var(--fw));
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2ª linha — seleção de tabela: botão e bloco de texto superpostos na mesma
   célula do grid; só um dos dois fica visível e o outro reserva o espaço.
   -------------------------------------------------------------------------- */
.seletor-tabelas[b-iwa4ppn1em] { display: flex; gap: 6px; }

.slot-tabela[b-iwa4ppn1em] { display: inline-grid; }
.slot-tabela > *[b-iwa4ppn1em] { grid-area: 1 / 1; }

.bt-opcoes[b-iwa4ppn1em] { font: inherit; cursor: pointer; }

/*
    A largura vem do rótulo, não de um número fixo.

    Passei por dois números fixos aqui — 164 e 194 — e os dois quebravam, porque a medida
    certa muda com o idioma: "Desvios entre Capacitâncias [%]" pede 194, mas "Deviations
    between Capacitances [%]" pede 226 e "Desviaciones entre Capacitancias [%]" pede 224.
    Qualquer valor que coubesse na linha em português cortava o texto em inglês. Não há
    número fixo que sirva para os três.

    Com a largura vindo do conteúdo, medido nos três idiomas a --fw = 1,5: nenhum rótulo
    transborda do botão e a linha inteira continua cabendo na janela.

    Os botões deixam de ter todos a mesma largura, e isso não faz o layout "dançar": o
    slot sobrepõe botão e rótulo na mesma célula, então a largura é a mesma nos dois
    estados e trocar de tabela não mexe em nada. Só mudar de idioma muda as medidas.

    A altura continua nos 27px de sempre, com o rótulo numa linha só.
*/
.bt-opcoes[b-iwa4ppn1em], .bt-tabela[b-iwa4ppn1em], .rotulo-tabela[b-iwa4ppn1em] {
    box-sizing: border-box;
    min-width: calc(120px * var(--fw));   /* para "Opções" não ficar espremido */
    height: calc(27px * var(--fh));

    /* mesma razão do .bt-vista: centralização pelo flex, não pela do <button> */
    display: flex;
    align-items: center;
    justify-content: center;
}

.bt-tabela[b-iwa4ppn1em], .rotulo-tabela[b-iwa4ppn1em] {
    white-space: nowrap;
    text-align: center;
}

.bt-tabela[b-iwa4ppn1em] {
    font: inherit;
    padding: 3px 10px;
    cursor: pointer;
}

.rotulo-tabela[b-iwa4ppn1em] {
    padding: 3px 10px;
    font-weight: 700;
}

.invisivel[b-iwa4ppn1em] { visibility: hidden; }

/* --------------------------------------------------------------------------
   Menu de opções — mesma estrutura do SGrid: botão "Options" + Popup.
   -------------------------------------------------------------------------- */
.opcoes[b-iwa4ppn1em] { position: relative; display: inline-flex; flex: 0 0 auto; }

.fundo-menu[b-iwa4ppn1em] { position: fixed; inset: 0; z-index: 29; }

.menu-opcoes[b-iwa4ppn1em] {
    position: absolute;
    top: calc(100% + 4px * var(--fh));
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: calc(190px * var(--fw));
    padding: calc(3px * var(--fh)) calc(3px * var(--fw));
    background: var(--fundo);
    border: 1px solid var(--linha);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.menu-opcoes button[b-iwa4ppn1em] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--fw));
    width: 100%;
    padding: calc(6px * var(--fh)) calc(10px * var(--fw));
    font: inherit;
    text-align: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.menu-opcoes button:hover:not(:disabled)[b-iwa4ppn1em] { background: var(--realce); border-color: var(--borda); }
.menu-opcoes button:disabled[b-iwa4ppn1em] { color: var(--textos-fracos); cursor: default; }
.menu-opcoes button img[b-iwa4ppn1em] { height: calc(16px * var(--fh)); width: auto; }
.menu-opcoes button:disabled img[b-iwa4ppn1em] { opacity: .4; }

/* --------------------------------------------------------------------------
   Cabeçalho da tabela e área rolável
   -------------------------------------------------------------------------- */
.cabecalho[b-iwa4ppn1em] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    width: 100%;
    padding: 8px 14px 4px;
    box-sizing: border-box;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(12px * var(--fw));
    flex: 0 0 auto;
}

.titulo-tabela[b-iwa4ppn1em] { justify-self: start; font-size: calc(14px * var(--fw)); font-weight: 800; }

.desbalanco[b-iwa4ppn1em] { justify-self: center; display: flex; align-items: baseline; gap: 14px; }
.desbalanco .fase[b-iwa4ppn1em] { font-weight: 700; font-variant-numeric: tabular-nums; }

/* fail_alarm do SGrid: #CFCF00, e não o #DFDF00 da tabela de proteção */
.desbalanco .alarme[b-iwa4ppn1em] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #CFCF00;
}

.dimensao[b-iwa4ppn1em] { justify-self: end; color: var(--textos-fracos); font-variant-numeric: tabular-nums; }

/* Única região com rolagem da aplicação, e só quando o conteúdo excede o espaço. */
.area-grade[b-iwa4ppn1em] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;

    /*
        A grade guarda a própria altura. Sem isto o align-items dos contêineres flex vale
        "stretch" por padrão e a tabela era esticada para preencher a área: numa janela
        alta a linha passava de 31,5px para 56,6px (medido com --fh = 3,59), deformando a
        célula no eixo vertical do mesmo jeito que a falta de flex-shrink: 0 a deformava
        no horizontal. A grade é fixa nos dois eixos; quem se ajusta é a rolagem.
    */
    align-items: flex-start;

    /*
        O "safe" é o que mantém a tabela larga inteiramente alcançável. Com "center"
        sozinho, uma tabela mais larga que a área transborda pelos dois lados, e o que
        passa da borda esquerda não entra no scrollWidth: scrollLeft não chega a ser
        negativo, então as primeiras colunas ficam fora da tela sem rolagem que as
        alcance (medido: a tabela começava 93px à esquerda da área, com scrollLeft já
        em 0). Com "safe", o centramento é abandonado assim que haveria transbordo e o
        alinhamento passa a "start" — centralizada enquanto cabe, rolável quando não
        cabe. Navegador que não conheça a palavra descarta a declaração e cai em
        "start", que é o mesmo comportamento, apenas sem o centramento.
    */
    justify-content: safe center;

    padding: 8px 14px 18px;
    box-sizing: border-box;
}

/*
   desbalanco: ao contrário do painel de parametrizações, este rola inteiro — os quatro
   blocos empilhados passam da altura da tela. É o ScrollViewer "desbalanco" do XAML,
   com rolagem vertical habilitada e horizontal desabilitada; a horizontal pertence só
   ao diagrama, que tem o seu próprio unifilar_scroll dentro do painel.
*/
.area-analise[b-iwa4ppn1em] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

/*
   spares_measures ocupa a mesma faixa das tabelas, mas administra a própria rolagem:
   cada coluna rola por dentro, e o painel inteiro não rola.
*/
.area-parametrizacoes[b-iwa4ppn1em] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: calc(6px * var(--fh)) calc(6px * var(--fw)) calc(8px * var(--fh));
    box-sizing: border-box;
}

.carregando[b-iwa4ppn1em], .pendente[b-iwa4ppn1em] {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(13px * var(--fw));
    color: var(--textos-fracos);
    text-align: center;
    margin-top: 40px;
    line-height: 1.6;
}

/* Análise das Medições: os três gráficos empilhados, centralizados na área rolável. */
.area-grade.graficos[b-iwa4ppn1em] { align-items: flex-start; }

.pilha-graficos[b-iwa4ppn1em] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
/* /Components/Grade.razor.rz.scp.css */
/*
    A tabela é item flex da .area-grade, e não pode encolher: ela tem tamanho fixo, e
    quem se ajusta quando não cabe é a rolagem da área.

    Sem esta linha o navegador podia comprimi-la para caber no espaço disponível — as
    colunas apertavam e, como nada transbordava, não aparecia barra de rolagem nenhuma.
    O min-width:auto que os itens flex ganham por padrão deveria impedir isso, e impede
    em parte dos navegadores, mas não em todos. flex-shrink: 0 não depende disso.
*/
/*
    O tamanho da célula vem de --gz, declarado na raiz, em app.css: a mesma medida
    serve esta grade e a tabela de inversões do Rebalanceamento, que tem marcação
    própria e tem de ficar com a célula do mesmo tamanho. Para mudar o tamanho da
    grade, mexa em --escala-grade lá.
*/
.grade[b-3rm8lvhkg9] {
    flex: 0 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: calc(11px * var(--gz));   /* SGrid.FONT_SIZE */
    font-family: "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;   /* larguras de dígito uniformes */
    user-select: none;
}

.grade-celula[b-3rm8lvhkg9] {
    position: relative;       /* o editor é posicionado dentro e não afeta a largura */
    border-style: solid;
    height: calc(28px * var(--gz));      /* SGrid.ROW_HEIGHT */
    /* comporta "9999,9999" sem cortar; a medida está em app.css, e a tabela de
       inversões do Rebalanceamento usa a mesma. */
    min-width: var(--celula-largura);
    padding: 0 calc(5px * var(--gz));
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grade-celula.editavel[b-3rm8lvhkg9] {
    cursor: cell;
}

.grade-celula.editando[b-3rm8lvhkg9] { box-shadow: inset 0 0 0 2px #FFC400; }

.grade-editor[b-3rm8lvhkg9] {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 5px;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    text-align: center;
}
/* /Components/GraficoFase.razor.rz.scp.css */
.grafico[b-t7c5qwzsc1] {
    margin: 0 0 calc(14px * var(--fh));
    width: 100%;
    max-width: calc(900px * var(--fw));
}

.grafico figcaption[b-t7c5qwzsc1] {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(13px * var(--fw));
    font-weight: 700;
    text-align: center;
    margin-bottom: calc(4px * var(--fh));
}

.grafico svg[b-t7c5qwzsc1] {
    width: 100%;
    height: auto;
    display: block;
}

/*
   Descritivos dos eixos, no mesmo tamanho e peso do título: 13 unidades do viewBox
   rendem 13px × --fw na tela, que é exatamente o tamanho do figcaption.

   As marcas do eixo e o aviso de fase vazia não aparecem aqui: eles nascem como markup
   e o CSS isolado não os alcança, então levam tamanho e família inline no componente.
   A cor de todos vem do atributo fill, para acompanhar a fase.
*/
.grafico .eixo[b-t7c5qwzsc1] {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
}
/* /Components/GraficoFavorabilidade.razor.rz.scp.css */
/* Mesma moldura do GraficoFase — os dois desenham do mesmo jeito, em SVG. */
.grafico[b-qagn3ckqvh] {
    margin: 0 0 calc(14px * var(--fh));
    width: 100%;
    max-width: calc(900px * var(--fw));
}


.grafico svg[b-qagn3ckqvh] {
    width: 100%;
    height: auto;
    display: block;
}

/*
   Descritivos dos eixos. As marcas numéricas não aparecem aqui: nascem como markup e
   o CSS isolado não as alcança, então levam tamanho e família inline no componente.
*/
.grafico .eixo[b-qagn3ckqvh] {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-x7tzmrzaml] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-x7tzmrzaml] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xoy99a0jwk],
.components-reconnect-repeated-attempt-visible[b-xoy99a0jwk],
.components-reconnect-failed-visible[b-xoy99a0jwk],
.components-pause-visible[b-xoy99a0jwk],
.components-resume-failed-visible[b-xoy99a0jwk],
.components-rejoining-animation[b-xoy99a0jwk] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-xoy99a0jwk],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-xoy99a0jwk],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-xoy99a0jwk],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-xoy99a0jwk],
#components-reconnect-modal.components-reconnect-retrying[b-xoy99a0jwk],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-xoy99a0jwk],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-xoy99a0jwk],
#components-reconnect-modal.components-reconnect-failed[b-xoy99a0jwk],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-xoy99a0jwk] {
    display: block;
}


#components-reconnect-modal[b-xoy99a0jwk] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-xoy99a0jwk 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-xoy99a0jwk 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-xoy99a0jwk 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-xoy99a0jwk]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-xoy99a0jwk 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-xoy99a0jwk {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-xoy99a0jwk {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-xoy99a0jwk {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-xoy99a0jwk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-xoy99a0jwk] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-xoy99a0jwk] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-xoy99a0jwk] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-xoy99a0jwk] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-xoy99a0jwk] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-xoy99a0jwk] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-xoy99a0jwk 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-xoy99a0jwk] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-xoy99a0jwk {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Principal.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   MainPage.xaml — o Grid de duas linhas: menu_superior e o contentframe.

   As medidas são as de Dimensiona_objetos(): larguras e fontes multiplicadas por
   Width_factor (--fw) e alturas por Height_factor (--fh), como no resto da aplicação.
   --------------------------------------------------------------------------- */
.pagina[b-uaw3j8rij6] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* RowDefinition menu_superior: Height = 85 * Height_factor */
.menu-superior[b-uaw3j8rij6] {
    width: 100%;
    height: calc(85px * var(--fh));
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;   /* a linha do Grid do XAML também recorta o que passa dela */
    gap: calc(8px * var(--fw));
    border-bottom: 1px solid var(--linha);
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* Menu_esquerda e Menu_direita: dois StackPanels horizontais na mesma linha do Grid */
.menu[b-uaw3j8rij6] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.lado-esquerdo[b-uaw3j8rij6] {
    gap: calc(8px * var(--fw));
    padding-left: calc(8px * var(--fw));
}

/*
   Sem margem no topo, e centrado na faixa pelo align-items do .menu-superior.

   O XAML dá a cada botão daqui um Margin de 8 no topo, o que somado aos três botões de
   tema e idioma — um de tema e dois de idioma, porque o idioma em uso sai da linha —
   passaria dos 85 da faixa. Centrar dá o mesmo aspecto e não transborda em resolução
   nenhuma.
*/
.lado-direito[b-uaw3j8rij6] {
    gap: calc(8px * var(--fw));
    padding-right: calc(8px * var(--fw));
}

/* --------------------------------------------------------------------------
   btback e btnext: imagem em cima, texto embaixo — o StackPanel vertical de
   dentro de cada Button. 145 x 75, imagem 25 x 25, fonte 14.
   -------------------------------------------------------------------------- */
.bt-menu[b-uaw3j8rij6] {
    width: calc(145px * var(--fw));
    height: calc(75px * var(--fh));
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(4px * var(--fh));
    font: inherit;
    font-size: calc(14px * var(--fw));
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.bt-menu img[b-uaw3j8rij6] {
    width: calc(25px * var(--fw));
    height: calc(25px * var(--fh));
    object-fit: contain;
}

.bt-menu:disabled[b-uaw3j8rij6] { cursor: default; color: var(--textos-fracos); }
.bt-menu:disabled img[b-uaw3j8rij6] { opacity: .4; }

/* --------------------------------------------------------------------------
   pagetitle: FontWeight="Bold", FontSize = 40 * Width_factor.

   O XAML dá a ele Width = 1280 * Width_factor, que é a janela inteira — o efeito é
   ocupar tudo o que sobra. Aqui isso é flex, e com min-width: 0 o título encolhe em
   vez de empurrar os botões para fora quando a janela é estreita.
   -------------------------------------------------------------------------- */
.pagetitle[b-uaw3j8rij6] {
    font-weight: bold;

    /*
        36px, e não os 40 do original, porque em 40 o título não cabe: "Capacitâncias
        [µF] e Números de Série" é o maior dos dois, e a 1920 ele passa 1px do espaço que
        sobra entre a logomarca e os botões — o suficiente para o text-overflow cortar em
        "Números de Sé…". 1px de estouro corta tanto quanto 100.

        36 dá cerca de 10% de folga, que cobre também as variações de métrica de fonte
        entre máquinas — foi assim que o corte apareceu no usuário e não aqui.
    */
    font-size: calc(36px * var(--fw));

    /*
        1.1 não dava conta: a 60px (janela de 1920) a caixa da linha ficava com 66px e o
        texto pedia 73 — os acentos de "Capacitâncias [µF] e Números de Série" passavam
        por cima e o overflow:hidden daqui os cortava. O overflow existe para o corte
        horizontal com reticências, quando a janela é estreita; o vertical era acidente.

        1.35 é o primeiro valor em que a caixa alcança o texto (medido: 1.25 ainda
        faltavam 2px, 1.3 faltava 1).
    */
    line-height: 1.35;
    margin-left: calc(8px * var(--fw));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* o projeto aberto: informação da versão web, discreta ao lado do título */
.projeto-ativo[b-uaw3j8rij6] {
    font-size: calc(13px * var(--fw));
    font-weight: 600;
    color: var(--textos-fracos);
    align-self: flex-end;
    padding-bottom: calc(10px * var(--fh));
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   theme_language: StackPanel vertical com os botões de tema e de idioma.
   Imagens de 37,5 x 26 — as duas medidas saem de Height_factor no original.
   -------------------------------------------------------------------------- */
.tema-idioma[b-uaw3j8rij6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
}

.bt-icone[b-uaw3j8rij6] {
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.bt-icone img[b-uaw3j8rij6] {
    width: calc(37.5px * var(--fh));
    height: calc(26px * var(--fh));
    object-fit: contain;
    display: block;
}

.bt-icone:hover img[b-uaw3j8rij6] { filter: brightness(1.15); }

/* --------------------------------------------------------------------------
   contentframe: a segunda linha do Grid, onde a página vive.

   É coluna flexível porque as páginas hospedadas contam com isso — a barra de
   CapacitanceData é flex: 0 0 auto e a área das tabelas é flex: 1 1 auto, e é o
   min-height: 0 que deixa a rolagem acontecer dentro dela em vez de esticar a página.
   -------------------------------------------------------------------------- */
.contentframe[b-uaw3j8rij6] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --------------------------------------------------------------------------
   StackPanel Customizer

   Só existe durante a personalização de inversões, e nessa hora ele é o menu
   inteiro. A ordem é a do XAML: o texto da inversão, a sugestão anterior, a
   coluna de aceitar/finalizar e a próxima sugestão.
   -------------------------------------------------------------------------- */
.customizer[b-uaw3j8rij6] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--fw));
    flex: 0 0 auto;
}

/* Inversion: FontSize = 20 * Width_factor, centralizado */
.customizer .inversao[b-uaw3j8rij6] {
    font-size: calc(20px * var(--fw));
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

/* bt_choose e bt_finalize: 180 x 33 empilhados, o StackPanel vertical do XAML */
.customizer .escolhas[b-uaw3j8rij6] {
    display: flex;
    flex-direction: column;
    gap: calc(3px * var(--fh));
}

.bt-escolha[b-uaw3j8rij6] {
    width: calc(180px * var(--fw));
    height: calc(33px * var(--fh));
    font: inherit;
    font-size: calc(14px * var(--fw));
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

/*
   theme_language durante a personalização: sai da tela mas continua ocupando o
   lugar, para a faixa não mudar de altura ao entrar e sair do modo.
*/
.tema-idioma.invisivel[b-uaw3j8rij6] { visibility: hidden; }
/* /Components/PainelLog.razor.rz.scp.css */
.borda-log[b-2a0fdqpnsh] {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 20;
    border: 1px solid dimgray;      /* BorderBrush="DimGray" BorderThickness="1" */
    background: var(--fundo);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(13px * var(--fw));
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .12);
}

.borda-log.oculto[b-2a0fdqpnsh] { display: none; }

.cabecalho-log[b-2a0fdqpnsh] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 10px;
    font: inherit;
    text-align: left;
    background: var(--fundo-grade);
    border: none;
    cursor: pointer;
}

.cabecalho-log:hover[b-2a0fdqpnsh] { background: var(--realce); }
.cabecalho-log .seta[b-2a0fdqpnsh] { color: var(--textos-fracos); }
.cabecalho-log .contagem[b-2a0fdqpnsh] { color: var(--textos-fracos); }
.cabecalho-log .preenche[b-2a0fdqpnsh] { flex: 1; }

.cabecalho-log .limpar[b-2a0fdqpnsh] {
    color: var(--acao);
    text-decoration: underline;
    font-size: calc(12px * var(--fw));
}

/* ScrollViewer VerticalScrollMode="Auto" HorizontalScrollMode="Disabled" */
.conteudo-log[b-2a0fdqpnsh] {
    max-height: 22vh;
    font-size: calc(13px * var(--fw));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 10px 6px;
}

.linha-log[b-2a0fdqpnsh] {
    margin: 2px 0;
    white-space: pre-wrap;          /* TextWrapping="Wrap" */
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}
/* /Components/PopupProjetos.razor.rz.scp.css */
/*
    O dobro dos 34px que a logomarca tinha: é o alvo de clique da troca de projeto e do
    reset, e no tamanho anterior passava despercebida na barra.
*/
.logo[b-z10kw38534] {
    height: calc(68px * var(--fh));
    width: auto;
    cursor: pointer;
    display: block;
}

.logo:hover[b-z10kw38534] { filter: brightness(1.12); }

.dialogo-fundo[b-z10kw38534] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}

.dialogo[b-z10kw38534] {
    background: var(--fundo);
    border-radius: 6px;
    padding: 18px 22px;
    min-width: 360px;
    max-width: 520px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(13px * var(--fw));
}

.dialogo h3[b-z10kw38534] { margin: 0 0 12px; font-size: calc(15px * var(--fw)); }

.lista-projetos[b-z10kw38534] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.projeto[b-z10kw38534] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
    font: inherit;
    text-align: center;
    background: var(--botao);
    border: 1px solid var(--linha);
    border-radius: 4px;
    cursor: pointer;
}

.projeto:hover:not(:disabled)[b-z10kw38534] { background: var(--realce); border-color: var(--borda); }
.projeto:disabled[b-z10kw38534] { cursor: default; background: var(--realce); border-color: var(--borda); }
.projeto .nome[b-z10kw38534] { font-weight: 600; }
.projeto .id[b-z10kw38534] { color: var(--textos-fracos); font-size: calc(11px * var(--fw)); }
/*
    Sem "margin-left: auto": ele empurraria a marca para a borda direita e, num flex
    centrado, absorveria toda a folga — o nome e o id voltariam a encostar na esquerda.
    Aqui os três ficam juntos, centrados, separados só pelo gap.
*/
.projeto .marca[b-z10kw38534] { font-size: calc(11px * var(--fw)); color: var(--acao); }

.aviso[b-z10kw38534] { margin: 0 0 14px; color: var(--textos-fracos); }

.dialogo-botoes[b-z10kw38534] { display: flex; gap: 8px; justify-content: flex-end; }
.dialogo-botoes button[b-z10kw38534] { font: inherit; padding: 5px 14px; }
.dialogo-botoes .perigo[b-z10kw38534] { color: var(--erro); }
/* /Components/Rebalanceamento.razor.rz.scp.css */
/* --------------------------------------------------------------------------
   O Grid de Rebalancing.xaml: a linha do stack_superior e, embaixo, o SplitView.
   -------------------------------------------------------------------------- */
.painel[b-yt8z3uslz8] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(13px * var(--fw));
}

/* stack_superior: Margin 0,8,0,8 e altura de linha 62 */
.barra[b-yt8z3uslz8] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--fw));
    width: 100%;
    flex: 0 0 auto;
    padding: calc(8px * var(--fh)) calc(8px * var(--fw));
    box-sizing: border-box;
    border-bottom: 1px solid var(--linha);
}

.separador[b-yt8z3uslz8] { flex: 1; }

/* os botões do stack: 145 x 46, fonte 14 */
.bt-reba[b-yt8z3uslz8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(4px * var(--fw));
    width: calc(145px * var(--fw));
    height: calc(46px * var(--fh));
    flex: 0 0 auto;
    font: inherit;
    font-size: calc(14px * var(--fw));
    line-height: 1.2;
    white-space: pre-line;
    text-align: center;
    cursor: pointer;
}

.bt-reba img[b-yt8z3uslz8] { height: calc(24px * var(--fh)); width: auto; }

/*
   ToggleButton marcado: no WinUI ele fica com o realce do sistema. Aqui recebe o azul
   da fase A, que é o mesmo tratamento do bt_placa_med da tela de dados.
*/
.bt-reba.ligado[b-yt8z3uslz8] {
    background: rgb(0, 153, 255);
    color: #FFFFFF;
    border-color: rgb(0, 122, 204);
}

.bt-reba:disabled[b-yt8z3uslz8] { cursor: default; color: var(--textos-fracos); }

.check[b-yt8z3uslz8] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--fw));
    flex: 0 0 auto;
    line-height: 1.25;
    cursor: pointer;
}

.check input[type="checkbox"][b-yt8z3uslz8] {
    flex: 0 0 auto;
    margin: 0;
    width: calc(13px * var(--fw));
    height: calc(13px * var(--fh));
}

.desbalanco[b-yt8z3uslz8] { display: flex; align-items: baseline; gap: calc(14px * var(--fw)); }
.desbalanco .fase[b-yt8z3uslz8] { font-weight: 700; font-variant-numeric: tabular-nums; }

.indisponivel[b-yt8z3uslz8] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--erro);
}

/* --------------------------------------------------------------------------
   SplitView: corpo à esquerda, painel de inversões à direita.

   No XAML o painel é Inline, sempre aberto, com OpenPaneLength fixa — 110 nas
   estrelas e 275 nas topologias de três colunas. Aqui isso é a segunda coluna do
   grid, dimensionada pelo próprio conteúdo.
   -------------------------------------------------------------------------- */
.area-reba[b-yt8z3uslz8] {
    display: grid;
    grid-template-columns: 1fr auto;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.area-grade[b-yt8z3uslz8] {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;
    justify-content: safe center;
    align-items: flex-start;
    padding: calc(8px * var(--fh)) calc(14px * var(--fw)) calc(18px * var(--fh));
    box-sizing: border-box;
}

/* gridinversion: Margin 20 nas laterais, sobre o fundo da grade */
.painel-inversoes[b-yt8z3uslz8] {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--fundo-grade);
    padding: calc(8px * var(--fh)) calc(20px * var(--fw));
    box-sizing: border-box;
}

/*
   gridinversion. No XAML ela é montada com Build(75.0, …), célula mais estreita que a
   da tabela principal; aqui foi pedido que as duas ficassem do mesmo tamanho, então as
   medidas são as mesmas de .grade-celula — altura, largura mínima, respiro e fonte
   saem todas de --gz (app.css), e as duas grades crescem e encolhem juntas.

   A borda continua a de 0,5 do original: a grade principal desenha a dela célula a
   célula, com a cor vinda do código, e esta tem uma borda só.
*/
.tb-inversoes[b-yt8z3uslz8] {
    border-collapse: collapse;
    table-layout: fixed;
    font-size: calc(11px * var(--gz));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.tb-inversoes td[b-yt8z3uslz8] {
    border: 0.5px solid var(--borda);
    height: calc(28px * var(--gz));
    min-width: var(--celula-largura);
    padding: 0 calc(5px * var(--gz));
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* full_grid: ocupa a faixa inteira, sem o painel ao lado */
.area-completa[b-yt8z3uslz8] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    display: flex;
    justify-content: safe center;
    align-items: flex-start;
    padding: calc(8px * var(--fh)) calc(14px * var(--fw)) calc(18px * var(--fh));
    box-sizing: border-box;
}
/* /Components/SeparadorDecimal.razor.rz.scp.css */
/* Mesma moldura do pop-up de projetos: o ContentDialog do UWP escurece o resto da tela. */
.fundo[b-gmntji6zh6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
}

.dialogo[b-gmntji6zh6] {
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: 6px;
    padding: calc(18px * var(--fh)) calc(22px * var(--fw));
    min-width: calc(340px * var(--fw));
    max-width: calc(520px * var(--fw));
    box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(13px * var(--fw));
}

.dialogo h3[b-gmntji6zh6] { margin: 0 0 calc(10px * var(--fh)); font-size: calc(15px * var(--fw)); }
.dialogo p[b-gmntji6zh6] { margin: 0 0 calc(16px * var(--fh)); line-height: 1.45; }

.botoes[b-gmntji6zh6] { display: flex; gap: calc(8px * var(--fw)); justify-content: flex-end; }
.botoes button[b-gmntji6zh6] { font: inherit; padding: calc(5px * var(--fh)) calc(18px * var(--fw)); cursor: pointer; }
/* /Components/SobressalentesEMedicoes.razor.rz.scp.css */
/* --------------------------------------------------------------------------
   spares_measures: título numa linha e o spares_child ocupando o resto.
   -------------------------------------------------------------------------- */
.painel[b-um8z14p45r] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 0 calc(8px * var(--fw)) calc(8px * var(--fh));
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(13px * var(--fw));
}

/* spares_measures_title: FontWeight="Bold", centralizado, Font_30 */
.titulo[b-um8z14p45r] {
    margin: 0 0 calc(6px * var(--fh));
    font-size: calc(20px * var(--fw));
    font-weight: 700;
    text-align: center;
}

/* spares_child: duas colunas de mesma largura */
.colunas[b-um8z14p45r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(8px * var(--fw));
    flex: 1 1 auto;
    min-height: 0;
}

/* BorderThickness="1" BorderBrush="#7F7F7F" nas duas colunas */
.coluna[b-um8z14p45r] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--borda);
    padding: calc(8px * var(--fh)) calc(10px * var(--fw));
    box-sizing: border-box;
    overflow: auto;
    overscroll-behavior: contain;
}

/* a esquerda empurra o expander "Logs" para o rodapé, como o VerticalAlignment="Bottom" */
.coluna.esquerda[b-um8z14p45r] { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Caixas de seleção — mesmo desenho do check_med_desv da barra
   -------------------------------------------------------------------------- */
.check[b-um8z14p45r] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--fw));
    margin-bottom: calc(6px * var(--fh));
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
}

.check input[type="checkbox"][b-um8z14p45r] {
    flex: 0 0 auto;
    margin: 0;
    width: calc(13px * var(--fw));
    height: calc(13px * var(--fh));
}

/* medicoes */
.titulo-medicoes[b-um8z14p45r] {
    display: block;
    /* a entrada 76 do dicionário traz a quebra de linha; pre-line a respeita */
    white-space: pre-line;
    margin-bottom: calc(8px * var(--fh));
    font-weight: 700;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Tabelas de reserva
   -------------------------------------------------------------------------- */
.quantidades[b-um8z14p45r] {
    display: flex;
    align-items: flex-start;
    /* centralizado na coluna; "safe" devolve o alinhamento a "start" se não couber */
    justify-content: safe center;
    gap: calc(18px * var(--fw));
    flex: 1 1 auto;
    min-height: 0;
}

.bloco-reserva[b-um8z14p45r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(4px * var(--fh));
    min-height: 0;
}

.rotulo[b-um8z14p45r] {
    font-weight: 700;
    text-align: center;
    white-space: pre-line;      /* os títulos das tabelas 1/2 e 3/4 têm duas linhas */
    line-height: 1.25;
}

.titulo-reserva[b-um8z14p45r] { margin-top: calc(4px * var(--fh)); }

.cx-quantidade[b-um8z14p45r] {
    width: calc(96px * var(--fw));
    font: inherit;
    text-align: center;
    border: 1px solid var(--linha);
    padding: 2px 0;
}

/* a lista de reservas chega a 100 linhas: rola dentro do próprio bloco */
.rolagem-reserva[b-um8z14p45r] {
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
}

/*
    tbspares12/34: BorderThickness="3" BorderBrush="Gray", GridLinesVisibility="All"
    e HeadersVisibility="None" — moldura grossa, divisas finas, sem cabeçalho.
*/
.tb-reserva[b-um8z14p45r] {
    border-collapse: collapse;
    border: 3px solid gray;
    background: var(--fundo);
}

.tb-reserva td[b-um8z14p45r] { padding: 0; border: 1px solid gray; }

.tb-reserva input[b-um8z14p45r] {
    width: calc(104px * var(--fw));
    box-sizing: border-box;
    font: inherit;
    font-size: calc(14px * var(--fw));
    text-align: center;         /* HorizontalContentAlignment="Center" do cell_style */
    padding: calc(2px * var(--fh)) calc(4px * var(--fw));
    border: none;
    background: transparent;
    font-variant-numeric: tabular-nums;
}

.tb-reserva input:focus[b-um8z14p45r] { outline: 2px solid #0099ff; outline-offset: -2px; }

/* --------------------------------------------------------------------------
   Menu de opções — mesma estrutura do menu das tabelas grandes
   -------------------------------------------------------------------------- */
.opcoes[b-um8z14p45r] { position: relative; display: inline-flex; }

.bt-opcoes[b-um8z14p45r] {
    width: calc(96px * var(--fw));
    /* centralização pelo flex, e não a implícita do <button> — ver .bt-vista */
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    cursor: pointer;
}

.fundo-menu[b-um8z14p45r] { position: fixed; inset: 0; z-index: 29; }

.menu-opcoes[b-um8z14p45r] {
    position: absolute;
    top: calc(100% + 4px * var(--fh));
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: calc(170px * var(--fw));
    padding: calc(3px * var(--fh)) calc(3px * var(--fw));
    background: var(--fundo);
    border: 1px solid var(--linha);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.menu-opcoes button[b-um8z14p45r] {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--fw));
    width: 100%;
    padding: calc(6px * var(--fh)) calc(10px * var(--fw));
    font: inherit;
    text-align: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.menu-opcoes button:hover[b-um8z14p45r] { background: var(--realce); border-color: var(--borda); }
.menu-opcoes button img[b-um8z14p45r] { height: calc(16px * var(--fh)); width: auto; }

/* --------------------------------------------------------------------------
   Tabelas de grupo — tbgroup1 em cima à esquerda, tbgroup3 à direita,
   tbgroup2 e tbgroup4 na linha de baixo (stack_superior do XAML).
   -------------------------------------------------------------------------- */
.grade-grupos[b-um8z14p45r] {
    display: grid;
    grid-template-columns: auto auto;
    /* centralizado na coluna; "safe" devolve o alinhamento a "start" se não couber */
    justify-content: safe center;
    gap: calc(10px * var(--fh)) calc(24px * var(--fw));
    margin-top: calc(8px * var(--fh));
}

/* com "Inserir Medições de Desbalanço" sobra uma tabela só */
.grade-grupos.unica[b-um8z14p45r] { grid-template-columns: auto; }

.bloco-grupo[b-um8z14p45r] { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* GridLinesVisibility="None" HeadersVisibility="None": sem divisas, só os valores */
.tb-grupo[b-um8z14p45r] { border-collapse: collapse; }

.tb-grupo td[b-um8z14p45r] { padding: 0 calc(4px * var(--fw)); }

.tb-grupo .rotulo-fase[b-um8z14p45r] {
    font-size: calc(12px * var(--fw));
    white-space: nowrap;
    text-align: right;
}

.tb-grupo input[b-um8z14p45r] {
    width: calc(118px * var(--fw));
    box-sizing: border-box;
    font: inherit;
    font-size: calc(12px * var(--fw));
    text-align: center;
    padding: calc(2px * var(--fh)) calc(4px * var(--fw));
    border: 1px solid var(--linha);
    background: var(--fundo);
    font-variant-numeric: tabular-nums;
}

.tb-grupo input:focus[b-um8z14p45r] { outline: 2px solid #0099ff; outline-offset: -2px; }

/* --------------------------------------------------------------------------
   border_logs/expanders — o log do painel, ancorado no rodapé da coluna
   -------------------------------------------------------------------------- */
.borda-logs[b-um8z14p45r] {
    margin-top: auto;
    border: 1px solid dimgray;
    background: var(--fundo);
    flex: 0 0 auto;
}

.cabecalho-logs[b-um8z14p45r] {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--fw));
    width: 100%;
    padding: calc(4px * var(--fh)) calc(10px * var(--fw));
    font: inherit;
    text-align: left;
    background: var(--fundo-grade);
    border: none;
    cursor: pointer;
}

.cabecalho-logs:hover[b-um8z14p45r] { background: var(--realce); }
.cabecalho-logs .seta[b-um8z14p45r] { color: var(--textos-fracos); }
.cabecalho-logs .contagem[b-um8z14p45r] { color: var(--textos-fracos); }
.cabecalho-logs .preenche[b-um8z14p45r] { flex: 1; }

.cabecalho-logs .limpar[b-um8z14p45r] {
    color: var(--acao);
    text-decoration: underline;
    font-size: calc(12px * var(--fw));
}

.conteudo-logs[b-um8z14p45r] {
    max-height: 22vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: calc(4px * var(--fh)) calc(10px * var(--fw)) calc(6px * var(--fh));
}

.linha-logs[b-um8z14p45r] {
    margin: 2px 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--erro);
}

.linha-logs.cabecalho-erro[b-um8z14p45r] { color: var(--textos); font-weight: 700; }
.linha-logs.aviso[b-um8z14p45r] { color: var(--textos); }