/* ==========================================================================
   Botões circulares só com ícone (.btn-nav-icone) — padrão de 2026-10-25, ver
   docs/ui_ux_standards.md. Arquivo próprio porque também é carregado por telas
   que não usam o styletab.css (ex.: /dashboard/). No base.html vem depois do
   styletab.css, para vencer a regra `.navbar .btn`.
   ========================================================================== */
.btn-nav-icone {
    --nav-cor: var(--primary-color);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    min-width: 35px;
    padding: 0;
    border-radius: 50%;
    /* Cores pelas variáveis do .btn do Bootstrap — cobre hover, foco e clique */
    --bs-btn-color: var(--nav-cor);
    --bs-btn-bg: color-mix(in srgb, var(--nav-cor) 12%, transparent);
    --bs-btn-border-color: color-mix(in srgb, var(--nav-cor) 45%, transparent);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--nav-cor);
    --bs-btn-hover-border-color: var(--nav-cor);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--nav-cor);
    --bs-btn-active-border-color: var(--nav-cor);
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--nav-cor) 35%, transparent);
    /* Desabilitado (ex.: Produto no PDV sem pedido): mesmas cores, com a opacidade do Bootstrap */
    --bs-btn-disabled-color: var(--nav-cor);
    --bs-btn-disabled-bg: color-mix(in srgb, var(--nav-cor) 12%, transparent);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--nav-cor) 45%, transparent);
}
/* `.navbar .btn` (início do styletab.css) força min-width 75px e padding — viraria elipse */
.navbar .btn-nav-icone {
    min-width: 35px;
    padding: 0;
}
.btn-nav-icone ion-icon { font-size: 1.2rem; }
.btn-nav-icone.nav-primary { --nav-cor: var(--bs-primary); }
.btn-nav-icone.nav-info { --nav-cor: var(--bs-info); }
.btn-nav-icone.nav-success { --nav-cor: var(--bs-success); }
.btn-nav-icone.nav-warning { --nav-cor: var(--bs-warning); }
.btn-nav-icone.nav-purple { --nav-cor: var(--bs-purple); }
.btn-nav-icone.nav-teal { --nav-cor: var(--bs-teal); }
.btn-nav-icone.nav-danger { --nav-cor: var(--bs-danger); }
/* Contador tipo notificação: pílula baixa (14px) com o centro na borda do círculo,
   sem cobrir o ícone */
.btn-nav-icone .btn-nav-contador,
.btn-nav-icone .btn-nav-contador-baixo {
    position: absolute;
    right: 0;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 14px;
    border-radius: 7px;
    pointer-events: none;
}
.btn-nav-icone .btn-nav-contador { top: 0; transform: translate(45%, -45%); }
.btn-nav-icone .btn-nav-contador-baixo { bottom: 0; transform: translate(45%, 45%); }
.btn-nav-icone .badge.bg-warning { color: var(--bs-black); }