/* =========================================
   DASHBOARD
========================================= */


/* =========================================
   DATA
========================================= */

.dashboard-date {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 15px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    color: #64748b;

    font-size: 14px;

}


/* =========================================
   SECTIONS
========================================= */

.dashboard-section {

    margin-bottom: 24px;

}


.section-heading {

    margin-bottom: 14px;

}


.section-heading h2 {
    margin: 0;
    font-size: 18px;

}


.section-heading p {
    margin: 4px 0 0;

    font-size: 13px;
}


/* =========================================
   STATS GRID
========================================= */

.stats-grid {

    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 14px;

}


.financial-grid {

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

}


.obras-grid {

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

}


/* =========================================
   STAT CARD
========================================= */

.stat-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    padding: 18px;

    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.04);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.stat-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.08);

}


.stat-card-top {

    display: flex;

    align-items: center;

    gap: 3px;

}


/* =========================================
   STAT ICON
========================================= */

.stat-icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

}


.stat-icon.blue {

    background: #dbeafe;

    color: #2563eb;

}


.stat-icon.green {

    background: #dcfce7;

    color: #16a34a;

}


.stat-icon.orange {

    background: #ffedd5;

    color: #ea580c;

}




.stat-icon.gray {

    background: #f1f5f9;

    color: #64748b;

}


.stat-icon.dark {

    background: #e2e8f0;

    color: #0f172a;

}


/* =========================================
   LABEL
========================================= */

.stat-label {

    font-size: 14px;

    font-weight: 600;

    color: #64748b;

}


/* =========================================
   VALUE
========================================= */

.stat-value {

    margin-top: 24px;

    font-size: 27px;

    font-weight: 700;

    color: #0f172a;

}


/* =========================================
   FOOTER
========================================= */

.stat-footer {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 14px;

    font-size: 13px;

}


.stat-footer.neutral {

    color: #64748b;

}


.stat-footer.success {

    color: #16a34a;

}


.stat-footer.warning {

    color: #ea580c;

}


.stat-footer.info {

    color: #2563eb;

}


/* =========================================
   RECURSOS
========================================= */

.resources-grid {

    display: grid;

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

    gap: 20px;

}


.resource-card {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

}


.resource-icon {

    width: 48px;

    height: 48px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

}


.resource-icon.blue {

    background: #dbeafe;

    color: #2563eb;

}


.resource-icon.orange {

    background: #ffedd5;

    color: #ea580c;

}


.resource-icon.purple {

    background: #ede9fe;

    color: #7c3aed;

}

.stat-icon.purple {

    background: #7c3aed5f;

    color: #7c3aed;

}


/* =========================================
   RESOURCE INFO
========================================= */

.resource-info {

    display: flex;

    flex-direction: column;

}


.resource-info span {

    font-size: 13px;

    color: #64748b;

}


.resource-info strong {

    margin-top: 5px;

    font-size: 24px;

    color: #0f172a;

}


/* =========================================
   CHART
========================================= */

.chart-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    padding: 26px;

    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.04);

}


.chart-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 25px;

}


.chart-header h2 {

    margin: 0;

    font-size: 19px;

    color: #0f172a;

}


.chart-header p {

    margin: 6px 0 0;

    font-size: 14px;

    color: #64748b;

}


.chart-period {

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border-radius: 8px;

    background: #f8fafc;

    color: #64748b;

    font-size: 13px;

}


.chart-container {

    position: relative;

    height: 350px;

}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 1100px) {

    .obras-grid {

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

    }


}


@media (max-width: 850px) {

    .financial-grid {

        grid-template-columns: 1fr;

    }


    .resources-grid {

        grid-template-columns: 1fr;

    }


}


@media (max-width: 600px) {

    .obras-grid {

        grid-template-columns: 1fr;

    }


    .chart-header {

        flex-direction: column;

        gap: 15px;

    }


    .chart-container {

        height: 280px;

    }

}

/* =========================================
   CONTROLO DE AUTOS
========================================= */

.autos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.auto-card {
    min-height: 190px;
}


.stat-total {
    font-size: 18px;
    font-weight: 500;
    color: #94a3b8;
}


.auto-progress {
    width: 100%;
    height: 8px;

    background: #e9eef5;

    border-radius: 20px;

    overflow: hidden;

    margin: 18px 0 8px;
}


.auto-progress-bar {
    height: 100%;

    border-radius: inherit;

    transition: width 0.4s ease;
}


.auto-progress-bar.interno {
    background: #2563eb;
}


.auto-progress-bar.externo {
    background: #f59e0b;
}


/* RESPONSIVO */

@media (max-width: 768px) {

    .autos-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   OBJETIVOS MENSAIS
========================================= */

.objetivos-card {
    cursor: pointer;
}


/* HEADER */

.dashboard-control-icon.objetivos {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}


/* CONTEÚDO */

.objetivos-content {
    margin-top: 22px;
}


/* RESULTADO */

.objetivos-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
}


.objetivos-main strong {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}


.objetivos-main span {
    font-size: 15px;
    color: #94a3b8;
}


/* DESCRIÇÃO */

.objetivos-description {
    margin-top: 6px;

    font-size: 13px;

    color: #64748b;
}


/* BARRA */

.objetivos-progress {
    width: 100%;
    height: 8px;

    margin-top: 20px;

    overflow: hidden;

    border-radius: 20px;

    background: #f1f5f9;
}


.objetivos-progress-fill {
    height: 100%;

    width: 0;

    border-radius: inherit;

    background: #f59e0b;

    transition: width 0.4s ease;
}


/* FOOTER */

.objetivos-footer {
    display: flex;

    justify-content: space-between;

    margin-top: 14px;

    font-size: 12px;

    font-weight: 500;
}


.objetivos-ok,
.objetivos-pendente {
    display: flex;

    align-items: center;

    gap: 5px;
}


.objetivos-ok {
    color: #16a34a;
}


.objetivos-pendente {
    color: #64748b;
}

.objetivos-empty {
    min-height: 105px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    text-align: center;

    color: #94a3b8;

    font-size: 13px;
}


.objetivos-empty i {
    font-size: 24px;

    color: #cbd5e1;
}

/* =========================================
   CONTROLO MENSAL
========================================= */

.autos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}


/* =========================================
   OBJETIVOS
========================================= */

.objetivos-card {
    cursor: pointer;
}


.objetivos-description {
    margin-top: 4px;

    font-size: 13px;

    color: #94a3b8;
}


.auto-progress-bar.objetivos {
    background: #8b5cf6;
}


.objetivos-footer {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 14px;

    font-size: 12px;

    font-weight: 500;
}


.objetivos-ok,
.objetivos-pendente {
    display: flex;

    align-items: center;

    gap: 5px;
}


.objetivos-ok {
    color: #16a34a;
}


.objetivos-pendente {
    color: #f59e0b;
}


/* =========================================
   SEM OBJETIVOS
========================================= */

.objetivos-empty {
    min-height: 110px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

    text-align: center;

    color: #94a3b8;

    font-size: 13px;
}


.objetivos-empty i {
    font-size: 24px;

    opacity: 0.5;
}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 900px) {

    .autos-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   MODAL DASHBOARD
========================================= */

.dashboard-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 24px;

}


.dashboard-modal.active {

    display: flex;

}


/* =========================================
   OVERLAY
========================================= */

.dashboard-modal-overlay {

    position: absolute;

    inset: 0;

    background: rgba(15, 23, 42, 0.65);

    backdrop-filter: blur(5px);

}


/* =========================================
   CONTEÚDO
========================================= */

.dashboard-modal-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1450px;

    max-height: 88vh;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 30px 80px
        rgba(15, 23, 42, 0.30);

}


/* =========================================
   HEADER
========================================= */

.dashboard-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 24px 30px;

    border-bottom:

        1px solid #e2e8f0;

    background:

        linear-gradient(

            135deg,

            #ffffff,

            #f8fafc

        );

}


.modal-eyebrow {

    display: block;

    margin-bottom: 5px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.12em;

    color: #94a3b8;

}


.dashboard-modal-header h2 {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

    color: #0f172a;

}


.dashboard-modal-header p {

    margin: 5px 0 0;

    font-size: 13px;

    color: #64748b;

}


/* =========================================
   BOTÃO FECHAR
========================================= */

.dashboard-modal-close {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 12px;

    background: #f1f5f9;

    color: #64748b;

    cursor: pointer;

    font-size: 18px;

    transition:

        all 0.2s ease;

}


.dashboard-modal-close:hover {

    background: #fee2e2;

    color: #dc2626;

    transform:

        rotate(90deg);

}


/* =========================================
   BODY
========================================= */

.dashboard-modal-body {

    padding: 20px;

    overflow-y: auto;

    background: #f8fafc;

}


/* =========================================

   TABELA

========================================= */

.dashboard-obras-table {

    width: 100%;

    min-width: 1100px;

}

/* =========================================

   HEADER DA TABELA

========================================= */

.dashboard-obras-header {

    display: grid;

    grid-template-columns:

        55px

        minmax(220px, 2fr)

        130px

        130px

        140px

        140px

        100px

        minmax(150px, 1fr);

    gap: 16px;

    align-items: center;

    padding:

        0 20px 12px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #94a3b8;

}


/* =========================================

   LINHA

========================================= */

.dashboard-obras-item {

    display: grid;

    grid-template-columns:

        55px

        minmax(220px, 2fr)

        130px

        130px

        140px

        140px

        100px

        minmax(150px, 1fr);

    gap: 16px;

    align-items: center;

    min-height: 74px;

    margin-bottom: 8px;

    padding: 14px 20px;

    background: #ffffff;

    border:

        1px solid #e2e8f0;

    border-radius: 14px;

    text-decoration: none;

    color: inherit;

    transition:

        transform 0.2s ease,

        box-shadow 0.2s ease,

        border-color 0.2s ease;

}


.dashboard-obras-item:hover {

    transform:

        translateY(-2px);

    border-color:

        #cbd5e1;

    box-shadow:

        0 10px 25px

        rgba(15, 23, 42, 0.08);

}


/* =========================================

   NÚMERO

========================================= */

.modal-numero {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #f1f5f9;

    color: #64748b;

    font-size: 12px;

    font-weight: 700;

}


/* =========================================

   OBRA

========================================= */

.modal-obra-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.modal-obra-info strong {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;

    font-weight: 700;

    color: #0f172a;

}

.modal-obra-info span {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    color: #94a3b8;

}

/* =========================================

   ESTADO

========================================= */

.modal-estado {

    /*display: inline-flex;*/

    align-items: center;

    /*width: fit-content;*/

    padding: 6px 10px;

    text-align: center;

    border-radius: 999px;

    background: #eff6ff;

    color: #2563eb;

    font-size: 11px;

    font-weight: 700;

}


/* =========================================

   PRAZOS

========================================= */

.modal-dias {

    /*display: inline-flex;*/

    text-align: center;

    /*width: fit-content;*/

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 700;

}

.modal-dias.success {

    background: #dcfce7;

    color: #15803d;

}

.modal-dias.warning {

    background: #fef3c7;

    color: #b45309;

}

.modal-dias.danger {

    background: #fee2e2;

    color: #dc2626;

}

.modal-dias.neutral {

    background: #f1f5f9;

    color: #64748b;

}


/* =========================================

   VALORES

========================================= */

.modal-money {

    font-size: 13px;

    font-weight: 700;

    color: #334155;

    white-space: nowrap;

}

/* =========================================

   AUTOS

========================================= */

.modal-autos {

    display: flex;

    align-items: center;

    gap: 8px;

}

.modal-status-icon {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    font-size: 13px;

}

.modal-status-icon.success {

    background: #dcfce7;

    color: #16a34a;

}

.modal-status-icon.danger {

    background: #fee2e2;

    color: #dc2626;

}


/* =========================================
   SETA
========================================= */

.modal-arrow {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    color: #94a3b8;

    transition: 0.2s;

}


.dashboard-obras-item:hover .modal-arrow {

    color: #2563eb;

    transform: translateX(4px);

}


/* =========================================

   EMPTY STATE

========================================= */

.modal-empty {

    min-height: 300px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 14px;

    text-align: center;

    color: #94a3b8;

}

.modal-empty i {

    font-size: 40px;

    color: #cbd5e1;

}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 1100px) {

    .dashboard-obras-header {

        display: none;

    }


    .dashboard-obras-item {

        grid-template-columns:

            50px
            minmax(200px, 2fr)
            130px
            130px;

    }


    .modal-money,
    .modal-autos,
    .modal-arrow {

        display: none;

    }

}


@media (max-width: 700px) {

    .dashboard-modal {

        padding: 12px;

    }


    .dashboard-modal-header {

        padding: 22px;

    }


    .dashboard-modal-header h2 {

        font-size: 24px;

    }


    .dashboard-modal-body {

        padding: 14px;

    }


    .dashboard-obras-item {

        grid-template-columns:

            45px
            1fr;

        gap: 14px;

    }


    .modal-obra-info {

        grid-column: 2;

    }


    .modal-estado {

        grid-column: 2;

        width: fit-content;

    }

}

/* =========================================
   TABELA MODAL
========================================= */

.dashboard-obras-table {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/* =========================================
   HEADER
========================================= */

.dashboard-obras-header {

    display: grid;

    grid-template-columns:

        55px
        minmax(220px, 2fr)
        minmax(140px, 1fr)
        minmax(180px, 1.2fr)
        minmax(160px, 1fr)
        minmax(140px, 1fr)
        35px;

    gap: 18px;

    align-items: center;

    padding:

        8px
        24px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: #94a3b8;

}


/* =========================================
   LINHA
========================================= */

.dashboard-obras-item {

    display: grid;

    grid-template-columns:

        55px
        minmax(220px, 2fr)
        minmax(140px, 1fr)
        minmax(180px, 1.2fr)
        minmax(160px, 1fr)
        minmax(140px, 1fr)
        35px;

    gap: 18px;

    align-items: center;

    min-height: 96px;

    padding:

        16px
        24px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    text-decoration: none;

    color: inherit;

    transition:

        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

}


.dashboard-obras-item:hover {

    transform: translateY(-2px);

    border-color: #cbd5e1;

    box-shadow:

        0 10px 25px
        rgba(15, 23, 42, 0.08);

}


/* =========================================
   NÚMERO
========================================= */

.modal-numero {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #f1f5f9;

    color: #64748b;

    font-size: 14px;

    font-weight: 700;

}


/* =========================================
   OBRA
========================================= */

.modal-obra-info {

    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 0;

}


.modal-obra-info strong {

    font-size: 15px;

    font-weight: 700;

    color: #1e293b;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.modal-obra-info span {

    font-size: 13px;

    color: #94a3b8;

}


/* =========================================
   INFORMAÇÃO DUPLA
========================================= */

.modal-info-dupla {

    display: flex;
    text-align: center;

    flex-direction: column;

    gap: 7px;

}


.modal-info-dupla strong {

    font-size: 14px;

    font-weight: 700;

    color: #1e293b;

}


.modal-info-dupla span {

    font-size: 13px;

    color: #64748b;

}




.modal-dias {

    font-size: 13px;

    font-weight: 600;

}


.modal-dias.neutral {

    color: #64748b;

}


.modal-dias.success {

    color: #16a34a;

}


.modal-dias.warning {

    color: #d97706;

}


.modal-dias.danger {

    color: #dc2626;

}


/* =========================================
   FATURAÇÃO
========================================= */

.modal-financeiro strong {

    color: #1e293b;

}


.modal-financeiro span {

    color: #94a3b8;

}


/* =========================================
   AUTOS
========================================= */

.modal-autos {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.modal-auto-linha {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.modal-auto-linha > span {

    font-size: 12px;

    color: #64748b;

}


/* =========================================
   ICONES AUTOS
========================================= */

.modal-status-icon {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    font-size: 12px;

}


.modal-status-icon.success {

    background: #dcfce7;

    color: #16a34a;

}


.modal-status-icon.danger {

    background: #fee2e2;

    color: #dc2626;

}

/* =========================================

   SETA

========================================= */

.modal-arrow {

    display: flex;

    justify-content: flex-end;

    color: #cbd5e1;

    transition:

        transform 0.2s ease,

        color 0.2s ease;

}

.dashboard-obras-item:hover .modal-arrow {

    color: #2563eb;

    transform:

        translateX(4px);

}

/* =========================================

   OBJETIVO

========================================= */

.modal-objetivo {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.modal-objetivo-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}

.modal-objetivo-percentagem {

    font-size: 12px;

    font-weight: 700;

    color: #f59e0b;

}

.modal-objetivo-percentagem.success {

    color: #16a34a;

}

.modal-objetivo-progress {

    width: 100%;

    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background: #e2e8f0;

}

.modal-objetivo-progress-fill {

    height: 100%;

    border-radius: inherit;

    background: #f59e0b;

}

.modal-objetivo-progress-fill.success {

    background: #16a34a;

}



/* =========================================

   SCROLLBAR

========================================= */

.dashboard-modal-body::-webkit-scrollbar {

    width: 8px;

}

.dashboard-modal-body::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 20px;

}



/* =========================================

   RESPONSIVO

========================================= */

@media (max-width: 1100px) {

    .dashboard-modal-body {

        overflow-x: auto;

    }

}

@media (max-width: 700px) {

    .dashboard-modal {

        padding: 10px;

    }

    .dashboard-modal-content {

        max-height: 94vh;

        border-radius: 16px;

    }

    .dashboard-modal-header {

        padding: 20px;

    }

    .dashboard-modal-header h2 {

        font-size: 20px;

    }

}

.titulo-centro
{
    text-align: center;
}

.dashboard-v2 { margin-bottom: 24px; }
.dashboard-v2 ~ .dashboard-section { display: none; }
.dashboard-v2-kpis, .dashboard-v2-grid { display:grid; gap:16px; }
.dashboard-v2-kpis { grid-template-columns:repeat(4,1fr); }
.dashboard-v2-kpis article, .dashboard-v2-panel { background:#fff; border:1px solid #dfe8f2; border-radius:14px; padding:20px; box-shadow:0 2px 8px rgba(20,52,88,.05); }
.dashboard-v2-kpis span { display:block; color:#475569; font-size:13px; font-weight:700; }
.dashboard-v2-kpis i { color:#2563eb; margin-right:7px; }
.dashboard-v2-kpis strong { display:block; margin-top:14px; color:#102e52; font-size:34px; }
.dashboard-v2-grid { grid-template-columns:1fr 1.35fr .8fr; margin-top:16px; }
.dashboard-v2-panel h2 { margin:0 0 18px; color:#102e52; font-size:17px; }
.financial-summary > strong { font-size:28px; color:#102e52; }
.financial-progress { height:10px; overflow:hidden; margin:24px 0 8px; border-radius:999px; background:#e5edf6; }
.financial-progress span { display:block; height:100%; border-radius:inherit; background:#16a34a; }
.financial-summary p { margin:0; color:#64748b; font-size:13px; }
.status-ring { width:140px; height:140px; margin:4px auto 18px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(#fff 55%,transparent 56%), conic-gradient(#16a34a 0 48%,#2563eb 48% 78%,#f59e0b 78% 100%); }
.status-ring strong { font-size:32px; color:#102e52; }.status-ring span { font-size:11px; color:#64748b; }.works-status ul { padding:0; margin:0; list-style:none; }.works-status li { display:flex; justify-content:space-between; padding:7px 0; color:#475569; font-size:13px; }
@media(max-width:1000px){.dashboard-v2-kpis{grid-template-columns:repeat(2,1fr)}.dashboard-v2-grid{grid-template-columns:1fr 1fr}.works-status{grid-column:span 2}}@media(max-width:650px){.dashboard-v2-kpis,.dashboard-v2-grid{grid-template-columns:1fr}.works-status{grid-column:auto}}
.dashboard-v2-bottom{display:grid;grid-template-columns:1fr 310px;gap:16px;margin-top:16px}.recent-head,.recent-works a{display:grid;grid-template-columns:1fr 130px 90px;gap:14px;align-items:center}.recent-head{padding:0 12px 10px;color:#64748b;font-size:11px;font-weight:800;text-transform:uppercase}.recent-works a{padding:14px 12px;border-top:1px solid #edf2f7;color:#17233b;text-decoration:none}.recent-works a:hover{background:#f8fbff}.recent-works strong,.recent-works small{display:block}.recent-works small{margin-top:3px;color:#94a3b8}.recent-works em{font-style:normal;color:#2563eb;font-size:12px;font-weight:700}.recent-works b{text-align:right;color:#16a34a}.alert{margin:0 0 10px;padding:12px;border-radius:9px;font-size:12px;font-weight:700}.alert i{margin-right:7px}.alert.warning{background:#fff7ed;color:#c2410c}.alert.info{background:#eff6ff;color:#1d4ed8}.alert.success{background:#ecfdf5;color:#15803d}.dashboard-empty{color:#94a3b8;font-size:13px}@media(max-width:1000px){.dashboard-v2-bottom{grid-template-columns:1fr}.dashboard-alerts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dashboard-alerts h2{grid-column:1/-1}.alert{margin:0}}@media(max-width:650px){.recent-head,.recent-works a{grid-template-columns:1fr 80px}.recent-works a b{display:none}.dashboard-alerts{grid-template-columns:1fr}}

/* Dashboard — composição principal */
.main-content { display: flex; flex-direction: column; gap: 20px; }
.main-content .page-header { margin-bottom: 0; }
.dashboard-section { margin: 0; }
.dashboard-section:nth-of-type(3) { order: 1; }
.dashboard-section:nth-of-type(2) { order: 2; }
.dashboard-section:nth-of-type(5) { order: 3; }
.dashboard-section:nth-of-type(1) { order: 4; }
.dashboard-section:nth-of-type(4) { order: 5; }

.dashboard-date { border: 1px solid #dbe6f3; border-radius: 10px; background: #fff; padding: 11px 14px; font-weight: 700; }
.stats-grid { gap: 14px; }
.obras-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card, .chart-card, .resource-card { border: 1px solid #dfe8f2; border-radius: 13px; box-shadow: 0 2px 8px rgba(20, 52, 88, .05); }
.stat-card { min-height: 138px; padding: 18px; }
.stat-card-top { gap: 9px; }
.stat-value { font-size: 32px; }
.financial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chart-card { padding: 20px; }
.chart-container { height: 280px; }
.resources-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .obras-grid, .financial-grid, .resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .obras-grid, .financial-grid, .resources-grid { grid-template-columns: 1fr; }
}

/* =========================================
   GRÁFICO DASHBOARD V2
========================================= */

.dashboard-v2-chart {
    min-width: 0;
}


.dashboard-v2-chart-container {
    position: relative;

    width: 100%;
    height: 260px;

    margin-top: 16px;
}


.dashboard-v2-chart-container canvas {
    display: block;

    width: 100% !important;
    height: 100% !important;
}

/* =========================================
   ALERTAS TOPO
========================================= */

.dashboard-v2-alerts-top {
    display: grid;

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

    gap: 16px;

    margin: 18px 0 20px;
}


.dashboard-alert-top {
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    border-radius: 10px;

    border: 1px solid transparent;
}


.dashboard-alert-top-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    font-size: 15px;
}


.dashboard-alert-top > div:last-child {
    display: flex;
    align-items: baseline;

    gap: 6px;
}


.dashboard-alert-top strong {
    font-size: 20px;
    font-weight: 800;
}


.dashboard-alert-top span {
    font-size: 13px;
    font-weight: 600;
}


/* WARNING */

.dashboard-alert-top.warning {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #c2410c;
}

.dashboard-alert-top.warning
.dashboard-alert-top-icon {
    background: #ffedd5;
}


/* INFO */

.dashboard-alert-top.info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.dashboard-alert-top.info
.dashboard-alert-top-icon {
    background: #dbeafe;
}


/* SUCCESS */

.dashboard-alert-top.success {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
}

.dashboard-alert-top.success
.dashboard-alert-top-icon {
    background: #dcfce7;
}


@media (max-width: 900px) {

    .dashboard-v2-alerts-top {
        grid-template-columns: 1fr;
    }

}

/* =========================================
   EXECUÇÃO FINANCEIRA
========================================= */

.financial-summary {
    display: flex;
    flex-direction: column;
}


.financial-summary h2 {
    margin: 0 0 16px;

    color: #0f2d55;

    font-size: 16px;
    font-weight: 700;
}


/* VALOR PRINCIPAL */

.financial-main-row {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 14px;
}


.financial-main-value {
    color: #0f2d55;

    font-size: clamp(
        22px,
        1.8vw,
        30px
    );

    font-weight: 800;

    line-height: 1.1;

    white-space: nowrap;
}


/* BADGE */

.financial-trend {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
}


.financial-trend.positive {
    background: #dcfce7;

    color: #15803d;
}


.financial-trend i {
    font-size: 8px;
}


/* BARRA */

.financial-progress {
    width: 100%;
    height: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: #e2e8f0;
}


.financial-progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: #16a34a;
}


/* PERCENTAGEM */

.financial-progress-label {
    margin-top: 6px;

    color: #64748b;

    font-size: 11px;
    font-weight: 500;
}


/* DETALHE */

.financial-breakdown {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 20px;
}


.financial-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.financial-breakdown-label {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #475569;

    font-size: 11px;
    font-weight: 600;
}


.financial-breakdown-row > strong {
    color: #334155;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}


/* PONTOS */

.financial-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;
}


.financial-dot.contratado {
    background: #22c55e;
}


.financial-dot.faturado {
    background: #3b82f6;
}


.financial-dot.por-faturar {
    background: #f59e0b;
}

/* =========================================
   ALERTAS DASHBOARD
========================================= */

.dashboard-alertas-section {
    margin: 18px 0 22px;
}

.dashboard-alertas-header {
    margin-bottom: 10px;
}

.dashboard-alertas-header h2 {
    margin: 0 0 2px;

    color: #0f2d55;

    font-size: 15px;
    font-weight: 700;
}

.dashboard-alertas-header p {
    margin: 0;

    color: #94a3b8;

    font-size: 11px;
}

.dashboard-alertas-grid {

    display: grid;

    grid-template-columns:

        repeat(4, minmax(0, 1fr));

    gap: 10px;

}


/* CARD */

.dashboard-alert-card {
    min-height: 64px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    box-sizing: border-box;

    border: 1px solid transparent;
    border-radius: 9px;
}

.dashboard-alert-card > div:last-child {
    min-width: 0;

    display: flex;
    align-items: baseline;

    gap: 6px;
}

.dashboard-alert-card strong {
    font-size: 18px;
    font-weight: 800;

    line-height: 1;
}

.dashboard-alert-card span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.35;
}

.dashboard-alert-card.is-zero span
{
    font-size: 11px;
    text-transform: lowercase !important;
    font-weight: 600;
    line-height: 1.35;
}


/* ÍCONE */

.dashboard-alert-icon {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    font-size: 13px;
}


/* =========================================
   CLICÁVEL
========================================= */

.dashboard-alert-clickable {
    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.dashboard-alert-clickable:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(15, 23, 42, .08);
}


/* =========================================
   VERMELHO
========================================= */

.dashboard-alert-card.danger {
    border-color: #fecaca;

    background: #fef2f2;

    color: #dc2626;
}

.dashboard-alert-card.danger .dashboard-alert-icon {
    background: #fee2e2;

    color: #dc2626;
}


/* =========================================
   LARANJA
========================================= */

.dashboard-alert-card.orange {
    border-color: #fed7aa;

    background: #fff7ed;

    color: #ea580c;
}

.dashboard-alert-card.orange .dashboard-alert-icon {
    background: #ffedd5;

    color: #ea580c;
}


/* =========================================
   AMARELO
========================================= */

.dashboard-alert-card.warning {
    border-color: #fde68a;

    background: #fffbeb;

    color: #b45309;
}

.dashboard-alert-card.warning .dashboard-alert-icon {
    background: #fef3c7;

    color: #b45309;
}


/* =========================================
   AZUL
========================================= */

.dashboard-alert-card.info {
    border-color: #bfdbfe;

    background: #eff6ff;

    color: #2563eb;
}

.dashboard-alert-card.info .dashboard-alert-icon {
    background: #dbeafe;

    color: #2563eb;
}


/* =========================================
   MODAL ALERTAS
========================================= */

.dashboard-alert-modal {
    position: fixed;

    inset: 0;

    z-index: 3000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;

    box-sizing: border-box;

    background: rgba(15, 23, 42, .48);

    backdrop-filter: blur(2px);
}

.dashboard-alert-modal.is-open {
    display: flex;
}


/* CAIXA */

.dashboard-alert-modal-box {
    width: min(720px, 100%);

    max-height: 80vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, .20);
}


/* HEADER */

.dashboard-alert-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 20px;

    border-bottom: 1px solid #e2e8f0;
}

.dashboard-alert-modal-header h3 {
    margin: 0 0 4px;

    color: #0f2d55;

    font-size: 17px;
    font-weight: 750;
}

.dashboard-alert-modal-header p {
    margin: 0;

    color: #64748b;

    font-size: 11px;

    line-height: 1.4;
}


/* FECHAR */

.dashboard-alert-modal-close {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 7px;

    background: #f1f5f9;

    color: #64748b;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.dashboard-alert-modal-close:hover {
    background: #e2e8f0;

    color: #0f172a;
}


/* LISTA */

.dashboard-alert-modal-list {
    overflow-y: auto;

    padding: 6px 20px 14px;
}


/* LINHA DA OBRA */

.dashboard-alert-work {
    display: grid;

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

    align-items: center;

    gap: 18px;

    min-height: 64px;

    border-bottom: 1px solid #f1f5f9;
}

.dashboard-alert-work:last-child {
    border-bottom: 0;
}


/* INFO DA OBRA */

.dashboard-alert-work-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.dashboard-alert-work-info strong {
    overflow: hidden;

    color: #1e293b;

    font-size: 12px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-alert-work-info span {
    color: #94a3b8;

    font-size: 10px;
    font-weight: 500;
}


/* BADGE */

.dashboard-alert-work-status {
    padding: 5px 8px;

    border-radius: 6px;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;
}

.dashboard-alert-work-status.danger {
    background: #fee2e2;

    color: #dc2626;
}

.dashboard-alert-work-status.orange {
    background: #ffedd5;

    color: #ea580c;
}

.dashboard-alert-work-status.warning {
    background: #fef3c7;

    color: #b45309;
}

.dashboard-alert-work-status.info {
    background: #dbeafe;

    color: #2563eb;
}


/* LINK VER OBRA */

.dashboard-alert-work-link {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #2563eb;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition: color .15s ease;
}

.dashboard-alert-work-link:hover {
    color: #1d4ed8;
}

.dashboard-alert-work-link i {
    font-size: 8px;
}


/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 700px) {

    .dashboard-alertas-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-alert-modal {
        padding: 12px;
    }

    .dashboard-alert-modal-box {
        max-height: 88vh;
    }

    .dashboard-alert-work {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 10px;

        padding: 10px 0;
    }

    .dashboard-alert-work-link {
        grid-column: 1 / -1;

        justify-self: flex-start;
    }

}

.dashboard-alert-card.is-zero {
    border-color: #e2e8f0;

    background: #f8fafc;

    color: #94a3b8;

    cursor: default;

    box-shadow: none;
}

.dashboard-alert-card.is-zero .dashboard-alert-icon {
    background: #f1f5f9;

    color: #94a3b8;
}

.dashboard-alert-card.is-zero:hover {
    transform: none;

    box-shadow: none;
}

.dashboard-alert-card.alert-placeholder {
    border: 1px dashed #dbe2ea;

    background: #fafbfc;

    color: #b6c0cc;
}

.dashboard-alert-card.alert-placeholder .dashboard-alert-icon {
    background: #f1f5f9;

    color: #b6c0cc;
}

.dashboard-alert-card.alert-placeholder strong {
    color: #b6c0cc;
}