/* =======================================================
   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;
}