.fw-blue {
    color: #041B81;
}

.fw-yellow {
    color: #FFDE58;
}

.fw-white {
    color: #fff;
}

.fw-turquoise {
    color: #21AFAF;
}

.fw-black {
    color: #000;
}


@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        /* position: absolute;
        margin-top: 2.2rem;*/
    }
}

.item-space {
    padding: .8rem 1rem;
}

.btn-pdf {
    background-color: #d32f2f; /* Rojo PDF */
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-pdf:hover {
        background-color: #b71c1c;
    }

    .btn-pdf i {
        font-size: 18px;
    }


.social-list {
    display: flex;
    gap: 2rem; /* separación entre iconos */
    align-items: center;
}

    .social-list i {
        font-size: 1.6rem;
    }

.btn-primary {
}

.btn-cancel {
    background-color: #6c757d;
    color: #fff;
    border: 1px solid #6c757d;
    padding: 15px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    display: inline-block;
    width: 100%;
}

    .btn-cancel i {
        padding: 0 .4rem;
    }

    .btn-cancel:hover {
        background-color: #fff;
        border: 1px solid #6c757d;
        color: #6c757d;
    }

.btn-blue {
    background-color: #535999;
    color: #fff;
    border: 1px solid #535999;
    padding: 15px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    display: inline-block;
    width: 100%;
}

    .btn-blue i {
        padding: 0 .4rem;
    }

    .btn-blue:hover {
        background-color: #fff;
        border: 1px solid #535999;
        color: #535999;
    }

.n-width {
    width: auto;
}

.btn-blue-nw {
    background-color: #535999;
    color: #fff;
    border: 1px solid #535999;
    padding: 15px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    display: inline-block;
}

.btn-blue i {
    padding: 0 .4rem;
}

.btn-blue:hover {
    background-color: #fff;
    border: 1px solid #535999;
    color: #535999;
}

.line-container {
    display: flex; /* Utilizamos flexbox */
    align-items: center; /* Centra el texto verticalmente */
    justify-content: center; /* Centra el texto horizontalmente */
    position: relative;
    width: 100%;
    margin: 10px 0 0px;
}

    .line-container::before,
    .line-container::after {
        content: ''; /* Contenido vacío para crear las líneas */
        flex-grow: 1; /* Hace que las líneas se expandan y ocupen todo el espacio */
        border-bottom: 1px solid #9E9E9E; /* Crea la línea */
        margin: 0 10px; /* Espacio entre las líneas y el texto */
    }

.line-text {
    background: #fff; /* Fondo blanco detrás del texto */
    padding: 0 10px; /* Añade espacio entre el texto y la línea */
    color: #696969;
}

.is-invalid {
    border-color: #dc3545;
}

/* Contenedor (Bootstrap ya usa .form-check) */
.form-check {
    position: relative;
}





/* 1) Oculta el checkbox real (pero sigue siendo clickeable por el label) */
.form-check-input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 22px;
    height: 22px;
    margin: 0;
}

    /* 2) El cuadrito custom se dibuja sobre el label */
    .form-check-input[type="checkbox"] + .form-check-label {
        position: relative;
        padding-left: 34px; /* espacio para el cuadrito */
        cursor: pointer;
        top: 0; /* quita el desplazamiento raro */
        color: #000; /* tu texto */
        font-weight: normal; /* como lo quieres en el label */
    }

        /* Cuadro */
        .form-check-input[type="checkbox"] + .form-check-label::before {
            content: "";
            width: 22px;
            height: 22px;
            border-radius: 2px;
            border: 1px solid #4682b4;
            background: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }

    /* Check cuando está marcado */
    .form-check-input[type="checkbox"]:checked + .form-check-label::before {
        background-color: #4682b4;
        background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px;
    }




/* Estilo para el input de tipo radio con clase específica */
input[type='radio'].rad-opcion {
    /*opacity: 0;*/ /* Ocultar el radio button original */
    /*position: absolute;*/ /* Para no interferir en el flujo del layout */
    cursor: pointer;
    width: 18px; /* Asegurarse de que no afecte el espacio del layout */
    height: 18px; /* Asegurarse de que no afecte el espacio del layout */
}

    /* Estilo para el radio button personalizado con :before */
    input[type='radio'].rad-opcion + label:before {
        content: '';
        width: 22px; /* Tamaño del radio button */
        height: 22px; /* Tamaño del radio button */
        border-radius: 50%; /* Hacerlo redondo */
        position: relative;
        background-color: white;
        border: 2px solid #4682b4; /* Color del borde */
        display: inline-block;
        transition: background-color 0.3s ease; /* Transición suave */
        cursor: pointer;
        visibility: visible;
        top: 0px;
        left: 0px;
        z-index: 1000;
    }

    /* Estilo cuando el radio button está marcado */
    input[type='radio'].rad-opcion:checked + label:before {
        background-color: #4682b4; /* Fondo azul cuando está marcado */
        background-image: url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-checkmark.svg'); /* Icono de check */
        background-repeat: no-repeat;
        background-position: center;
        background-size: 14px; /* Tamaño del icono */
        border-radius: 50%; /* Mantenerlo redondo */
        color: white;
        z-index: 1000;
    }

    /* Estilo del label que contiene el texto */
    input[type='radio'].rad-opcion + label {
        display: inline-block;
        cursor: pointer;
        text-indent: 0px;
        padding-left: 35px; /* Espacio para que el label no se superponga con el radio button */
        color: #28a745;
        vertical-align: middle; /* Alinea el label con el radio button */
        position: relative;
        font-weight: bold;
        top: 5px;
        z-index: 1000;
    }
/*Tablas*/

table td,
table th {
    vertical-align: middle;
}

table thead th {
    background-color: #221e5b !important; /* azul */
    color: #fff;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #F5F2FC !important; /* tu color */
}

table tbody tr:nth-of-type(even) {
    background-color: #CCC5DB;
}

/*Final de tablas*/


.lista-row {
    list-style: disc; /* viñetas */
    padding-left: 1.5rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* clave para responsive */
    gap: 1rem 2rem; /* espacio entre items */
}

    .lista-row li {
        min-width: 150px; /* controla el salto de línea */
    }

label {
    color: #221e5b;
}

.text-justify {
    text-align: justify;
}

.simple-list {
    list-style-type: disc;
    /*margin-left: 20px;*/
    font-size: 16px;
}

    .simple-list li {
        margin-bottom: 10px;
    }

.number-list {
    font-size: 16px;
    color: #003366;
}

    .number-list li {
        margin-bottom: 10px;
    }

.horizontal-list {
    list-style-type: disc; /* Elimina las viñetas */
    padding: 0;
    display: flex; /* Usamos Flexbox para alinearlos en una fila */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en la siguiente línea si no caben */
    width: 100%;
}

    .horizontal-list li {
        margin-right: 20px; /* Espacio entre los elementos */
        margin-left: 20px;
    }


/* Estilos generales para la lista */
.logo-list {
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

    /* Estilos para cada logo */
    .logo-list .logo {
        width: 100px; /* Tamaño fijo */
        height: 100px; /* Mantiene la proporción cuadrada */
        object-fit: contain; /* Ajusta la imagen sin distorsionar */
        margin: 10px;
        transition: transform 0.3s ease; /* Animación al pasar el mouse */
        border-radius: 0.5rem; /* Redondea los bordes */
    }

        /* Efecto al pasar el mouse */
        .logo-list .logo:hover {
            transform: scale(1.1); /* Aumenta el tamaño del logo */
        }

.radio-group {
    display: flex;
    flex-wrap: wrap;
}

    .radio-group label {
        width: 50%; /* Establece dos columnas */
        margin-bottom: 10px;
    }

.radio-column {
    display: flex;
    flex-wrap: wrap;
}

    .radio-column label {
        width: 100%; /* Establece dos columnas */
        margin-bottom: 10px;
    }

/* Responsividad: Ajuste del tamaño en pantallas más pequeñas */
@media (max-width: 768px) {
    .logo-list .logo {
        width: 80px; /* Ajusta el tamaño de los logos en pantallas más pequeñas */
        height: 80px;
    }
}

@media (max-width: 480px) {
    .logo-list .logo {
        width: 60px; /* Ajusta aún más el tamaño en pantallas más pequeñas */
        height: 60px;
    }
}