/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    font-family:'Segoe UI',sans-serif;

    background:#F4F6F9;

}

body{

    overflow:hidden;

}


/* ===========================
   PRIVACIDADE DE VALORES (botão "olho")
   Classe utilitária compartilhada — qualquer elemento com
   "valor-privado" fica embaçado quando a página atual (Dashboard ou
   Comissões, por enquanto) está com a privacidade ativada. Ver
   js/ui.js (montarBotaoPrivacidadeNoHeader) e css/header.css
   (.btn-privacidade) para o botão que liga/desliga.
=========================== */

body.privacidade-ativa .valor-privado{

    filter:blur(6px);

    user-select:none;

    transition:filter .15s ease;

}


/* ===========================
   BOTÃO SECUNDÁRIO (compartilhado)
   Ex: "Cancelar" no modal de vendas,
   ações de backup/exportação em Configurações
=========================== */

.btn-secondary{

    background:white;

    color:#333;

    border:1px solid #ddd;

    padding:12px 20px;

    border-radius:10px;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    transition:.2s;

}

.btn-secondary:hover{

    background:#f6f6f6;

    border-color:#8B0000;

    color:#8B0000;

}


/* ===========================
   ERRO DE CONEXÃO (v30, compartilhado)
   Mensagem amigável quando o boot (js/app.js, exibirErroDeConexao)
   ou o carregamento de uma view (carregarPagina) falha — antes a
   tela ficava em branco ou caía no modo protótipo em silêncio.
   Botões reaproveitam .btn-primary (css/comissoes.css) e
   .btn-secondary (acima).
=========================== */

.erro-conexao{

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

}

/* Variante dentro do #view (falha de UMA página, não do boot):
   ocupa a área útil sem depender do height:100% do body. */
.erro-conexao--pagina{

    height:auto;

    padding:60px 24px;

}

.erro-conexao-card{

    background:white;

    border-radius:16px;
    padding:36px 40px;

    max-width:420px;
    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.erro-conexao-card i{

    width:36px;
    height:36px;

    color:#8B0000;

    margin-bottom:14px;

}

.erro-conexao-card h2{

    font-size:19px;
    color:#222;

    margin-bottom:8px;

}

.erro-conexao-card p{

    font-size:14px;
    color:#777;
    line-height:1.6;

    margin-bottom:20px;

}

.erro-conexao-acoes{

    display:flex;
    justify-content:center;
    gap:10px;

}