css
.btn-copasa {
    display: inline-block;
    background-color: #15315e; /* azul escuro COPASA */
    color: #ffffff !important;
    padding: 6px 14px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-copasa:hover {
    background-color: #0f2244; /* tom mais escuro no hover */
    color: #ffffff !important;
    text-decoration: none !important;
}



#cancel.btn-primary {
    background-color: #15315e;
    border-color: #15315e;
}




/* ============================================================
   3. BOTÕES DE AÇÃO — Associar Identificador / Matrícula
   ============================================================ */

.btn-copasa-action {
    display: inline-block;
    background-color: #15315e;
    color: #ffffff !important;
    border: 1px solid #15315e;
    border-radius: 3px;
    padding: 5px 14px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.5;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .btn-copasa-action:hover,
    .btn-copasa-action:focus {
        background-color: #1e4d8c;
        border-color: #1e4d8c;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .btn-copasa-action:active {
        background-color: #0f2244;
        border-color: #0f2244;
        color: #ffffff !important;
    }


/* ============================================================
   5. NOTA DE OBRIGATORIEDADE
   ============================================================ */

.listIdentifiers-required-note {
    color: #5a7398;
    font-size: 12px;
    margin-top: 6px;
    font-family: Arial, sans-serif;
}

/* ============================================================
   6. BOTÕES PROSSEGUIR / CANCELAR
   ============================================================ */

.listIdentifiers-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 8px;
}

#btnproceed.btn-primary,
#cancel.btn-primary {
    background-color: #15315e;
    border-color: #15315e;
    font-weight: 600;
    white-space: nowrap;
}

    #btnproceed.btn-primary:hover,
    #cancel.btn-primary:hover {
        background-color: #1e4d8c;
        border-color: #1e4d8c;
    }

/* ============================================================
   7. ABA LOGRADOURO
   ============================================================ */

#logradouro fieldset {
    background-color: #ffffff;
}

#logradouro h4 {
    color: #15315e;
    font-size: 15px;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 2px solid #dce8f7;
    margin-bottom: 18px;
}

#logradouro .control-label {
    font-weight: 600;
    font-size: 13px;
    color: #1a2b42;
}

#logradouro .form-control:focus {
    border-color: #15315e;
    box-shadow: 0 0 0 2px rgba(21, 49, 94, 0.15);
}

#logradouro #btnSave.btn-primary {
    background-color: #15315e;
    border-color: #15315e;
    font-weight: 700;
    padding: 7px 26px;
}

    #logradouro #btnSave.btn-primary:hover {
        background-color: #1e4d8c;
        border-color: #1e4d8c;
    }

#divMessage {
    background-color: #dce8f7 !important;
    border: 1px solid #c8d8ec;
    border-radius: 3px;
    padding: 10px 16px;
}

/* ============================================================
   8. RESPONSIVIDADE
   ============================================================ */

/* --- Tablet: 576px a 991px --- */
@media (max-width: 991px) {

    /* Cabeçalho: protocolo vai para segunda linha */
    .highlightsTitle {
        row-gap: 10px;
    }

        /* Protocolo ocupa linha inteira abaixo do título */
        .highlightsTitle .col-auto.listIdentifiers-Protocol:first-of-type {
            flex: 0 0 100%;
            order: 3;
        }

    #protocol {
        width: 180px;
    }
}

/* --- Mobile: até 575px --- */
@media (max-width: 575px) {

    /* Cabeçalho em coluna única */
    .highlightsTitle {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        /* Título ocupa linha toda */
        .highlightsTitle .col {
            flex: 0 0 100%;
        }

    /* Protocolo: label e input em linha */
    .listIdentifiers-Protocol {
        flex-wrap: wrap;
        gap: 4px;
    }

    #protocol {
        width: 100%;
        flex: 1;
    }

    /* Botões de ação: largura total, empilhados */
    .btn-copasa-action {
        display: block;
        width: 100%;
        text-align: center;
        padding: 8px 14px;
    }

    /* Abas: texto menor para caber na tela */
    .nav-tabs .nav-link {
        font-size: 12px;
        padding: 8px 10px;
    }

    /* Botões Prosseguir/Cancelar: ocupam toda a largura */
    .listIdentifiers-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .listIdentifiers-actions .btn {
            width: 100%;
            text-align: center;
        }

    /* Logradouro: campos empilhados */
    #logradouro .col-md {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #logradouro #btnSave {
        width: 100%;
    }

    #divMessage {
        width: 100% !important;
    }
}