/* ============================================================================
   HAVAYAH — DESIGN SYSTEM GLOBAL
   Identidade visual aprovada (Imagem do Codex — 10/10/2026)
   ----------------------------------------------------------------------------
   Paleta:
     Marrom #351A0C · Marrom escuro #21140D · Laranja #E9820B · Dourado #D9A441
     Fundo #F5F6F8 · Branco #FFFFFF · Texto #182033 · Secundário #667085
     Bordas #E4E7EC · Sucesso #159765 · Info #147DEB · Erro #DC3545
   ============================================================================ */

:root {
    /* Cores da marca */
    --marrom: #351A0C;
    --marrom-escuro: #21140D;
    --marrom-medio: #4A2A16;
    --laranja: #E9820B;
    --laranja-escuro: #C96E08;
    --laranja-claro: #FDF1E3;
    --dourado: #D9A441;
    --dourado-claro: #F8EFDC;

    /* Superfícies e texto */
    --fundo: #F5F6F8;
    --fundo-card: #FFFFFF;
    --texto: #182033;
    --texto-secundario: #667085;
    --borda: #E4E7EC;

    /* Estados */
    --sucesso: #159765;
    --sucesso-claro: #E7F6EF;
    --info: #147DEB;
    --info-claro: #E9F3FE;
    --erro: #DC3545;
    --erro-claro: #FDEBED;
    --aviso: #B54708;
    --aviso-claro: #FEF0E6;

    /* Sombras */
    --sombra-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --sombra-md: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --sombra-lg: 0 8px 24px rgba(16, 24, 40, 0.12);

    /* Raio */
    --raio-sm: 8px;
    --raio-md: 12px;
    --raio-lg: 16px;

    /* Tipografia */
    --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================================
   BASE
   ============================================================================ */
* { font-family: var(--fonte); }

body {
    background-color: var(--fundo);
    color: var(--texto);
    font-size: 14.5px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--texto); font-weight: 700; }

a { color: var(--laranja-escuro); text-decoration: none; }
a:hover { color: var(--laranja); }

/* Título de página + subtítulo (padrão de todas as telas) */
h1.mt-4 {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 1.25rem !important;
}
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--texto-secundario);
    font-size: 0.82rem;
}
.breadcrumb a { color: var(--texto-secundario); }
.breadcrumb a:hover { color: var(--laranja); }
.breadcrumb .active { color: var(--marrom); font-weight: 600; }

/* ============================================================================
   HEADER (topnav)
   ============================================================================ */
.sb-topnav.navbar {
    background: linear-gradient(90deg, var(--marrom-escuro) 0%, var(--marrom) 100%);
    border-bottom: 1px solid rgba(217, 164, 65, 0.25);
    min-height: 62px;
    box-shadow: var(--sombra-md);
}
.sb-topnav .navbar-brand {
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: #fff;
    display: flex;
    align-items: center;
}
.sb-topnav .navbar-brand img { border-radius: 6px; }
.sb-topnav .navbar-brand .marca-dourada { color: var(--dourado); }

/* Busca global do header */
.busca-global {
    position: relative;
    width: 320px;
    max-width: 40vw;
}
.busca-global input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 10px;
    padding: 0.45rem 0.9rem 0.45rem 2.3rem;
    font-size: 0.85rem;
    transition: all 0.15s;
}
.busca-global input::placeholder { color: rgba(255, 255, 255, 0.5); }
.busca-global input:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--dourado);
    box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.2);
    outline: none;
    color: #fff;
}
.busca-global .icone {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}
.busca-global .atalho {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
}

/* Seletor de módulo no header */
.btn-modulo {
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.38rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
}
.btn-modulo:hover { color: #fff; border-color: var(--dourado); }
.btn-modulo.ativo {
    background: var(--dourado);
    border-color: var(--dourado);
    color: var(--marrom-escuro);
}
.badge-modulo {
    background: rgba(217, 164, 65, 0.16);
    border: 1px solid rgba(217, 164, 65, 0.4);
    color: var(--dourado);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.38rem 0.8rem;
    border-radius: 10px;
}

/* Usuário no header */
.sb-topnav .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sb-topnav .navbar-nav .nav-link:hover { color: #fff; }
.avatar-header {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--laranja);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.header-data { color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; }

/* ============================================================================
   SIDEBAR
   ============================================================================ */
.sb-sidenav {
    width: 256px;
}
/* No modo recolhido, o elemento INTERNO também encolhe (senão ele fica
   largo por baixo da nav de 64px e cobre o conteúdo) */
.sb-sidenav-toggled .sb-sidenav {
    width: 64px;
    max-width: 64px;
    overflow: hidden;
}
.sb-sidenav-dark {
    background-color: var(--marrom-escuro);
    border-right: 1px solid rgba(217, 164, 65, 0.12);
}
.sb-sidenav-dark .sb-sidenav-menu {
    padding: 0.75rem 0.75rem 1rem;
}
.sb-sidenav-dark .sb-sidenav-menu .nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link {
    color: rgba(255, 255, 255, 0.66);
    border-radius: 10px;
    padding: 0.45rem 0.85rem;
    font-size: 0.86rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: all 0.15s;
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon {
    color: rgba(217, 164, 65, 0.75);
    font-size: 0.85rem;
    width: 20px;
    text-align: center;
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.07);
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
    background: var(--laranja);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(233, 130, 11, 0.35);
}
.sb-sidenav-dark .sb-sidenav-menu .nav-link.active .sb-nav-link-icon { color: #fff; }

.sb-sidenav-dark .sb-sidenav-menu-heading {
    color: rgba(217, 164, 65, 0.55);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1.1rem 0.85rem 0.4rem;
}

.sb-sidenav-dark .sb-sidenav-footer {
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.9rem 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
}
.sb-sidenav-dark .sb-sidenav-footer .pequeno { color: rgba(255, 255, 255, 0.5); font-size: 0.7rem; }
.ponto-online {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sucesso);
    margin-right: 0.35rem;
}

/* Logo centralizada no topo da sidebar */
.logo-sidebar {
    text-align: center;
    padding: 0.55rem 0.5rem 0.7rem;
    flex-shrink: 0;
}
.logo-sidebar img {
    max-width: 58%;
    height: auto;
}

/* Botão recolher/expandir a sidebar */
.btn-recolher-sidebar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.btn-recolher-sidebar:hover {
    background: var(--laranja);
    border-color: var(--laranja);
    color: #fff;
}
/* Quando recolhida, o ícone vira para o outro lado */
.sb-sidenav-toggled .btn-recolher-sidebar i {
    transform: rotate(180deg);
}

/* Menu da sidebar: ocupa o espaço restante e ROLA se faltar altura
   (nunca deixa itens escondidos atrás do rodapé) */
.sb-sidenav .sb-sidenav-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.sb-sidenav .sb-sidenav-footer {
    flex-shrink: 0;
}
/* Barra de rolagem discreta no menu */
.sb-sidenav-menu::-webkit-scrollbar { width: 5px; }
.sb-sidenav-menu::-webkit-scrollbar-thumb { background: rgba(217, 164, 65, 0.35); border-radius: 4px; }
.sb-sidenav-menu::-webkit-scrollbar-track { background: transparent; }

/* === Correção de corte do conteúdo ===
   O layout SB Admin usa flex; sem min-width:0, tabelas largas forçam o
   conteúdo para além da tela (cortado à direita / sob a sidebar). */
#layoutSidenav_content {
    min-width: 0;
}
#layoutSidenav_content main {
    overflow-x: hidden;
}
#layoutSidenav {
    overflow-x: clip;
}

/* === Respiração uniforme do conteúdo ===
   Margens laterais iguais e generosas (2rem) entre a sidebar e os cartões,
   e entre os cartões e a borda direita — nunca encostando na sidebar. */
#layoutSidenav_content .container-fluid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* ============================================================================
   CARDS
   ============================================================================ */
.card {
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    background: var(--fundo-card);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--borda);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--texto);
    border-radius: var(--raio-lg) var(--raio-lg) 0 0 !important;
    padding: 0.9rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-header > i { color: var(--laranja); }
.card-footer {
    background: #FAFBFC;
    border-top: 1px solid var(--borda);
}
.card-body { padding: 1.2rem; }

/* Cartão KPI do dashboard */
.card-kpi {
    border-radius: var(--raio-lg);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-sm);
    background: #fff;
    padding: 1.15rem 1.25rem;
    height: 100%;
    transition: transform 0.15s, box-shadow 0.15s;
}
.card-kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.card-kpi .kpi-icone {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.card-kpi .kpi-rotulo { font-size: 0.78rem; font-weight: 600; color: var(--texto-secundario); }
.card-kpi .kpi-valor { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--texto); }
.card-kpi .kpi-detalhe { font-size: 0.76rem; color: var(--texto-secundario); }
.card-kpi .kpi-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--laranja-escuro);
    text-decoration: none;
}
.card-kpi .kpi-link:hover { color: var(--laranja); }
.card-kpi.kpi-laranja {
    background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-escuro) 100%);
    border: none;
    color: #fff;
}
.card-kpi.kpi-laranja .kpi-icone { background: rgba(255, 255, 255, 0.2); color: #fff; }
.card-kpi.kpi-laranja .kpi-rotulo, .card-kpi.kpi-laranja .kpi-detalhe { color: rgba(255, 255, 255, 0.85); }
.card-kpi.kpi-laranja .kpi-valor { color: #fff; }
.card-kpi.kpi-laranja .kpi-link { color: #fff; }
.kpi-icone.icone-marrom { background: var(--laranja-claro); color: var(--laranja-escuro); }
.kpi-icone.icone-verde { background: var(--sucesso-claro); color: var(--sucesso); }
.kpi-icone.icone-azul { background: var(--info-claro); color: var(--info); }
.kpi-icone.icone-vermelho { background: var(--erro-claro); color: var(--erro); }
.kpi-icone.icone-dourado { background: var(--dourado-claro); color: #A8792A; }

/* ============================================================================
   BOTÕES
   ============================================================================ */
.btn { border-radius: 10px; font-weight: 600; font-size: 0.85rem; }
.btn-primary {
    --bs-btn-bg: var(--laranja);
    --bs-btn-border-color: var(--laranja);
    --bs-btn-hover-bg: var(--laranja-escuro);
    --bs-btn-hover-border-color: var(--laranja-escuro);
    --bs-btn-active-bg: var(--laranja-escuro);
    --bs-btn-active-border-color: var(--laranja-escuro);
    --bs-btn-disabled-bg: #F3B25E;
    --bs-btn-disabled-border-color: #F3B25E;
    box-shadow: 0 1px 2px rgba(233, 130, 11, 0.35);
}
.btn-outline-primary {
    --bs-btn-color: var(--laranja-escuro);
    --bs-btn-border-color: #F0BE8A;
    --bs-btn-hover-bg: var(--laranja);
    --bs-btn-hover-border-color: var(--laranja);
    --bs-btn-active-bg: var(--laranja);
    --bs-btn-active-border-color: var(--laranja);
}
.btn-success {
    --bs-btn-bg: var(--sucesso);
    --bs-btn-border-color: var(--sucesso);
    --bs-btn-hover-bg: #128255;
    --bs-btn-hover-border-color: #128255;
}
.btn-danger {
    --bs-btn-bg: var(--erro);
    --bs-btn-border-color: var(--erro);
}
.btn-info {
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-color: #fff;
}
.btn-lg { border-radius: 12px; }
.btn-sm { border-radius: 8px; }

/* ============================================================================
   FORMULÁRIOS
   ============================================================================ */
.form-label { font-weight: 600; font-size: 0.8rem; color: var(--texto); margin-bottom: 0.3rem; }
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--borda);
    font-size: 0.88rem;
    padding: 0.5rem 0.75rem;
    color: var(--texto);
}
.form-control:focus, .form-select:focus {
    border-color: var(--laranja);
    box-shadow: 0 0 0 0.2rem rgba(233, 130, 11, 0.15);
}
.form-control-sm, .form-select-sm { border-radius: 8px; font-size: 0.8rem; }
.form-check-input:checked { background-color: var(--laranja); border-color: var(--laranja); }
.form-check-input:focus { border-color: var(--laranja); box-shadow: 0 0 0 0.2rem rgba(233, 130, 11, 0.15); }
.input-group-text {
    background: #FAFBFC;
    border-color: var(--borda);
    color: var(--texto-secundario);
    font-size: 0.8rem;
}

/* ============================================================================
   TABELAS
   ============================================================================ */
.table { --bs-table-border-color: var(--borda); color: var(--texto); font-size: 0.85rem; }
.table thead th {
    background: #FAFBFC;
    color: var(--texto-secundario);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--borda);
    padding: 0.65rem 0.75rem;
    white-space: nowrap;
}
.table tbody td { padding: 0.7rem 0.75rem; vertical-align: middle; border-color: var(--borda); }
.table-hover tbody tr:hover { background: #FAFAF8; }
.table-striped tbody tr:nth-of-type(odd) { background: #FCFCFD; }

/* ============================================================================
   BADGES (estilo moderno: fundo claro + texto colorido)
   ============================================================================ */
.badge { font-weight: 600; font-size: 0.72rem; padding: 0.32em 0.6em; border-radius: 7px; }
.badge.bg-success { background: var(--sucesso-claro) !important; color: var(--sucesso); }
.badge.bg-danger { background: var(--erro-claro) !important; color: var(--erro); }
.badge.bg-warning { background: var(--aviso-claro) !important; color: var(--aviso); }
.badge.bg-info { background: var(--info-claro) !important; color: var(--info); }
.badge.bg-secondary { background: #EEF0F3 !important; color: var(--texto-secundario); }
.badge.bg-primary { background: var(--laranja-claro) !important; color: var(--laranja-escuro); }
.badge.bg-dark { background: var(--marrom) !important; color: #fff; }

/* ============================================================================
   ALERTAS
   ============================================================================ */
.alert {
    border-radius: 12px;
    border: 1px solid var(--borda);
    font-size: 0.85rem;
    padding: 0.8rem 1rem;
}
.alert-success { background: var(--sucesso-claro); border-color: #B7E3CF; color: #0F6E4A; }
.alert-danger { background: var(--erro-claro); border-color: #F3C1C6; color: #A12632; }
.alert-warning { background: var(--aviso-claro); border-color: #F5D5B5; color: #8A3E08; }
.alert-info { background: var(--info-claro); border-color: #BFD8F7; color: #0E5CAF; }
.alert-secondary { background: #F2F3F5; color: var(--texto-secundario); }

/* ============================================================================
   NAVEGAÇÃO (pills/tabs), PAGINAÇÃO, DROPDOWNS, MODAIS
   ============================================================================ */
.nav-pills .nav-link {
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--texto-secundario);
}
.nav-pills .nav-link.active { background: var(--laranja); color: #fff; }

.page-link { color: var(--laranja-escuro); border-color: var(--borda); }
.page-item.active .page-link { background: var(--laranja); border-color: var(--laranja); }

.dropdown-menu {
    border-radius: 12px;
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-lg);
    font-size: 0.85rem;
    padding: 0.4rem;
}
.dropdown-item { border-radius: 8px; padding: 0.45rem 0.75rem; }
.dropdown-item.active, .dropdown-item:active { background: var(--laranja); }

.modal-content { border-radius: var(--raio-lg); border: none; box-shadow: var(--sombra-lg); }
.modal-header { border-bottom: 1px solid var(--borda); }

/* ============================================================================
   ESTADOS VAZIOS
   ============================================================================ */
.estado-vazio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--texto-secundario);
}
.estado-vazio .icone {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--laranja-claro);
    color: var(--laranja-escuro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.estado-vazio h6 { color: var(--texto); margin-bottom: 0.25rem; }
.estado-vazio p { font-size: 0.82rem; margin-bottom: 0; }

/* ============================================================================
   RODAPÉ
   ============================================================================ */
footer.py-4 {
    background: #fff;
    border-top: 1px solid var(--borda);
    color: var(--texto-secundario);
    font-size: 0.78rem;
}

/* ============================================================================
   INTERFACE MÓVEL DE APONTAMENTO
   ============================================================================ */
.apontamento-mobile .btn-etapa {
    background-color: var(--laranja);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 1rem;
    border: none;
    border-radius: 14px;
    min-height: 4.5rem;
    box-shadow: 0 2px 6px rgba(233, 130, 11, 0.3);
}
.apontamento-mobile .btn-etapa:hover, .apontamento-mobile .btn-etapa:focus {
    background-color: var(--laranja-escuro);
    color: #fff;
}
.apontamento-mobile .btn-etapa.concluida {
    background-color: var(--sucesso);
    box-shadow: none;
}
.apontamento-mobile .btn-etapa.em-andamento {
    background-color: var(--laranja-escuro);
    box-shadow: 0 0 0 4px rgba(233, 130, 11, 0.35);
}

/* ============================================================================
   PAINEL DE VISIBILIDADE DA FÁBRICA (TV)
   ============================================================================ */
.tela-fabrica {
    background-color: #241509;
    color: #f5f0e8;
}
.tela-fabrica .card-op {
    border-left: 6px solid var(--laranja);
}

/* ============================================================================
   SIDEBAR SEM SOBREPOSIÇÃO
   O template SB Admin usa a sidebar como elemento FIXO (flutuante) e
   compensa o conteúdo com padding-left: 225px. Aqui padronizamos tudo em
   256px e garantimos que o conteúdo NUNCA fique embaixo da sidebar.
   ============================================================================ */

/* Largura da sidebar: 256px (o template força 225px com mais especificidade).
   O template usa position:fixed com left:0 E right:0 — o `right: auto`
   garante que a largura seja respeitada em qualquer navegador/zoom. */
.sb-nav-fixed #layoutSidenav #layoutSidenav_nav,
#layoutSidenav #layoutSidenav_nav {
    width: 256px;
    max-width: 256px;
    min-width: 256px;
    flex-basis: 256px;
    flex-shrink: 0;
    right: auto;
}

/* Conteúdo compensado pela sidebar fixa (256px, não 225px).
   O margin-left: -225px do template é anulado em TODOS os estados —
   a compensação é feita somente pelo padding. */
#layoutSidenav #layoutSidenav_content {
    margin-left: 0 !important;
}
.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
    padding-left: 256px;
    top: 62px; /* header do design system tem 62px */
}

/* Sidebar oculta (.sb-sidenav-toggled no body): conteúdo usa a largura toda */
.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
    transform: translateX(-256px);
}
.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Remove o backdrop escuro que o template põe sobre o conteúdo */
.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before,
#layoutSidenav #layoutSidenav_content:before {
    display: none !important;
}

/* Desktop: sidebar visível por padrão (template já faz isso p/ 225px) */
@media (min-width: 992px) {
    #layoutSidenav #layoutSidenav_nav {
        transform: none !important;
    }

    /* Modo RECOLHIDO = mini barra (rail) de 64px com só os ícones.
       O botão de recolher permanece visível para reabrir. */
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        width: 64px !important;
        max-width: 64px !important;
        min-width: 64px !important;
        flex-basis: 64px !important;
        right: auto;
        transform: none !important;
    }
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
        padding-left: 64px !important;
        margin-left: 0 !important;
    }

    /* Conteúdo da mini barra: esconde logo/textos, mantém ícones e botão */
    .sb-sidenav-toggled .logo-sidebar {
        padding: 0.8rem 0.2rem 1rem;
    }
    .sb-sidenav-toggled .logo-sidebar img {
        display: none;
    }
    .sb-sidenav-toggled .logo-sidebar .btn-recolher-sidebar {
        position: static;
        margin: 0 auto;
    }
    .sb-sidenav-toggled .sb-sidenav-menu {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    .sb-sidenav-toggled .sb-sidenav-menu .nav-link {
        justify-content: center;
        gap: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0; /* esconde o texto do item */
    }
    .sb-sidenav-toggled .sb-sidenav-menu .nav-link .sb-nav-link-icon {
        font-size: 1.05rem;
    }
    .sb-sidenav-toggled .sb-sidenav-menu-heading {
        display: none;
    }
    .sb-sidenav-toggled .sb-sidenav-footer {
        display: none;
    }
}

/* Mobile: escondida por padrão (conteúdo usa a largura toda);
   ao abrir, EMPURRA o conteúdo (nunca cobre) */
@media (max-width: 991.98px) {
    #layoutSidenav #layoutSidenav_nav {
        transform: translateX(-256px);
    }
    .sb-nav-fixed #layoutSidenav #layoutSidenav_content {
        padding-left: 0 !important;
    }
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        transform: translateX(0) !important;
    }
    .sb-sidenav-toggled.sb-nav-fixed #layoutSidenav #layoutSidenav_content,
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
        padding-left: 256px !important;
        margin-left: 0 !important;
    }
}

/* Header do design system tem 62px — alinha o padding do template (56px) */
.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
    padding-top: 62px;
}

/* ============================================================================
   RESPONSIVIDADE
   ============================================================================ */
@media (max-width: 991.98px) {
    .busca-global { display: none; }
}
@media (max-width: 575.98px) {
    .card-body { padding: 0.9rem; }
    .card-kpi .kpi-valor { font-size: 1.2rem; }
    h1.mt-4 { font-size: 1.3rem; }
}