.navbar {
    background-color: #1861ac;
}

.datos-colegiado {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.datos-colegiado__principal {
    flex: 1 1 auto;
    min-width: 0;
}

.datos-colegiado__lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
}

.datos-colegiado__fila {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
}

.datos-colegiado__etiqueta {
    margin: 0;
    font-weight: 600;
}

.datos-colegiado__valor {
    min-width: 0;
    margin: 0;
}

.dato-contacto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    align-items: start;
    width: 100%;
}

.dato-contacto__valor {
    min-width: 0;
}

/*
 * Se evita el float y el margen negativo que Bootstrap aplica
 * normalmente a .form-check-input.
 */
.dato-contacto__opcion {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

.dato-contacto__checkbox {
    float: none;
    flex: 0 0 auto;
    margin: 0.2rem 0 0;
}

.dato-contacto__texto-check {
    min-width: 0;
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    line-height: 1.35;
    cursor: pointer;
}

.dato-contacto__checkbox:disabled + .dato-contacto__texto-check {
    cursor: default;
    opacity: 0.65;
}

.datos-colegiado__aviso {
    margin-top: 0.75rem;
    margin-left: 12rem;
}

.datos-colegiado__acciones {
    flex: 0 0 auto;
}

    .datos-colegiado__acciones .btn {
        width: 100%;
        white-space: nowrap;
    }

/*
 * A partir de lg:
 * - datos a la izquierda;
 * - botón en la esquina superior derecha;
 * - correo/teléfono y sus checks en horizontal.
 */
@media (min-width: 992px) {
    .datos-colegiado {
        flex-direction: row;
        align-items: flex-start;
    }

    .datos-colegiado__acciones {
        display: flex;
        justify-content: flex-end;
    }

        .datos-colegiado__acciones .btn {
            width: auto;
        }
}

/*
 * Por debajo de lg se apilan el valor y el check para evitar
 * columnas excesivamente estrechas.
 */
@media (max-width: 991.98px) {
    .dato-contacto {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * En móvil también se apilan la etiqueta y el contenido.
 */
@media (max-width: 575.98px) {
    .datos-colegiado__fila {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.2rem;
    }

    .datos-colegiado__etiqueta {
        font-size: 0.875rem;
    }

    .datos-colegiado__aviso {
        margin-left: 0;
    }
}