/* BNZ Gestão — sistema na web. Mesma paleta "esmeralda e grafite" do programa do Windows (ver
   BNZGestao.App/Themes/BnzTema.xaml — toda cor de lá vem daqui também; para ajustar o visual, mude os dois juntos). */
:root {
    --azul: #0E7A5F;
    --azul-escuro: #16211D;
    --azul-claro: #E6F4EE;
    --texto: #16211D;
    --suave: #64736D;
    --borda: #C4D3CC;
    --fundo: #F1F6F4;
    --branco: #ffffff;
    --verde: #166534;
    --verde-fundo: #dcfce7;
    --vermelho: #b91c1c;
    --vermelho-fundo: #fee2e2;
    --ambar: #92400e;
    --ambar-fundo: #fef3c7;
    --raio: 10px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 15px; color: var(--texto); background: var(--fundo); line-height: 1.45; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0 0 6px; }
h2 { font-size: 18px; margin: 0 0 8px; }

/* ---------- topo e menu ---------- */
.topo { background: var(--azul-escuro); color: #fff; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.topo-linha { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; }
.marca:hover { text-decoration: none; }
.marca-icone { width: 34px; height: 34px; display: block; }
.marca strong { display: block; font-size: 15px; }
.marca small { display: block; font-size: 12px; opacity: .8; max-width: 52vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.topo-usuario form { margin: 0; }
.botao-menu { display: none; margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 8px; font-size: 20px; padding: 2px 10px; cursor: pointer; }

.menu { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 14px 6px; }
.menu > a, .menu-titulo { color: #fff; background: transparent; border: 0; font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.menu > a:hover, .menu-titulo:hover, .menu-grupo.aberto .menu-titulo { background: rgba(255,255,255,.14); text-decoration: none; }
.menu-grupo { position: relative; }
.menu-itens { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border-radius: var(--raio); box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; z-index: 20; }
.menu-grupo.aberto .menu-itens { display: block; }
.menu-itens a { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--texto); padding: 8px 10px; border-radius: 6px; font-size: 14px; }
.menu-itens a:hover { background: var(--azul-claro); text-decoration: none; }
.menu-itens a.em-breve { color: var(--suave); }

.selo { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--ambar-fundo); color: var(--ambar); white-space: nowrap; }
.selo.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }

/* ---------- barra de ícones (mesmos atalhos do programa do Windows) ---------- */
.barra-atalhos { display: flex; align-items: flex-start; gap: 4px; flex-wrap: wrap; background: #fff; border-bottom: 1px solid var(--borda); padding: 8px 10px; }
.atalho-botao { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 64px; padding: 8px 10px 7px; border: 1px solid var(--borda); border-radius: 9px; background: #fff; color: var(--texto); font-size: 12px; text-align: center; }
.atalho-botao:hover { background: var(--azul-claro); border-color: #9AD3BF; text-decoration: none; }
.atalho-botao svg { width: 22px; height: 22px; color: #0B5E49; }
.atalho-botao.em-breve { color: var(--suave); }
.atalho-botao.em-breve svg { color: var(--suave); }
.divisor-atalho { width: 1px; align-self: stretch; margin: 6px 6px; background: var(--borda); }

/* ---------- boas-vindas (tela inicial, igual ao programa do Windows) ---------- */
.boas-vindas { text-align: center; padding: 70px 20px 40px; }
.boas-vindas img { width: 110px; height: 110px; }
.boas-vindas h1 { font-size: 34px; font-weight: 400; margin: 10px 0 0; color: var(--azul-escuro); }
.boas-vindas h1 strong { font-weight: 700; }
.boas-vindas h1 span { font-weight: 300; color: var(--azul); }
.boas-vindas .sub { color: var(--suave); font-size: 14px; margin: 2px 0 0; }
.boas-vindas .dica-boas-vindas { color: var(--suave); margin-top: 22px; }

/* ---------- conteúdo ---------- */
.conteudo { max-width: 1200px; margin: 0 auto; padding: 24px 20px 40px; }
.rodape { text-align: center; color: var(--suave); font-size: 12.5px; padding: 18px; }
.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.migalhas { font-size: 13.5px; color: var(--suave); margin-bottom: 6px; }
.dica { color: var(--suave); font-size: 14px; }
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 22px; margin-bottom: 16px; }
.cartao.estreito { max-width: 440px; margin: 30px auto; }

.sucesso, .erro, .aviso { border-radius: var(--raio); padding: 10px 14px; margin-bottom: 14px; font-size: 14.5px; }
.sucesso { background: var(--verde-fundo); color: var(--verde); }
.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.aviso { background: var(--ambar-fundo); color: var(--ambar); }

/* ---------- formulários ---------- */
label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 12px; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 15px; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }
input[type=checkbox] { display: inline-block; width: auto; margin: 0 6px 0 0; vertical-align: middle; }
label.caixa { color: var(--texto); font-size: 14.5px; padding-top: 26px; }
.maiusculo { text-transform: uppercase; }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; padding: 14px 18px 4px; margin: 0 0 16px; }
legend { font-weight: 600; padding: 0 6px; }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; }
.grade .largo2 { grid-column: span 2; }
.grade p { margin: 2px 0 12px; font-size: 15px; color: var(--texto); min-height: 1.2em; }

/* ---------- navegação registro a registro (Primeiro/Anterior/Próximo/Último — igual ao programa do Windows) ---------- */
.barra-navegacao { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.divisor-nav { width: 1px; align-self: stretch; background: var(--borda); margin: 0 4px; }
.barra-navegacao .desabilitado { opacity: .4; pointer-events: none; }
/* Mesmo visual neutro do ToolbarButton do Windows: fundo branco, borda cinza, texto escuro — todos os botões iguais, sem destaque de cor */
.botao-barra { display: inline-block; background: #fff; color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; text-align: center; }
.botao-barra:hover { background: var(--azul-claro); text-decoration: none; }
.botao-barra.desabilitado { opacity: .4; pointer-events: none; }

/* ---------- ficha de cadastro (visualização): coluna principal + coluna lateral com integrações ---------- */
.ficha-cliente { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ficha-coluna-principal { flex: 1 1 560px; min-width: 0; }
.ficha-coluna-lateral { flex: 0 1 360px; min-width: 280px; }
.atalhos-integracao { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }

.botao { display: inline-block; background: var(--azul); color: #fff; border: 1px solid var(--azul); border-radius: 8px; padding: 9px 18px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; text-align: center; }
.botao:hover { background: var(--azul-escuro); text-decoration: none; }
.botao.claro { background: #fff; color: var(--azul); }
.botao.claro:hover { background: var(--azul-claro); }
.botao.pequeno { padding: 5px 12px; font-size: 13.5px; }
.botao.largo { width: 100%; margin-top: 6px; }
.topo .botao.claro { border-color: #fff; }

/* ---------- listas ---------- */
.busca { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.busca input { flex: 1 1 320px; margin: 0; }
.busca select { flex: 0 0 200px; margin: 0; }
.tabela-rolagem { overflow-x: auto; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12.5px; text-transform: uppercase; color: var(--suave); background: #f8fafd; padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 9px 12px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #fafcff; }
.tabela tr.cancelada td { color: var(--vermelho); background: var(--vermelho-fundo); }
.vazio { text-align: center; color: var(--suave); padding: 24px !important; }
.paginas { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 14px; font-size: 14px; }

/* ---------- painel inicial ---------- */
.painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 18px 0; }
.numero { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; color: var(--texto); }
a.numero:hover { border-color: var(--azul); text-decoration: none; }
.numero small { display: block; color: var(--suave); font-size: 13px; }
.numero strong { display: block; font-size: 24px; margin-top: 2px; }
.numero span { color: var(--suave); font-size: 13px; }
.numero.alerta strong { color: var(--vermelho); }

.so-celular { display: none; margin: 0; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
    .botao-menu { display: block; }
    .so-celular { display: block; }
    .topo-usuario { display: none; }
    .menu { display: none; flex-direction: column; padding: 0 10px 10px; }
    .menu.aberto { display: flex; }
    .menu-itens { position: static; box-shadow: none; min-width: 0; background: rgba(255,255,255,.08); }
    .menu-itens a { color: #fff; }
    .menu-itens a.em-breve { color: rgba(255,255,255,.65); }
    .menu-itens a:hover { background: rgba(255,255,255,.14); }
    .barra-atalhos { flex-wrap: nowrap; overflow-x: auto; padding: 8px; }
    .atalho-botao { min-width: 58px; flex: 0 0 auto; }
    .divisor-atalho { align-self: auto; height: auto; }
    .grade { grid-template-columns: 1fr; }
    .grade .largo2 { grid-column: auto; }
    label.caixa { padding-top: 0; }
    .conteudo { padding: 16px 12px 30px; }
    .tabela thead { display: none; }
    .tabela tr { display: block; border-bottom: 1px solid var(--borda); padding: 8px 4px; }
    .tabela td { display: block; border: 0; padding: 3px 10px; }
    .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--suave); font-size: 12.5px; }
}