:root {
    /*base*/
    --azul-base: 181, 56%;
    --azul: var(--azul-base), 42%;

    /*normal*/
    --azul-normal: hsl(var(--azul-base), 42%);

    /*claro*/
    --azul-claro: hsl(var(--azul-base), 62%);

    /*oscuro*/
    --azul-dark: hsl(var(--azul-base), 32%);
    --azul-darker: hsl(var(--azul-base), 32%);

    /*transparencia*/
    --azul-10: hsla(var(--azul), .1);
    --azul-20: hsla(var(--azul), .2);
    --azul-30: hsla(var(--azul), .3);
    --azul-40: hsla(var(--azul), .4);
    --azul-50: hsla(var(--azul), .5);
    --azul-60: hsla(var(--azul), .6);
    --azul-70: hsla(var(--azul), .7);
}

/*azul*/
/*#0033FF*/

/*verde*/
/*#61CE70*/

.text-azul {
    color: #306684 !important;
}

.text-naranja {
    color: #FFA500 !important;
}

.text-morado {
    color: #af00ff !important;
}

.text-magenta {
    color: #ff00ff !important;
}

.bg-naranja {
    background-color: #FFA500 !important;
}

.bg-morado {
    background-color: #af00ff !important;
}

.bg-magenta {
    background-color: #ff00ff !important;
}

.bg-naranja.bg-opacity-25{
    background-color: hsla(39, 100%, 50%, 0.25) !important;
}

.bg-morado.bg-opacity-25{
    background-color: hsla(281, 100%, 50%, 0.25) !important;
}

.bg-azul-oscuro.bg-opacity-25{
    background-color: hsla(240, 100%, 10%, 0.25) !important;
}

.bg-magenta.bg-opacity-25{
    background-color: hsla(300, 100%, 50%, 0.25) !important;
}

.bg-azul.bg-opacity-10{
    background-color: var(--azul-10) !important;
}

.bg-azul.bg-opacity-25{
    background-color: var(--azul-30) !important;
}


.link-azul {
    color: var(--azul-normal) !important;
}

.link-azul:hover {
    color: var(--azul-dark) !important;
}

.bg-azul {
    background-color: var(--azul-normal) !important;
}
.bg-azul-claro {
    background-color: var(--azul-claro) !important;
}
.bg-azul-dark {
    background-color: var(--azul-dark) !important;
}
.bg-azul-darker {
    background-color: var(--azul-darker) !important;
}
.bg-azul-10 {
    background-color: var(--azul-10) !important;
}
.bg-azul-20 {
    background-color: var(--azul-20) !important;
}
.bg-azul-30 {
    background-color: var(--azul-30) !important;
}
.bg-azul-40 {
    background-color: var(--azul-40) !important;
}
.bg-azul-50 {
    background-color: var(--azul-50) !important;
}
.bg-azul-60 {
    background-color: var(--azul-60) !important;
}


.btn-azul {
    background-color: var(--azul-normal) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
}

.btn-azul:hover {
    background-color: var(--azul-dark) !important;
}

.btn-azul:focus-visible {
    box-shadow: 0 0 0 4px var(--azul-30) !important;
}


.btn-azul:active:hover {
    background-color: var(--azul-darker) !important;
    color: #fff !important;
}

.btn-azul:active {
    background-color: var(--azul-darker) !important;
    color: #fff !important;
}

.btn-outline-azul {
    background-color: transparent !important;
    color: var(--azul-normal) !important;
    border: 1px solid var(--azul-normal) !important;
}

.btn-outline-azul:hover {
    background-color: var(--azul-normal) !important;
    color: #fff !important;
}

.btn-outline-azul:active {
    background-color: var(--azul-dark) !important;
    color: #fff !important;
}

.btn-outline-azul:focus-visible {
    box-shadow: 0 0 0 4px var(--azul-30) !important;
}

.btn-outline-azul:active:hover {
    background-color: var(--azul-dark) !important;
}

.btn-table {
    background-color: #f8f9fa !important;
    border: solid 1px #d6d6d6 !important;
    color: var(--azul-normal) !important;
}

.btn-table:hover {
    background-color: var(--azul-10) !important;
    border : solid 1px var(--azul-20) !important;
    color: var(--azul-normal) !important;
}

.btn-table:active {
    background-color: var(--azul-20) !important;
    border : solid 1px var(--azul-30) !important;
    color: var(--azul-normal) !important;
}

.btn-table:active:hover {
    background-color: var(--azul-20) !important;
    border : solid 1px var(--azul-30) !important;
    color: var(--azul-normal) !important;
}

.btn-table.active {
    background-color: var(--azul-30) !important;
    border : solid 1px var(--azul-40) !important;
    color: var(--azul-dark) !important;
    font-weight: 600;
}

.btn-table.active:hover {
    background-color: var(--azul-40) !important;
    border : solid 1px var(--azul-50) !important;
    color: var(--azul-dark) !important;
}

.btn-table.active:active {
    background-color: var(--azul-50) !important;
    border : solid 1px var(--azul-60) !important;
    color: var(--azul-dark) !important;
}

.btn-table.active:active:hover {
    background-color: var(--azul-50) !important;
    border : solid 1px var(--azul-60) !important;
    color: var(--azul-dark) !important;
}

.btn-link {
    --bs-btn-color: var(--azul-normal);
    --bs-btn-hover-color: var(--azul-dark);
    --bs-btn-active-color: var(--azul-dark);
    --bs-btn-disabled-color: #6c757d;
    text-decoration: underline;
}

.btn-link:focus-visible{
    box-shadow: 0 0 0 0.25rem var(--azul-30);
}

.input-group-text{
    background-color: #f8f9fa !important;
    border: solid 1px #d6d6d6 !important;
    color: var(--azul-normal) !important;
}
.input-group-text.active{
    background-color: var(--azul-30) !important;
    border : solid 1px var(--azul-40) !important;
    color: var(--azul-dark) !important;
    font-weight: 600;
}

.badge.bg-azul-outline{
    background-color: #f8f9fa !important;
    border: solid 1px #d6d6d6 !important;
    color: var(--azul-normal) !important;
}

.form-check-input:checked {
    background-color: var(--azul-normal) !important;
    border-color: var(--azul-normal) !important;
}

.form-check-input:focus {
    border-color: var(--azul-20) !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--azul-30);
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}



/*DROPDOWN*/

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--azul-normal) !important;
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--azul-10) !important;
}

/*FORM INPUT*/
.form-control:focus {
    color: var(--azul-darker) !important;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 0.25rem var(--azul-30);
}

.form-select:focus {
    color: var(--azul-darker) !important;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 0.25rem var(--azul-30);
}

.border-azul {
    --bs-border-opacity: 1;
    border-color: hsla(var(--azul), var(--bs-border-opacity)) !important;
}

.pointer {
    cursor: pointer !important;
}

.h-min-100vh {
    min-height: 100vh;
}

body {
    background-color: #f3f7fa;
}

th {
    font-weight: 600 !important;
}

table {
    width: 100% !important;
}

.contenedor {
    background-color: white;
    border-radius: 0.7rem;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.titulo {
    text-transform: uppercase;
    font-weight: 700;
    font-size: calc(1.275rem + .3vw);
    color: var(--azul-normal);
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .titulo {
        font-size: 1.5rem;
    }
}

.dt-buttons {
    float: left !important;
    display: flex;
    gap: .3rem;
    margin-bottom: 1rem !important;
}

.dataTables_filter{
    margin-bottom: 1rem !important;
}

.select-checkbox {
    width: 0 !important;
   display: table-cell !important;
    vertical-align: middle !important;
    max-width: 20px !important;
}

.select-checkbox input {
    margin: 0 !important;
    position: relative !important;
}

.text-wrap{
    word-break: break-all;
}

table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:before {
    width: 1em !important;
    height: 1em !important;
    margin-left: -8px !important;
    margin-top: 0 !important;
    border: 1px solid rgba(0,0,0,.25) !important;
    border-radius: .25em !important;
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

table.dataTable>tbody>tr.selected>td.select-checkbox:after, table.dataTable>tbody>tr.selected>th.select-checkbox:after {

    width: 1em !important;
    height: 1em !important;
    margin-left: -11px !important;
    margin-top: 0 !important;
    position: absolute !important;
    display: block !important;
    top: 50% !important;
    transform: translateY(-50%) !important;


    content: " " !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;

}

.pagination {
    --bs-pagination-color: var(--azul-normal);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: #dee2e6;
    --bs-pagination-hover-color: var(--azul-normal);
    --bs-pagination-hover-bg: var(--azul-10);
    --bs-pagination-hover-border-color: var(--azul-20);
    --bs-pagination-focus-color: var(--azul-normal);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--azul-20);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--azul-normal);
    --bs-pagination-active-border-color: var(--azul-normal);
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #dee2e6;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.residencia1{
    width: 43% !important;
}

.residencia2-3{
    width: 28.4% !important;
}

.col-1-variable-width {

    width: 12.6%;
}

.profile-pic-container{
    width: 7rem;
    height: 7rem;
    max-width: 7rem;
    max-height: 7rem;
}

.img-fluid {
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 576px) {
    .residencia1{
        width: 100% !important;
    }

    .residencia2-3{
        width: 100% !important;
    }

    .profile-pic-container{
        width: 8rem;
        height: 8rem;
        max-width: 8rem;
        max-height: 8rem;
    }

    .col-1-variable-width {
        width: 25%;
    }
}

/*change mouse select color*/
*::selection {
    background-color: var(--azul-normal);
    color: white;
}

.educacion{
    display: none !important;
    opacity: 0 !important;
}

.educacion.show{
    display: block !important;
    opacity: 1 !important;
}

.text-bg-azul {
    color: #fff!important;
    background-color: var(--azul-normal)!important;
}

.text-bg-azul.hover:hover, .bg-azul.hover:hover {
    background-color: var(--azul-dark)!important;
}

.text-bg-white{
    color: #1a1e21 !important;
    background-color: #fff !important;
}
.text-bg-white.hover:hover, .bg-white.hover:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

.hover{
    transition: all .10s ease-in-out;
}

.boxCheckboxInput{
    display: none !important;
}

.boxCheckboxInput + .boxCheckboxLabel {
    user-select: none;
    cursor: pointer;
}

.boxCheckboxInput:checked + .boxCheckboxLabel {
    background-color: var(--azul-30) !important;
    --bs-border-opacity: 1;
    border-color: hsla(var(--azul), var(--bs-border-opacity)) !important;
    user-select: none;
    cursor: pointer;
}

.tooltip-inner {
    white-space: pre-line; /* permite saltos de línea dentro del tooltip */
}

.form-check-input.no-color{
    background-color: var(--azul-normal) !important;
    border-color: var(--azul-normal) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
.form-check-input.no-color:focus{
    background-color: var(--azul-normal) !important;
    border-color: var(--azul-normal) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.dt-button-collection{
    padding: 0.5rem  0 !important;
    box-shadow: none !important;
    border-radius: 0.375rem !important;
    border: 1px solid rgba(0, 0, 0, 0.175) !important;
}

.dropdown-item.active, .dropdown-item:active {
    color: var(#fff) !important;
    text-decoration: none !important;
    background-color: var(--azul-normal) !important;
}