/* Estilo isolado da página executiva: não depende de Bootstrap. */
.de-page {
    padding: 12px 16px 24px;
    max-width: 1700px;
    margin: auto;
    color: #263548;
    font-family: inherit;
    font-size: 14px
}

    .de-page * {
        box-sizing: border-box
    }

.de-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

    .de-header h2 {
        font-size: 21px;
        font-weight: 700;
        margin: 0 0 2px;
        color: #1d3045
    }

    .de-header small, .de-panel-heading small {
        color: #718096;
        font-size: 12px
    }

.de-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

    .de-actions select, .de-actions button {
        border: 1px solid #d6dfe9;
        background: #fff;
        border-radius: 7px;
        padding: 8px 11px;
        min-height: 36px;
        color: #253a50;
        font: inherit;
        font-size: 13px
    }

    .de-actions select {
        min-width: 190px;
        max-width: 300px
    }

    .de-actions button {
        cursor: pointer
    }

        .de-actions button:hover:not(:disabled) {
            background: #f1f5f9
        }

    .de-actions .de-primary {
        background: #176caa;
        color: white;
        border-color: #176caa;
        font-weight: 600
    }

        .de-actions .de-primary:hover:not(:disabled) {
            background: #11598e
        }

    .de-actions button:disabled, .de-actions select:disabled {
        opacity: .55;
        cursor: default
    }

.de-kpis {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 11px;
    margin-bottom: 11px
}

.de-kpi, .de-status-card, .de-panel, .de-progress-card {
    background: #fff;
    border: 1px solid #e0e7ef;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(26,45,69,.045)
}

.de-kpi {
    padding: 16px 18px;
    min-height: 93px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

    .de-kpi small, .de-status-card small {
        color: #66768b;
        font-size: 12px
    }

    .de-kpi strong {
        font-size: 27px;
        line-height: 1.2;
        color: #22364b;
        font-weight: 700;
        font-variant-numeric: tabular-nums
    }

.de-status-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 11px;
    margin-bottom: 14px
}

.de-status-card {
    padding: 12px 14px;
    min-height: 80px;
    border-top: 4px solid var(--de-status);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

    .de-status-card strong {
        font-size: 24px;
        line-height: 1.1;
        color: #263548;
        font-variant-numeric: tabular-nums
    }

.de-panel {
    padding: 16px 18px;
    margin-bottom: 13px
}

.de-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.de-panel h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #243b53
}

.de-distribution {
    display: flex;
    height: 19px;
    border-radius: 5px;
    overflow: hidden;
    background: #e8edf3
}

    .de-distribution > div {
        min-width: 0
    }

.de-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 12px;
    color: #56677b;
    font-size: 12px
}

    .de-legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

    .de-legend i {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 3px
    }

.de-table-scroll {
    width: 100%;
    overflow-x: auto
}

.de-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 13px
}

    .de-table th {
        text-align: left;
        color: #607188;
        background: #f4f7fa;
        font-weight: 650;
        padding: 11px 10px;
        border-bottom: 1px solid #e0e7ef
    }

    .de-table td {
        padding: 11px 10px;
        border-bottom: 1px solid #edf1f5
    }

    .de-table tbody tr:hover {
        background: #f7fafd
    }

    .de-table th:nth-child(n+2):nth-child(-n+7), .de-table td:nth-child(n+2):nth-child(-n+7) {
        text-align: right
    }

    .de-table .de-empty {
        text-align: center !important;
        color: #718096;
        padding: 24px
    }

.de-alert {
    border-radius: 7px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px
}

.de-error {
    background: #fff0f0;
    border: 1px solid #f4c7c7;
    color: #9b3030
}

.de-warning {
    background: #fff9e8;
    border: 1px solid #f2dda5;
    color: #86620d
}

.de-progress-card {
    padding: 13px 16px;
    margin-bottom: 12px
}

.de-progress-head {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 9px
}

    .de-progress-head > span:last-child {
        margin-left: auto;
        font-variant-numeric: tabular-nums
    }

.de-progress-track {
    height: 9px;
    background: #e9eff5;
    border-radius: 20px;
    overflow: hidden
}

.de-progress-fill {
    height: 100%;
    background: #1976b8;
    transition: width .25s
}

.de-progress-card small {
    display: block;
    margin-top: 7px;
    color: #718096
}

.de-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #bfd9eb;
    border-top-color: #176caa;
    border-radius: 50%;
    animation: de-spin .8s linear infinite
}

@keyframes de-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:1100px) {
    .de-status-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media(max-width:700px) {
    .de-page {
        padding: 10px
    }

    .de-kpis {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .de-status-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .de-actions {
        width: 100%
    }

        .de-actions select {
            flex: 1;
            min-width: 160px
        }

    .de-kpi {
        padding: 12px
    }

    .de-panel {
        padding: 13px
    }
}

/* Ajustes responsivos adicionais, preservando o layout desktop. */
.de-page {
    width: 100%;
    min-width: 0
}

.de-header > div, .de-panel, .de-kpi, .de-status-card {
    min-width: 0
}

    .de-kpi small, .de-status-card small {
        overflow-wrap: anywhere
    }

.de-table-scroll {
    max-width: 100%;
    -webkit-overflow-scrolling: touch
}

.de-table {
    min-width: 740px
}

@media(max-width:700px) {
    .de-header {
        align-items: stretch;
        gap: 10px
    }

        .de-header h2 {
            font-size: 19px
        }

    .de-actions {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px
    }

        .de-actions select {
            grid-column: 1/-1;
            min-width: 0;
            max-width: none;
            width: 100%
        }

        .de-actions button {
            width: 100%;
            min-width: 0;
            white-space: normal;
            line-height: 1.25;
            padding: 9px 7px
        }

    .de-kpis, .de-status-grid {
        gap: 8px
    }

    .de-kpi {
        min-height: 83px
    }

        .de-kpi strong {
            font-size: 23px
        }

    .de-status-card {
        padding: 10px 12px;
        min-height: 73px
    }

        .de-status-card strong {
            font-size: 22px
        }

    .de-panel-heading {
        align-items: flex-start
    }

    .de-progress-head {
        flex-wrap: wrap
    }

        .de-progress-head strong {
            min-width: 0;
            flex: 1;
            overflow-wrap: anywhere
        }

    .de-legend {
        gap: 8px 12px
    }
}

@media(max-width:360px) {
    .de-page {
        padding: 8px
    }

    .de-actions {
        grid-template-columns: 1fr
    }

        .de-actions select {
            grid-column: 1
        }

    .de-kpi strong {
        font-size: 21px
    }

    .de-status-card strong {
        font-size: 20px
    }
}