.m-6 { margin: 4rem !important; }
.mt-6, .my-6 { margin-top: 4rem !important; }
.mb-6, .my-6 { margin-bottom: 4rem !important; }
.ms-6, .mx-6 { margin-left: 4rem !important; }
.me-6, .mx-6 { margin-right: 4rem !important; }
.p-6 { padding: 4rem !important; }
.pt-6, .py-6 { padding-top: 4rem !important; }
.pb-6, .py-6 { padding-bottom: 4rem !important; }
.ps-6, .px-6 { padding-left: 4rem !important; }
.pe-6, .px-6 { padding-right: 4rem !important; }

/* Nivel 7 = 5rem */
.m-7 { margin: 5rem !important; }
.mt-7, .my-7 { margin-top: 5rem !important; }
.mb-7, .my-7 { margin-bottom: 5rem !important; }
.ms-7, .mx-7 { margin-left: 5rem !important; }
.me-7, .mx-7 { margin-right: 5rem !important; }
.p-7 { padding: 5rem !important; }
.pt-7, .py-7 { padding-top: 5rem !important; }
.pb-7, .py-7 { padding-bottom: 5rem !important; }
.ps-7, .px-7 { padding-left: 5rem !important; }
.pe-7, .px-7 { padding-right: 5rem !important; }

/* Nivel 8 = 6rem */
.m-8 { margin: 6rem !important; }
.mt-8, .my-8 { margin-top: 6rem !important; }
.mb-8, .my-8 { margin-bottom: 6rem !important; }
.ms-8, .mx-8 { margin-left: 6rem !important; }
.me-8, .mx-8 { margin-right: 6rem !important; }
.p-8 { padding: 6rem !important; }
.pt-8, .py-8 { padding-top: 6rem !important; }
.pb-8, .py-8 { padding-bottom: 6rem !important; }
.ps-8, .px-8 { padding-left: 6rem !important; }
.pe-8, .px-8 { padding-right: 6rem !important; }

/* =========================================================
   FIN: Extensión global de espaciados Bootstrap
   ========================================================= */

/* =========================================================
   INICIO: Modificación global de sombras Bootstrap
   ========================================================= */

.shadow-sm { box-shadow: 0rem 0rem 1rem rgba(var(--sombra), 0.2) !important; }
.shadow { box-shadow: 0rem 0rem 1.5rem rgba(var(--sombra), 0.2) !important; }
.shadow-lg { box-shadow: 0rem 0rem 3rem rgba(var(--sombra), 0.2) !important; }
.shadow-none { box-shadow: none !important; }

/* =========================================================
   FIN: Modificación global de sombras Bootstrap
   ========================================================= */

/* =========================================================
   INICIO: Eliminación global del focus visual Bootstrap
   ========================================================= */

.btn:focus,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus,
.dropdown-toggle:focus,
.nav-link:focus,
.page-link:focus,
.modal button:focus,
.navbar-toggler:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   FIN: Eliminación global del focus visual Bootstrap
   ========================================================= */

/* =========================================================
   INICIO: Modificación global de redondeados Bootstrap
   ========================================================= */

.rounded { border-radius: var(--radio-2) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: var(--radio-1) !important; }
.rounded-2 { border-radius: var(--radio-2) !important; }
.rounded-3 { border-radius: var(--radio-3) !important; }
.rounded-4 { border-radius: var(--radio-4) !important; }
.rounded-5 { border-radius: var(--radio-5) !important; }
.rounded-top { border-top-left-radius: var(--radio-2) !important; border-top-right-radius: var(--radio-2) !important; }
.rounded-bottom { border-bottom-left-radius: var(--radio-2) !important; border-bottom-right-radius: var(--radio-2) !important; }
.rounded-start { border-top-left-radius: var(--radio-2) !important; border-bottom-left-radius: var(--radio-2) !important; }
.rounded-end { border-top-right-radius: var(--radio-2) !important; border-bottom-right-radius: var(--radio-2) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }
.btn { border-radius: 50rem !important; padding: 0.4rem 1.3rem !important; }
.modal-content {
    border: 0 !important;
    border-radius: var(--radio-5) !important;
    padding-right: 1rem;
    padding-left: 1rem;
}

.modal-header {
    position: relative;
    justify-content: center;
}

.modal-header .btn-close {
    position: absolute;
    right: 1rem;
}

.modal-title {
    text-align: center;
}
.modal-backdrop {
    background-color: var(--marino1) !important;
    background-color: color-mix(in srgb, var(--marino1) 50%, transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.modal-backdrop.show {
    opacity: 1 !important;
}

/* =========================================================
   FIN: Modificación global de redondeados Bootstrap
   ========================================================= */

/* =========================================================
   INICIO: Eliminación de sombra de foco en formularios Bootstrap
   ========================================================= */

.form-control:focus { border-color: var(--primario) !important; box-shadow: none !important; }
.form-select:focus { border-color: var(--primario) !important; box-shadow: none !important; }
.form-check-input:focus { border-color: var(--primario) !important; box-shadow: none !important; }
.form-range:focus { border-color: var(--primario) !important; box-shadow: none !important; }

/* =========================================================
   FIN: Eliminación de sombra de foco en formularios Bootstrap
   ========================================================= */

/* =========================================================
   INICIO: Modificación global del color de selección de texto
   ========================================================= */

::selection { background-color: var(--seleccion-fondo); color: var(--seleccion-texto); }
::-moz-selection { background-color: var(--seleccion-fondo); color: var(--seleccion-texto); }

/* =========================================================
   FIN: Modificación global del color de selección de texto
   ========================================================= */

/* =========================================================
   INICIO: Estado activado de checkbox y radio Bootstrap
   ========================================================= */

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

/* =========================================================
   FIN: Estado activado de checkbox y radio Bootstrap
   ========================================================= */

/* =========================================================
   INICIO: Estilo global de enlaces
   ========================================================= */

a { color: var(--primario); text-decoration: none; }


/* =========================================================
   FIN: Estilo global de enlaces
   ========================================================= */

/* =========================================================
   INICIO: Fondo de autocompletado en formularios Bootstrap
   ========================================================= */

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { background-color: var(--bs-body-bg) !important; -webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset !important; -webkit-text-fill-color: var(--bs-body-color) !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
input:autofill, textarea:autofill, select:autofill { background-color: var(--bs-body-bg) !important; box-shadow: 0 0 0 1000px var(--bs-body-bg) inset !important; color: var(--bs-body-color) !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

/* =========================================================
   FIN: Fondo de autocompletado en formularios Bootstrap
   ========================================================= */

/* =========================================================
   INICIO: Alertas Bootstrap como texto simple
   ========================================================= */

.alert { background-color: transparent !important; border: 0 !important; padding: 0 !important; }
.alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, .alert-dark { color: var(--negro) !important; }
.alert > i.icon-alerta { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-right: 0.4rem; border-radius: 50%; color: var(--blanco) !important; font-size: 0.85rem; line-height: 1 !important; vertical-align: middle; }
.alert-primary > i.icon-alerta { background-color: var(--primario); }
.alert-secondary > i.icon-alerta { background-color: var(--negro); }
.alert-success > i.icon-alerta { background-color: var(--verde1); }
.alert-danger > i.icon-alerta { background-color: var(--rojo1); }
.alert-warning > i.icon-alerta { background-color: var(--naranja1); }
.alert-info > i.icon-alerta { background-color: var(--azul1); }
.alert-light > i.icon-alerta, .alert-dark > i.icon-alerta { background-color: var(--negro); }

/* =========================================================
   FIN: Alertas Bootstrap como texto simple
   ========================================================= */

/* =========================================================
   INICIO: Toast global del sitio
   ========================================================= */

.toast-sitio { min-width: min(24rem, calc(100vw - 2rem)); background-color: var(--azul1); border: 0; border-radius: var(--radio-3); box-shadow: none; color: var(--blanco); }
.toast-sitio .toast-body { padding: .75rem; }
.toast-sitio.toast-success { background-color: var(--verde1); }
.toast-sitio.toast-danger { background-color: var(--rojo1); }
.toast-sitio.toast-warning { background-color: var(--naranja1); }
.toast-sitio.toast-info { background-color: var(--azul1); }
.toast-sitio .btn-close { filter: brightness(0) invert(1); }

/* =========================================================
   FIN: Toast global del sitio
   ========================================================= */

/* =========================================================
   INICIO: Botones personalizados del sitio
   ========================================================= */



/* =========================================================
   FIN: Botones personalizados del sitio
   ========================================================= */

/* =========================================================
   INICIO: Tamaño de label flotante con contenido
   ========================================================= */

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { font-size: 0.875rem !important; }

/* =========================================================
   FIN: Tamaño de label flotante con contenido
   ========================================================= */

/* =========================================================
   INICIO: Botón de contraseña integrado en inicio de sesión
   ========================================================= */

.input-group:has(> button[data-password-toggle]) { position: relative; }
.input-group:has(> button[data-password-toggle]) .form-floating { width: 100%; }
.input-group:has(> button[data-password-toggle]) .form-control { padding-right: 3.5rem; border-radius: var(--radio-2) !important; }
.input-group:has(> button[data-password-toggle]) > button[data-password-toggle] { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: 3rem; padding: 0; border: 0 !important; background: transparent !important; color: var(--negro) !important; box-shadow: none !important; }
.input-group:has(> button[data-password-toggle]) > button[data-password-toggle]:hover, .input-group:has(> button[data-password-toggle]) > button[data-password-toggle]:focus { background: transparent !important; color: var(--primario) !important; box-shadow: none !important; }

/* =========================================================
   FIN: Botón de contraseña integrado en inicio de sesión
   ========================================================= */

/* =========================================================
   INICIO: Acordeón de servicios HOME
   ========================================================= */

.accordion-button,
.accordion-button:not(.collapsed) {
    border: 0;
    border-radius: 50rem !important;
}

.accordion-item { border: 0; overflow: visible; }

.accordion-button::before {
    width: 12px;
    height: 12px;
    margin-right: 0.75rem;
    flex: 0 0 12px;
    border-radius: 50%;
    background-color: var(--azul1);
    content: '';
}
.accordion-item + .accordion-item { margin-top: 15px; }
.accordion-button,
.accordion-button:not(.collapsed) { background-color: var(--gris2) !important; }

/* =========================================================
   FIN: Acordeón de servicios HOME
   ========================================================= */

/* =========================================================
   INICIO: Menú desplegable Bootstrap
   ========================================================= */

.dropdown-menu {
    border: 0 !important;
    border-radius: var(--radio-4) !important;
    box-shadow: 0 0 1rem rgba(var(--sombra), 0.2) !important;
}

.dropdown-menu-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

.dropdown-menu .dropdown-item {
    padding-top: 0.50rem;
    padding-bottom: 0.50rem;
}

/* =========================================================
   INICIO: Ancho global de container Bootstrap
   ========================================================= */

.container {
    width: 100% !important;
    max-width: 1200px !important;
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    .pt-8,
    .py-8 {
        padding-top: 3rem !important;
    }
}

/* =========================================================
   FIN: Ancho global de container Bootstrap
   ========================================================= */

/* =========================================================
   FIN: Menú desplegable Bootstrap
   ========================================================= */