/* MySCIE Modern Home - estilos encapsulados al home principal */

body {
    background: #E9F0FF !important;
    background: -webkit-linear-gradient(to bottom, #E9F0FF, #f1faee) !important;
    background: linear-gradient(to bottom, #E9F0FF, #f1faee) !important;
    margin: 0;
    padding: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: #E9F0FF;
    background: -webkit-linear-gradient(to bottom, #E9F0FF, #f1faee);
    background: linear-gradient(to bottom, #E9F0FF, #f1faee);
    opacity: 1;
    z-index: -1;
}

#panelPricipalSCIE > .x-panel-bwrap > .x-panel-body {
    background: transparent !important;
    backdrop-filter: none;
    border-radius: 0px;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none;
}

#panelPricipalSCIE .x-toolbar {
    background: rgba(219, 231, 252, 0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(8, 41, 138, 0.2) !important;
    height: 48px !important;
    padding: 0 10px !important;
    box-shadow: 0 8px 20px rgba(8, 41, 138, 0.12) !important;
}

#panelPricipalSCIE .x-toolbar-ct,
#panelPricipalSCIE .x-toolbar-ct tbody,
#panelPricipalSCIE .x-toolbar-ct > tbody > tr,
#panelPricipalSCIE .x-toolbar-left,
#panelPricipalSCIE .x-toolbar-right,
#panelPricipalSCIE .x-toolbar-left table,
#panelPricipalSCIE .x-toolbar-right-ct,
#panelPricipalSCIE .x-toolbar-right-ct table,
#panelPricipalSCIE .x-toolbar-left-row,
#panelPricipalSCIE .x-toolbar-right-row,
#panelPricipalSCIE .x-toolbar-extras-row {
    height: 100% !important;
}

#panelPricipalSCIE .x-toolbar td,
#panelPricipalSCIE .x-toolbar div,
#panelPricipalSCIE .x-toolbar span,
#panelPricipalSCIE .x-toolbar-left-row td,
#panelPricipalSCIE .x-toolbar-right-row td,
#panelPricipalSCIE .x-toolbar-extras-row td {
    vertical-align: middle !important;
}

.m-toolbar-logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 20px !important;
    margin: 4px 20px !important;
}

.m-toolbar-logo-wrap img {
    display: block !important;
    margin: 0 auto !important;
    vertical-align: middle !important;
}

.m-profile-pill {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(8, 41, 138, 0.22) !important;
    border-radius: 30px !important;
    padding: 2px 10px 2px 4px !important;
    cursor: pointer !important;
    height: 32px !important;
    margin: auto 18px auto 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.m-profile-avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    object-fit: cover !important;
    margin-right: 7px !important;
}

.m-profile-name {
    color: #08298A !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.m-profile-caret {
    color: #08298A !important;
    font-size: 10px !important;
    line-height: 1 !important;
    margin-left: 5px !important;
}

.m-profile-dropdown.x-menu {
    border: 1px solid rgba(8, 41, 138, 0.12) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 14px 30px rgba(8, 41, 138, 0.18) !important;
    overflow: hidden;
}

.m-profile-dropdown .x-menu-list {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

.m-profile-dropdown .x-menu-list-item {
    margin: 0 0 4px 0 !important;
}

.m-profile-dropdown .x-menu-list-item:last-child {
    margin-bottom: 0 !important;
}

.m-profile-dropdown .x-menu-item {
    border-radius: 10px !important;
    padding: 9px 12px 9px 34px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: #163a7a !important;
}

.m-profile-dropdown .x-menu-item-icon {
    left: 10px !important;
    top: 8px !important;
}

.m-profile-dropdown .x-menu-item-active {
    border: 0 !important;
    background: linear-gradient(90deg, rgba(226, 235, 252, 0.96) 0%, rgba(238, 244, 255, 0.96) 100%) !important;
}

.m-profile-dropdown .x-menu-item-active a.x-menu-item {
    border: 0 !important;
    color: #08298A !important;
}

.m-profile-dropdown .x-menu-sep-li {
    margin: 6px 0 !important;
}

.m-profile-dropdown .x-menu-sep {
    border-top: 1px solid rgba(8, 41, 138, 0.1) !important;
    background: none !important;
    margin: 0 4px !important;
}

#panelPricipalSCIE .m-home-system-panel {
    background: transparent !important;
    border: none !important;
    width: calc(100% - 56px) !important;
    max-width: none !important;
    margin: 0 auto 4px auto !important;
    box-sizing: border-box !important;
}

#panelPricipalSCIE .m-home-system-panel > .x-panel-bwrap,
#panelPricipalSCIE .m-home-system-panel .x-panel-mc,
#panelPricipalSCIE .m-home-system-panel .x-panel-body {
    width: 100% !important;
    background: transparent !important;
    border-radius: 14px;
    padding: 6px 0 0 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

#panelPricipalSCIE .m-home-system-view {
    width: 100% !important;
    margin: 0 !important;
}

#panelPricipalSCIE .m-home-system-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 16px 18px;
    width: 100%;
    max-width: none;
    margin: 0 auto !important;
    padding: 0 12px 18px 12px;
    box-sizing: border-box;
}

#panelPricipalSCIE .m-home-card-module {
    position: relative;
    background: rgba(255, 255, 255, 0.30);
    border-radius: 12px;
    padding: 10px 8px;
    width: 115px;
    min-height: 110px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
    transition: all 0.25s ease;
    cursor: pointer;
    border: 1px solid rgb(255 255 255);
    border-top: 4px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
}

#panelPricipalSCIE .m-home-card-module:hover {
    transform: translateY(-7px);
}

#panelPricipalSCIE .m-home-card-icon-wrap {
    position: relative;
    display: flex;
    flex: 3 1 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    margin-bottom: 0;
}

#panelPricipalSCIE .m-home-card-module img {
    height: 60px !important;
    max-width: 95px !important;
    width: auto !important;
}

#panelPricipalSCIE .m-home-card-module span {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    line-height: 1.15;
    color: #08298A;
    font-weight: 700;
    text-align: center;
    min-height: 26px;
    max-width: 100%;
    overflow-wrap: break-word;
}

#panelPricipalSCIE .m-home-badge-blue {
    background-color: #FF0000 !important;
    border-radius: 10px !important;
    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    font-size: 10px !important;
    color: white !important;
    position: absolute !important;
    top: -6px !important;
    right: 2px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

#panelPricipalSCIE .m-home-system-panel .x-panel-header {
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    padding: 18px 0 8px 0 !important;
}

#panelPricipalSCIE .m-home-system-panel .x-panel-header .x-panel-header-text {
    color: #1f4f8f !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0;
}

#panelPricipalSCIE .m-home-system-panel .x-panel-tl,
#panelPricipalSCIE .m-home-system-panel .x-panel-tr,
#panelPricipalSCIE .m-home-system-panel .x-panel-tc,
#panelPricipalSCIE .m-home-system-panel .x-panel-ml,
#panelPricipalSCIE .m-home-system-panel .x-panel-mr,
#panelPricipalSCIE .m-home-system-panel .x-panel-mc,
#panelPricipalSCIE .m-home-system-panel .x-panel-bl,
#panelPricipalSCIE .m-home-system-panel .x-panel-br,
#panelPricipalSCIE .m-home-system-panel .x-panel-bc {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-sizing: border-box !important;
}

.m-home-center-container,
.m-home-center-container > .x-panel-bwrap,
.m-home-center-container > .x-panel-bwrap > .x-panel-body {
    width: 100% !important;
    box-sizing: border-box !important;
}

.m-home-center-container > .x-panel-bwrap > .x-panel-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    justify-content: safe center !important;
    align-items: stretch !important;
    min-height: calc(100vh - 54px) !important;
    padding: 30px 28px 52px 28px !important;
    background: transparent !important;
}

@media (max-width: 900px) {
    .m-home-center-container > .x-panel-bwrap > .x-panel-body {
        justify-content: flex-start !important;
        min-height: auto !important;
        padding: 22px 12px 36px 12px !important;
    }

    #panelPricipalSCIE .m-home-system-panel {
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }

    #panelPricipalSCIE .m-home-system-grid {
        gap: 12px;
        padding: 0 4px 14px 4px;
    }

    #panelPricipalSCIE .m-home-card-module {
        width: 105px;
        min-height: 100px;
        padding: 9px 7px;
    }

    #panelPricipalSCIE .m-home-card-module img {
        height: 50px !important;
        max-width: 80px !important;
    }
}

/* ============================================================
   UNIFIED HOME GRID — MN-2255
   Cards de todos los sistemas en un solo flujo continuo.
   ============================================================ */

/* ocultar paneles por sistema (siguen vivos para click handlers) */
#panelPricipalSCIE .m-home-system-panel {
    display: none !important;
}

.m-home-unified-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 115px);
    max-width: calc(6 * 115px + 5 * 36px);
    margin: 0 auto;
    gap: 44px 36px;
    justify-content: center;
    padding: 14px 12px 44px 12px;
    box-sizing: border-box;
}

/* — color de acento por sistema (borde superior) — */
#panelPricipalSCIE .m-home-card-module.m-sys-comer    { border-top-color: #1565C0; }
#panelPricipalSCIE .m-home-card-module.m-sys-finanzas { border-top-color: #2E7D32; }
#panelPricipalSCIE .m-home-card-module.m-sys-cacfi    { border-top-color: #BF360C; }
#panelPricipalSCIE .m-home-card-module.m-sys-reqmat   { border-top-color: #4527A0; }
#panelPricipalSCIE .m-home-card-module.m-sys-admsys   { border-top-color: #01579B; }
#panelPricipalSCIE .m-home-card-module.m-sys-juridico { border-top-color: #880E4F; }
#panelPricipalSCIE .m-home-card-module.m-sys-viaticos { border-top-color: #00695C; }
#panelPricipalSCIE .m-home-card-module.m-sys-talento  { border-top-color: #E65100; }

/* — fondo + sombra de hover por sistema — */
#panelPricipalSCIE .m-home-card-module.m-sys-comer:hover    { background: rgba(21,  101, 192, 0.12); box-shadow: 0 10px 32px rgba(21,  101, 192, 0.55); }
#panelPricipalSCIE .m-home-card-module.m-sys-finanzas:hover { background: rgba(46,  125,  50, 0.12); box-shadow: 0 10px 32px rgba(46,  125,  50, 0.55); }
#panelPricipalSCIE .m-home-card-module.m-sys-cacfi:hover    { background: rgba(191,  54,  12, 0.12); box-shadow: 0 10px 32px rgba(191,  54,  12, 0.55); }
#panelPricipalSCIE .m-home-card-module.m-sys-reqmat:hover   { background: rgba(69,   39, 160, 0.12); box-shadow: 0 10px 32px rgba(69,   39, 160, 0.55); }
#panelPricipalSCIE .m-home-card-module.m-sys-admsys:hover   { background: rgba(1,    87, 155, 0.12); box-shadow: 0 10px 32px rgba(1,    87, 155, 0.55); }
#panelPricipalSCIE .m-home-card-module.m-sys-juridico:hover { background: rgba(136,  14,  79, 0.12); box-shadow: 0 10px 32px rgba(136,  14,  79, 0.55); }
#panelPricipalSCIE .m-home-card-module.m-sys-viaticos:hover { background: rgba(0,   105,  92, 0.12); box-shadow: 0 10px 32px rgba(0,   105,  92, 0.55); }
#panelPricipalSCIE .m-home-card-module.m-sys-talento:hover  { background: rgba(230,  81,   0, 0.12); box-shadow: 0 10px 32px rgba(230,  81,   0, 0.55); }

/* — label del sistema en hover (pegado debajo de la card) — */
#panelPricipalSCIE .m-home-card-module::after {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    color: #fff;
    border-radius: 4px;
    padding: 3px 9px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 10;
}
#panelPricipalSCIE .m-home-card-module:hover::after {
    opacity: 1;
}

#panelPricipalSCIE .m-home-card-module.m-sys-comer::after    { content: "Comercialización"; background: rgba(21,  101, 192, 0.90); }
#panelPricipalSCIE .m-home-card-module.m-sys-finanzas::after { content: "Adm. y Finanzas";  background: rgba(46,  125,  50, 0.90); }
#panelPricipalSCIE .m-home-card-module.m-sys-cacfi::after    { content: "CACFI";             background: rgba(191,  54,  12, 0.90); }
#panelPricipalSCIE .m-home-card-module.m-sys-reqmat::after   { content: "SICC";              background: rgba(69,   39, 160, 0.90); }
#panelPricipalSCIE .m-home-card-module.m-sys-admsys::after   { content: "Adm. del Sistema";  background: rgba(1,    87, 155, 0.90); }
#panelPricipalSCIE .m-home-card-module.m-sys-juridico::after { content: "Jurídico";          background: rgba(136,  14,  79, 0.90); }
#panelPricipalSCIE .m-home-card-module.m-sys-viaticos::after { content: "Viáticos";          background: rgba(0,   105,  92, 0.90); }
#panelPricipalSCIE .m-home-card-module.m-sys-talento::after  { content: "Talento Humano";    background: rgba(230,  81,   0, 0.90); }

@media (max-width: 900px) {
    .m-home-unified-grid {
        grid-template-columns: repeat(auto-fill, 105px);
        gap: 40px 14px;
        padding: 0 4px 32px 4px;
    }
}

/* ============================================================
   NOTIFICATION TOOLTIP — card blanca flotante con backdrop (login banner)
   ============================================================ */

.m-notif-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 41, 138, 0.45);
    z-index: 19990;
}

/* Ext.Shadow nativo (div .x-shadow) queda mal posicionado al centrar el
   tip por CSS; se desactiva y se usa solo el box-shadow de .m-notif-modern */
body > .x-shadow {
    display: none !important;
}

.m-notif-modern {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 19991 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(8, 41, 138, 0.12) !important;
    box-shadow: 0 20px 45px rgba(8, 41, 138, 0.35) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

.m-notif-modern .x-tipcustom-tc,
.m-notif-modern .x-tipcustom-tl,
.m-notif-modern .x-tipcustom-tr,
.m-notif-modern .x-tipcustom-bc,
.m-notif-modern .x-tipcustom-bl,
.m-notif-modern .x-tipcustom-br,
.m-notif-modern .x-tipcustom-ml,
.m-notif-modern .x-tipcustom-mr,
.m-notif-modern .x-tipcustom-mc {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.m-notif-modern .x-tipcustom-header-text {
    font: normal 700 13px 'Inter', sans-serif !important;
    color: #08298A !important;
    margin: 0 !important;
}

.m-notif-modern .x-tipcustom-body {
    font-family: 'Inter', sans-serif !important;
    padding: 4px 18px 14px 18px !important;
}

.m-notif-modern .x-tipcustom-close {
    display: block !important;
    background-image: none !important;
    opacity: 0.45;
}

.m-notif-modern .x-tipcustom-close:hover {
    opacity: 0.85;
}

.m-notif-title {
    display: flex;
    justify-content: center;
    padding-top: 14px;
}

.m-notif-title img {
    width: 160px;
    height: auto;
}

.m-notif-title-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #08298A;
    text-align: center;
    padding: 14px 18px 0 18px;
}

.m-notif-body-text {
    font-size: 13px;
    color: #163a7a;
    line-height: 1.5;
    text-align: justify;
}

.m-notif-body-text b {
    color: #08298A;
}

.m-notif-footer {
    display: flex;
    justify-content: center;
    font-size: 9px;
    color: #6b85c4;
    margin-top: 10px;
}