/* ---------------------------------------------------------------------------
   CapacitoolDesign

   Medidas: as de Dimensiona_objetos() do UWP, que multiplica larguras e fontes por
   Width_factor e alturas por Height_factor. Aqui são --fw e --fh (design.js), sobre a
   mesma base de 1280 x 720.

   Cores: botão e botão intermediário são as de Cria_cores_fixas(). Fundos, os mesmos do
   CapacitoolManager: nada de branco puro no claro nem de preto puro no escuro, como foi
   pedido lá.
   --------------------------------------------------------------------------- */

:root {
    --fw: 1;
    --fh: 1;

    --fundo: #F3F3F3;
    --textos: #000000;
    --botao: #CCCCCC;               /* botao, tema claro: (204, 204, 204) */
    --botao-intermediario: #E5E5E5; /* botao_intermediario, claro: (229, 229, 229) */
    --borda: #7F7F7F;
    --campo: #FFFFFF;
    --marcado: #0078D4;             /* o ToggleButton marcado do WinUI usa a cor de destaque */
    --tempo: #FF0000;
    color-scheme: light;
}

html.tema-escuro {
    --fundo: #202020;
    --textos: #FFFFFF;
    --botao: #333333;               /* (51, 51, 51) */
    --botao-intermediario: #4B4B4B; /* (75, 75, 75) */
    --campo: #2B2B2B;
    color-scheme: dark;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
    background: var(--fundo);
    color: var(--textos);
    font-family: "Segoe UI", system-ui, sans-serif;
}

.aplicacao {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

button { font-family: inherit; color: inherit; }

/* --- logomarca por tema, sem troca visível de imagem ------------------------------- */
.so-escuro { display: none; }
html.tema-escuro .so-claro { display: none; }
html.tema-escuro .so-escuro { display: block; }

/* ---------------------------------------------------------------------------
   Portão de tela cheia — o mesmo do CapacitoolManager
   --------------------------------------------------------------------------- */
.portao {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #1b1b1b;
    color: #f0f0f0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(18px * var(--fh));
    text-align: center;
    font-size: calc(14px * var(--fw));
}

.portao img { height: calc(192px * var(--fh)); opacity: .92; }
.portao p { margin: 0; max-width: calc(460px * var(--fw)); line-height: 1.5; color: #c9c9c9; }

#portao-tela-cheia { display: none; }

.portao button {
    font-size: calc(14px * var(--fw));
    font-weight: 600;
    padding: calc(10px * var(--fh)) calc(22px * var(--fw));
    border: 1px solid #4b8fd0;
    border-radius: 4px;
    background: #0099FF;
    color: #fff;
    cursor: pointer;
}

.portao button:hover { background: #33adff; }

html.sem-tela-cheia .aplicacao { visibility: hidden; }
html.sem-tela-cheia #portao-tela-cheia { display: flex; }

/* ---------------------------------------------------------------------------
   MainPage: menu_superior (60 * fh) e contentframe
   --------------------------------------------------------------------------- */
.pagina {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pagina.calculando { visibility: hidden; }

.menu-superior {
    height: calc(60px * var(--fh));
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* signature: 4,18 x 60 por 60, as duas medidas em Height_factor */
.assinatura {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.assinatura img {
    width: calc(250.8px * var(--fh));
    height: calc(60px * var(--fh));
    object-fit: contain;
}

/*
   As imagens têm fundo branco puro (claro) e preto puro (escuro). O fundo pedido é o da
   página, 243 no claro e 32 no escuro: "darken" fica com o menor canal entre a imagem e o
   fundo, e "lighten" com o maior, o que troca exatamente o branco e o preto pelo fundo e
   só toca na logomarca onde ela passa desses limites.
*/
.assinatura img.so-claro { mix-blend-mode: darken; }
.assinatura img.so-escuro { mix-blend-mode: lighten; }

.assinatura:hover img { filter: brightness(1.1); }

/* theme_language: horizontal, 45 x 32, margem direita 1 */
.tema-idioma {
    display: flex;
    align-items: center;
    margin-top: calc(2px * var(--fh));
    margin-left: calc(8px * var(--fw));
}

.bt-icone {
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    margin-right: calc(1px * var(--fw));
}

.bt-icone img {
    width: calc(45px * var(--fw));
    height: calc(32px * var(--fh));
    object-fit: contain;
}

.bt-icone:hover img { filter: brightness(1.15); }

/* time: negrito, vermelho, 40 * fw, com os três espaços do original à esquerda */
.tempo {
    font-weight: bold;
    color: var(--tempo);
    font-size: calc(40px * var(--fw));
    margin-left: calc(18px * var(--fw));
    white-space: nowrap;
}

.conteudo {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   Input_Data
   --------------------------------------------------------------------------- */
.entrada { width: 100%; }

/* input_grid_header: 90 * fh; esquerda e direita na mesma linha do Grid */
.entrada-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-height: calc(90px * var(--fh));
    padding: calc(8px * var(--fh)) calc(8px * var(--fw)) 0;
    box-sizing: border-box;
}

.parametros { display: flex; align-items: flex-start; }
.coluna { display: flex; flex-direction: column; }
.grupo { display: flex; }

/* os títulos: fundo "botao", negrito, 15 * fw */
.rotulo {
    box-sizing: border-box;
    border: 1px solid var(--borda);
    background: var(--botao);
    font-weight: bold;
    font-size: calc(15px * var(--fw));
    padding-left: calc(8px * var(--fw));
    display: flex;
    align-items: center;
    height: calc(40px * var(--fh));
}

.rotulo.largo { width: calc(325px * var(--fw)); }
.rotulo.alto { width: calc(250px * var(--fw)); height: calc(80px * var(--fh)); }

.caixa {
    box-sizing: border-box;
    width: calc(104px * var(--fw));
    height: calc(40px * var(--fh));
    border: 1px solid var(--borda);
    background: var(--campo);
    color: var(--textos);
    font-size: calc(14px * var(--fw));
    font-family: inherit;
    text-align: center;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

.caixa.alta { height: calc(80px * var(--fh)); }
.caixa:focus { outline: 2px solid var(--marcado); outline-offset: -2px; }

/* more e less: quadrados de 40 * fh, empilhados à direita */
.mais-menos { display: flex; flex-direction: column; }

.mais-menos button {
    box-sizing: border-box;
    width: calc(40px * var(--fh));
    height: calc(40px * var(--fh));
    border: 1px solid var(--borda);
    background: none;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.mais { font-size: calc(36px * var(--fw)); }
.menos { font-size: calc(20px * var(--fw)); }
.mais-menos button:disabled { opacity: .35; cursor: default; }
.mais-menos button:not(:disabled):hover { background: var(--botao-intermediario); }

/* input_grid: colunas de (largura - 22 * fw) / n, linhas de 190 * fh */
.bancos {
    display: grid;
    grid-template-columns: repeat(var(--colunas), 1fr);
    margin: calc(4px * var(--fh)) calc(8px * var(--fw)) 0;
    border: 1px solid var(--borda);
}

.celula-banco {
    height: calc(190px * var(--fh));
    display: flex;
    justify-content: center;
}

/* Bank_Interface: 290 * fw por 184 * fh */
.banco {
    box-sizing: border-box;
    width: calc(290px * var(--fw));
    height: calc(184px * var(--fh));
    margin-top: calc(6px * var(--fh));
    border: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titulo-borda {
    box-sizing: border-box;
    width: calc(280px * var(--fw));
    margin-top: calc(3px * var(--fh));
    border: 1px solid var(--borda);
    border-top-width: 2px;
}

.banco .titulo {
    width: 100%;
    height: calc(30px * var(--fh));
    border: 0;
    background: var(--botao-intermediario);
    font-weight: bold;
    font-size: calc(15px * var(--fw));
    cursor: pointer;
}

.banco .titulo.marcado { background: var(--marcado); color: #FFFFFF; }
.banco .titulo:disabled { cursor: default; opacity: .6; }

.conteudo-banco { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.conteudo-banco .linha { display: flex; }

.conteudo-banco .rotulo {
    width: calc(180px * var(--fw));
    height: calc(35px * var(--fh));
    padding-left: calc(2px * var(--fw));
}

.conteudo-banco .caixa {
    width: calc(100px * var(--fw));
    height: calc(35px * var(--fh));
}

/* ---------------------------------------------------------------------------
   Output_Data
   --------------------------------------------------------------------------- */
.saida-area {
    margin: calc(5px * var(--fh)) calc(10px * var(--fw)) calc(10px * var(--fh));
    border: 1px solid var(--borda);
}

.saida { display: flex; flex-direction: column; align-items: center; }

.resumo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(1280px * var(--fw));
    max-width: 100%;
    margin-top: calc(10px * var(--fh));
}

.resumo-texto {
    font-weight: bold;
    font-size: calc(20px * var(--fw));
    margin: 0 calc(10px * var(--fw));
}

.seta {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.seta img { width: calc(30px * var(--fw)); height: calc(30px * var(--fh)); object-fit: contain; }
.seta:hover img { filter: brightness(1.15); }

.quadro { display: flex; margin-top: calc(10px * var(--fh)); }
.coluna-quadro { display: flex; flex-direction: column; }

.celula {
    box-sizing: border-box;
    border: 1px solid var(--borda);
    font-size: calc(15px * var(--fw));
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.quadro .celula {
    width: calc(250px * var(--fw));
    height: calc(30px * var(--fh));
    display: flex;
    align-items: center;
    justify-content: center;
}

.celula.titulo { background: var(--botao); font-weight: bold; }
.celula.valor { background: var(--botao-intermediario); font-weight: normal; }

.tabela {
    border-collapse: collapse;
    margin: calc(10px * var(--fh)) 0;
}

.tabela .celula {
    width: calc(252px * var(--fw));
    height: calc(32px * var(--fh));
    padding: 0;
}

/* NotFound e Error */
.nao-encontrado {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.nao-encontrado img { height: 160px; }

/* Copiado de CapacitoolManager/Capacitool.Web/wwwroot/app.css - as telas de licença
   são as mesmas nos dois aplicativos. */
/* ---------------------------------------------------------------------------
   Portão de licença: o dispositivo não está cadastrado, está suspenso, ou não
   tem projeto nenhum concedido. Não é erro nem tela de bloqueio — é a primeira
   coisa que um interessado vê, então tem o convite nas três línguas.
   --------------------------------------------------------------------------- */
/* Acima do portão de tela cheia, e visível mesmo com .aplicacao escondida: um visitante
   fora de tela cheia tem de ver o convite, e não o pedido de tela cheia de um aplicativo
   que ele ainda nem pode abrir. */
.portao-licenca { display: flex; z-index: 101; visibility: visible; }
.portao-licenca[hidden] { display: none; }

/* Cadastro de dispositivo */
.portao-cadastro input {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: calc(18px * var(--fw));
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
    padding: calc(8px * var(--fh)) calc(12px * var(--fw));
    width: calc(240px * var(--fw));
    border: 1px solid #4b8fd0;
    border-radius: 4px;
    background: #111;
    color: #f0f0f0;
}

.portao-cadastro button:disabled { opacity: .6; cursor: default; }
.portao-cadastro .mensagem { min-height: 3em; }
.portao-cadastro .mensagem.erro { color: #ff8a8a; }
.portao-cadastro .mensagem.sucesso { color: #7fd97f; }

/* Link discreto do convite, para o cliente que abriu num navegador sem a marca local.
   visibility: visible pelo mesmo motivo do .portao-licenca: fora de tela cheia a
   .aplicacao inteira fica com visibility: hidden, e sem isto o link herdava a regra —
   existia na página, mas invisível e sem receber clique, e quem estava sem a marca
   local não tinha como entrar. */
.licenca-ja-cliente {
    visibility: visible;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(18px * var(--fh));
    z-index: 102;
    text-align: center;
    color: #8a8a8a;
    font-size: calc(12px * var(--fw));
    text-decoration: none;
}

.licenca-ja-cliente:hover { color: #c9c9c9; text-decoration: underline; }

/* Motivo da última tentativa de entrada, logo acima do link */
.licenca-motivo {
    visibility: visible;
    position: fixed;
    left: 10%;
    right: 10%;
    bottom: calc(44px * var(--fh));
    z-index: 102;
    margin: 0;
    text-align: center;
    color: #ff8a8a;
    font-size: calc(13px * var(--fw));
}

.portao-licenca .convite {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--fh));
}

.portao-licenca .convite p:last-of-type { margin-top: calc(10px * var(--fh)); }

.portao-licenca a {
    color: #0099FF;
    text-decoration: none;
    font-weight: 600;
    font-size: calc(15px * var(--fw));
}

.portao-licenca a:hover { text-decoration: underline; }