/* Renovacion Visual V9 - Reparacion menu lateral + ajuste final responsive
   Enfocado en corregir la franja negra lateral en movil y estabilizar la navegacion app. */
:root{
  --v9-sidebar-w: 292px;
  --v9-mobile-dock-h: 86px;
  --v9-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v9-ink:#0b1220;
  --v9-muted:#667085;
  --v9-blue:#2563eb;
  --v9-blue-2:#1d4ed8;
  --v9-cyan:#0ea5e9;
  --v9-panel:#ffffff;
  --v9-sidebar:#061832;
  --v9-shadow:0 28px 70px rgba(15,23,42,.18);
}

.visual-v9{
  overflow-x:hidden;
}

.visual-v9 .wrapper,
.visual-v9 .content-wrapper,
.visual-v9 .main-header,
.visual-v9 .main-footer{
  max-width:100%;
}

/* Desktop sidebar refined */
@media (min-width: 768px){
  .visual-v9.sidebar-mini.sidebar-collapse .main-sidebar:hover,
  .visual-v9.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused{
    width:var(--v9-sidebar-w)!important;
  }

  .visual-v9 .premium-sidebar{
    width:var(--v9-sidebar-w)!important;
  }

  .visual-v9:not(.sidebar-collapse) .content-wrapper,
  .visual-v9:not(.sidebar-collapse) .main-footer,
  .visual-v9:not(.sidebar-collapse) .main-header{
    margin-left:var(--v9-sidebar-w)!important;
  }

  .visual-v9.sidebar-collapse .content-wrapper,
  .visual-v9.sidebar-collapse .main-footer,
  .visual-v9.sidebar-collapse .main-header{
    margin-left:4.6rem!important;
  }

  .visual-v9 .premium-sidebar .nav-sidebar>.nav-item>.nav-link{
    margin-left:12px;
    margin-right:12px;
  }
}

/* Critical mobile fix:
   Closed sidebar must disappear completely, not leave a black strip. */
@media (max-width: 767.98px){
  html,
  body.visual-v9{
    overflow-x:hidden!important;
    width:100%!important;
  }

  .visual-v9 .wrapper{
    overflow-x:hidden!important;
    width:100%!important;
  }

  .visual-v9 .main-header,
  .visual-v9 .content-wrapper,
  .visual-v9 .main-footer{
    margin-left:0!important;
    width:100%!important;
    transform:none!important;
    left:0!important;
  }

  .visual-v9 .content-wrapper{
    min-height:100vh;
    padding-bottom:calc(var(--v9-mobile-dock-h) + 20px + var(--v9-safe-bottom));
  }

  .visual-v9 .premium-sidebar,
  .visual-v9 .main-sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:min(86vw, var(--v9-sidebar-w))!important;
    max-width:min(86vw, var(--v9-sidebar-w))!important;
    min-height:100vh!important;
    height:100vh!important;
    margin-left:0!important;
    transform:translate3d(-112%,0,0)!important;
    transition:transform .24s cubic-bezier(.2,.8,.2,1)!important;
    z-index:1048!important;
    border-top-right-radius:28px;
    border-bottom-right-radius:28px;
    box-shadow:0 28px 70px rgba(2,12,27,.42)!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#061832 0%,#08254d 100%)!important;
  }

  .visual-v9.sidebar-open .premium-sidebar,
  .visual-v9.sidebar-open .main-sidebar{
    transform:translate3d(0,0,0)!important;
  }

  .visual-v9.sidebar-collapse .premium-sidebar,
  .visual-v9.sidebar-collapse .main-sidebar,
  .visual-v9:not(.sidebar-open) .premium-sidebar,
  .visual-v9:not(.sidebar-open) .main-sidebar{
    transform:translate3d(-112%,0,0)!important;
  }

  .visual-v9.sidebar-open.sidebar-collapse .premium-sidebar,
  .visual-v9.sidebar-open.sidebar-collapse .main-sidebar{
    transform:translate3d(0,0,0)!important;
  }

  .visual-v9.sidebar-open::after{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.46);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    z-index:1040;
  }

  .visual-v9 .premium-sidebar .brand-link{
    min-height:86px;
    display:flex!important;
    align-items:center;
    gap:12px;
    padding:18px 18px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }

  .visual-v9 .premium-brand-logo-wrap{
    width:54px;
    height:54px;
    min-width:54px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.96);
    box-shadow:0 16px 30px rgba(0,0,0,.18);
  }

  .visual-v9 .premium-brand-logo{
    width:38px!important;
    height:38px!important;
    object-fit:contain;
  }

  .visual-v9 .premium-brand-copy .brand-text{
    color:#fff!important;
    font-size:1rem;
    font-weight:850!important;
    letter-spacing:-.03em;
    line-height:1.05;
  }

  .visual-v9 .premium-brand-copy small{
    color:rgba(255,255,255,.72)!important;
    font-weight:700;
    letter-spacing:.02em;
  }

  .visual-v9 .premium-sidebar .sidebar{
    height:calc(100vh - 86px)!important;
    overflow-y:auto!important;
    padding:10px 0 22px!important;
    scrollbar-width:none;
  }

  .visual-v9 .premium-sidebar .sidebar::-webkit-scrollbar{
    display:none;
  }

  .visual-v9 .premium-nav-section{
    margin:16px 18px 8px!important;
    padding:0!important;
    font-size:.72rem!important;
    font-weight:900!important;
    letter-spacing:.12em;
    color:rgba(255,255,255,.52)!important;
  }

  .visual-v9 .premium-sidebar .nav-sidebar>.nav-item>.nav-link{
    display:flex!important;
    align-items:center!important;
    min-height:48px!important;
    margin:5px 14px!important;
    padding:11px 14px!important;
    border-radius:18px!important;
    color:rgba(255,255,255,.82)!important;
    background:transparent!important;
  }

  .visual-v9 .premium-sidebar .nav-sidebar>.nav-item>.nav-link .nav-icon{
    width:26px!important;
    min-width:26px!important;
    margin-right:10px!important;
    text-align:center!important;
    color:rgba(255,255,255,.72)!important;
    font-size:1rem!important;
  }

  .visual-v9 .premium-sidebar .nav-sidebar>.nav-item>.nav-link p{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    width:auto!important;
    margin:0!important;
    color:inherit!important;
    font-size:.94rem!important;
    font-weight:780!important;
    letter-spacing:-.01em;
    white-space:normal!important;
  }

  .visual-v9 .premium-sidebar .nav-sidebar>.nav-item>.nav-link.active,
  .visual-v9 .premium-sidebar .nav-sidebar>.nav-item>.nav-link.is-active{
    color:#fff!important;
    background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
    box-shadow:0 16px 34px rgba(37,99,235,.30)!important;
  }

  .visual-v9 .premium-sidebar .nav-sidebar>.nav-item>.nav-link.active .nav-icon,
  .visual-v9 .premium-sidebar .nav-sidebar>.nav-item>.nav-link.is-active .nav-icon{
    color:#fff!important;
  }

  .visual-v9 .premium-icon-btn[data-widget="pushmenu"]{
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#fff!important;
    color:#1d4ed8!important;
    border:1px solid rgba(29,78,216,.10)!important;
    box-shadow:0 12px 26px rgba(15,23,42,.08)!important;
  }

  .visual-v9.sidebar-open .premium-icon-btn[data-widget="pushmenu"]{
    background:#eef4ff!important;
    color:#0f3ba8!important;
  }

  /* Topbar must not push content horizontally */
  .visual-v9 .premium-topbar{
    min-height:64px;
    margin-left:0!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .visual-v9 .premium-user-pill{
    display:none!important;
  }

  /* Dashboard mobile tuning */
  .visual-v9 .content{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .visual-v9 .premium-content-header{
    margin-left:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .visual-v9 .premium-content-header .container-fluid,
  .visual-v9 .content .container-fluid{
    padding-left:0!important;
    padding-right:0!important;
  }

  .visual-v9 .premium-page-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:10px!important;
    width:100%;
    overflow:visible!important;
  }

  .visual-v9 .premium-page-actions .btn{
    width:100%!important;
    margin:0!important;
    min-height:50px!important;
    border-radius:18px!important;
    justify-content:center;
    font-size:.95rem!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .visual-v9 .premium-hero-dashboard,
  .visual-v9 .v7-executive-card,
  .visual-v9 .v3-command-center,
  .visual-v9 .premium-metric-card,
  .visual-v9 .dashboard-module-card,
  .visual-v9 .premium-card{
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Mobile dock app pro: cleaner, less bulky */
  .visual-v9 .v2-mobile-dock{
    left:12px!important;
    right:12px!important;
    bottom:10px!important;
    width:auto!important;
    min-height:76px!important;
    padding:8px 8px calc(8px + var(--v9-safe-bottom))!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(15,23,42,.07)!important;
    box-shadow:0 22px 52px rgba(15,23,42,.18)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    z-index:1032!important;
  }

  .visual-v9 .v2-mobile-dock-item{
    min-height:60px!important;
    border-radius:18px!important;
    padding:8px 4px!important;
    color:#64748b!important;
    font-size:.70rem!important;
    line-height:1!important;
    font-weight:850!important;
  }

  .visual-v9 .v2-mobile-dock-item i{
    font-size:1.16rem!important;
  }

  .visual-v9 .v2-mobile-dock-item span{
    margin-top:4px;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .visual-v9 .v2-mobile-dock-item.active,
  .visual-v9 .v2-mobile-dock-item.is-active{
    color:#fff!important;
    background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
    box-shadow:0 12px 24px rgba(37,99,235,.24)!important;
  }

  .visual-v9 .v2-mobile-dock-item.active::after,
  .visual-v9 .v2-mobile-dock-item.is-active::after{
    content:'';
    width:22px;
    height:3px;
    border-radius:999px;
    background:rgba(255,255,255,.78);
    margin-top:5px;
  }

  .visual-v9 .v4-command-button{
    right:18px!important;
    bottom:calc(100px + var(--v9-safe-bottom))!important;
    width:52px!important;
    height:52px!important;
    border-radius:18px!important;
    background:#0f172a!important;
    box-shadow:0 18px 42px rgba(15,23,42,.25)!important;
  }

  .visual-v9 .v5-qa-button{
    display:none!important;
  }
}

/* Extra small screens */
@media (max-width: 390px){
  .visual-v9 .v2-mobile-dock{
    left:8px!important;
    right:8px!important;
  }

  .visual-v9 .v2-mobile-dock-item{
    font-size:.66rem!important;
  }

  .visual-v9 .v2-mobile-dock-item i{
    font-size:1.08rem!important;
  }

  .visual-v9 .premium-page-actions{
    grid-template-columns:1fr;
  }
}

/* Prevent animation from causing horizontal jump */
.visual-v9 .v7-stagger-item,
.visual-v9 .dashboard-module-card,
.visual-v9 .premium-metric-card{
  will-change:auto;
}