/* ==========================================================================
   DQI PREMIUM UI (THE ULTIMATE MASTER VERSION + PREMIUM FONTS)
   Gradient Background + Montserrat/Inter Typography + DevTools Responsive Matrix
   ========================================================================== */

/* IMPORT PREMIUM GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700;800&display=swap');

/* ==========================================================================
   1. WIDE LAYOUT CONTAINERS, BACKGROUND & BREADCRUMBS OVERHAUL
   ========================================================================== */
html, body {
    background-color: #12151c !important;
    overflow-x: hidden !important; /* Prevents the white edge glitch */
}

header#content-header {
    background-color: #ffffff !important;
}

.outer-wrapper,
#above-content-wrapper {
    background: linear-gradient(135deg, #1c212c 0%, #0b0c10 100%) !important;
    background-color: #12151c !important; 
    width: 100% !important;
    overflow-x: hidden !important;
}

/* THE CENTERING FIX: margin: 0 auto forces perfect horizontal centering */
div.outer-wrapper > div.container,
div#above-content-wrapper > div.container {
    width: 96% !important;
    max-width: 1440px !important; 
    margin: 0 auto !important; 
}

/* --------------------------------------------------------------------------
   PREMIUM BREADCRUMBS 
   -------------------------------------------------------------------------- */
#portal-breadcrumbs {
    background: transparent !important;
    border: none !important;
    padding: 15px 0 25px 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

#portal-breadcrumbs ol,
#portal-breadcrumbs ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

#portal-breadcrumbs,
#portal-breadcrumbs *,
#portal-breadcrumbs li,
#portal-breadcrumbs a,
#portal-breadcrumbs span {
    background-image: none !important;
}

#portal-breadcrumbs li {
    display: flex !important;
    align-items: center !important;
    background: transparent !important; 
    padding: 0 !important;
    margin: 0 !important;
    color: #e2e8f0 !important; 
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

#portal-breadcrumbs li::after,
#portal-breadcrumbs li::before,
#portal-breadcrumbs a::after,
#portal-breadcrumbs a::before {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    clip-path: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#portal-breadcrumbs img,
#portal-breadcrumbs svg,
#portal-breadcrumbs .breadcrumbSeparator {
    display: none !important; 
}

#portal-breadcrumbs li:not(:last-child)::after {
    content: "›" !important; 
    color: #475569 !important;
    margin-left: 10px !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    position: relative !important;
    top: -1px !important;
    display: inline-block !important; 
}

#portal-breadcrumbs a {
    color: #60a5fa !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

#portal-breadcrumbs a:hover {
    color: #93c5fd !important;
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4) !important;
}

#portal-breadcrumbs span {
    color: #e2e8f0 !important; 
}

/* ==========================================================================
   2. DESKTOP FLEXBOX SPREAD
   ========================================================================== */
main#main-container > div:nth-child(3) {
    display: none !important;
}

/* Changed from 768 to 769 so iPad Minis perfectly snap to the mobile stack */
@media (min-width: 769px) {
    main#main-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 40px !important;
        padding-bottom: 60px !important;
        width: 100% !important;
    }
    
    main#main-container > div:nth-child(1) {
        flex: 0 0 300px !important; 
        max-width: 300px !important;
        width: 300px !important;
    }
    
    main#main-container > div:nth-child(2) {
        flex: 1 1 auto !important; 
        max-width: none !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   3. SIDEBAR NAVIGATION
   ========================================================================== */
aside#portal-column-one,
aside#portal-column-one div,
aside#portal-column-one aside,
aside#portal-column-one nav,
aside#portal-column-one ul,
aside#portal-column-one li,
aside#portal-column-one a {
    background-color: #222834 !important; 
    background: #222834 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

aside#portal-column-one .portlet {
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
}

.portletHeader,
.portletHeader a {
    background-color: #1a1e27 !important;
    background: #1a1e27 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 22px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-size: 17px !important;
    letter-spacing: 0.5px !important;
}

.portletNavigationTree .navTreeItem a {
    display: block !important;
    padding: 16px 22px !important;
    color: #cbd5e1 !important; 
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

.portletNavigationTree .navTreeItem a:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #60a5fa !important;
    padding-left: 28px !important; 
    border-left: 4px solid #3b82f6 !important;
}

/* ==========================================================================
   4. MAIN CONTENT AREA
   ========================================================================== */
article#content {
    background-color: #222834 !important;
    background: #222834 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 45px 55px !important; 
}

#content-core {
    background-color: transparent !important;
    background: transparent !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

#content-core, #content-core * {
    box-sizing: border-box !important;
}

/* ==========================================================================
   5. GLOBAL TYPOGRAPHY & NUCLEAR DEMOTION PROTOCOL
   ========================================================================== */
#content-core,
#content-core * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-align: left !important;
    line-height: 1.75 !important;
    letter-spacing: normal !important;
}

.documentFirstHeading,
.documentFirstHeading *,
#content-core h2, #content-core h2 *,
#content-core h3, #content-core h3 *,
#content-core h4, #content-core h4 * {
    font-family: 'Montserrat', sans-serif !important;
}

#content-core p,
#content-core span,
#content-core div, 
#content-core font, 
#content-core li,
#content-core a {
    font-size: 17px !important; 
    font-weight: 400 !important;
    color: #f1f5f9 !important; 
}

#content-core li h1, #content-core li h1 *,
#content-core li h2, #content-core li h2 *,
#content-core li h3, #content-core li h3 *,
#content-core li h4, #content-core li h4 *,
#content-core li h5, #content-core li h5 *,
#content-core li h6, #content-core li h6 * {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #f1f5f9 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#content-core strong,
#content-core b {
    font-weight: 600 !important;
    color: #ffffff !important;
}

#content-core a {
    color: #3b82f6 !important; 
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}
#content-core a:hover {
    color: #93c5fd !important;
    border-bottom: 1px solid #93c5fd !important;
}

.documentFirstHeading {
    font-size: 38px !important; 
    font-weight: 800 !important; 
    color: #ffffff !important;
    border-bottom: 3px solid #3b82f6 !important;
    padding-bottom: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    display: inline-block !important;
    background-color: transparent !important;
    letter-spacing: -0.5px !important;
}

.documentByLine {
    font-size: 14px !important;
    color: #94a3b8 !important;
    margin-bottom: 45px !important;
    display: block !important;
    font-weight: 500 !important;
}

#content-core h2 {
    color: #93c5fd !important; 
    font-size: 30px !important; 
    font-weight: 700 !important;
    margin-top: 45px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 8px !important;
    letter-spacing: -0.5px !important;
}

#content-core h3 {
    color: #60a5fa !important;
    font-size: 22px !important; 
    font-weight: 700 !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.3px !important;
}

#content-core h4 {
    color: #e2e8f0 !important; 
    font-size: 19px !important; 
    font-weight: 600 !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    letter-spacing: -0.2px !important;
}

#content-core ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 30px !important;
}

#content-core ul li {
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 12px !important;
}

#content-core ul li::before {
    content: "•" !important;
    color: #3b82f6 !important; 
    font-weight: bold !important;
    font-size: 24px !important; 
    position: absolute !important;
    left: 0 !important;
    top: -4px !important;
}

/* ==========================================================================
   6. NATIVE SMART TABLES
   ========================================================================== */
#content-core table {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #1a1e27 !important; 
    background: #1a1e27 !important;
    border-collapse: collapse !important;
    margin: 30px 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important; 
    table-layout: auto !important; 
}

#content-core table *,
#content-core table tr,
#content-core table tr:nth-child(even),
#content-core table tr:nth-child(odd),
#content-core table th,
#content-core table td,
#content-core table tbody,
#content-core table thead {
    background-color: transparent !important; 
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#content-core table td,
#content-core table td *,
#content-core table th,
#content-core table th * {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important; 
    font-weight: 400 !important;
    color: #f1f5f9 !important;
}

#content-core table td a {
    color: #3b82f6 !important;
}

#content-core th {
    background-color: rgba(255, 255, 255, 0.03) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    color: #94a3b8 !important;
}

#content-core th,
#content-core td {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important;
    vertical-align: middle !important;
}

#content-core table:not(:has(td[rowspan])) tr > td:first-child {
    width: 35% !important;
}
#content-core table:not(:has(td[rowspan])) tr > td:nth-child(2) {
    width: 30% !important;
}

#content-core th:first-child,
#content-core td[rowspan] {
    width: 1% !important;
    white-space: nowrap !important;
    padding-right: 25px !important;
}

/* ==========================================================================
   7. STRICT UNIFIED TABLE PHOTOS, CENTERING & GHOST KILLER
   ========================================================================== */
#content-core table td:has(img) {
    text-align: center !important;
    vertical-align: middle !important;
}

#content-core table td a:has(img),
#content-core table td p:has(img) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

#content-core table td img {
    width: 100px !important;       
    min-width: 100px !important;
    max-width: 100px !important;
    height: 125px !important;      
    min-height: 125px !important;
    max-height: 125px !important;
    object-fit: cover !important;  
    object-position: center 15% !important; 
    display: block !important;
    margin: 0 auto !important; 
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#content-core table td img[src=""],
#content-core table td img[src="#"],
#content-core table td img:not([src]),
#content-core table td img[width="1"],
#content-core table td img[height="1"],
#content-core table td img[src*="4f2369dc476248049484424ea68532f2"],
#content-core table td img[src*="380d9bd11c7f40d29e6dfd4717256ec3"],
#content-core table td img[src*="0973b2faf337495e937b0dd057946233"],
#content-core table td img[src*="3420c1279d2c46f0bce8c49bdfd528bc"],
#content-core table td img[src*="325c7f54ae8a44a8995f1113dbe29b82"],
#content-core table td img[src*="7b1342af5e1c469c8beacdfcc76a326b"],
#content-core table td img[src*="0cdf1cefef414c1eaea477dacf7575e7"],
#content-core table td img[src*="10fbe7204f7b41a19528311007ee56ac"],
#content-core table td img[src*="843484890abd4ef38fb7af1ab0713bc6"] {
    display: none !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   8. MEDIA & IFRAMES (FIXED MAIN PAGE IMAGE CENTERING)
   ========================================================================== */
#content-core img.image-inline,
#content-core p > img {
    display: block !important;
    margin: 0 auto 30px auto !important; 
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    max-width: 100% !important;
    height: auto !important;
}

#content-core iframe {
    width: 100% !important;
    height: 450px !important; 
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin: 40px auto !important; 
    display: block !important;
    opacity: 0.9 !important;
    transition: opacity 0.3s ease !important;
}

#content-core iframe:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   9. RESPONSIVE MASTER MATRIX (DEVTOOLS STANDARDS)
   ========================================================================== */

/* --- LAPTOP (< 1440px) --- */
@media (max-width: 1439px) {
    main#main-container { gap: 30px !important; }
    main#main-container > div:nth-child(1) {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    article#content { padding: 35px 40px !important; }
}

/* --- TABLET (< 1024px) Includes Nest Hub & iPad Pro --- */
@media (max-width: 1024px) {
    main#main-container { gap: 20px !important; }
    main#main-container > div:nth-child(1) {
        flex: 0 0 240px !important;
        max-width: 240px !important;
        width: 240px !important;
    }
    article#content { padding: 30px 25px !important; }
    .documentFirstHeading { font-size: 32px !important; }
    #content-core table td, #content-core table th {
        padding: 12px 10px !important;
        font-size: 14px !important;
    }
    #content-core table td img {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        height: 100px !important;
        min-height: 100px !important;
    }
}

/* --- MOBILE L (<= 768px) -> The "Snap to Stack" Point (Includes iPad Mini) --- */
@media (max-width: 768px) {
    main#main-container {
        display: flex !important;
        flex-direction: column !important; 
        gap: 20px !important;
        padding-bottom: 40px !important;
    }
    main#main-container > div:nth-child(1),
    main#main-container > div:nth-child(2) {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    article#content { padding: 20px 15px !important; }
    .documentFirstHeading { font-size: 28px !important; }

    /* NATIVE AUTO-LAYOUT TO KILL GHOST COLUMNS */
    #content-core table {
        display: table !important; 
        width: 100% !important;
        table-layout: auto !important; 
    }
    #content-core th,
    #content-core td {
        display: table-cell !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 8px 5px !important;
        font-size: 13px !important; 
        white-space: normal !important;
        word-break: break-word !important; 
        overflow-wrap: break-word !important;
    }

    /* SUPPRESS "PESQUISADOR" IF EXACTLY 4 COLUMNS (EFETIVOS) */
    #content-core table:not(:has(td[rowspan])) tr > th:nth-child(2):nth-last-child(3),
    #content-core table:not(:has(td[rowspan])) tr > td:nth-child(2):nth-last-child(3) {
        display: none !important;
    }

    /* SMART MOBILE EXPANSION USING NATIVE WIDTHS */
    #content-core table:not(:has(td[rowspan])) tr > th:first-child:not([colspan]),
    #content-core table:not(:has(td[rowspan])) tr > td:first-child:not([colspan]) {
        width: 45% !important;
    }
    #content-core table:not(:has(td[rowspan])) tr > th:nth-child(3):nth-last-child(2),
    #content-core table:not(:has(td[rowspan])) tr > td:nth-child(3):nth-last-child(2),
    #content-core table:not(:has(td[rowspan])) tr > th:nth-child(2):nth-last-child(2),
    #content-core table:not(:has(td[rowspan])) tr > td:nth-child(2):nth-last-child(2) {
        width: 35% !important;
    }
    #content-core table:not(:has(td[rowspan])) tr > th:last-child:not([colspan]),
    #content-core table:not(:has(td[rowspan])) tr > td:last-child:not([colspan]) {
        width: 20% !important;
    }

    #content-core table td img {
        width: 100% !important;       
        min-width: 40px !important;
        max-width: 70px !important;
        height: auto !important;      
        min-height: 0 !important;
    }
}

/* --- MOBILE M & S (<= 425px) -> Ultra Tight Optimization --- */
@media (max-width: 425px) {
    article#content { padding: 15px 10px !important; }
    .documentFirstHeading { font-size: 24px !important; }
    
    #content-core th,
    #content-core td {
        padding: 6px 3px !important;
        font-size: 12px !important; 
    }
    #content-core th {
        font-size: 11px !important;
    }
    #content-core table td img {
        max-width: 55px !important;
        min-width: 35px !important;
    }
}