/* ============================================ */
/* RESPONSIVE STYLES FOR MAXTON ADMIN TEMPLATE  */
/* ============================================ */

/* --------------- 1280px Breakpoint --------------- */
@media screen and (max-width: 1280px) {
  .email-header {
    height: auto;
  }
  .email-content {
    padding: 100px 0 0 0;
  }
}

/* --------------- 1024px Breakpoint --------------- */
@media screen and (max-width: 1024px) {
  /* Email Module Adjustments */
  .email-header {
    border-top-left-radius: 0.25rem;
    left: 0;
  }
  .email-sidebar {
    left: -280px;
  }
  .email-content {
    margin-left: 0;
  }
  .email-toggled .email-sidebar {
    left: 0;
  }
  .email-toggled .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 250px;
    background: #000;
    opacity: 0.5;
    z-index: 9;
    display: block;
    transition: all 0.3s ease-out;
  }

  /* Chat Module Adjustments */
  .chat-header {
    border-top-left-radius: 0.25rem;
    left: 0;
  }
  .chat-footer {
    border-bottom-left-radius: 0.25rem;
    left: 0;
  }
  .chat-sidebar {
    left: -370px;
  }
  .chat-content {
    margin-left: 0;
  }
  .chat-toggled .chat-sidebar {
    left: 0;
  }
  .chat-toggled .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 340px;
    background: #000;
    opacity: 0.5;
    z-index: 11;
    display: block;
    transition: all 0.3s ease-out;
  }
}

/* --------------- 1199px Breakpoint (Main Responsive) --------------- */
@media only screen and (max-width: 1199px) {
  /* Table Responsive Behavior */
  .table-responsive {
    white-space: nowrap;
  }

  /* Main Sidebar Adjustments */
  .sidebar-wrapper {
    left: -340px;
    transition: all 0.3s ease-out;
  }
  .sidebar-wrapper .sidebar-header .sidebar-close {
    display: flex;
  }

  /* Header Adjustments */
  .top-header .navbar {
    left: 0;
  }
  .top-header .navbar .dropdown {
    position: static;
  }
  .top-header .navbar .dropdown .dropdown-menu {
    width: 100%;
    position: fixed;
    top: 70px;
    left: 0;
  }
  .top-header .navbar .dropdown .dropdown-menu::after {
    display: none;
  }
  .top-header .navbar .mega-menu-widgets {
    padding: 1rem;
    position: relative;
    height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Content Adjustments */
  .main-wrapper {
    margin-left: 0;
  }
  .page-content {
    margin-left: 0;
  }

  /* Footer Adjustments */
  .page-footer {
    left: 0;
  }

  /* Mini Sidebar State */
  .mini-sidebar {
    left: -70px;
  }

  /* Toggled State */
  .toggled .sidebar-wrapper {
    width: 340px;
    left: 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  }
  .toggled .sidebar-wrapper .sidebar-header,
  .toggled .sidebar-wrapper .sidebar-bottom {
    width: 340px;
  }
  .toggled .logo-name {
    display: block;
  }
  .toggled .overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 11;
    display: block;
    transition: all 0.3s ease-out;
  }
}

/* --------------- 992px Breakpoint --------------- */
@media only screen and (max-width: 992px) {
  .search-popup {
    position: fixed !important;
    top: 0 !important;
    z-index: 10;
  }
}

/* --------------- 768px Breakpoint (Tablets) --------------- */
@media only screen and (max-width: 768px) {
  /* Sidebar full width on mobile */
  .sidebar-wrapper {
    width: 100%;
    left: -100%;
  }
  .toggled .sidebar-wrapper {
    width: 100%;
  }

  /* Adjust header height */
  .top-header .navbar,
  .sidebar-wrapper .sidebar-header,
  .top-header .navbar .nav-item {
    height: 60px;
  }

  /* Adjust dropdowns position */
  .top-header .navbar .dropdown .dropdown-menu {
    top: 60px;
  }
}

/* --------------- 576px Breakpoint (Phones) --------------- */
@media only screen and (max-width: 576px) {
  /* Compact navigation elements */
  .top-header .navbar .nav-link,
  .top-header .btn-toggle a {
    width: 40px;
    height: 40px;
  }
  .main-content {
    padding: 1rem;
  }
  .search-popup {
    top: 60px !important;
  }
  @media (max-width: 768px) {
  .system-title {
    font-size: 0.6rem;
    white-space: normal;
    display: block;
    max-height: 3em; /* Aprox. 2 líneas */
    line-height: 1.5em;
    overflow: hidden;
    position: relative;
  }
  
 
}
}