:root {
    --aladdyx-navy-950: #06182f;
    --aladdyx-navy-900: #0b2b55;
    --aladdyx-navy-800: #12345f;
    --aladdyx-blue: #2f6fed;
    --aladdyx-cyan: #00d1ff;
    --aladdyx-bg: #f5f7fa;
    --aladdyx-text: #172033;
    --aladdyx-muted: #718096;
    --aladdyx-success: #22a06b;
    --aladdyx-border: #e1e6ee;
}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: Inter, Arial, sans-serif;

    background: var(--aladdyx-bg);

    color: var(--aladdyx-text);

    display: flex;

    min-height: 100vh;

}



.sidebar {

    width: 260px;

    background: linear-gradient(180deg, #0b2b55 0%, #06182f 100%);

    color: white;

    padding: 30px 20px;

    display: flex;

    flex-direction: column;

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

}



.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 38px;
    padding: 2px 8px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.brand-icon {
    width: 96px;
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-copy {
    width: 100%;
}

.brand-name {
    display: flex;
    align-items: baseline;
    justify-content: center;
    line-height: 1;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
}

.brand-name .brand-x {
    color: var(--aladdyx-cyan);
}

.brand-tagline {
    display: block;
    margin-top: 8px;
    color: #a9bdd8;
    font-size: 8.5px;
    line-height: 1.45;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
}

nav {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.menu {

    color: #aebbd0;

    text-decoration: none;

    padding: 14px 14px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 14px;

    transition: 0.2s;

}



.menu:hover {

    background: rgba(47, 111, 237, 0.18);

    color: white;

}



.menu.active {

    background: linear-gradient(90deg, rgba(47,111,237,.34), rgba(0,209,255,.10));

    color: white;

}



.menu span {

    font-size: 18px;

}



.sidebar-footer {

    margin-top: auto;

    color: #7083a3;

    font-size: 12px;

    padding: 10px;

}



.content {

    margin-left: 260px;

    width: calc(100% - 260px);

    padding: 55px 65px;

}



header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 45px;

}



.eyebrow {

    font-size: 11px;

    letter-spacing: 1.8px;

    font-weight: 700;

    color: var(--aladdyx-blue);

    margin-bottom: 9px;

}



h1 {

    font-size: 34px;

    letter-spacing: -1px;

}



.subtitle {

    margin-top: 9px;

    color: #718096;

    font-size: 15px;

}



.status {

    background: white;

    border: 1px solid #e3e8ef;

    border-radius: 20px;

    padding: 9px 14px;

    font-size: 12px;

    color: #536174;

    display: flex;

    align-items: center;

    gap: 8px;

}



.status span {

    width: 8px;

    height: 8px;

    background: var(--aladdyx-success);

    border-radius: 50%;

}



.modules {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 24px;

}



.module-card {

    background: white;

    border: 1px solid #e1e6ee;

    border-radius: 15px;

    padding: 28px;

    text-decoration: none;

    color: inherit;

    min-height: 265px;

    transition: 0.2s;

}



.module-card:hover {

    transform: translateY(-3px);

    border-color: #b8c9e8;

    box-shadow: 0 12px 30px rgba(24, 48, 85, 0.08);

}



.module-icon {

    width: 46px;

    height: 46px;

    border-radius: 10px;

    background: #edf3ff;

    color: var(--aladdyx-blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;

    margin-bottom: 25px;

}



.module-label {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #7c8da6;

}



.module-card h2 {

    margin-top: 8px;

    font-size: 21px;

}



.module-card p {

    color: #718096;

    font-size: 14px;

    line-height: 1.6;

    margin-top: 12px;

    max-width: 480px;

}



.module-action {

    margin-top: 24px;

    color: var(--aladdyx-blue);

    font-size: 13px;

    font-weight: 600;

}



.info-box {

    margin-top: 25px;

    background: white;

    border: 1px solid #e1e6ee;

    border-radius: 15px;

    padding: 25px 28px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.info-label {

    font-size: 10px;

    letter-spacing: 1.4px;

    font-weight: 700;

    color: #8a98aa;

}



.info-box h3 {

    font-size: 16px;

    margin-top: 7px;

}



.info-box p {

    color: #718096;

    font-size: 13px;

    margin-top: 6px;

}



.status-badge {

    background: #edf3ff;

    color: var(--aladdyx-blue);

    font-size: 11px;

    font-weight: 700;

    padding: 8px 12px;

    border-radius: 7px;

}



@media (max-width: 900px) {

    .sidebar {

        width: 210px;

    }



    .content {

        margin-left: 210px;

        width: calc(100% - 210px);

        padding: 40px 30px;

    }



    .modules {

        grid-template-columns: 1fr;

    }

}.upload-section {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.upload-card {

    background: white;

    border: 1px solid #e1e6ee;

    border-radius: 15px;

    padding: 30px;

}



.upload-header {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 28px;

}



.step-number {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #edf3ff;

    color: var(--aladdyx-blue);

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

}



.upload-header h2 {

    font-size: 20px;

}



.upload-header p {

    color: #718096;

    font-size: 14px;

    margin-top: 5px;

}



.upload-area {

    border: 2px dashed #ccd5e3;

    border-radius: 14px;

    min-height: 240px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: 0.2s;

    background: #fafbfd;

}



.upload-area:hover {

    border-color: var(--aladdyx-blue);

    background: #f5f8ff;

}



.upload-area input {

    display: none;

}



.upload-icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: #edf3ff;

    color: var(--aladdyx-blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    margin-bottom: 15px;

}



.upload-area strong {

    font-size: 15px;

}



.upload-area span {

    margin-top: 7px;

    color: #8a98aa;

    font-size: 12px;

}



.primary-button {

    margin-top: 20px;

    background: var(--aladdyx-blue);

    color: white;

    border: none;

    border-radius: 9px;

    padding: 13px 20px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

}



.primary-button:hover {

    background: #245fd0;

}



.file-result {

    background: white;

    border: 1px solid #e1e6ee;

    border-radius: 15px;

    padding: 24px 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.file-result h3 {

    margin-top: 7px;

    font-size: 17px;

}



.file-result p {

    margin-top: 6px;

    color: #718096;

    font-size: 13px;

}

.validation-card {

    background: white;

    border: 1px solid #e1e6ee;

    border-radius: 15px;

    padding: 28px;

}



.validation-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}



.validation-title h2 {

    margin-top: 7px;

    font-size: 18px;

}



.validation-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 14px;

}



.validation-item {

    border: 1px solid #e6eaf0;

    border-radius: 12px;

    padding: 18px;

    background: #fafbfd;

}



.validation-item span {

    display: block;

    color: #718096;

    font-size: 12px;

    margin-bottom: 8px;

}



.validation-item strong {

    font-size: 25px;

    color: var(--aladdyx-text);

}



.processing-summary {

    margin-top: 22px;

    border-top: 1px solid #e6eaf0;

    padding-top: 22px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.processing-summary span {

    font-size: 10px;

    letter-spacing: 1.3px;

    font-weight: 700;

    color: var(--aladdyx-blue);

}



.processing-summary h3 {

    margin-top: 7px;

    font-size: 18px;

}



.processing-summary p {

    color: #718096;

    font-size: 12px;

    margin-top: 5px;

}



.process-button {

    margin-top: 0;

}



.validation-error {

    background: #fff5f5;

    border: 1px solid #ffd4d4;

    padding: 16px;

    border-radius: 10px;

    font-size: 13px;

    color: #a33a3a;

}



@media (max-width: 1100px) {

    .validation-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

.validation-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}



.secondary-button {

    background: white;

    color: var(--aladdyx-blue);

    border: 1px solid #c9d7ee;

    border-radius: 9px;

    padding: 13px 20px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

}



.secondary-button:hover {

    background: #f5f8ff;

}



.inconsistencias-box {

    margin-top: 25px;

    border-top: 1px solid #e6eaf0;

    padding-top: 24px;

}



.inconsistencias-header {

    margin-bottom: 18px;

}



.inconsistencias-header h3 {

    margin-top: 7px;

    font-size: 17px;

}



.table-wrapper {

    overflow-x: auto;

    border: 1px solid #e1e6ee;

    border-radius: 10px;

}



.inconsistencias-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 12px;

}



.inconsistencias-table th {

    text-align: left;

    background: var(--aladdyx-bg);

    color: #536174;

    padding: 12px;

    border-bottom: 1px solid #e1e6ee;

}



.inconsistencias-table td {

    padding: 12px;

    border-bottom: 1px solid #edf0f4;

}



.inconsistencias-table tr:last-child td {

    border-bottom: none;

}

.test-warning {

    margin-bottom: 22px;

    padding: 14px 16px;

    border: 1px solid #d9e4f7;

    border-radius: 10px;

    background: #f6f9ff;

    color: #46617f;

    font-size: 13px;

}



.processing-grid {

    grid-template-columns: repeat(4, 1fr);

}



.processing-table-wrapper {

    margin-top: 22px;

}



.validation-actions form {

    margin: 0;

}



@media (max-width: 1100px) {



    .processing-grid {

        grid-template-columns: repeat(2, 1fr);

    }



}



/* ALADDYX — identidade institucional e preparação para White Label */
.sidebar-footer {
    margin-top: auto;
    padding: 18px 8px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebar-footer .version {
    color: #6f89aa;
    font-size: 11px;
}

.sidebar-footer .group-brand {
    margin-top: 7px;
    color: #9fb0cd;
    font-size: 10px;
    line-height: 1.4;
}

body.white-label .group-brand {
    display: none;
}


/* =========================================================
   WHITE LABEL DINÂMICO
   As variáveis abaixo são preenchidas pelo base.html.
   ALADDYX continua sendo o fallback quando White Label está OFF.
   ========================================================= */

body.white-label .sidebar {
    background: linear-gradient(
        180deg,
        var(--brand-primary) 0%,
        var(--brand-secondary) 100%
    );
}

body.white-label .brand-icon {
    width: 100%;
    height: 96px;
}

body.white-label .brand-icon img {
    max-width: 190px;
    max-height: 96px;
    width: auto;
    height: auto;
}

body.white-label .brand-name {
    color: #ffffff;
    font-size: 23px;
    line-height: 1.15;
    word-break: break-word;
}

body.white-label .brand-tagline {
    color: rgba(255, 255, 255, 0.72);
    white-space: normal;
}

body.white-label .menu:hover {
    background: color-mix(
        in srgb,
        var(--brand-tertiary) 24%,
        transparent
    );
}

body.white-label .menu.active {
    background: linear-gradient(
        90deg,
        color-mix(
            in srgb,
            var(--brand-secondary) 55%,
            transparent
        ),
        color-mix(
            in srgb,
            var(--brand-tertiary) 20%,
            transparent
        )
    );
}

body.white-label .eyebrow,
body.white-label .module-action,
body.white-label .step-number,
body.white-label .upload-icon,
body.white-label .processing-summary span,
body.white-label .secondary-button {
    color: var(--brand-secondary);
}

body.white-label .module-icon,
body.white-label .step-number,
body.white-label .upload-icon {
    background: color-mix(
        in srgb,
        var(--brand-secondary) 11%,
        white
    );
}

body.white-label .primary-button {
    background: var(--brand-secondary);
}

body.white-label .primary-button:hover {
    background: var(--brand-primary);
}

body.white-label .secondary-button {
    border-color: color-mix(
        in srgb,
        var(--brand-secondary) 30%,
        #e1e6ee
    );
}

body.white-label .upload-area:hover {
    border-color: var(--brand-secondary);
}

body.white-label .status-badge {
    background: color-mix(
        in srgb,
        var(--brand-secondary) 10%,
        white
    );
    color: var(--brand-secondary);
}

body.white-label .group-brand {
    display: none;
}