:root{
  --brand-blue:#002F6C;
  --brand-orange:#FF5C26;
  --bg:#F4F5F7;
  --text:#1b1f23;
  --card:#ffffff;
  --muted:#6b7280;
}
:root[data-theme='dark']{
  --bg:#0f172a;
  --text:#e5e7eb;
  --card:#111827;
  --muted:#9ca3af;
}
html,body{height:100%;}
body.app{background:var(--bg); color:var(--text);}
/* Sidebar */
.sidebar{position:fixed; z-index:20; inset:0 auto 0 0; width:280px; background:var(--brand-blue); color:#fff; display:flex; flex-direction:column; padding:1rem; gap:1rem;}
.sidebar .brand{display:flex; align-items:center; justify-content:center; padding:.75rem 0; border-bottom:2px solid rgba(255,255,255,.25);}
.sidebar .brand img{max-width:180px; height:auto;}
.menu{
  flex:1;
  overflow-y:auto;
  padding-bottom:3.5rem; /* menu-padding-bottom-added: espaço para botoes inferiores */
  overflow-x:hidden;
  /* scrollbars discretos */
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.9) transparent;
}
.menu::-webkit-scrollbar{
  width:6px;
}
.menu::-webkit-scrollbar-track{
  background:transparent;
}
.menu::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.9);
  border-radius:999px;
}

.menu-section{font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; opacity:.8; margin:.75rem .5rem .25rem;}
.menu-item{display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; color:#fff; text-decoration:none; border-radius:.75rem; font-size:1.1rem;}
.menu-item:hover, .menu-item.active{background:rgba(255,255,255,.15);}
.menu-item i{font-size:1.4rem;}
.menu-bottom{margin-top:auto; padding:.75rem;}
/* Content */
.content{margin-left: 280px; min-height:100%;}
.content-header{position:sticky; top:0; z-index:10; background:linear-gradient(90deg,var(--card),var(--bg)); border-bottom:1px solid rgba(0,0,0,.05); padding:.75rem 1rem;}
.card{background:var(--card);}
.kpi .kpi-title{font-size:1rem; color:var(--muted);}
.kpi .kpi-value{font-size:2rem; font-weight:700;}
/* Print */
.print-card{max-width:1100px;margin:0 auto;}
@media print{.sidebar,.content-header,.btn,.d-print-none{display:none!important}.content{margin:0}}
/* Responsive */
@media (max-width: 992px){
  .sidebar{position:fixed; z-index:20; transform:translateX(-100%); transition:transform .2s ease;}
  .sidebar.open{transform:none;}
  .content{margin-left:0;}
}


/* Submenus (default closed) */
.menu .toggler{width:100%; text-align:left; background:transparent; border:0; color:#fff; padding:.5rem 1rem; font-size:.95rem; opacity:.85;}
.menu .toggler:hover{opacity:1;}
.submenu{display:none; padding-left:.5rem; margin-bottom:.25rem;}
.submenu.open{display:block;}
.submenu .submenu-item{display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; color:#fff; text-decoration:none; border-radius:.5rem; font-size:1rem; opacity:.95;}
.submenu .submenu-item:hover{background:rgba(255,255,255,.12); opacity:1;}
.menu .toggler .bi{transition:transform .15s ease;}
.menu .toggler.active .bi{transform:rotate(90deg);}


/* Collapsible submenus (default closed) */
.menu-group .submenu{display:none; padding-left:.5rem; border-left:2px solid rgba(255,255,255,.15); margin-left:.5rem;}
.menu-group.open .submenu{display:block;}
.menu-toggle{width:100%; text-align:left; background:transparent; border:none;}
.menu-toggle .bi-chevron-right{transition:transform .15s ease;}
.menu-group.open .menu-toggle .bi-chevron-right{transform:rotate(90deg);}


/* === Footer === */
#marol-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15,23,42,.9);
  color: rgba(248,250,252,.85);
  border-top: 1px solid rgba(148,163,184,.35);
  padding: .4rem 1rem;
  font-size: .8rem;
  z-index: 1030;
  backdrop-filter: blur(6px);
}
.marol-footer-spacer{height: 2.4rem;}



/* === Desktop collapsible sidebar === */
@media (min-width: 992px){
  .sidebar{transition: width .2s ease;}
  .sidebar .menu .menu-item span,
  .sidebar .submenu .submenu-item span,
  .sidebar .section-title{transition: opacity .15s ease;}
  .sidebar.collapsed{width: 76px;}
  .sidebar.collapsed .brand .brand-text{display:none;}
  .sidebar.collapsed .section-title{opacity:0; pointer-events:none; height:0; margin:0; padding:0;}
  .sidebar.collapsed .menu .menu-item span,
  .sidebar.collapsed .submenu .submenu-item span{opacity:0; pointer-events:none; width:0; display:none;}
  .sidebar.collapsed .menu .toggler{padding-right:.5rem;}
  .sidebar.collapsed .submenu{border-left: none; margin-left:0; padding-left:0;}
  .sidebar.collapsed .menu-group.open .submenu{display:none;} /* when collapsed, hide textual submenus */
  .sidebar .menu .bi{font-size:1.2rem;} /* keep icon size */
  /* Smaller font on expanded menu */
  .sidebar:not(.collapsed) .menu .menu-item span,
  .sidebar:not(.collapsed) .submenu .submenu-item span{font-size:.92rem;}
}

/* Tooltip helper when sidebar collapsed */
.sidebar [data-bs-toggle="tooltip"]{}


/* === Ajustes footer e menu === */
.sidebar .menu-bottom{margin-top:auto; padding-bottom:2.8rem;} /* ajustado para footer fixo */
#marol-footer{position:relative; bottom:0;}
.sidebar .brand img{max-width:140px; height:auto; margin:0 auto; display:block;}


@media (min-width: 992px){
  .sidebar + .content{transition: margin-left .2s ease;}
  .sidebar.collapsed + .content{margin-left:88px;}
}

/* Separator shadow */
.sidebar{box-shadow: 1px 0 0 rgba(0,0,0,.08);}
.sidebar.collapsed{box-shadow: 1px 0 0 rgba(0,0,0,.10);}


/* === Marol Premium — Flyout elegante === */
.submenu-flyout{
  position: fixed;
  left: 88px;
  top: 0;
  min-width: 240px;
  max-width: 320px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(245,248,255,.80));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 50px rgba(2,6,23,.16), 0 4px 14px rgba(2,6,23,.10);
  padding: 10px;
  z-index: 2600;
  display: none;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(-6px) scale(.985);
  transition: opacity .18s ease, transform .22s cubic-bezier(.22,.9,.3,1.2);
  transform-origin: left top;
}
.submenu-flyout.show{ display:block; opacity:1; transform: translateX(0) scale(1); }
.submenu-flyout::before{
  content:"";
  position:absolute;
  left:-7px;
  top:16px;
  width:12px; height:12px;
  background: inherit;
  border-left:1px solid rgba(0,0,0,.08);
  border-top:1px solid rgba(0,0,0,.08);
  transform: rotate(45deg);
  border-radius: 2px;
  filter: drop-shadow(0 1px 2px rgba(2,6,23,.08));
  z-index: -1;
}
:root[data-theme='dark'] .submenu-flyout{
  background: linear-gradient(135deg, rgba(17,24,39,.92), rgba(23,33,53,.88));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 22px 50px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.40);
}
:root[data-theme='dark'] .submenu-flyout::before{
  border-left-color: rgba(255,255,255,.10);
  border-top-color: rgba(255,255,255,.10);
}
.submenu-flyout a{
  display: grid;
  grid-template-columns: 22px 1fr 14px;
  align-items: center;
  gap: .7rem;
  padding: .6rem .8rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text) !important;
  background: transparent !important;
  line-height: 1.2;
}
.submenu-flyout a .bi{ font-size: 1.05rem; opacity: .85; filter: saturate(0.4); }
:root[data-theme='dark'] .submenu-flyout a .bi{ opacity: .9; filter: saturate(0.7) brightness(1.1); }
.submenu-flyout a::after{
  content: "\f285"; font-family: "bootstrap-icons"; font-size: .9rem; opacity: .35;
}
.submenu-flyout a:hover{ background: rgba(0,30,100,.06); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
:root[data-theme='dark'] .submenu-flyout a:hover{ background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.submenu-flyout hr{ border:0; height:1px; margin:8px 4px; background: linear-gradient(90deg, transparent, rgba(2,6,23,.14), transparent); }
@media (prefers-reduced-motion: reduce){ .submenu-flyout{ transition: none; } }

/* === Tooltip Glass (Marol Premium) === */
.tooltip{ z-index: 4000 !important; }
.tooltip.tooltip-glass .tooltip-inner{
  border-radius: 10px; padding: .45rem .6rem; font-size: .84rem; line-height: 1.15;
  color: #0f172a;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,248,255,.92));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 10px 24px rgba(2,6,23,.12), 0 2px 8px rgba(2,6,23,.08);
}
.tooltip.tooltip-glass.bs-tooltip-top .tooltip-arrow::before{ border-top-color: rgba(245,248,255,.92); }
.tooltip.tooltip-glass.bs-tooltip-bottom .tooltip-arrow::before{ border-bottom-color: rgba(245,248,255,.92); }
.tooltip.tooltip-glass.bs-tooltip-start .tooltip-arrow::before{ border-left-color: rgba(245,248,255,.92); }
.tooltip.tooltip-glass.bs-tooltip-end .tooltip-arrow::before{ border-right-color: rgba(245,248,255,.92); }
:root[data-theme='dark'] .tooltip.tooltip-glass .tooltip-inner{
  color: #e5e7eb; background: linear-gradient(135deg, rgba(17,24,39,.95), rgba(23,33,53,.92));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
}
:root[data-theme='dark'] .tooltip.tooltip-glass.bs-tooltip-top .tooltip-arrow::before{ border-top-color: rgba(23,33,53,.92); }
:root[data-theme='dark'] .tooltip.tooltip-glass.bs-tooltip-bottom .tooltip-arrow::before{ border-bottom-color: rgba(23,33,53,.92); }
:root[data-theme='dark'] .tooltip.tooltip-glass.bs-tooltip-start .tooltip-arrow::before{ border-left-color: rgba(23,33,53,.92); }
:root[data-theme='dark'] .tooltip.tooltip-glass.bs-tooltip-end .tooltip-arrow::before{ border-right-color: rgba(23,33,53,.92); }
.bs-tooltip-auto[data-popper-placement^="top"], .bs-tooltip-top{ margin-bottom: 6px !important; }
.bs-tooltip-auto[data-popper-placement^="right"], .bs-tooltip-end{ margin-left: 6px !important; }
.bs-tooltip-auto[data-popper-placement^="left"], .bs-tooltip-start{ margin-right: 6px !important; }
.bs-tooltip-auto[data-popper-placement^="bottom"], .bs-tooltip-bottom{ margin-top: 6px !important; }

/* === Ajuste: logo circular da sidebar mais compacto === */
.sidebar .brand img, .sidebar .logo img{ width: 84px; height: auto; }
.sidebar .brand, .sidebar .logo{ padding: 8px 0 !important; }


/* === Glass Edge: cantos arredondados na barra lateral === */
.sidebar{
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  overflow: hidden;
  box-shadow: 4px 0 12px rgba(0,0,0,.08);
  transition: border-radius .3s ease;
}
.sidebar.collapsed{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}
:root[data-theme='dark'] .sidebar{
  box-shadow: 4px 0 16px rgba(0,0,0,.45);
}

/* Oculta a barrinha de controles quando o menu está contraído */
.sidebar.collapsed .sidebar-pager{ display:none !important; }


/* Ajustes adicionais sidebar/menu */
.sidebar.collapsed .menu{
  overflow:visible;
}

/* Remove indicador de submenu (seta >) dos grupos */
.menu-toggle .bi-chevron-right{
  display:none;
}


/* === Correções adicionais (setas e botões de rodapé) === */

/* Remove seta em itens dos flyouts de menu */
.submenu-flyout a::after{
  content: none !important;
}

/* Remove qualquer chevron dos grupos de menu principais */
.menu-group .menu-toggle .bi-chevron-right,
.menu-item .bi-chevron-right,
.menu-toggle .bi-chevron-right{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Botões Tema / Trocar senha / Sair em modo colapsado: só ícone circular */


.sidebar.collapsed .menu-bottom .btn span,
.sidebar.collapsed .menu-bottom .btn small{
  display: none !important;
}


/* === Legibilidade dos botões do rodapé no modo expandido === */
.sidebar:not(.collapsed) 

.sidebar:not(.collapsed) .menu-bottom .btn:hover {
    background-color: rgba(255,255,255,1) !important;
    border-color: rgba(0,0,0,0.25) !important;
    color: var(--text) !important;
}

/* Centraliza os botões do rodapé quando a sidebar está colapsada */
.sidebar.collapsed .menu-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
}

/* === Centralização perfeita dos ícones no modo colapsado (v6) === */

.sidebar.collapsed .menu-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.sidebar.collapsed 

/* === Rodapé quando sidebar está aberta: botões seguem estilo do menu === */
.sidebar:not(.collapsed) .menu-bottom{
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.18);
}

.sidebar:not(.collapsed) 

.sidebar:not(.collapsed) 

.sidebar:not(.collapsed) .menu-bottom .btn:hover{
  background: rgba(255,255,255,.16) !important;
}


/* === Indicador visual de submenu apenas para grupos (Opções, Sistema, etc.) === */
.sidebar .menu-group .menu-toggle .bi-chevron-right{
  display: inline-block !important;
  visibility: visible !important;
  opacity: .75 !important;
  width: auto !important;
  margin-left: .25rem !important;
}


/* Esconde o chevron dos grupos quando a sidebar está colapsada (fica só o ícone) */
.sidebar.collapsed .menu-group .menu-toggle .bi-chevron-right{
  display: none !important;
}


/* === Layout de login / página de autenticação === */
body.auth-page{
  background: radial-gradient(circle at top, #e5f0ff 0, #f5f7fb 42%, #eef2ff 100%);
  min-height: 100vh;
}

.auth-wrapper{
  padding: 2rem 1rem;
}

.auth-card{
  max-width: 420px;
  width: 100%;
  border-radius: 1rem;
}

.auth-logo{
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(15,23,42,.16));
}


.theme-toggle-auth{
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

body.auth-page .btn.theme-toggle-auth{
  border-color: rgba(15,23,42,.15);
  background-color: rgba(255,255,255,0.9);
}

html[data-theme="dark"] body.auth-page{
  background: radial-gradient(circle at top, #020617 0, #020617 40%, #020617 100%);
}


/* Rodapé da tela de login */
.auth-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0.75rem;
  text-align:center;
  color:#555;
  font-size:0.85rem;
}

.auth-footer a{
  color:#0d6efd;
}

html[data-theme="dark"] .auth-footer{
  color:#e5e7eb;
}

html[data-theme="dark"] .auth-footer a{
  color:#60a5fa;
}

body.auth-page{padding-bottom:70px;}


/* Sidebar active state and chevron alignment */
.menu-item{
  position:relative;
}
.menu-item.active::before{
  content:'';
  position:absolute;
  left:0.4rem;
  top:4px;
  bottom:4px;
  width:4px;
  border-radius:999px;
  background:var(--brand-orange);
}
.sidebar.collapsed .menu-item.active::before{
  left:0.2rem;
}
.chevron-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.25rem;
}


.menu-bottom-compact{
  display:flex;
  gap:.5rem;
  justify-content:space-between;
}
.menu-bottom-compact .btn.icon-only{
  flex:1 1 0;
  padding:.4rem 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.menu-bottom-compact .btn.icon-only i{
  font-size:1.25rem;
}


.menu-bottom-compact .btn.icon-only.logout-btn i{
  transition: color .15s ease;
}
.menu-bottom-compact .btn.icon-only.logout-btn:hover i{
  color:#f97373;
}



/* --- BOTÕES DO RODAPÉ CIRCULARES --- */
.menu-bottom .btn {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.menu-bottom .btn i {
    font-size: 1.25rem !important;
    margin: 0 !important;
}



/* BOTÕES INFERIORES – ESFÉRICOS COM NEON */
.menu-bottom.menu-bottom-compact{
  display:flex;
  gap:14px;
  justify-content:center;
  padding-top:10px;
  padding-bottom:16px;
}
.menu-bottom.menu-bottom-compact .btn{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);
  border:2px solid rgba(255,255,255,0.3);
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  transition:0.25s ease-in-out;
}
.menu-bottom.menu-bottom-compact .btn i{
  font-size:1.25rem;
  color:#ffffffcc;
  margin:0 !important;
}
.menu-bottom.menu-bottom-compact .btn:hover{
  border-color:#00d4ff;
  box-shadow:0 0 12px #00d4ff,0 0 25px #00d4ff55;
  transform:translateY(-3px);
}
.menu-bottom.menu-bottom-compact .btn.logout-btn:hover i{
  color:#f97373;
}

@media print{
  #marol-footer{
    position: static;
    background: transparent;
    color: #000;
    border-top: none;
    padding: 0;
  }
  .marol-footer-spacer{
    display: none;
    height: 0;
  }
}








/* Separadores de seção do menu lateral */
.menu-separator {
    display: flex;
    align-items: center;
    padding: 10px 18px 4px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    opacity: 0.85;
    pointer-events: none;    /* não é clicável */
    user-select: none;
}

.menu-separator-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.7rem;
    margin-right: 8px;
    opacity: 0.7;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

.menu-separator-label {
    white-space: nowrap;
}

.menu-separator-line {
    flex: 1;
    height: 1px;
    margin-left: 10px;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0)
    );
    opacity: 0.4;
    transform: scaleX(0.6);
    transform-origin: left;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* Estado ativo – quando algum submenu da seção está aberto */
.menu-separator.is-active {
    color: rgba(255, 255, 255, 0.95);
}

.menu-separator.is-active .menu-separator-icon {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.85);
    transform: scale(1.05);
}

.menu-separator.is-active .menu-separator-line {
    opacity: 0.85;
    transform: scaleX(1);
}

/* Se não houver itens embaixo, esconde o separador */
.menu-separator.is-hidden {
    display: none;
}



/* ===========================
   TOP NAV (Layout novo - totalmente diferente do sidebar)
   Ativa quando <body> tem .app-topnav
=========================== */
body.app-topnav .sidebar{display:none !important;}
body.app-topnav .content{margin-left:0 !important;}

.nav-top{background:linear-gradient(180deg, rgba(9,43,78,1) 0%, rgba(6,32,58,1) 100%); box-shadow:0 8px 24px rgba(0,0,0,.10);}
.nav-top .navbar-brand .brand-mark{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10)}
.nav-top .navbar-brand .brand-name{font-weight:700;letter-spacing:.2px}
.nav-top .nav-link{border-radius:10px;padding:.55rem .75rem}
.nav-top .nav-link:hover{background:rgba(255,255,255,.08)}
.nav-top .nav-link.active{background:rgba(255,255,255,.14)}
.nav-top .dropdown-menu{border-radius:14px; padding:.4rem; box-shadow:0 16px 40px rgba(0,0,0,.18)}
.nav-top .dropdown-item{border-radius:10px; padding:.55rem .7rem}
.nav-top .dropdown-header{font-size:.78rem; letter-spacing:.5px; text-transform:uppercase; opacity:.7}

/* ==========================
   TOP NAV - ABAS (estilo ERP)
   pedido: abas como "foto2" (sem underline duplo)
   ========================== */

/* Logo no lugar do texto */
.nav-top .navbar-brand.marol-brand{display:flex;align-items:center;padding:0;margin-right:14px}
.nav-top .navbar-brand .marol-logo{height:40px;width:auto;max-width:220px;object-fit:contain}
@media (max-width: 768px){
  .nav-top .navbar-brand .marol-logo{height:32px;max-width:170px}
}

/* Remove o indicador/underline animado antigo (aba já é o indicador) */
.nav-top .nav-indicator{display:none !important;}

/* Trilho das abas */
.nav-top .navbar-collapse{border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:0}

/* Abas coladas, estilo corporativo */
.nav-top .navbar-nav{gap:0 !important;align-items:stretch}
.nav-top .navbar-nav .nav-item{margin:0 !important}

.nav-top .navbar-nav .nav-link{
  border-radius:10px 10px 0 0;
  padding:.55rem .85rem;
  margin:0;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-bottom:0;
  color:rgba(255,255,255,.92);
}

/* separador fino entre abas */
.nav-top .navbar-nav .nav-item + .nav-item .nav-link{border-left:0}

/* Hover discreto tipo SAP/Oracle */
.nav-top .navbar-nav .nav-link:hover{background:rgba(255,255,255,.12);transform:none}

/* Aba ativa / dropdown aberto */
.nav-top .navbar-nav .nav-link.active,
.nav-top .navbar-nav .nav-item.show > .nav-link{
  background:#f6f7f9;
  color:#0b2540;
  font-weight:700;
  border-color:rgba(0,0,0,.10);
}

/* dropdown encaixado na aba */
.nav-top .dropdown-menu{margin-top:0 !important;border-top-left-radius:0;border-top-right-radius:0}
.nav-offcanvas{background:linear-gradient(180deg, rgba(9,43,78,1) 0%, rgba(6,32,58,1) 100%); color:#fff;}
.nav-offcanvas .list-group-item{background:transparent; color:#eaf1f8; border-color:rgba(255,255,255,.10)}
.nav-offcanvas .list-group-item:hover{background:rgba(255,255,255,.08)}
.nav-offcanvas .offcanvas-section{font-size:.72rem; letter-spacing:1px; font-weight:800; color:rgba(255,255,255,.65)}
.nav-offcanvas .btn-close{filter:invert(1) grayscale(1)}
@media (max-width: 991.98px){
  body.app-topnav .content-topnav{padding-top:68px;}
}



/* ===== EXTRA CAPRICHO: Burger anim + Offcanvas blur ===== */
.navbar .nav-burger-btn{
  border:0;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
}
.navbar .nav-burger-btn:focus{
  box-shadow: 0 0 0 .2rem rgba(255,122,24,.25);
}
.navbar .nav-burger{
  width:22px;
  height:16px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}
.navbar .nav-burger > span{
  display:block;
  height:2px;
  border-radius:2px;
  background: rgba(255,255,255,.92);
  transform-origin: center;
  transition: transform .22s ease, opacity .18s ease, width .22s ease;
}
.navbar .nav-burger > span:nth-child(2){ width: 85%; }
.navbar .nav-burger-btn.is-open .nav-burger > span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.navbar .nav-burger-btn.is-open .nav-burger > span:nth-child(2){
  opacity:0;
  width:0;
}
.navbar .nav-burger-btn.is-open .nav-burger > span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

/* Backdrop com blur premium */
.offcanvas-backdrop.show{
  opacity:.55;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Offcanvas com entrada suave (slide + fade) */
.nav-offcanvas{
  transition: transform .25s ease, opacity .25s ease;
  opacity:0;
}
.nav-offcanvas.show{
  opacity:1;
}

/* Acessibilidade: respeita prefer-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .navbar .nav-burger > span,
  .nav-offcanvas{
    transition:none !important;
  }
}



/* ===== Marol TopNav - Magnetic Pill Indicator (Animation v2) ===== */
.nav-top .navbar-nav{ position:relative; }
.nav-top .nav-link{
  position:relative;
  z-index:2;
  border-radius:14px;
  padding:10px 14px;
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}
.nav-top .nav-link:hover{ transform: translateY(-1px); }

.nav-top .nav-indicator{
  position:absolute;
  top:50%;
  left:0;
  height:40px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(255,122,24,.22), rgba(255,255,255,.10));
  background-size:200% 200%;
  box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.10);
  transform: translateY(-50%);
  opacity:0;
  pointer-events:none;
  transition: left .28s cubic-bezier(.2,.9,.2,1), width .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
}
.nav-top .nav-indicator.is-on{ opacity:1; animation: marolPillShift 2.4s ease-in-out infinite; }
@keyframes marolPillShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Dropdown: pop + fade (diferente do slide) */
.nav-top .dropdown-menu{
  border-radius:16px;
  overflow:hidden;
  transform-origin: 12px 0;
}
.nav-top .dropdown-menu.show{
  animation: marolDropPop .22s cubic-bezier(.2,1.2,.2,1) both;
}
@keyframes marolDropPop{
  0%{ opacity:0; transform: translateY(6px) scale(.96); filter: blur(2px); }
  100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .nav-top .nav-link,
  .nav-top .nav-indicator,
  .nav-top .dropdown-menu.show{
    transition:none !important;
    animation:none !important;
  }
}



/* ===== GLASS TOPNAV (V3) ===== */
.nav-top{
  background: rgba(6, 26, 48, .55) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 14px 40px rgba(0,0,0,.16) !important;
}
.nav-top::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(1200px 200px at 10% 0%, rgba(255,122,24,.20), transparent 60%),
              radial-gradient(900px 220px at 80% 0%, rgba(120,200,255,.18), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  opacity:.9;
}
.nav-top .container-fluid{ position:relative; z-index:1; }
.nav-top .nav-link:hover{ background: rgba(255,255,255,.10); }
.nav-top .nav-link.active{ background: rgba(255,255,255,.14); }

.nav-top .dropdown-menu{
  background: rgba(14, 28, 44, .62);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.nav-top .dropdown-item:hover{
  background: rgba(255,255,255,.10);
}

/* Offcanvas glass + blur backdrop */
.offcanvas.nav-offcanvas{
  background: rgba(6, 26, 48, .70) !important;
  border-right: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.offcanvas-backdrop.show{
  opacity: 1 !important;
  background-color: rgba(0,0,0,.25) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Fallback: sem blur */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .nav-top{ background: rgba(6,26,48,.92) !important; }
  .nav-top .dropdown-menu{ background: rgba(14,28,44,.96); }
  .offcanvas.nav-offcanvas{ background: rgba(6,26,48,.96) !important; }
  .offcanvas-backdrop.show{ background-color: rgba(0,0,0,.45) !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav-top, .nav-top::before, .nav-top .dropdown-menu, .offcanvas-backdrop.show{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}



/* ===== TOPNAV SOLID PREMIUM (V4) - no glass ===== */
.nav-top{
  background: linear-gradient(180deg, #062a4f 0%, #041f3a 100%) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-top .nav-link{
  background: transparent;
}
.nav-top .nav-link:hover{
  background: rgba(255,255,255,.08);
}
.nav-top .nav-link.active{
  background: rgba(255,255,255,.14);
}
.nav-top .dropdown-menu{
  background: #0b2238 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-top .dropdown-item{
  color: rgba(255,255,255,.92) !important;
}
.nav-top .dropdown-item:hover,
.nav-top .dropdown-item:focus{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.nav-top .dropdown-header{
  color: rgba(255,255,255,.55) !important;
}
.offcanvas.nav-offcanvas{
  background: #071c30 !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.offcanvas-backdrop.show{
  background-color: rgba(0,0,0,.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* BADGE (contadores) - mais visível e corporativo */

.menu-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#ff7a00;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:18px;
  margin-left:.5rem;
  box-shadow:0 0 0 2px rgba(255,255,255,.95);
}


/* =========================================
   TOP NAV - ABAS COLORIDAS (config "foto")
   Objetivo: abas com cores por módulo,
   estilo corporativo tipo ERP, sem linhas duplas.
   ========================================= */

.nav-top .navbar-nav{
  gap: 2px !important; /* leve separação como abas do exemplo */
}

.nav-top .navbar-nav .nav-link{
  /* Cantos mais arredondados (pedido: bem mais arredondado) */
  border-radius: 18px 18px 0 0;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

/* cores por aba (não ativa) */
.nav-top .navbar-nav .nav-link.tab-dashboard{ background: rgba(255,255,255,.08); }
.nav-top .navbar-nav .nav-link.tab-operacao{  background: rgba(  0,148,255,.18); } /* azul */
.nav-top .navbar-nav .nav-link.tab-seguranca{ background: rgba(  0,200,160,.18); } /* verde/teal */
.nav-top .navbar-nav .nav-link.tab-sistema{   background: rgba(150,160,175,.16); } /* cinza */

/* hover discreto (SAP/Oracle) */
.nav-top .navbar-nav .nav-link:hover{
  filter: brightness(1.08);
  background-blend-mode: screen;
}

/* aba ativa e quando dropdown aberto: branca/clean */
.nav-top .navbar-nav .nav-link.active,
.nav-top .navbar-nav .nav-item.show > .nav-link{
  background: #f6f7f9 !important;
  color: #0b2540 !important;
  border-color: rgba(0,0,0,.12) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* trilho das abas (linha base) */
.nav-top .navbar-collapse{
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* dropdown encaixado (mantém) */
.nav-top .dropdown-menu{
  margin-top: 0 !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}



/* =========================================================
   TOP NAV — TABS PILL (ativo por contexto/URL)
   - Mantém a aba correspondente selecionada
   - Visual clean e profissional
   ========================================================= */

:root{
  --navPillH: 42px;
  --navPillR: 14px;
  --navPillPadX: 16px;

  --navBg: rgba(255,255,255,.72);
  --navBorder: rgba(15,23,42,.08);
  --navText: #0f172a;

  --pillHover: rgba(99,102,241,.12);
  --pillActiveBg: #c7d2fe;
  --pillActiveText: #0b2540;

  --pillShadow: 0 10px 26px rgba(0,0,0,.10);
}

/* barra */
.nav-top{
  background: var(--navBg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navBorder) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* links (pills) */
.nav-top .navbar-nav{
  gap: 10px !important;
}

.nav-top .nav-link{
  height: var(--navPillH);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  padding: 0 var(--navPillPadX) !important;

  border-radius: var(--navPillR) !important;
  border: 1px solid transparent !important;

  background: transparent !important;
  color: var(--navText) !important;

  font-weight: 600;
  text-decoration: none !important;

  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.nav-top .nav-link:hover{
  background: var(--pillHover) !important;
  transform: translateY(-1px);
}

/* ativo (inclui dropdown pai) */
.nav-top .nav-link.active,
.nav-top .nav-item.show > .nav-link{
  background: var(--pillActiveBg) !important;
  color: var(--pillActiveText) !important;
  box-shadow: var(--pillShadow);
}

/* dropdown */
.nav-top .dropdown-menu{
  margin-top: 10px !important;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  padding: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}

.nav-top .dropdown-item{
  border-radius: 12px;
  padding: 10px 12px;
}

.nav-top .dropdown-item:hover{
  background: rgba(99,102,241,.12);
}

/* Dark theme via data-theme */
[data-theme="dark"] .nav-top{
  --navBg: rgba(2,6,23,.55);
  --navBorder: rgba(255,255,255,.10);
  --navText: rgba(255,255,255,.92);

  --pillHover: rgba(255,255,255,.10);
  --pillActiveBg: rgba(99,102,241,.28);
  --pillActiveText: rgba(255,255,255,.95);

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

[data-theme="dark"] .nav-top .dropdown-menu{
  background: rgba(2,6,23,.96);
  border-color: rgba(255,255,255,.10);
}

[data-theme="dark"] .nav-top .dropdown-item{
  color: rgba(255,255,255,.92);
}

[data-theme="dark"] .nav-top .dropdown-item:hover{
  background: rgba(99,102,241,.22);
}




/* ======================================================
   TOP NAV — ABAS (V3) "TAB de verdade" (não botão / não pill)
   - Inativas: sem fundo (apenas texto)
   - Ativa: fundo branco, conectado ao conteúdo
   - Sem "container arredondado" envolvendo tudo
   - Dark-mode toggle sempre visível
   ====================================================== */

.nav-top.navbar{
  background: linear-gradient(180deg, rgba(238,242,255,1) 0%, rgba(248,250,252,1) 100%) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.10) !important;
}

/* lista de abas: linha de base */
.nav-top .navbar-nav.me-auto{
  gap: 0 !important;
  border-bottom: 1px solid rgba(15,23,42,.12);
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* aba padrão (inativa) — “tab” real */
.nav-top .navbar-nav.me-auto .nav-link{
  height: 44px;
  display: inline-flex;
  align-items: center;

  padding: 0 18px !important;

  background: transparent !important;
  border: 1px solid transparent;
  border-bottom: 0;

  border-radius: 14px 14px 0 0 !important;

  color: rgba(15,23,42,.78) !important;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: none !important;

  position: relative;
  margin: 0 !important;
}

/* tira “cara de botão” */
.nav-top .navbar-nav.me-auto .nav-link:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* hover leve */
.nav-top .navbar-nav.me-auto .nav-link:hover{
  background: rgba(255,255,255,.55) !important;
  color: rgba(15,23,42,.92) !important;
}

/* ativa — branca e conectada ao conteúdo */
.nav-top .navbar-nav.me-auto .nav-link.active,
.nav-top .navbar-nav.me-auto .nav-item.show > .nav-link{
  background: #ffffff !important;
  color: #0b2540 !important;
  font-weight: 800;

  border-color: rgba(15,23,42,.14) !important;
  z-index: 5;
}

/* “língua” para tampar a linha de base e parecer conectada */
.nav-top .navbar-nav.me-auto .nav-link.active::after,
.nav-top .navbar-nav.me-auto .nav-item.show > .nav-link::after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:-1px;
  height: 3px;
  background: #fff;
}

/* evita dupla borda entre tabs quando quiser “coladas” */
.nav-top .navbar-nav.me-auto .nav-item + .nav-item .nav-link{
  margin-left: 6px !important; /* separação mínima entre tabs */
}

/* dropdown menu */
.nav-top .dropdown-menu{
  margin-top: 8px !important;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
}

/* botão tema: sempre visível e com contraste */
.btn-theme-toggle{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.14);
  color: rgba(15,23,42,.86);

  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-theme-toggle:hover{
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(2,6,23,.12);
  transform: translateY(-1px);
}

/* Dark mode */
[data-theme="dark"] .nav-top.navbar{
  background: linear-gradient(180deg, rgba(15,23,42,1) 0%, rgba(2,6,23,1) 100%) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .nav-top .navbar-nav.me-auto{
  border-bottom-color: rgba(255,255,255,.12);
}

[data-theme="dark"] .nav-top .navbar-nav.me-auto .nav-link{
  color: rgba(226,232,240,.82) !important;
}

[data-theme="dark"] .nav-top .navbar-nav.me-auto .nav-link:hover{
  background: rgba(255,255,255,.08) !important;
  color: rgba(226,232,240,.95) !important;
}

[data-theme="dark"] .nav-top .navbar-nav.me-auto .nav-link.active,
[data-theme="dark"] .nav-top .navbar-nav.me-auto .nav-item.show > .nav-link{
  background: rgba(15,23,42,.92) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

[data-theme="dark"] .nav-top .navbar-nav.me-auto .nav-link.active::after,
[data-theme="dark"] .nav-top .navbar-nav.me-auto .nav-item.show > .nav-link::after{
  background: rgba(15,23,42,.92);
}

[data-theme="dark"] .btn-theme-toggle{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  color: rgba(226,232,240,.92);
}
[data-theme="dark"] .btn-theme-toggle:hover{
  background: rgba(255,255,255,.14);
}


/* Documentos: tags */
.doc-tag{ font-weight:500; }


/* ===============================
   Dashboard – Card Documentos PRO
   =============================== */
.docs-kpi-pro{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
}
.docs-kpi-icon{
  width: 44px;height:44px;border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(14,165,233,.12);
  color: #0ea5e9;
  font-size: 20px;
}
[data-theme="dark"] .docs-kpi-pro{
  border-color: rgba(255,255,255,.10);
}
[data-theme="dark"] .docs-kpi-icon{
  background: rgba(14,165,233,.18);
}


/* ===============================
   Banner global – alertas documentos
   =============================== */
.alert-docs-banner{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.alert-docs-banner .alert-icon{
  width: 38px;height:38px;border-radius: 12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(99,102,241,.12);
  color: #6366f1;
}
[data-theme="dark"] .alert-docs-banner{
  background: rgba(15,23,42,.92);
  border-color: rgba(255,255,255,.10);
}
[data-theme="dark"] .alert-docs-banner .alert-icon{
  background: rgba(99,102,241,.18);
}


/* ===============================
   Docs – formulário (respiro)
   =============================== */
.docs-form .form-actions{
  margin-top: 22px;
}

/* === Mega-menu em blocos (sem scroll) === */
/*
  Anti-overflow (foto 3):
  - Mantém o mega-menu sempre dentro do viewport
  - Ajusta a largura automaticamente (sem precisar de scrollbar)
*/
.marol-megamenu{
  width: min(1200px, calc(100vw - 56px));
  max-width: min(1200px, calc(100vw - 56px));
  min-width: 720px;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

/* quando o menu estiver alinhado à direita (Sistema), garante que não vaze */
.dropdown-menu-end.marol-megamenu{right:0;left:auto;}
.marol-megamenu .mm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.marol-megamenu .mm-block{background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:12px;}
.marol-megamenu .mm-title{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(15,23,42,.65);margin:2px 0 10px;font-weight:700;}
.marol-megamenu .mm-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:#0f172a;text-decoration:none;flex-wrap:nowrap;}
.marol-megamenu .mm-item span{white-space:nowrap;overflow:visible;text-overflow:clip;min-width:auto;flex:0 0 auto;}
.marol-megamenu .mm-item .mm-badge{white-space:nowrap;flex:0 0 auto;}
.marol-megamenu .mm-item i{font-size:1.1rem;opacity:.9}
.marol-megamenu .mm-item:hover{background:rgba(15,23,42,.06);}
.marol-megamenu .mm-item.active{background:rgba(59,130,246,.12);}
@media (max-width:992px){
  .marol-megamenu{min-width:auto;max-width:unset;}
  .marol-megamenu .mm-grid{grid-template-columns:1fr;}
}