/* =============================================================
   INTEGRAÇÃO TEMPORAL
============================================================= */

.header-integracao-origem {
    background: var(--primary-blue);
    color: #fff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.header-integracao-origem .title-regiao {
    padding: 18px 20px;
    background: var(--primary-blue-dark);
    display: flex;
    align-items: center;
}
.header-integracao-destino .title-destino {
    padding: 18px 20px;
    background: var(--accent-orange);
    display: flex;
    align-items: center;
}

.header-integracao-origem .nome-regiao {
    padding: 18px 20px;
    font-size: 1.05rem;
    font-weight: 600;
}


.header-integracao-destino {
    background: var(--primary-blue-dark);
    color: #fff;
}

.header-integracao-destino .title-regiao,
.header-integracao-destino .header-ponto-integracao {
    padding: 14px 20px;
    font-weight: 700;
}


.row-detalhe-integracao {
    border-left: 1px solid #e4e7ec;
    border-right: 1px solid #e4e7ec;
    border-bottom: 1px solid #e4e7ec;
    background: #fff;
    transition: background-color .2s ease;
}
.row-detalhe-integracao:nth-child(even) {
    background: #eee;
}
.row-detalhe-integracao:hover {
    background-color: #f7f9fc;
}

.col-regiao-destino,
.col-ponto-integracao {
    padding: 16px 20px;
}

.col-regiao-destino {
    color: #333;
    line-height: 1.5;
}

.col-ponto-integracao {
    color: var(--primary-blue);
    font-weight: 600;
    border-left: 1px solid #e4e7ec;
}


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

@media (max-width: 575.98px) {

    .header-integracao-origem .title-regiao,
    .header-integracao-origem .nome-regiao {
        padding: 14px 15px;
    }

    .header-integracao-destino .title-regiao {
        padding: 12px 15px;
    }

    .col-regiao-destino,
    .col-ponto-integracao {
        padding: 14px 15px;
    }

    .col-ponto-integracao {
        border-left: 0;
        border-top: 1px dashed #e4e7ec;
        background: #f8f9fa;
    }

}