/* =======================================================
   MARCA SUPERIOR DEL ADMIN
   ======================================================= */
.main-header .brand-image,
.brand-link .brand-image {
    max-height: 42px !important;
    width: auto !important;
}

.brand-text {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
}

/* =======================================================
   LOGIN - FONDO GENERAL
   ======================================================= */
.login-page {
    position: relative !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 60%, rgba(42, 130, 255, 0.28) 0%, rgba(42, 130, 255, 0.10) 18%, rgba(42, 130, 255, 0) 42%),
        radial-gradient(circle at 8% 88%, rgba(0, 190, 255, 0.30) 0%, rgba(0, 190, 255, 0.10) 16%, rgba(0, 190, 255, 0) 32%),
        radial-gradient(circle at 92% 28%, rgba(0, 128, 255, 0.18) 0%, rgba(0, 128, 255, 0.06) 14%, rgba(0, 128, 255, 0) 28%),
        linear-gradient(135deg, #02124a 0%, #03256f 35%, #001a61 68%, #020f3f 100%) !important;
}

.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1200px 500px at 50% 72%, rgba(23, 111, 255, 0.36) 0%, rgba(23, 111, 255, 0.18) 22%, rgba(23, 111, 255, 0) 48%),
        radial-gradient(800px 300px at 18% 18%, rgba(0, 148, 255, 0.16) 0%, rgba(0, 148, 255, 0) 55%),
        linear-gradient(110deg, rgba(0, 180, 255, 0.0) 0%, rgba(0, 180, 255, 0.0) 36%, rgba(75, 186, 255, 0.22) 49%, rgba(0, 180, 255, 0.0) 62%),
        linear-gradient(8deg, rgba(0, 170, 255, 0.0) 0%, rgba(0, 170, 255, 0.0) 46%, rgba(60, 170, 255, 0.32) 50%, rgba(0, 170, 255, 0.0) 54%, rgba(0, 170, 255, 0.0) 100%);
    opacity: 0.95;
}

.login-page::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 0% 100%, rgba(0, 190, 255, 0.30) 0 2px, transparent 2px 100%),
        radial-gradient(circle at 100% 38%, rgba(0, 170, 255, 0.35) 0 1.6px, transparent 1.6px 100%);
    background-size: 18px 18px, 16px 16px;
    background-position: left bottom, right 120px top 240px;
    mask:
        radial-gradient(480px 280px at 10% 92%, #000 35%, transparent 72%),
        radial-gradient(520px 420px at 92% 44%, #000 28%, transparent 68%);
    -webkit-mask:
        radial-gradient(480px 280px at 10% 92%, #000 35%, transparent 72%),
        radial-gradient(520px 420px at 92% 44%, #000 28%, transparent 68%);
    opacity: 0.75;
}

/* =======================================================
   TARJETA DEL LOGIN
   ======================================================= */
.login-box,
.login-page .card {
    width: 440px !important;
    position: relative !important;
    z-index: 2 !important;
}

.login-page .card {
    border-radius: 16px !important;
    border: 1px solid #c8d3e0 !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.20) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    margin-top: -8px !important;
}

/* =======================================================
   LOGIN - LOGO
   ======================================================= */
.login-page .login-logo {
    display: block !important;
    text-align: center !important;
    margin-bottom: 6px !important;
    position: relative !important;
    z-index: 2 !important;
}

.login-page .login-logo img,
.login-box .login-logo img,
.login-logo img {
    display: block !important;
    margin: 0 auto 16px auto !important;
    max-height: 220px !important;
    max-width: 320px !important;
    width: auto !important;
    height: auto !important;
}

/* Oculta logos duplicados comunes */
.login-page .login-logo + .login-logo,
.login-page .brand-image-xl,
.login-page .brand-image,
.login-page .brand-image-xs {
    display: none !important;
}

/* =======================================================
   TITULO DEL LOGIN
   ======================================================= */
.login-box-msg,
.login-page .card-header,
.login-logo,
.login-box .card-header,
.login-page .card-body p,
.login-page .card-body .login-box-msg {
    font-family: "Segoe UI", "Comic Sans MS", Arial, sans-serif !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #163a63 !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 12px !important;
}

.login-logo b,
.login-logo strong,
.login-page .card-body strong,
.login-page .card-body b {
    font-family: "Segoe UI", "Comic Sans MS", Arial, sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #1518dabb !important;
    letter-spacing: 0.6px !important;
}

/* =======================================================
   CAMPOS DEL LOGIN
   ======================================================= */
.login-page .form-control {
    border-radius: 8px !important;
    border: 1px solid #c9d4e2 !important;
    box-shadow: none !important;
    height: 44px !important;
}

.login-page .form-control:focus {
    border-color: #1d6fd8 !important;
    box-shadow: 0 0 0 0.18rem rgba(29, 111, 216, 0.14) !important;
}

/* =======================================================
   BOTON DE ACCESO
   ======================================================= */
.login-page .btn,
.login-page button,
.login-page input[type="submit"] {
    border-radius: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    height: 44px !important;
}

.login-page .btn-primary,
.login-page input[type="submit"],
.login-page button[type="submit"] {
    background: linear-gradient(90deg, #0f5fbf 0%, #1d79e6 100%) !important;
    border-color: #0f5fbf !important;
    color: #ffffff !important;
}

.login-page .btn-primary:hover,
.login-page input[type="submit"]:hover,
.login-page button[type="submit"]:hover {
    background: linear-gradient(90deg, #0b53a9 0%, #1668cf 100%) !important;
    border-color: #0b53a9 !important;
}

/* =======================================================
   SIDEBAR
   ======================================================= */
.main-sidebar .nav-sidebar .nav-link p {
    font-size: 0.98rem !important;
}

.main-sidebar .nav-icon {
    font-size: 1rem !important;
}

/* =======================================================
   ICONO / MENU DE USUARIO SUPERIOR DERECHO
   ======================================================= */
.main-header .navbar-nav .nav-link,
.main-header .navbar-nav .nav-link:link,
.main-header .navbar-nav .nav-link:visited,
.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-link:focus,
.main-header .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:link,
.navbar-light .navbar-nav .nav-link:visited,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-white .navbar-nav .nav-link,
.navbar-white .navbar-nav .nav-link:link,
.navbar-white .navbar-nav .nav-link:visited,
.navbar-white .navbar-nav .nav-link:hover,
.navbar-white .navbar-nav .nav-link:focus,
.navbar-white .navbar-nav .show > .nav-link,
.main-header .user-menu > .nav-link,
.main-header .user-menu > .nav-link:link,
.main-header .user-menu > .nav-link:visited,
.main-header .user-menu > .nav-link:hover,
.main-header .user-menu > .nav-link:focus,
.main-header .user-menu.show > .nav-link {
    color: #343a40 !important;
    opacity: 1 !important;
}

.main-header .navbar-nav .nav-link i,
.main-header .navbar-nav .nav-link .fa,
.main-header .navbar-nav .nav-link .fas,
.main-header .navbar-nav .nav-link .far,
.main-header .navbar-nav .nav-link .fab,
.main-header .navbar-nav .nav-link .bi,
.main-header .navbar-nav .nav-link svg,
.main-header .user-menu > .nav-link i,
.main-header .user-menu > .nav-link .fa,
.main-header .user-menu > .nav-link .fas,
.main-header .user-menu > .nav-link .far,
.main-header .user-menu > .nav-link .fab,
.main-header .user-menu > .nav-link .bi,
.main-header .user-menu > .nav-link svg,
.navbar-light .navbar-nav .nav-link i,
.navbar-light .navbar-nav .nav-link svg,
.navbar-white .navbar-nav .nav-link i,
.navbar-white .navbar-nav .nav-link svg {
    color: #343a40 !important;
    fill: #343a40 !important;
    stroke: #343a40 !important;
    opacity: 1 !important;
}

.main-header .user-menu img,
.main-header .navbar-nav img {
    filter: none !important;
    opacity: 1 !important;
}

.main-header .navbar .dropdown-toggle::after,
.main-header .navbar-nav .dropdown-toggle::after {
    color: #343a40 !important;
    border-top-color: #343a40 !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    opacity: 1 !important;
}

.main-header .user-menu > .nav-link {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.main-header .user-menu > .nav-link::before,
.main-header .navbar-nav .nav-link::before,
.main-header .navbar-nav .nav-link::after {
    color: #343a40 !important;
    opacity: 1 !important;
}

.main-header .navbar-nav .dropdown-menu {
    z-index: 99999 !important;
}

/* =======================================================
   LOGIN - DEJAR SOLO 1 LOGO GRANDE
   ======================================================= */

/* Oculta todos los logos/imágenes del login */
.login-page .login-logo img,
.login-page .brand-image,
.login-page .brand-image-xl,
.login-page .brand-image-xs,
.login-page .card img {
    display: none !important;
}

/* Muestra SOLO la primera imagen del bloque login-logo */
.login-page .login-logo:first-of-type img:first-of-type {
    display: block !important;
    margin: 0 auto 16px auto !important;
    max-height: 220px !important;
    max-width: 320px !important;
    width: auto !important;
    height: auto !important;
}

/* Si existe un segundo bloque de logo, lo oculta */
.login-page .login-logo + .login-logo {
    display: none !important;
}

/* =======================================================
   SUARIX DASHBOARD ADMIN INICIO - GLPI STYLE - 20260603
   ======================================================= */

.suarix-dashboard {
    padding: 0 0 24px 0;
}

.suarix-dashboard-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #102a5e 0%, #1459a6 48%, #23a6d5 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.suarix-dashboard-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}

.suarix-dashboard-hero h1 {
    position: relative;
    z-index: 1;
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    letter-spacing: 0.2px;
}

.suarix-dashboard-hero p {
    position: relative;
    z-index: 1;
    margin: 0;
    opacity: 0.92;
    font-size: 0.98rem;
}

.suarix-dashboard-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1f2d3d;
    margin: 18px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.suarix-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.suarix-kpi-card {
    min-height: 132px;
    border-radius: 16px;
    padding: 16px;
    color: #ffffff !important;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    display: block;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.suarix-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.18);
    color: #ffffff !important;
    text-decoration: none !important;
}

.suarix-kpi-card::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -42px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.suarix-kpi-icon {
    position: absolute;
    top: 15px;
    right: 16px;
    font-size: 2rem;
    opacity: 0.58;
}

.suarix-kpi-title {
    font-size: 0.88rem;
    font-weight: 700;
    opacity: 0.95;
    margin-bottom: 8px;
    padding-right: 42px;
}

.suarix-kpi-value {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 8px;
    letter-spacing: -0.4px;
}

.suarix-kpi-subtitle {
    font-size: 0.82rem;
    opacity: 0.92;
}

.suarix-card-blue { background: linear-gradient(135deg, #1f6feb 0%, #0ea5e9 100%); }
.suarix-card-indigo { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
.suarix-card-green { background: linear-gradient(135deg, #15803d 0%, #22c55e 100%); }
.suarix-card-orange { background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%); }
.suarix-card-slate { background: linear-gradient(135deg, #334155 0%, #64748b 100%); }
.suarix-card-red { background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); }
.suarix-card-teal { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); }
.suarix-card-purple { background: linear-gradient(135deg, #7e22ce 0%, #a855f7 100%); }

.suarix-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 0.9fr);
    gap: 16px;
}

.suarix-panel {
    background: #ffffff;
    border: 1px solid #d7dee8;
    border-radius: 14px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    margin-bottom: 16px;
}

.suarix-panel-header {
    padding: 13px 15px;
    border-bottom: 1px solid #e6ebf2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
}

.suarix-panel-header h2 {
    margin: 0;
    font-size: 0.98rem;
    color: #1e293b;
    font-weight: 800;
}

.suarix-panel-header a {
    font-size: 0.78rem;
    font-weight: 700;
}

.suarix-panel-body {
    padding: 14px;
}

.suarix-alert-list {
    display: grid;
    gap: 10px;
}

.suarix-alert-card {
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    gap: 10px;
    color: #1f2937 !important;
    text-decoration: none !important;
    background: #ffffff;
}

.suarix-alert-card:hover {
    text-decoration: none !important;
    background: #f8fafc;
}

.suarix-alert-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}

.suarix-alert-title {
    font-weight: 800;
    font-size: 0.88rem;
    margin-bottom: 2px;
}

.suarix-alert-text {
    font-size: 0.8rem;
    color: #64748b;
}

.suarix-alert-danger .suarix-alert-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.suarix-alert-warning .suarix-alert-icon {
    background: #fef3c7;
    color: #b45309;
}

.suarix-alert-info .suarix-alert-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.suarix-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.suarix-quick-link {
    border: 1px solid #dbe2ec;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #ffffff;
    color: #1f2937 !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.86rem;
}

.suarix-quick-link:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    text-decoration: none !important;
}

.suarix-quick-link i {
    color: #2563eb;
    font-size: 1rem;
}

.suarix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.suarix-table th {
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 800;
    padding: 9px 8px;
    white-space: nowrap;
}

.suarix-table td {
    border-bottom: 1px solid #eef2f7;
    padding: 9px 8px;
    vertical-align: top;
}

.suarix-table tr:hover td {
    background: #f8fafc;
}

.suarix-table a {
    font-weight: 800;
}

.suarix-money {
    text-align: right;
    white-space: nowrap;
    font-weight: 800;
}

.suarix-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 800;
    background: #e2e8f0;
    color: #334155;
}

.suarix-empty {
    color: #64748b;
    font-size: 0.86rem;
    margin: 0;
    padding: 4px 0;
}

.suarix-actions-list {
    display: grid;
    gap: 9px;
}

.suarix-action-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    background: #ffffff;
}

.suarix-action-title {
    font-weight: 800;
    font-size: 0.82rem;
    color: #1f2937;
    margin-bottom: 3px;
}

.suarix-action-meta {
    color: #64748b;
    font-size: 0.75rem;
}

@media (max-width: 1400px) {
    .suarix-kpi-grid {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }
}

@media (max-width: 1100px) {
    .suarix-kpi-grid,
    .suarix-dashboard-layout,
    .suarix-quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .suarix-dashboard-hero {
        padding: 18px;
    }

    .suarix-dashboard-hero h1 {
        font-size: 1.45rem;
    }

    .suarix-kpi-value {
        font-size: 1.45rem;
    }
}
/* =======================================================
   SUARIX DASHBOARD V2 - PANEL INICIAL CON COLORES/GRAFICOS
   Fecha: 2026-06-03
   ======================================================= */

.suarix-dashboard-v2 {
    padding: 2px 0 24px 0;
}

.suarix-dashboard-v2 * {
    box-sizing: border-box;
}

.suarix-dashboard-v2 a:hover {
    text-decoration: none !important;
}

.suarix-v2-hero {
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 88% 18%, rgba(96, 165, 250, 0.30), rgba(96, 165, 250, 0) 30%),
        linear-gradient(135deg, #0f172a 0%, #1d4ed8 52%, #0f766e 100%);
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.suarix-v2-hero h1 {
    margin: 0 0 6px 0;
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: .2px;
}

.suarix-v2-hero p {
    margin: 0;
    color: rgba(255,255,255,.84);
    font-size: .95rem;
}

.suarix-v2-marker {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    color: rgba(255,255,255,.88);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.suarix-v2-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.suarix-v2-kpi {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    border-radius: 18px;
    padding: 18px;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.13);
    transition: transform .15s ease, box-shadow .15s ease;
}

.suarix-v2-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
}

.suarix-v2-kpi::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -32px;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
}

.suarix-v2-kpi i {
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 1.65rem;
    opacity: .86;
    z-index: 1;
}

.suarix-v2-kpi-title {
    font-size: .86rem;
    text-transform: uppercase;
    letter-spacing: .55px;
    font-weight: 900;
    opacity: .92;
    margin-bottom: 10px;
    max-width: 75%;
}

.suarix-v2-kpi-value {
    font-size: 1.72rem;
    line-height: 1.05;
    font-weight: 950;
    margin-bottom: 8px;
    word-break: break-word;
}

.suarix-v2-kpi-subtitle {
    font-size: .82rem;
    font-weight: 700;
    opacity: .88;
}

.suarix-v2-kpi.suarix-card-blue { background: linear-gradient(135deg, #2563eb, #0ea5e9); }
.suarix-v2-kpi.suarix-card-indigo { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.suarix-v2-kpi.suarix-card-green { background: linear-gradient(135deg, #059669, #22c55e); }
.suarix-v2-kpi.suarix-card-orange { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.suarix-v2-kpi.suarix-card-slate { background: linear-gradient(135deg, #334155, #64748b); }
.suarix-v2-kpi.suarix-card-red { background: linear-gradient(135deg, #dc2626, #f97316); }
.suarix-v2-kpi.suarix-card-teal { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.suarix-v2-kpi.suarix-card-purple { background: linear-gradient(135deg, #7e22ce, #db2777); }

.suarix-v2-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, .85fr);
    gap: 16px;
}

.suarix-v2-panel {
    border: 1px solid #dbe4ee;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    margin-bottom: 16px;
    overflow: hidden;
}

.suarix-v2-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf2f7;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.suarix-v2-panel-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    color: #1f2937;
}

.suarix-v2-panel-header h2 i {
    color: #2563eb;
    margin-right: 7px;
}

.suarix-v2-panel-body {
    padding: 16px;
}

.suarix-v2-chart-bars {
    display: grid;
    gap: 12px;
}

.suarix-v2-chart-row {
    display: grid;
    grid-template-columns: 155px minmax(0,1fr) 130px;
    align-items: center;
    gap: 10px;
}

.suarix-v2-chart-label {
    font-weight: 850;
    color: #334155;
    font-size: .84rem;
}

.suarix-v2-bar-track {
    height: 18px;
    background: #eef2f7;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.suarix-v2-bar-fill {
    height: 100%;
    border-radius: 999px;
    min-width: 2px;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
}

.suarix-v2-bar-fill.suarix-card-indigo { background: linear-gradient(90deg, #4f46e5, #8b5cf6); }
.suarix-v2-bar-fill.suarix-card-green { background: linear-gradient(90deg, #059669, #22c55e); }
.suarix-v2-bar-fill.suarix-card-orange { background: linear-gradient(90deg, #ea580c, #f59e0b); }
.suarix-v2-bar-fill.suarix-card-slate { background: linear-gradient(90deg, #334155, #94a3b8); }
.suarix-v2-bar-fill.danger { background: linear-gradient(90deg, #dc2626, #f97316); }
.suarix-v2-bar-fill.info { background: linear-gradient(90deg, #2563eb, #38bdf8); }
.suarix-v2-bar-fill.success { background: linear-gradient(90deg, #059669, #22c55e); }

.suarix-v2-chart-value {
    text-align: right;
    font-weight: 950;
    color: #0f172a;
    font-size: .84rem;
    white-space: nowrap;
}

.suarix-v2-health-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.suarix-v2-health {
    border-radius: 15px;
    padding: 16px;
    color: #ffffff;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.suarix-v2-health strong {
    font-size: 1.7rem;
    line-height: 1;
}

.suarix-v2-health span {
    font-weight: 850;
    margin-top: 6px;
}

.suarix-v2-health small {
    opacity: .88;
    font-weight: 700;
}

.suarix-v2-health.primary { background: linear-gradient(135deg, #2563eb, #0ea5e9); }
.suarix-v2-health.indigo { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.suarix-v2-health.warning { background: linear-gradient(135deg, #d97706, #f59e0b); }
.suarix-v2-health.success { background: linear-gradient(135deg, #059669, #22c55e); }
.suarix-v2-health.danger { background: linear-gradient(135deg, #dc2626, #f97316); }

.suarix-v2-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.suarix-v2-quick {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 14px;
    border: 1px solid #dbe4ee;
    background: #f8fafc;
    color: #1f2937 !important;
    padding: 12px;
    font-weight: 850;
}

.suarix-v2-quick i { color: #2563eb; }

.suarix-v2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.suarix-v2-table th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .45px;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 9px;
}

.suarix-v2-table td {
    border-bottom: 1px solid #edf2f7;
    padding: 9px;
    color: #334155;
}

.suarix-v2-table tr:hover td { background: #f8fafc; }
.suarix-v2-table a { font-weight: 900; }
.suarix-v2-money { text-align: right; white-space: nowrap; font-weight: 900; }

.suarix-v2-badge {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: .72rem;
    font-weight: 900;
}

.suarix-v2-alert-list,
.suarix-v2-actions {
    display: grid;
    gap: 10px;
}

.suarix-v2-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-left-width: 5px;
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    color: #1f2937 !important;
}

.suarix-v2-alert-danger { border-left-color: #dc2626; }
.suarix-v2-alert-warning { border-left-color: #f59e0b; }
.suarix-v2-alert-info { border-left-color: #2563eb; }

.suarix-v2-alert i { font-size: 1.1rem; margin-top: 1px; }
.suarix-v2-alert-danger i { color: #dc2626; }
.suarix-v2-alert-warning i { color: #d97706; }
.suarix-v2-alert-info i { color: #2563eb; }

.suarix-v2-alert-title { font-weight: 950; color: #0f172a; }
.suarix-v2-alert-text { color: #64748b; font-size: .82rem; }

.suarix-v2-action {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 11px;
    background: #ffffff;
}

.suarix-v2-action strong { color: #1f2937; }
.suarix-v2-action div { color: #64748b; font-size: .78rem; margin-top: 3px; }
.suarix-v2-empty { margin: 0; color: #64748b; font-size: .86rem; }

@media (max-width: 1450px) {
    .suarix-v2-kpi-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
    .suarix-v2-layout { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
    .suarix-v2-kpi-grid,
    .suarix-v2-health-grid,
    .suarix-v2-quick-grid { grid-template-columns: 1fr; }
    .suarix-v2-chart-row { grid-template-columns: 1fr; gap: 5px; }
    .suarix-v2-chart-value { text-align: left; }
    .suarix-v2-hero { display: block; }
    .suarix-v2-marker { display: inline-block; margin-top: 12px; }
}
/* =======================================================
   SUARIX DASHBOARD V4 - ACCESOS RAPIDOS LLAMATIVOS
   Fecha: 2026-06-03
   ======================================================= */

.suarix-v2-quick-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}

.suarix-v2-quick {
    position: relative !important;
    min-height: 82px !important;
    padding: 18px 20px !important;
    border-radius: 20px !important;
    border: 0 !important;
    color: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16) !important;
    transform: translateY(0);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.suarix-v2-quick::before {
    content: "" !important;
    position: absolute !important;
    width: 135px !important;
    height: 135px !important;
    border-radius: 999px !important;
    right: -45px !important;
    top: -45px !important;
    background: rgba(255, 255, 255, 0.18) !important;
}

.suarix-v2-quick::after {
    content: "" !important;
    position: absolute !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 999px !important;
    right: 24px !important;
    bottom: -34px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.suarix-v2-quick:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.22) !important;
    filter: brightness(1.04) !important;
    text-decoration: none !important;
}

.suarix-v2-quick i {
    position: relative !important;
    z-index: 2 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20) !important;
}

.suarix-v2-quick span,
.suarix-v2-quick strong,
.suarix-v2-quick {
    position: relative !important;
    z-index: 2 !important;
    font-size: .98rem !important;
    font-weight: 950 !important;
    letter-spacing: .15px !important;
}

.suarix-v2-quick:nth-child(1) {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%) !important;
}

.suarix-v2-quick:nth-child(2) {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%) !important;
}

.suarix-v2-quick:nth-child(3) {
    background: linear-gradient(135deg, #059669 0%, #22c55e 100%) !important;
}

.suarix-v2-quick:nth-child(4) {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%) !important;
}

.suarix-v2-quick:nth-child(5) {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%) !important;
}

.suarix-v2-quick:nth-child(6) {
    background: linear-gradient(135deg, #334155 0%, #0f172a 100%) !important;
}

@media (max-width: 1200px) {
    .suarix-v2-quick-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .suarix-v2-quick-grid {
        grid-template-columns: 1fr !important;
    }
}
/* =======================================================
   SUARIX ERP - SIDEBAR V7 ORDEN VISUAL / TAMAÑO / WRAP
   Fecha: 2026-06-03
   Objetivo:
   - Letra de menús y submenús más grande.
   - Logo y nombre SUARIX ERP más grandes.
   - Panel lateral más ancho.
   - Títulos largos en 2 líneas, sin recorte con puntos suspensivos.
   ======================================================= */

@media (min-width: 768px) {
    body:not(.sidebar-collapse) .main-sidebar,
    body:not(.sidebar-collapse) .main-sidebar::before {
        width: 310px !important;
        min-width: 310px !important;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-footer,
    body:not(.sidebar-collapse) .main-header {
        margin-left: 310px !important;
    }
}

.main-sidebar .brand-link {
    min-height: 78px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: normal !important;
    overflow: visible !important;
}

.main-sidebar .brand-link .brand-image,
.brand-link .brand-image,
.main-header .brand-image {
    max-height: 58px !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 8px !important;
    opacity: 1 !important;
}

.brand-text,
.main-sidebar .brand-link .brand-text {
    font-size: 1.70rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.6px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.main-sidebar .sidebar {
    overflow-x: hidden !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    height: auto !important;
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    display: flex !important;
    align-items: flex-start !important;
    white-space: normal !important;
    overflow: visible !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link p,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link p {
    font-size: 1.12rem !important;
    font-weight: 650 !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 230px !important;
    margin: 0 !important;
    padding-right: 8px !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link p {
    max-width: 235px !important;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link p {
    max-width: 225px !important;
    font-size: 1.08rem !important;
    font-weight: 600 !important;
}

.main-sidebar .nav-icon,
.main-sidebar .nav-sidebar .nav-link > .nav-icon {
    font-size: 1.15rem !important;
    width: 1.8rem !important;
    min-width: 1.8rem !important;
    margin-top: 2px !important;
    text-align: center !important;
}

.main-sidebar .right,
.main-sidebar .nav-sidebar .nav-link > .right,
.main-sidebar .nav-sidebar .nav-link > p > .right {
    margin-top: 3px !important;
    right: 10px !important;
}

.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar .menu-open > .nav-link {
    font-weight: 800 !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar .brand-link {
    min-height: 58px !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar .nav-sidebar .nav-link p {
    white-space: nowrap !important;
}
/* =======================================================
   SUARIX ERP - SIDEBAR V8 ANCHO REAL / TEXTO GRANDE / SIN RECORTE
   Fecha: 2026-06-03
   Trabaja sobre V7.
   Ajustes:
   - Aumenta ancho real del panel lateral.
   - Aumenta letra +2px aprox. en menús/submenús.
   - Logo y SUARIX ERP más grandes, pero SUARIX ERP queda en una sola línea.
   - Títulos largos se muestran en varias líneas y no se recortan.
   ======================================================= */

:root {
    --suarix-sidebar-width-v8: 360px;
}

/* Ancho real del sidebar y desplazamiento del contenido */
@media (min-width: 768px) {
    body:not(.sidebar-collapse) .main-sidebar,
    body:not(.sidebar-collapse) .main-sidebar::before,
    body:not(.sidebar-collapse) aside.main-sidebar {
        width: var(--suarix-sidebar-width-v8) !important;
        min-width: var(--suarix-sidebar-width-v8) !important;
        max-width: var(--suarix-sidebar-width-v8) !important;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-footer,
    body:not(.sidebar-collapse) .main-header {
        margin-left: var(--suarix-sidebar-width-v8) !important;
    }

    body:not(.sidebar-collapse) .main-sidebar .sidebar,
    body:not(.sidebar-collapse) .main-sidebar .os-host,
    body:not(.sidebar-collapse) .main-sidebar .os-viewport,
    body:not(.sidebar-collapse) .main-sidebar .os-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Encabezado/logo */
.main-sidebar .brand-link {
    min-height: 86px !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.main-sidebar .brand-link .brand-image,
.brand-link .brand-image {
    max-height: 62px !important;
    height: 62px !important;
    width: auto !important;
    max-width: 88px !important;
    margin-left: 0 !important;
    margin-right: 8px !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
}

.main-sidebar .brand-link .brand-text,
.brand-text {
    font-size: 1.85rem !important;
    font-weight: 950 !important;
    letter-spacing: .7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex: 0 1 auto !important;
}

/* Sidebar general */
.main-sidebar .sidebar {
    overflow-x: hidden !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Links principales y sublinks */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar > .nav-item > .nav-link,
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    height: auto !important;
    min-height: 48px !important;
    padding: 11px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    white-space: normal !important;
    overflow: visible !important;
    border-radius: 7px !important;
}

/* Texto de menús/submenús: más grande y sin puntos suspensivos */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar > .nav-item > .nav-link p,
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link p,
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link p {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding-right: 24px !important;
    max-width: 285px !important;
}

/* Menú principal: +2 puntos aprox. */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar > .nav-item > .nav-link p {
    font-size: 1.26rem !important;
    font-weight: 750 !important;
}

/* Submenú: también más grande, un poco más liviano */
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link p {
    font-size: 1.20rem !important;
    font-weight: 650 !important;
    max-width: 275px !important;
}

/* Iconos más grandes y alineados arriba cuando haya 2 líneas */
body:not(.sidebar-collapse) .main-sidebar .nav-icon,
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > .nav-icon {
    font-size: 1.25rem !important;
    width: 2rem !important;
    min-width: 2rem !important;
    margin-top: 3px !important;
    margin-right: 8px !important;
    text-align: center !important;
}

/* Flecha derecha de menú plegable */
body:not(.sidebar-collapse) .main-sidebar .right,
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > .right,
body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > p > .right {
    position: absolute !important;
    right: 16px !important;
    top: 15px !important;
    margin: 0 !important;
}

/* Submenús con indentación limpia */
body:not(.sidebar-collapse) .main-sidebar .nav-treeview {
    padding-left: 6px !important;
}

body:not(.sidebar-collapse) .main-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 18px !important;
}

/* Estados activos */
.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-sidebar .menu-open > .nav-link {
    font-weight: 850 !important;
}

/* Evita que AdminLTE/Jazzmin vuelva a cortar textos */
body:not(.sidebar-collapse) .nav-sidebar .nav-link > p > .right,
body:not(.sidebar-collapse) .nav-sidebar .nav-link > p > .badge {
    position: absolute !important;
}

body:not(.sidebar-collapse) .nav-sidebar .nav-link p,
body:not(.sidebar-collapse) .nav-sidebar > .nav-item .nav-icon + p {
    max-height: none !important;
}

/* Modo colapsado: conserva comportamiento normal */
.sidebar-mini.sidebar-collapse .main-sidebar,
.sidebar-mini.sidebar-collapse .main-sidebar::before {
    width: 4.6rem !important;
}

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

.sidebar-mini.sidebar-collapse .main-sidebar .brand-link {
    min-height: 58px !important;
    padding: 8px !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-image {
    max-height: 42px !important;
    height: 42px !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar .nav-sidebar .nav-link p {
    white-space: nowrap !important;
}
/* =======================================================
   SUARIX ERP - SIDEBAR V9 FORZADO REAL
   Fecha: 2026-06-03
   Trabaja sobre V8.
   Objetivo:
   - Correr la zona lateral negra más hacia la derecha.
   - Forzar ancho real del sidebar contra AdminLTE/Jazzmin.
   - Menús y submenús +2px adicionales.
   - SUARIX ERP en una sola línea.
   - Quitar ellipsis (...) en títulos largos.
   ======================================================= */

:root {
    --suarix-sidebar-width-v9: 430px;
}

/* FORZADO DE ANCHO REAL DEL PANEL */
@media (min-width: 768px) {
    html body:not(.sidebar-collapse) .wrapper .main-sidebar,
    html body:not(.sidebar-collapse) .wrapper .main-sidebar::before,
    html body:not(.sidebar-collapse) aside.main-sidebar,
    html body.layout-fixed:not(.sidebar-collapse) .main-sidebar,
    html body.sidebar-mini:not(.sidebar-collapse) .main-sidebar {
        width: var(--suarix-sidebar-width-v9) !important;
        min-width: var(--suarix-sidebar-width-v9) !important;
        max-width: var(--suarix-sidebar-width-v9) !important;
        flex: 0 0 var(--suarix-sidebar-width-v9) !important;
    }

    html body:not(.sidebar-collapse) .wrapper .content-wrapper,
    html body:not(.sidebar-collapse) .wrapper .main-footer,
    html body:not(.sidebar-collapse) .wrapper .main-header,
    html body.layout-fixed:not(.sidebar-collapse) .content-wrapper,
    html body.layout-fixed:not(.sidebar-collapse) .main-footer,
    html body.layout-fixed:not(.sidebar-collapse) .main-header,
    html body.sidebar-mini:not(.sidebar-collapse) .content-wrapper,
    html body.sidebar-mini:not(.sidebar-collapse) .main-footer,
    html body.sidebar-mini:not(.sidebar-collapse) .main-header {
        margin-left: var(--suarix-sidebar-width-v9) !important;
    }

    html body:not(.sidebar-collapse) .main-sidebar .sidebar,
    html body:not(.sidebar-collapse) .main-sidebar .os-host,
    html body:not(.sidebar-collapse) .main-sidebar .os-padding,
    html body:not(.sidebar-collapse) .main-sidebar .os-viewport,
    html body:not(.sidebar-collapse) .main-sidebar .os-content,
    html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* LOGO + SUARIX ERP UNA SOLA LINEA */
html body:not(.sidebar-collapse) .main-sidebar .brand-link {
    min-height: 92px !important;
    height: auto !important;
    padding: 14px 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

html body:not(.sidebar-collapse) .main-sidebar .brand-link .brand-image,
html body:not(.sidebar-collapse) .brand-link .brand-image {
    height: 66px !important;
    max-height: 66px !important;
    width: auto !important;
    max-width: 105px !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
}

html body:not(.sidebar-collapse) .main-sidebar .brand-link .brand-text,
html body:not(.sidebar-collapse) .brand-text {
    display: inline-block !important;
    font-size: 2.05rem !important;
    font-weight: 950 !important;
    letter-spacing: .8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* CONTENEDOR DEL SIDEBAR */
html body:not(.sidebar-collapse) .main-sidebar .sidebar {
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ITEMS: permitir 2 o más líneas */
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar > .nav-item > .nav-link,
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link,
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 12px 42px 12px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    border-radius: 8px !important;
}

/* TEXTO: más grande y sin puntos suspensivos */
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar > .nav-item > .nav-link p,
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link p,
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link p,
html body:not(.sidebar-collapse) .nav-sidebar .nav-link > p,
html body:not(.sidebar-collapse) .nav-sidebar > .nav-item .nav-icon + p {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 330px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Menús principales: +2px adicional */
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar > .nav-item > .nav-link p,
html body:not(.sidebar-collapse) .nav-sidebar > .nav-item > .nav-link > p {
    font-size: 1.40rem !important;
    font-weight: 800 !important;
}

/* Submenús: +2px adicional */
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link p,
html body:not(.sidebar-collapse) .nav-sidebar .nav-treeview > .nav-item > .nav-link > p {
    font-size: 1.32rem !important;
    font-weight: 680 !important;
    max-width: 315px !important;
}

/* ICONOS */
html body:not(.sidebar-collapse) .main-sidebar .nav-icon,
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > .nav-icon {
    font-size: 1.34rem !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    margin-top: 3px !important;
    margin-right: 10px !important;
    text-align: center !important;
}

/* FLECHA DERECHA */
html body:not(.sidebar-collapse) .main-sidebar .right,
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > .right,
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > p > .right,
html body:not(.sidebar-collapse) .nav-sidebar .nav-link p > .right {
    position: absolute !important;
    right: 18px !important;
    top: 17px !important;
    margin: 0 !important;
}

/* SUBMENUS */
html body:not(.sidebar-collapse) .main-sidebar .nav-treeview {
    padding-left: 8px !important;
}

html body:not(.sidebar-collapse) .main-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 22px !important;
}

/* ELIMINA REGLAS DE ELLIPSIS DE ADMINLTE/JAZZMIN */
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link p[style],
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link p *,
html body:not(.sidebar-collapse) .nav-sidebar .nav-link p,
html body:not(.sidebar-collapse) .nav-sidebar .nav-link > p {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ACTIVO */
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link.active,
html body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .menu-open > .nav-link {
    font-weight: 900 !important;
}

/* MODO COLAPSADO NORMAL */
html body.sidebar-collapse .main-sidebar,
html body.sidebar-collapse .main-sidebar::before {
    width: 4.6rem !important;
    max-width: 4.6rem !important;
}

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

html body.sidebar-collapse .main-sidebar .brand-link {
    min-height: 58px !important;
    padding: 8px !important;
}

html body.sidebar-collapse .main-sidebar .brand-link .brand-image {
    height: 42px !important;
    max-height: 42px !important;
}

html body.sidebar-collapse .main-sidebar .brand-link .brand-text,
html body.sidebar-collapse .main-sidebar .nav-sidebar .nav-link p {
    white-space: nowrap !important;
}
/* =======================================================
   SUARIX ERP - SIDEBAR V10 ANCHO GLOBAL DEFINITIVO
   Fecha: 2026-06-03
   Trabaja sobre V9.

   Causa detectada:
   - AdminLTE/Jazzmin conserva reglas internas de sidebar-mini/sidebar-collapse
     que seguían dejando el panel con ancho visual antiguo.
   - Por eso el logo y textos sí cambiaban, pero el área negra no crecía.

   Solución V10:
   - Fuerza ancho global del panel en estado normal, sidebar-mini y hover.
   - Fuerza desplazamiento del contenido hacia la derecha.
   - Ajusta logo para que no tape el texto.
   - Mantiene SUARIX ERP en una sola línea.
   - Elimina recorte/ellipsis con mayor prioridad.
   ======================================================= */

:root {
    --suarix-sidebar-width-v10: 440px;
}

/* ===== ANCHO REAL GLOBAL DEL SIDEBAR ===== */
@media (min-width: 768px) {
    html body .wrapper .main-sidebar,
    html body .main-sidebar,
    html body aside.main-sidebar,
    html body.sidebar-mini .main-sidebar,
    html body.sidebar-mini.sidebar-collapse .main-sidebar,
    html body.sidebar-mini.sidebar-collapse .main-sidebar:hover,
    html body.sidebar-collapse .main-sidebar,
    html body.sidebar-collapse .main-sidebar:hover,
    html body.layout-fixed .main-sidebar {
        width: var(--suarix-sidebar-width-v10) !important;
        min-width: var(--suarix-sidebar-width-v10) !important;
        max-width: var(--suarix-sidebar-width-v10) !important;
        flex: 0 0 var(--suarix-sidebar-width-v10) !important;
    }

    html body .main-sidebar::before,
    html body.sidebar-mini .main-sidebar::before,
    html body.sidebar-collapse .main-sidebar::before,
    html body.layout-fixed .main-sidebar::before {
        width: var(--suarix-sidebar-width-v10) !important;
        min-width: var(--suarix-sidebar-width-v10) !important;
        max-width: var(--suarix-sidebar-width-v10) !important;
    }

    html body .content-wrapper,
    html body .main-footer,
    html body .main-header,
    html body.sidebar-mini .content-wrapper,
    html body.sidebar-mini .main-footer,
    html body.sidebar-mini .main-header,
    html body.sidebar-collapse .content-wrapper,
    html body.sidebar-collapse .main-footer,
    html body.sidebar-collapse .main-header,
    html body.layout-fixed .content-wrapper,
    html body.layout-fixed .main-footer,
    html body.layout-fixed .main-header {
        margin-left: var(--suarix-sidebar-width-v10) !important;
    }

    html body .main-sidebar .sidebar,
    html body .main-sidebar .os-host,
    html body .main-sidebar .os-padding,
    html body .main-sidebar .os-viewport,
    html body .main-sidebar .os-content,
    html body .main-sidebar .nav-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===== MARCA / LOGO ===== */
html body .main-sidebar .brand-link,
html body.sidebar-mini .main-sidebar .brand-link,
html body.sidebar-collapse .main-sidebar .brand-link {
    width: 100% !important;
    min-height: 96px !important;
    height: auto !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

html body .main-sidebar .brand-link .brand-image,
html body .brand-link .brand-image,
html body.sidebar-mini .main-sidebar .brand-link .brand-image,
html body.sidebar-collapse .main-sidebar .brand-link .brand-image {
    height: 66px !important;
    max-height: 66px !important;
    width: auto !important;
    max-width: 110px !important;
    margin-left: 0 !important;
    margin-right: 8px !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
}

html body .main-sidebar .brand-link .brand-text,
html body .brand-text,
html body.sidebar-mini .main-sidebar .brand-link .brand-text,
html body.sidebar-collapse .main-sidebar .brand-link .brand-text {
    display: inline-block !important;
    font-size: 1.95rem !important;
    font-weight: 950 !important;
    letter-spacing: .7px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    flex: 0 1 auto !important;
}

/* ===== AREA DE MENU ===== */
html body .main-sidebar .sidebar {
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ===== LINKS ===== */
html body .main-sidebar .nav-sidebar > .nav-item > .nav-link,
html body .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link,
html body .main-sidebar .nav-sidebar .nav-link {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    padding: 12px 44px 12px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    border-radius: 8px !important;
}

/* ===== TEXTO SIN RECORTE ===== */
html body .main-sidebar .nav-sidebar > .nav-item > .nav-link p,
html body .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link p,
html body .main-sidebar .nav-sidebar .nav-link p,
html body .nav-sidebar .nav-link > p,
html body .nav-sidebar > .nav-item .nav-icon + p {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 305px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Menú principal */
html body .main-sidebar .nav-sidebar > .nav-item > .nav-link p,
html body .nav-sidebar > .nav-item > .nav-link > p {
    font-size: 1.32rem !important;
    font-weight: 800 !important;
}

/* Submenú */
html body .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link p,
html body .nav-sidebar .nav-treeview > .nav-item > .nav-link > p {
    font-size: 1.24rem !important;
    font-weight: 680 !important;
    max-width: 295px !important;
}

/* Iconos */
html body .main-sidebar .nav-icon,
html body .main-sidebar .nav-sidebar .nav-link > .nav-icon {
    font-size: 1.28rem !important;
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    margin-top: 3px !important;
    margin-right: 10px !important;
    text-align: center !important;
}

/* Flecha derecha */
html body .main-sidebar .right,
html body .main-sidebar .nav-sidebar .nav-link > .right,
html body .main-sidebar .nav-sidebar .nav-link > p > .right,
html body .nav-sidebar .nav-link p > .right {
    position: absolute !important;
    right: 18px !important;
    top: 17px !important;
    margin: 0 !important;
}

/* Subniveles */
html body .main-sidebar .nav-treeview {
    padding-left: 8px !important;
}

html body .main-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 22px !important;
}

/* Mata cualquier ellipsis heredado */
html body .main-sidebar .nav-sidebar .nav-link,
html body .main-sidebar .nav-sidebar .nav-link *,
html body .nav-sidebar .nav-link p,
html body .nav-sidebar .nav-link > p {
    text-overflow: clip !important;
}

/* Evita ocultamiento de texto en sidebar-collapse/sidebar-mini */
html body.sidebar-collapse .main-sidebar .brand-link .brand-text,
html body.sidebar-collapse .main-sidebar .nav-sidebar .nav-link p,
html body.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-text,
html body.sidebar-mini.sidebar-collapse .main-sidebar .nav-sidebar .nav-link p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 0 !important;
}

/* =======================================================
   SUARIX V11 - Panel izquierdo y logo (DOM real de AdminLTE4)
   -------------------------------------------------------
   Motivo:
   - Todo el bloque V8-V10 de arriba apunta a .main-sidebar,
     .nav-sidebar, etc. Esas clases ya NO existen en el DOM actual
     (Jazzmin/AdminLTE ahora usa .app-sidebar, .sidebar-brand,
     .sidebar-menu) por lo que ningun ancho/tamano se aplicaba
     realmente: el panel se quedaba en el ancho por defecto (250px)
     y "SUARIX ERP" se veia cortado como "SUARIX ER" porque
     .sidebar-brand tiene overflow:hidden a ese ancho.
   - El logo se veia incompleto porque Jazzmin le agrega la clase
     "img-circle" (recorte circular) a un logo rectangular; se
     quita ese recorte para mostrarlo completo y un poco mas grande.
   ======================================================= */
:root {
    --suarix-sidebar-width-v11: 300px;
}

@media (min-width: 768px) {
    html body .app-sidebar {
        width: var(--suarix-sidebar-width-v11) !important;
        min-width: var(--suarix-sidebar-width-v11) !important;
        max-width: var(--suarix-sidebar-width-v11) !important;
        flex: 0 0 var(--suarix-sidebar-width-v11) !important;
    }
}

html body .sidebar-brand {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    min-height: 92px !important;
    height: auto !important;
}

html body .sidebar-brand .brand-link {
    width: 100% !important;
    min-height: 92px !important;
    height: auto !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

html body .sidebar-brand .brand-image {
    border-radius: 0 !important;
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
    max-width: 90px !important;
    opacity: 1 !important;
    box-shadow: none !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}

html body .sidebar-brand .brand-text {
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    letter-spacing: .3px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    max-width: none !important;
}

/* =======================================================
   SUARIX V12 - Iconos de color por seccion + resaltado
   activo/hover en el menu lateral.
   -------------------------------------------------------
   Los colores por seccion usan nth-child sobre el orden REAL
   de los <li> hijos directos de #jazzy-navigation. Ese orden
   hoy (2026-09-10, 17 secciones de primer nivel):
     1=Panel de control   2=Reportes           3=Cartera
     4=Configuración      5=Contabilidad       6=Cuentas por pagar
     7=Documentos elec.   8=Hotel              9=Inventarios
    10=Manuales          11=POS               12=Salud Clínica
    13=Seguridad         14=Terceros          15=Transporte
    16=Ventas            17=Core
   El selector "#jazzy-navigation > li:nth-child(N) .nav-treeview
   .nav-icon" tambien pinta los iconos de los SUBmenus (incluido
   el submenu anidado "Stock o Existencias" dentro de Inventarios).
   SUARIX (autorizado 2026-09-10), pto 8: se agregan los indices
   1 y 11..17 -- antes solo 2..10 tenian color, el resto salia gris.
   Si el orden de "order_with_respect_to" (settings.py) cambia, hay
   que actualizar los indices aqui.
   ======================================================= */
#jazzy-navigation > li:nth-child(1) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(1) .nav-treeview .nav-icon {
    color: #38bdf8 !important;
}

#jazzy-navigation > li:nth-child(2) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(2) .nav-treeview .nav-icon {
    color: #f59e0b !important;
}

#jazzy-navigation > li:nth-child(3) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(3) .nav-treeview .nav-icon {
    color: #a855f7 !important;
}

#jazzy-navigation > li:nth-child(4) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(4) .nav-treeview .nav-icon {
    color: #94a3b8 !important;
}

#jazzy-navigation > li:nth-child(5) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(5) .nav-treeview .nav-icon {
    color: #6366f1 !important;
}

#jazzy-navigation > li:nth-child(6) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(6) .nav-treeview .nav-icon {
    color: #ef4444 !important;
}

#jazzy-navigation > li:nth-child(7) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(7) .nav-treeview .nav-icon {
    color: #10b981 !important;
}

#jazzy-navigation > li:nth-child(8) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(8) .nav-treeview .nav-icon {
    color: #06b6d4 !important;
}

#jazzy-navigation > li:nth-child(9) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(9) .nav-treeview .nav-icon {
    color: #ec4899 !important;
}

#jazzy-navigation > li:nth-child(10) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(10) .nav-treeview .nav-icon {
    color: #3b82f6 !important;
}

/* SUARIX (autorizado 2026-09-10), pto 8: indices 11..17 -- antes salian
   gris (POS, Salud Clínica, Seguridad, Terceros, Transporte, Ventas, Core). */
#jazzy-navigation > li:nth-child(11) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(11) .nav-treeview .nav-icon {
    color: #14b8a6 !important;
}

#jazzy-navigation > li:nth-child(12) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(12) .nav-treeview .nav-icon {
    color: #f43f5e !important;
}

#jazzy-navigation > li:nth-child(13) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(13) .nav-treeview .nav-icon {
    color: #84cc16 !important;
}

#jazzy-navigation > li:nth-child(14) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(14) .nav-treeview .nav-icon {
    color: #eab308 !important;
}

#jazzy-navigation > li:nth-child(15) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(15) .nav-treeview .nav-icon {
    color: #f97316 !important;
}

#jazzy-navigation > li:nth-child(16) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(16) .nav-treeview .nav-icon {
    color: #0ea5e9 !important;
}

#jazzy-navigation > li:nth-child(17) > a.nav-link > i.nav-icon,
#jazzy-navigation > li:nth-child(17) .nav-treeview .nav-icon {
    color: #8b5cf6 !important;
}

/* Resaltado activo/hover con barra de acento a la izquierda */
#jazzy-navigation .nav-link {
    border-radius: 6px !important;
    border-left: 3px solid transparent !important;
    transition: background-color .15s ease, border-left-color .15s ease !important;
}

#jazzy-navigation .nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-left-color: rgba(255, 255, 255, 0.55) !important;
}

#jazzy-navigation .nav-link.active,
#jazzy-navigation li.menu-open > .nav-link {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.05)) !important;
    border-left-color: #3b82f6 !important;
}

/* =======================================================
   SUARIX V13 - Tarjeta de usuario en el panel lateral.
   -------------------------------------------------------
   El "user-panel" de Jazzmin ya trae icono + nombre, pero se
   veia como texto plano. Se convierte en una tarjeta con
   avatar circular en degradado y fondo sutil.
   ======================================================= */
html body .user-panel {
    padding: 14px 16px !important;
    margin: 6px 10px 12px 10px !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.20), rgba(99, 102, 241, 0.06)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    align-items: center !important;
}

html body .user-panel .image {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

html body .user-panel .image i.user-profile {
    color: #ffffff !important;
    font-size: 1.4rem !important;
}

html body .user-panel .info a.d-block {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-transform: capitalize !important;
}

/* =======================================================
   SUARIX V14 - Contraste del navbar superior.
   -------------------------------------------------------
   Motivo: el navbar usa la clase "navbar-dark" (texto blanco
   semi-transparente) pero su fondo real es blanco (bg-body),
   dejando el icono de usuario, "Inicio" y el boton hamburguesa
   practicamente invisibles (blanco sobre blanco).
   ======================================================= */
html body .app-header.navbar,
html body .app-header .nav-link,
html body .app-header .nav-link i {
    color: #1f2937 !important;
}

html body .app-header .nav-link:hover,
html body .app-header .nav-link:hover i {
    color: #3b82f6 !important;
}

/* Icono de usuario como boton circular de acento para que resalte */
html body .app-header .dropdown > a.nav-link.btn {
    background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

html body .app-header .dropdown > a.nav-link.btn i {
    color: #ffffff !important;
}

html body .app-header .dropdown > a.nav-link.btn:hover {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
}

/* =======================================================
   SUARIX V15 - Menus y submenus del panel lateral en mayuscula.
   ======================================================= */
#jazzy-navigation .nav-link p {
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
}

/* =======================================================
   SUARIX V15-bis (autorizado 2026-09-10), pto 6: titulos de
   menu/submenu que NO se cortan.
   -------------------------------------------------------
   AdminLTE4 pone el <p> del .nav-link en "white-space:nowrap;
   overflow:hidden; text-overflow:ellipsis", asi los titulos
   largos ("Documentos de inventario y compras", "Saldos
   iniciales de inventario", "Documentos electronicos DIAN")
   salian cortados con "...". Ahora envuelven a 2+ lineas, con
   el icono alineado arriba y la flecha del treeview pegada a
   la derecha.
   ======================================================= */
#jazzy-navigation .nav-link {
    align-items: flex-start !important;
    height: auto !important;
    min-height: 2.1rem !important;
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
}

#jazzy-navigation .nav-link > .nav-icon {
    margin-top: .15rem !important;
    flex-shrink: 0 !important;
}

#jazzy-navigation .nav-link > p {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 2px 4px !important;
}

/* La flecha ">" del treeview: siempre al extremo derecho, sin
   empujar el texto ni provocar un corte raro. */
#jazzy-navigation .nav-link > p > .nav-arrow {
    margin-left: auto !important;
    align-self: center !important;
}

/* =======================================================
   SUARIX (autorizado 2026-07-28): combos Select2 mas anchos/altos
   por defecto -- cambio GLOBAL, aplica a TODOS los desplegables del
   sistema via las clases estandar que Select2 siempre genera
   (.select2-dropdown / .select2-results__options), sin importar en
   que pantalla ni como se inicializo cada combo. Jazzmin solo llama
   select2({ width: '100%' }) (ver change_form.js) -- sin ningun
   ajuste de tamano del desplegable, de ahi que las opciones largas
   se cortaran (ej. "CAJA GENER...") y solo se vieran ~8 opciones sin
   hacer scroll. Solo amplia (opcion "a" del diagnostico); NO es
   redimensionable con arrastre (Select2 no lo soporta nativamente).
   ======================================================= */
.select2-results__options {
    max-height: 380px !important;
}

.select2-dropdown {
    min-width: 320px !important;
}

.select2-results__option {
    white-space: normal !important;
    word-break: break-word !important;
}

/* Pantallas angostas (celular/tablet chica): no forzar un desplegable
   mas ancho que el propio viewport. */
@media (max-width: 576px) {
    .select2-dropdown {
        min-width: 0 !important;
        max-width: 95vw !important;
    }
}

/* =======================================================
   SUARIX ERP - ICONOS DEL MENU LATERAL MAS GRANDES
   CINCO AJUSTES, PUNTO 3 (autorizado 2026-07-30)

   Auditoria previa (confirmada con computed style real en
   produccion, no supuesta): Jazzmin 3.0.4 / AdminLTE 4 renombro el
   contenedor del sidebar de ".main-sidebar"/".nav-sidebar" -- las
   clases que usan los bloques "SIDEBAR V7/V8/V9" mas arriba en este
   mismo archivo -- a ".app-sidebar"/".sidebar-menu". Esos bloques V7/
   V8/V9 quedaron huerfanos (no aplican hoy; se conservan intactos,
   sin tocarlos, por no ser parte de este ticket). El icono real
   (<i class="nav-icon fas fa-...">) sigue usando la clase "nav-icon"
   sin ningun tamaño propio hoy: hereda el font-size de .nav-link
   (14px) dentro de una caja fija de 24px. FontAwesome no fija un
   tamaño propio -- es 100% sobreescribible por CSS normal.

   Se agranda en unidades relativas (em, escala con el resto del
   texto) y se ensancha un poco la caja para que el glifo no quede
   pegado al texto. Mismo breakpoint movil ya usado arriba para
   Select2 (576px), reduciendo un poco para no forzar overflow en
   pantallas angostas.
   ======================================================= */
.app-sidebar .nav-icon {
    font-size: 1.3em !important;
    width: 1.9rem !important;
    min-width: 1.9rem !important;
    max-width: 1.9rem !important;
    text-align: center !important;
}

@media (max-width: 576px) {
    .app-sidebar .nav-icon {
        font-size: 1.15em !important;
        width: 1.6rem !important;
        min-width: 1.6rem !important;
        max-width: 1.6rem !important;
    }
}

/* =======================================================
   SUARIX ERP - FIX WIDGET "AUTOCOMPLETE_FIELDS" (SELECT2)
   Fecha: 2026-08-04
   Causa real (NC/ND, campo "Documento origen"): admin/css/autocomplete.css
   (el CSS nativo de Django para ModelAdmin.autocomplete_fields) pinta
   .select2-container--admin-autocomplete con
   background-color: var(--body-bg) y border: 1px solid var(--border-color)
   -- variables que SOLO se definen en admin/css/base.css / dark_mode.css,
   ninguno de los dos cargado en este tema (Jazzmin reemplaza el CSS base
   de Django por Bootstrap/AdminLTE). Con las variables sin definir, el
   fondo y el borde quedan invalidos (transparentes / "none"), y el
   widget se vuelve invisible aunque SI esta presente y SI es clickeable
   en su posicion exacta -- confirmado con Playwright real (computed
   style: border: 0px none, background: rgba(0,0,0,0)). Se fija con
   colores concretos (mismo tono ya usado en el resto del tema), sin
   tocar ninguna logica JS/Python -- el AJAX de busqueda ya funcionaba
   bien, el problema era 100% visual. Afecta a CUALQUIER campo con
   autocomplete_fields en todo el admin, no solo "documento_origen".
   ======================================================= */

.select2-container--admin-autocomplete .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
    color: #495057 !important;
    line-height: 30px !important;
}

.select2-container--admin-autocomplete .select2-selection--single .select2-selection__placeholder {
    color: #6c757d !important;
}

.select2-container--admin-autocomplete.select2-container--focus .select2-selection,
.select2-container--admin-autocomplete.select2-container--open .select2-selection {
    border-color: #86b7fe !important;
}

/* =======================================================
   SUARIX ERP - NOMBRE DE USUARIO SIEMPRE VISIBLE EN SIDEBAR
   Fecha: 2026-08-04
   El sidebar es "sidebar-dark-primary" (fondo oscuro fijo,
   config/settings.py JAZZMIN_UI_TWEAKS["sidebar"]), pero el color del
   nombre de usuario (.user-panel .info a) no estaba fijado con un
   valor propio -- probado con una cuenta real en modo claro y oscuro
   (data-bs-theme) y en ambos casos el color computado ya salia blanco
   (heredado de AdminLTE), sin poder reproducir el texto negro
   reportado. Se deja de todas formas un valor explicito e
   incondicional (nunca depende de variables de tema ni de que
   AdminLTE lo resuelva por herencia) para que el nombre de usuario en
   el sidebar NUNCA pueda quedar invisible sin importar el tema o una
   futura actualizacion de Jazzmin/AdminLTE.
   ======================================================= */
.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info a:link,
.main-sidebar .user-panel .info a:visited,
.main-sidebar .user-panel .info a:hover,
.main-sidebar .user-panel .info a:focus {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* =======================================================
   SUARIX ERP - FIX-3: AMPLIAR COLUMNAS DE PERMISOS EN ADMIN DE USUARIO
   Fecha: 2026-09-04 (PROMPT "CORRECCIONES FILTROS + PERMISOS")
   Admin → Usuarios → [usuario] → Grupos / Permisos de usuario usa el
   widget nativo de Django FilteredSelectMultiple (CustomUserAdmin
   hereda de UserAdmin sin reemplazarlo) -- genera 2 <select> por
   campo con id="id_<campo>_from"/"id_<campo>_to" (nombres reales de
   Django, no un select2 propio de este proyecto) dentro de
   .selector-available/.selector-chosen. Las descripciones largas de
   permiso (ej. "core | historia clinica | Can view Historia Clinica")
   se cortaban por el ancho fijo del admin nativo.

   BUG REAL encontrado y corregido durante la propia verificacion: la
   primera version forzaba min-width:320px en CADA una de las 2 cajas
   (.selector-available/.selector-chosen) sin ensanchar el contenedor
   real -- el campo vive en una columna Bootstrap "col-sm-9" (75% de
   la fila), que en este layout (con sidebar) mide ~500px, menor que
   los 640px que las 2 cajas exigian juntas. Resultado: el widget se
   desbordaba y la caja "Elegidos" quedaba tapada por los botones
   Elegir/Quitar del centro (confirmado leyendo el computed style real
   con Playwright: .selector quedaba en display:flex sin flex-wrap,
   min-width de cada hija > espacio disponible). Se corrige ensanchando
   PRIMERO la columna del campo (label arriba, campo al 100% en su
   propia fila) y dejando que las 2 cajas se repartan ese espacio ya
   ampliado de forma proporcional (%), sin un min-width fijo que pueda
   volver a desbordar.
   ======================================================= */
.field-user_permissions .col-sm-9,
.field-groups .col-sm-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

#id_user_permissions_from,
#id_user_permissions_to,
#id_groups_from,
#id_groups_to {
    width: 100% !important;
    min-height: 280px !important;
}

.field-user_permissions .selector,
.field-groups .selector {
    width: 100% !important;
}

.field-user_permissions .selector-available,
.field-user_permissions .selector-chosen,
.field-groups .selector-available,
.field-groups .selector-chosen {
    width: 46% !important;
}

.selector-available select,
.selector-chosen select {
    width: 100% !important;
}

.selector-available select option,
.selector-chosen select option {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 3px 6px !important;
}

.selector .selector-filter input {
    width: 100% !important;
    box-sizing: border-box !important;
}

.field-user_permissions .selector,
.field-groups .selector {
    max-width: 100% !important;
}

/* =======================================================
   SUARIX UI-RD-1 (autorizado 2026-09-25): sidebar colapsable con
   hover-expand estilo Siigo.

   AUDITORÍA (antes de escribir esto): este Jazzmin (3.0.4) usa
   AdminLTE 4 / Bootstrap 5, NO AdminLTE 3 -- el sidebar es
   <aside class="app-sidebar" id="jazzy-sidebar">, y el modo
   "compacto" (solo íconos) ya existe de fábrica como la clase
   body.sidebar-collapse, controlada por el botón hamburguesa
   (persistida en la cookie "jazzy_menu", ver sidebar_status() en
   jazzmin/templatetags/jazzmin.py) -- NO hay hover-expand nativo en
   este bundle (confirmado: sin "hover" en adminlte.min.js).

   DECISIÓN DE ALCANCE (documentada, no oculta): esto NO cambia el
   estado por defecto del sidebar de nadie (sigue expandido salvo que
   el usuario ya haya elegido el modo compacto con el botón). Lo que
   se agrega es el comportamiento de HOVER cuando el sidebar YA está
   en modo compacto -- al pasar el mouse, se expande temporalmente
   SIN empujar el contenido (position:fixed, flota encima con sombra,
   igual que el flyout de Siigo), y vuelve a compacto al sacar el
   mouse. Solo en pantallas de escritorio (min-width:992px) -- en
   mobile el sidebar ya es un drawer normal de AdminLTE4, sin tocar.
   ======================================================= */
@media (min-width: 992px) {
    /* AUDITORÍA real (verificado con Playwright inspeccionando
       getComputedStyle, no supuesto): el modo compacto de ESTE
       AdminLTE4 NO reduce "width" -- el <aside class="app-sidebar">
       se queda en width:300px SIEMPRE, y lo que cambia es
       margin-left:-250px (deja solo ~50px visibles) + position:
       sticky. Un :hover que solo tocara "width" no hacía nada
       visible (confirmado: screenshot idéntico antes/después) --
       corregido para tocar margin-left, y forzar position:fixed
       SOLO durante el hover para sacarlo del flujo normal y que no
       empuje el contenido (si se dejara "sticky", volver
       margin-left a 0 sí habría empujado el contenido a la derecha
       en cada hover -- justo el "salto" que Siigo no tiene). */
    body.sidebar-collapse .app-sidebar {
        transition: margin-left 0.2s ease, box-shadow 0.2s ease;
    }
    body.sidebar-collapse .app-sidebar:hover {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        margin-left: 0 !important;
        z-index: 1045;
        box-shadow: 4px 0 18px rgba(0,0,0,0.35);
    }
    /* Texto/labels que el modo compacto recorta por falta de ancho --
       al recuperar el ancho visible en hover, vuelven a caber solos
       en la mayoría de los casos (overflow:hidden, no display:none)
       -- se refuerza explícito por si acaso para que no dependa de
       esa suposición. */
    body.sidebar-collapse .app-sidebar:hover .nav-link p,
    body.sidebar-collapse .app-sidebar:hover .brand-text,
    body.sidebar-collapse .app-sidebar:hover .user-panel .info {
        display: inline-block !important;
        opacity: 1 !important;
        width: auto !important;
        visibility: visible !important;
    }
}

/* =======================================================
   SUARIX UI-RD-2 (autorizado 2026-09-25, PILOTO -- solo Cliente):
   combos cortos y campos numéricos con ancho proporcional, en vez de
   estirarse al 100% de la columna (patrón Siigo). Escopado con
   "body.model-cliente" (clase real que Django agrega al <body> en
   change_form.html: "app-{app_label} model-{model_name}") -- así NO
   afecta a ningún otro modelo, cumpliendo la regla de "piloto solo
   Clientes" de este ticket.
   ======================================================= */
body.model-cliente .field-tipo_identificacion .select2-container,
body.model-cliente .field-regimen_fiscal .select2-container,
body.model-cliente .field-tipo_identificacion select,
body.model-cliente .field-regimen_fiscal select {
    max-width: 320px !important;
    width: auto !important;
    min-width: 200px !important;
}

body.model-cliente .field-identificacion input,
body.model-cliente .field-dv input,
body.model-cliente .field-codigo_postal input,
body.model-cliente .field-telefono input {
    max-width: 220px !important;
}

/* Campos de texto largo (nombre/razón social, dirección, email) --
   sin esta regla quedan tan angostos como los combos cortos de
   arriba (confirmado en vivo: 182px, ilegible para un nombre
   completo) -- Jazzmin/Django NO los estira solo porque el campo de
   al lado sea corto. */
body.model-cliente .field-nombre input,
body.model-cliente .field-direccion input,
body.model-cliente .field-email input {
    width: 100% !important;
    max-width: 520px !important;
}

/* =======================================================
   SUARIX UI-CLI-1 (autorizado 2026-09-25, PILOTO -- solo Cliente):
   labels pegados a su campo, sin espacio vacío excesivo.

   AUDITORÍA EN VIVO (antes de escribir esto -- el DOM real NO es un
   flex/grid custom como suponía el ticket, es Bootstrap estándar de
   Django admin):
     <div class="form-group field-X">
       <div class="row">
         <label class="col-sm-3 text-start">...</label>
         <div class="col-sm-9 field-X">...</div>
       </div>
     </div>
   El label YA estaba alineado a la izquierda (.text-start), no
   centrado -- el "espacio vacío" real era otra cosa: la columna
   ".col-sm-9" se queda fija en 75% del ancho de fila SIEMPRE, sin
   importar que UI-RD-2 (arriba) ya haya angostado el <select>/
   <input> de adentro -- dejando aire vacío a la derecha del campo
   corto, DENTRO de esa misma columna de 75%. La nota "label" del
   ticket original apuntaba al síntoma equivocado; el fix real es
   angostar la COLUMNA para los campos cortos, no el label.
   ======================================================= */
body.model-cliente .field-tipo_identificacion.form-group .row,
body.model-cliente .field-regimen_fiscal.form-group .row,
body.model-cliente .field-identificacion.form-group .row,
body.model-cliente .field-dv.form-group .row,
body.model-cliente .field-codigo_postal.form-group .row,
body.model-cliente .field-telefono.form-group .row {
    align-items: center !important;
}

/* La MISMA clase "field-X" vive en 2 elementos distintos del DOM real
   (el .form-group exterior Y el .col-sm-9 interior) -- se combina con
   ".col-sm-9" para apuntar solo al segundo, sin tocar el contenedor
   exterior de toda la fila. */
body.model-cliente .field-tipo_identificacion.col-sm-9,
body.model-cliente .field-regimen_fiscal.col-sm-9,
body.model-cliente .field-identificacion.col-sm-9,
body.model-cliente .field-dv.col-sm-9,
body.model-cliente .field-codigo_postal.col-sm-9,
body.model-cliente .field-telefono.col-sm-9 {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
}


/* =======================================================
   SUARIX FIX-SDB-1 (autorizado 2026-09-25): sidebar colapsable
   hover-expand estilo Siigo -- SOLO escritorio (>=992px; abajo de eso
   sigue el drawer mobile de siempre, intacto).

   AUDITORIA REAL (2026-09-25): el bloque anterior de este archivo
   (arriba, "--suarix-sidebar-width-v8") apunta a ".main-sidebar" --
   esa clase NO EXISTE en la version de Jazzmin/AdminLTE realmente
   instalada (3.0.4/AdminLTE4). El DOM real usa <aside class="app-
   sidebar">, el layout es CSS GRID (.app-wrapper{display:grid;
   grid-template-columns:auto 1fr}), body usa "sidebar-collapse" (no
   "sidebar-mini") al colapsar manualmente con el boton hamburguesa, y
   el contenido vive en .app-content/.app-main/.app-footer (no
   .content-wrapper/.main-footer). Confirmado con Playwright real
   contra el sitio en vivo -- el bloque ".main-sidebar" de arriba
   nunca aplico nada (dead code), el sidebar ha corrido siempre con el
   ancho por defecto de Jazzmin (300px). Se deja ese bloque tal cual
   (nunca se borra) y se implementa el hover-expand con los selectores
   reales.

   Estrategia: el sidebar se saca del flujo del grid con position:
   fixed SIEMPRE (reposo y hover) -- así, al crecer en hover, nunca
   empuja el contenido (que sigue viendo su columna angosta reservada
   via grid-template-columns fijo, no "auto"). El sidebar FLOTA
   encima con un z-index mayor, exactamente como Siigo.
   ======================================================= */
:root {
    --suarix-sidebar-width-narrow: 64px;
    --suarix-sidebar-width-hover: 300px;
}

@media (min-width: 992px) {
    /* Columna reservada para el sidebar SIEMPRE angosta -- fija (no
       "auto"), para que crecer el sidebar en hover no reacomode esta
       columna del grid ni empuje el contenido. */
    body:not(.sidebar-collapse) .app-wrapper {
        grid-template-columns: var(--suarix-sidebar-width-narrow) 1fr !important;
    }

    body:not(.sidebar-collapse) aside.app-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: var(--suarix-sidebar-width-narrow) !important;
        min-width: var(--suarix-sidebar-width-narrow) !important;
        max-width: var(--suarix-sidebar-width-narrow) !important;
        overflow: visible !important;
        z-index: 1045 !important;
        transition: max-width .18s ease, width .18s ease !important;
    }

    /* Hover: crece a su ancho normal, flotando por encima (z-index
       mayor) -- el contenido no se mueve porque su columna del grid
       (arriba) sigue fija en el ancho angosto. */
    body:not(.sidebar-collapse) aside.app-sidebar:hover {
        width: var(--suarix-sidebar-width-hover) !important;
        min-width: var(--suarix-sidebar-width-hover) !important;
        max-width: var(--suarix-sidebar-width-hover) !important;
        z-index: 1060 !important;
        box-shadow: 4px 0 18px rgba(0,0,0,.25) !important;
    }

    /* Icono siempre visible y centrado en reposo. */
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .nav-icon {
        margin-right: 0 !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 1.15rem !important;
    }

    /* SUARIX FIX-SDB-2 (autorizado 2026-09-25): BUG REAL encontrado --
       centrar solo el icono (arriba) no bastaba: el <a class="nav-link">
       que lo envuelve conservaba el padding/justify-content de su
       diseño EXPANDIDO (icono+texto en fila, alineados a la izquierda),
       así que el icono (y el fondo resaltado de ".active") quedaban
       pegados a la izquierda de la franja angosta en vez de centrados
       -- confirmado con una captura real de la franja colapsada. Se
       centra el <a> completo. */
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .sidebar-menu .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* "Chip" redondeado alrededor del icono activo/hover en vez de una
       barra a lo ancho de toda la franja -- estetica de icon-rail
       (referencia del propio ticket), mismo criterio en toda la
       franja angosta. Solo aplica a los items de PRIMER nivel -- los
       de un submenu quedan ocultos igual (ver .nav-treeview abajo). */
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .sidebar-menu > .nav-item > .nav-link {
        margin: 0 10px !important;
        width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        flex: 0 0 44px !important;
    }
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .sidebar-menu > .nav-item {
        margin: 3px 0 !important;
    }

    /* Texto de cada item + nombre de marca: oculto en reposo, visible
       en hover -- opacity+width (nunca display:none, para poder
       animar). */
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .sidebar-menu .nav-link p,
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .brand-text {
        opacity: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    body:not(.sidebar-collapse) aside.app-sidebar:hover .sidebar-menu .nav-link p,
    body:not(.sidebar-collapse) aside.app-sidebar:hover .brand-text {
        opacity: 1 !important;
        width: auto !important;
        max-width: 230px !important;
    }

    /* Logo: mas chico y centrado en reposo -- el ancho angosto no
       alcanza para el logo completo + el nombre. */
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .sidebar-brand,
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .brand-link {
        justify-content: center !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    /* SUARIX FIX-SDB-2 (autorizado 2026-09-25): BUG REAL encontrado --
       Logo.png es una imagen RECTANGULAR (1746x1295, el emblema + el
       texto "WORLD SYSTEM" en un solo archivo, no dos por separado).
       Forzar "height:40px" + "max-width:40px" a la vez (sin "width:
       auto") DISTORSIONA la imagen -- la aplasta a un cuadrado, y el
       texto incrustado se ve estirado/desbordado por debajo del
       emblema (confirmado con una captura real). Corregido: solo se
       limita el TAMAÑO MÁXIMO en los 2 ejes (max-width/max-height),
       dejando que el navegador escale proporcional -- la imagen
       completa se ve chica pero SIN deformarse. */
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .brand-image {
        margin-right: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: 48px !important;
        max-height: 30px !important;
        object-fit: contain !important;
    }

    /* SUARIX FIX-SDB-2: panel de usuario (avatar + nombre, debajo del
       logo) -- BUG REAL encontrado: en reposo el avatar circular
       quedaba cortado contra el borde derecho de la franja angosta
       porque ".info" (el nombre, texto) seguia ocupando su ancho
       normal al lado del avatar, empujandolo. Se oculta el nombre (ya
       se agrega el nombre del usuario en la esquina superior derecha,
       ver FIX-UI-USR) y se centra el avatar solo. */
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .user-panel {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .user-panel .info {
        display: none !important;
    }
    body:not(.sidebar-collapse) aside.app-sidebar:hover .user-panel .info {
        display: block !important;
    }

    /* Submenús (Nómina, Reportes, etc.): en reposo, con el sidebar
       angosto, un submenu abierto no tiene donde mostrar el texto --
       se oculta. Al hacer hover se restaura la visibilidad normal de
       Jazzmin/AdminLTE4 (su propio JS sigue siendo el unico que
       decide abrir/cerrar cada uno via la clase "menu-open" en el
       <li> -- este bloque solo decide si, estando abierto, ALCANZA A
       VERSE con el sidebar angosto). */
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) .nav-treeview {
        display: none !important;
    }
    body:not(.sidebar-collapse) aside.app-sidebar:hover .menu-open > .nav-treeview {
        display: block !important;
    }

    /* Buscador del menu ("Buscar en menú..."): sin espacio en modo
       angosto, se oculta en reposo (vuelve a aparecer en hover). */
    body:not(.sidebar-collapse) aside.app-sidebar:not(:hover) #suarix-nav-search-wrapper {
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Sin scrollbar horizontal en modo angosto (el texto ya esta con
       width:0). */
    body:not(.sidebar-collapse) aside.app-sidebar .sidebar-wrapper {
        overflow-x: hidden !important;
    }
}