:root {
    /* colores personalizados */
    --color-primario: #e40613;  
    --color-secundario: #0e4194;
    
    --color-terciario1: #bb2142;
    --color-terciario2: #006db7;
    --color-terciario3: #012758;
    --color-terciario4: #009640;
    --color-terciario5: #008569;
    --color-terciario6: #623771;
    --color-terciario7: #ff0011;        
    --color-terciario8: #1e9aec;        


    --color-claro: #fff;       
    --color-gris: #f9f9f9;       
    --color-oscuro: #1d1a1a;        

}

/* ================================================ COLOREADO ================================================ */
.bg-primario {
    background-color: var(--color-primario);
}

.bg-secundario {
    background-color: var(--color-secundario);
}

.bg-terciario1 {
    background-color: var(--color-terciario1);
}
.bg-terciario2 {
    background-color: var(--color-terciario2);
}
.bg-terciario3 {
    background-color: var(--color-terciario3);
}
.bg-terciario4 {
    background-color: var(--color-terciario4);
}
.bg-terciario5 {
    background-color: var(--color-terciario5);
}
.bg-terciario6 {
    background-color: var(--color-terciario6);
}
.bg-terciario7 {
    background-color: var(--color-terciario7);
}
.bg-terciario8 {
    background-color: var(--color-terciario8);
}



/* ================================================ ESPACEADO ================================================ */

/* MÁRGENES */
.margin-5   { margin: 5px; }
.margin-10  { margin: 10px; }
.margin-15  { margin: 15px; }
.margin-20  { margin: 20px; }
.margin-25  { margin: 25px; }
.margin-30  { margin: 30px; }
.margin-35  { margin: 35px; }
.margin-40  { margin: 40px; }
.margin-45  { margin: 45px; }
.margin-50  { margin: 50px; }
.margin-55  { margin: 55px; }
.margin-60  { margin: 60px; }
.margin-65  { margin: 65px; }
.margin-70  { margin: 70px; }
.margin-75  { margin: 75px; }
.margin-80  { margin: 80px; }
.margin-85  { margin: 85px; }
.margin-90  { margin: 90px; }
.margin-95  { margin: 95px; }
.margin-100 { margin: 100px; }

/* MÁRGENES SUPERIORES */
.margin-top-5   { margin-top: 5px; }
.margin-top-10  { margin-top: 10px; }
.margin-top-15  { margin-top: 15px; }
.margin-top-20  { margin-top: 20px; }
.margin-top-25  { margin-top: 25px; }
.margin-top-30  { margin-top: 30px; }
.margin-top-35  { margin-top: 35px; }
.margin-top-40  { margin-top: 40px; }
.margin-top-45  { margin-top: 45px; }
.margin-top-50  { margin-top: 50px; }
.margin-top-55  { margin-top: 55px; }
.margin-top-60  { margin-top: 60px; }
.margin-top-65  { margin-top: 65px; }
.margin-top-70  { margin-top: 70px; }
.margin-top-75  { margin-top: 75px; }
.margin-top-80  { margin-top: 80px; }
.margin-top-85  { margin-top: 85px; }
.margin-top-90  { margin-top: 90px; }
.margin-top-95  { margin-top: 95px; }
.margin-top-100 { margin-top: 100px; }

/* MÁRGENES INFERIORES */
.margin-bottom-5   { margin-bottom: 5px; }
.margin-bottom-10  { margin-bottom: 10px; }
.margin-bottom-15  { margin-bottom: 15px; }
.margin-bottom-20  { margin-bottom: 20px; }
.margin-bottom-25  { margin-bottom: 25px; }
.margin-bottom-30  { margin-bottom: 30px; }
.margin-bottom-35  { margin-bottom: 35px; }
.margin-bottom-40  { margin-bottom: 40px; }
.margin-bottom-45  { margin-bottom: 45px; }
.margin-bottom-50  { margin-bottom: 50px; }
.margin-bottom-55  { margin-bottom: 55px; }
.margin-bottom-60  { margin-bottom: 60px; }
.margin-bottom-65  { margin-bottom: 65px; }
.margin-bottom-70  { margin-bottom: 70px; }
.margin-bottom-75  { margin-bottom: 75px; }
.margin-bottom-80  { margin-bottom: 80px; }
.margin-bottom-85  { margin-bottom: 85px; }
.margin-bottom-90  { margin-bottom: 90px; }
.margin-bottom-95  { margin-bottom: 95px; }
.margin-bottom-100 { margin-bottom: 100px; }

/* MÁRGENES SUPERIORES E INFERIORES */
.margin-top-bottom-5   { margin-top: 5px; margin-bottom: 5px; }
.margin-top-bottom-10  { margin-top: 10px; margin-bottom: 10px; }
.margin-top-bottom-15  { margin-top: 15px; margin-bottom: 15px; }
.margin-top-bottom-20  { margin-top: 20px; margin-bottom: 20px; }
.margin-top-bottom-25  { margin-top: 25px; margin-bottom: 25px; }
.margin-top-bottom-30  { margin-top: 30px; margin-bottom: 30px; }
.margin-top-bottom-35  { margin-top: 35px; margin-bottom: 35px; }
.margin-top-bottom-40  { margin-top: 40px; margin-bottom: 40px; }
.margin-top-bottom-45  { margin-top: 45px; margin-bottom: 45px; }
.margin-top-bottom-50  { margin-top: 50px; margin-bottom: 50px; }
.margin-top-bottom-55  { margin-top: 55px; margin-bottom: 55px; }
.margin-top-bottom-60  { margin-top: 60px; margin-bottom: 60px; }
.margin-top-bottom-65  { margin-top: 65px; margin-bottom: 65px; }
.margin-top-bottom-70  { margin-top: 70px; margin-bottom: 70px; }
.margin-top-bottom-75  { margin-top: 75px; margin-bottom: 75px; }
.margin-top-bottom-80  { margin-top: 80px; margin-bottom: 80px; }
.margin-top-bottom-85  { margin-top: 85px; margin-bottom: 85px; }
.margin-top-bottom-90  { margin-top: 90px; margin-bottom: 90px; }
.margin-top-bottom-95  { margin-top: 95px; margin-bottom: 95px; }
.margin-top-bottom-100 { margin-top: 100px; margin-bottom: 100px; }

/* MÁRGENES IZQUIERDOS */
.margin-left-5   { margin-left: 5px; }
.margin-left-10  { margin-left: 10px; }
.margin-left-15  { margin-left: 15px; }
.margin-left-20  { margin-left: 20px; }
.margin-left-25  { margin-left: 25px; }
.margin-left-30  { margin-left: 30px; }
.margin-left-35  { margin-left: 35px; }
.margin-left-40  { margin-left: 40px; }
.margin-left-45  { margin-left: 45px; }
.margin-left-50  { margin-left: 50px; }

/* MÁRGENES DERECHOS */
.margin-right-5   { margin-right: 5px; }
.margin-right-10  { margin-right: 10px; }
.margin-right-15  { margin-right: 15px; }
.margin-right-20  { margin-right: 20px; }
.margin-right-25  { margin-right: 25px; }
.margin-right-30  { margin-right: 30px; }
.margin-right-35  { margin-right: 35px; }
.margin-right-40  { margin-right: 40px; }
.margin-right-45  { margin-right: 45px; }
.margin-right-50  { margin-right: 50px; }

/* MÁRGENES IZQUIERDO Y DERECHO */
.margin-left-right-5   { margin-left: 5px; margin-right: 5px; }
.margin-left-right-10  { margin-left: 10px; margin-right: 10px; }
.margin-left-right-15  { margin-left: 15px; margin-right: 15px; }
.margin-left-right-20  { margin-left: 20px; margin-right: 20px; }
.margin-left-right-25  { margin-left: 25px; margin-right: 25px; }
.margin-left-right-30  { margin-left: 30px; margin-right: 30px; }
.margin-left-right-35  { margin-left: 35px; margin-right: 35px; }
.margin-left-right-40  { margin-left: 40px; margin-right: 40px; }
.margin-left-right-45  { margin-left: 45px; margin-right: 45px; }
.margin-left-right-50  { margin-left: 50px; margin-right: 50px; }


/*  PADDING SUPERIOR  */
.padding-top-5   { padding-top: 5px; }
.padding-top-10  { padding-top: 10px; }
.padding-top-15  { padding-top: 15px; }
.padding-top-20  { padding-top: 20px; }
.padding-top-25  { padding-top: 25px; }
.padding-top-30  { padding-top: 30px; }
.padding-top-35  { padding-top: 35px; }
.padding-top-40  { padding-top: 40px; }
.padding-top-45  { padding-top: 45px; }
.padding-top-50  { padding-top: 50px; }
.padding-top-55  { padding-top: 55px; }
.padding-top-60  { padding-top: 60px; }
.padding-top-65  { padding-top: 65px; }
.padding-top-70  { padding-top: 70px; }
.padding-top-75  { padding-top: 75px; }
.padding-top-80  { padding-top: 80px; }
.padding-top-85  { padding-top: 85px; }
.padding-top-90  { padding-top: 90px; }
.padding-top-95  { padding-top: 95px; }
.padding-top-100 { padding-top: 100px; }

/*  PADDING INFERIOR  */
.padding-bottom-5   { padding-bottom: 5px; }
.padding-bottom-10  { padding-bottom: 10px; }
.padding-bottom-15  { padding-bottom: 15px; }
.padding-bottom-20  { padding-bottom: 20px; }
.padding-bottom-25  { padding-bottom: 25px; }
.padding-bottom-30  { padding-bottom: 30px; }
.padding-bottom-35  { padding-bottom: 35px; }
.padding-bottom-40  { padding-bottom: 40px; }
.padding-bottom-45  { padding-bottom: 45px; }
.padding-bottom-50  { padding-bottom: 50px; }
.padding-bottom-55  { padding-bottom: 55px; }
.padding-bottom-60  { padding-bottom: 60px; }
.padding-bottom-65  { padding-bottom: 65px; }
.padding-bottom-70  { padding-bottom: 70px; }
.padding-bottom-75  { padding-bottom: 75px; }
.padding-bottom-80  { padding-bottom: 80px; }
.padding-bottom-85  { padding-bottom: 85px; }
.padding-bottom-90  { padding-bottom: 90px; }
.padding-bottom-95  { padding-bottom: 95px; }
.padding-bottom-100 { padding-bottom: 100px; }

/*  PADDING SUPERIOR E INFERIOR  */
.padding-top-bottom-5   { padding-top: 5px; padding-bottom: 5px; }
.padding-top-bottom-10  { padding-top: 10px; padding-bottom: 10px; }
.padding-top-bottom-15  { padding-top: 15px; padding-bottom: 15px; }
.padding-top-bottom-20  { padding-top: 20px; padding-bottom: 20px; }
.padding-top-bottom-25  { padding-top: 25px; padding-bottom: 25px; }
.padding-top-bottom-30  { padding-top: 30px; padding-bottom: 30px; }
.padding-top-bottom-35  { padding-top: 35px; padding-bottom: 35px; }
.padding-top-bottom-40  { padding-top: 40px; padding-bottom: 40px; }
.padding-top-bottom-45  { padding-top: 45px; padding-bottom: 45px; }
.padding-top-bottom-50  { padding-top: 50px; padding-bottom: 50px; }
.padding-top-bottom-55  { padding-top: 55px; padding-bottom: 55px; }
.padding-top-bottom-60  { padding-top: 60px; padding-bottom: 60px; }
.padding-top-bottom-65  { padding-top: 65px; padding-bottom: 65px; }
.padding-top-bottom-70  { padding-top: 70px; padding-bottom: 70px; }
.padding-top-bottom-75  { padding-top: 75px; padding-bottom: 75px; }
.padding-top-bottom-80  { padding-top: 80px; padding-bottom: 80px; }
.padding-top-bottom-85  { padding-top: 85px; padding-bottom: 85px; }
.padding-top-bottom-90  { padding-top: 90px; padding-bottom: 90px; }
.padding-top-bottom-95  { padding-top: 95px; padding-bottom: 95px; }
.padding-top-bottom-100 { padding-top: 100px; padding-bottom: 100px; }

/*  PADDING IZQUIERDO  */
.padding-left-5   { padding-left: 5px; }
.padding-left-10  { padding-left: 10px; }
.padding-left-15  { padding-left: 15px; }
.padding-left-20  { padding-left: 20px; }
.padding-left-25  { padding-left: 25px; }
.padding-left-30  { padding-left: 30px; }
.padding-left-35  { padding-left: 35px; }
.padding-left-40  { padding-left: 40px; }
.padding-left-45  { padding-left: 45px; }
.padding-left-50  { padding-left: 50px; }

/*  PADDING DERECHO  */
.padding-right-5   { padding-right: 5px; }
.padding-right-10  { padding-right: 10px; }
.padding-right-15  { padding-right: 15px; }
.padding-right-20  { padding-right: 20px; }
.padding-right-25  { padding-right: 25px; }
.padding-right-30  { padding-right: 30px; }
.padding-right-35  { padding-right: 35px; }
.padding-right-40  { padding-right: 40px; }
.padding-right-45  { padding-right: 45px; }
.padding-right-50  { padding-right: 50px; }

/*  PADDING IZQUIERDO Y DERECHO  */
.padding-left-right-5   { padding-left: 5px; padding-right: 5px; }
.padding-left-right-10  { padding-left: 10px; padding-right: 10px; }
.padding-left-right-15  { padding-left: 15px; padding-right: 15px; }
.padding-left-right-20  { padding-left: 20px; padding-right: 20px; }
.padding-left-right-25  { padding-left: 25px; padding-right: 25px; }
.padding-left-right-30  { padding-left: 30px; padding-right: 30px; }
.padding-left-right-35  { padding-left: 35px; padding-right: 35px; }
.padding-left-right-40  { padding-left: 40px; padding-right: 40px; }
.padding-left-right-45  { padding-left: 45px; padding-right: 45px; }
.padding-left-right-50  { padding-left: 50px; padding-right: 50px; }

/* ================================================ ESPACEADO ================================================ */









/* ================================================ HEADER ================================================ */
.header-top-social.no-efects a {
    background: transparent !important;
    color: inherit !important;
}


.header-top-contact a {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* espacio entre icono y texto */
}

.header-top-contact a img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
}


.nav-right-btn a {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* espacio entre icono y texto */
}

/* control del tamaño del icono */
.nav-right-btn a img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
    display: inline-block;
}

.nav-right-btn a img {
    vertical-align: middle;
}





/* ================================================ FOOTER ================================================ */

.footer-social {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* tamaño controlado de los iconos */
.footer-social li a img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
    display: block;
}


.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: 8px; /* espacio entre icono y texto */
    margin-bottom: 6px;
}

/* enlaces con icono */
.footer-contact li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* control de iconos */
.footer-contact img {
    width: 25px !important;
    height: 25px !important;
    object-fit: contain;
    display: inline-block;
}





/* ================================================ ICONOS ================================================ */

.contact-info {
    text-align: center;
}

.contact-info img {
    width: 100px;   /* ajusta tamaño */
    height: 100px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px; /* centra y separa del texto */
}

.contact-info-content h5 {
    margin-bottom: 4px;
}

.contact-info img {
    transition: transform 0.2s ease;
}

.contact-info:hover img {
    transform: scale(1.1);
}




.hero-sub-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}

.hero-sub-title img {
    width: 20px;
    height: 20px;
    margin-bottom: 8px;
    display: block;
}



.site-title-tagline {
    display: inline-flex !important;
    align-items: center !important;
}

.site-title-tagline img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    margin-bottom: 4px;
}




.feature-item {
    text-align: left;
}

.feature-item img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    margin: 0 0 8px 0; /* solo espacio debajo */
}


/* ================================================ TITULOS ================================================ */
.titulo-s {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.titulo-m {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.titulo-l {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.titulo-xl {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}


/* ================================================ TITULOS ================================================ */

.link-1 {
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 500;
}

.link-1:hover {
    color: var(--color-terciario1);
    text-decoration: none;
    font-weight: 500;
}



/* ================================================ CATEGORIA ================================================ */


.widget-title.download {
    color: var(--color-claro);
}

@media (max-width: 991px) {
    .espaceado.download {
        margin-top: 40px;
    }
}


.widget-title.download {
    color: var(--color-claro);
}

.category.download {
    background-color: var(--color-secundario);
    color: var(--color-claro);
}

.category-list.download a {
    color: var(--color-claro);
}

.category-list.download a:hover {
    color: var(--color-primario);
}

.category-list.download a i {
    color: var(--color-primario);
}






/* ================================================ TALLERES ================================================ */
.taller.course-item:hover .course-img::before {
    opacity: 0;
}



/* ================================================ MENSAJE DE PRÓXIMAMENTE ================================================ */
.proximamente.feature-item.wow.fadeInUp {
    background-color: #fff3cd; 
    border-left: 4px solid #ffc107;
}

.proximamente .feature-title {
    color: #5c3d00;
}

.proximamente p {
    color: #495057;
}






/* ================================================ LISTA DE UTILES ================================================ */


/* Contenedor general */
.tabla-utiles {
    background-color: var(--color-claro);
    border-radius: 12px;
    overflow: hidden;
}

/* Header elegante */
.tabla-header {
    background: linear-gradient(135deg, var(--color-secundario), var(--color-terciario2));
    color: var(--color-claro);
    padding: 20px;
}

.tabla-header-2 {
    background: linear-gradient(135deg, var(--color-secundario), var(--color-terciario2));
    color: var(--color-claro);
    padding: 20px;
    border-radius: 10px;
}

.tabla-header h4, .tabla-header-2 h4 {
    margin: 0;
    font-weight: 600;
    color: var(--color-claro);
}

.tabla-header p, .tabla-header-2 p {
    margin: 5px 0 0;
    font-size: 14px;
    opacity: 0.9;
}

/* Tabla */
.tabla-cursos tr {
    transition: all 0.2s ease;
}

.tabla-cursos tr:nth-child(even) {
    background-color: var(--color-gris);
}

.tabla-cursos tr:hover {
    background-color: rgba(14, 65, 148, 0.08);
}

/* Texto curso */
.tabla-cursos td:first-child {
    font-weight: 500;
    color: var(--color-oscuro);
}

/* Botón personalizado */
.btn-ver {
    background-color: var(--color-primario);
    color: white;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-ver-2 {
    background-color: var(--color-secundario);
    color: white;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.btn-ver:hover {
    background-color: var(--color-terciario7);
    color: white;
    transform: scale(1.05);
}

.btn-ver-2:hover {
    background-color: var(--color-terciario3);
    color: white;
    transform: scale(1.05);
}



/* ================================================ CONVENIOS ================================================ */

.convenio.blog-item-img img {
    max-width: 100%;
    height: auto;
}


.convenio-img {
    overflow: hidden; /* CLAVE */
    border-radius: 30px 30px 30px 0;
}

.convenio-img img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease, filter 0.3s ease;
}

.convenio-img img:hover {
    transform: scale(1.1);
    filter: brightness(1.05);
}






/* ================================================ AREA CORPORACION ================================================ */

.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
    margin-top: 25px;
}

.partner-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-grid img {
    max-width: 100%;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease;
}

.partner-grid a:hover img {
    transform: scale(1.05);
}

/* responsive */
@media (max-width: 991px) {
    .partner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .partner-grid {
        grid-template-columns: 1fr;
    }
}







/* ================================================ PUBLICACIONES ================================================ */
.list-group ul {
    list-style: none; /* ocultar los puntos originales */
    padding: 0;
    margin: 0;
}

.list-group ul li span {
    position: relative;
    margin: 10px 0;
    padding-left: 20px; /* espacio para el punto */
    transition: all 0.3s ease;
    font-size: 18px;
}

.list-group ul li small {
    color: #797979;
    font-weight: bold;
    font-size: 14px;
}

.list-group ul li::before span {
    content: "•"; /* el punto personalizado */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-terciario1, #ff8c00); /* color del punto */
    font-size: 20px;
    line-height: 1;
}

.list-group ul li a span {
    text-decoration: none;
    color: var(--color-terciario1);
    font-weight: 500;
    transition: color 0.3s ease;
}

.list-group ul li a:hover span {
    color: var(--color-primario);
}



.blog-date {
    display: flex;
    align-items: center; /* alinea verticalmente icono y texto */
    gap: 8px; /* espacio entre icono y fecha */
    font-size: 14px; /* ajusta si quieres */
}



.blog-date img {
    width: 18px;   /* tamaño controlado */
    height: 18px;
    object-fit: contain;
}


.recent-post-bio span img.icon{
    width: 20px;   /* tamaño controlado */
    height: 20px;
}





/* ================================================ TABLA ================================================ */
.rowhead-1 {
    background: linear-gradient(135deg, var(--color-terciario1), var(--color-primario)) !important;
    color: var(--color-claro) !important;
    font-weight: 600;
}




/* ================================================ MODALES ================================================ */
.modal-header-2 {
    background: linear-gradient(135deg, var(--color-terciario3), var(--color-secundario)) !important;
    color: var(--color-claro);
}

.titulo-modal-2 {
    color: var(--color-claro) !important;
    font-weight: 600;
}

.modal-header-3 {
    background: linear-gradient(135deg, var(--color-primario), var(--color-secundario)) !important;
    color: var(--color-claro);
}

.titulo-modal-3 {
    color: var(--color-claro) !important;
    font-weight: 600;
}

.btn-close.close {
    background-color: var(--color-claro);
    border-radius: 100%;
}



.modal-m {
    max-width: 55%;
}

.modal-l {
    max-width: 70%;
}

.modal-xl {
    max-width: 90%;
}

.icon-xl {
    font-size: 36px;
    margin-right: 6px;
}



/*========== Modal responsive ==========*/
@media (max-width: 1200px) {
    .modal-m {
        max-width: 80%;
    }
    .modal-l {
        max-width: 90%;
    }
    .modal-xl {
        max-width: 95%;
    }
}

@media (max-width: 574px) {
    .modal-m {
        max-width: 90%;
    }
    .modal-l {
        max-width: 95%;
    }
    .modal-xl {
        max-width: 95%;
    }
}



/*============================== GALERIA ==============================*/
.portfolio-item { transition: transform .25s ease, box-shadow .25s ease; }
.portfolio-item:hover { transform: translateY(-4px); }



.portfolio-img img {
    border-radius: 50px 50px 0px 0px !important;
}


.portfolio-title2 {
    background-color: var(--color-secundario);
    border-radius: 0 0 12px 12px;
    border: 2px solid var(--color-primario);
}

.portfolio-title2 h4 {
    padding: 5px;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-claro);
}





.gallery-img {
    width: 100%;
    height: 250px; /* Puedes ajustar la altura */
    overflow: hidden;
    border-radius: 8px; /* Opcional */
}

.gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta manteniendo proporción */
    object-position: center; /* Centra la imagen */
    display: block;
}



.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

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


.campo-imagen-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    height: 100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.campo-imagen-card .numero {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:6px;
    background:#f5f7fa;
    border:1px solid #eee;
    font-weight:700;
    margin-right:8px;
}
.campo-top {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}
.img-preview {
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:6px;
    display:block;
    margin-bottom:8px;
    background:#f8f9fa;
}
.campo-acciones { display:flex; gap:6px; align-items:center; }
.btn-remove-field { min-width:36px; }





.album-sidebar:hover {
    background-color: var(--color-primario) !important;
    border: 2px solid var(--color-primario) !important;
}

.album-sidebar:hover span {
    color: var(--color-claro) !important;
}

.album-sidebar.active {
    background-color: var(--color-secundario) !important;
    border: 2px solid var(--color-primario) !important;
}

.album-sidebar.active span {
    color: var(--color-claro) !important;
    font-weight: 500;
}

.album-sidebar span {
    color: var(--color-oscuro);
    font-weight: 500;
}

.album-sidebar .span-text{
    color: var(--color-claro) !important;
    background-color: var(--color-terciario2);
    font-weight: 500;
}




/*============================== MENU DE ACCESO ==============================*/

/* Botones de redirección */
.redirect-1,
.redirect-2,
.redirect-3,
.redirect-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 100%;
    height: 80px; /* altura equilibrada */

    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;

    border-radius: 12px;
    transition: all 0.25s ease;
}

/* Colores individuales */
.redirect-1 {
    background: var(--color-primario); /* azul */
}

.redirect-2 {
    background: var(--color-secundario); /* verde */
}

.redirect-3 {
    background: var(--color-terciario4); /* naranja */
}
.redirect-4 {
    background: var(--color-terciario6); /* naranja */
}

/* Hover */
.redirect-1:hover, .redirect-2:hover, .redirect-3:hover, .redirect-4:hover {
    border: 5px solid var(--color-oscuro);
    color: #fff;
}