Normatividad Institucional

/* ——————————————- */
/* — CSS para Estilizar el Carrusel — */
/* ——————————————- */

/* Variables de Color (Ajustadas a UNICÓRDOBA) */
:root {
–primary-color: #004d99; /* Azul principal */
–secondary-color: #f7a800; /* Naranja de acento */
–card-bg: #fff;
–bg-light: #f4f4f9;

/* Colores de Iconos Temáticos para Normatividad */
–icon-color-1: #4CAF50; /* Inicio */
–icon-color-2: #E91E63; /* Órganos de Gobierno */
–icon-color-3: #9C27B0; /* Estatutos */
–icon-color-4: #2196F3; /* Acuerdos */
–icon-color-5: #FF9800; /* Resoluciones */
–icon-color-6: #795548; /* Reglamentos */
–icon-color-7: #00BCD4; /* Actas de conciliación */
–icon-color-8: #FF5722; /* Proyectos acuerdo */
–icon-color-9: #FBC02D; /* Calendario Académico */
–icon-color-10: #3F51B5; /* Derechos Pecuniarios */
–icon-color-11: #607D8B; /* Notificaciones judiciales */
–icon-color-12: #009688; /* Repositorio */
}

body {
font-family: ‘Arial’, sans-serif;
background-color: var(–bg-light);
margin: 0;
padding: 20px 0;
}

/* Estilos del Contenedor Swiper */
.mySwiper {
width: 90%;
max-width: 1200px;
padding-top: 50px;
padding-bottom: 50px;
margin: 0 auto;
}

/* Estilos Generales de la Tarjeta */
.card {
background-color: var(–card-bg);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 77, 153, 0.2);
}

/* Estilos del Encabezado (Título de la Tarjeta) */
.card h3 {
color: var(–primary-color);
font-size: 1.3em;
margin-top: 15px;
margin-bottom: 25px;
font-weight: 600;
line-height: 1.3;
}

/* Estilos Base del Icono */
.card .icon {
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 auto 15px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color: var(–card-bg); /* Color del icono */
font-size: 24px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* — ESTILOS DE ICONOS ESPECÍFICOS (Color de fondo para cada tarjeta) — */

.card-inicio .icon { background-color: var(–icon-color-1); }
.card-gobierno .icon { background-color: var(–icon-color-2); }
.card-estatutos .icon { background-color: var(–icon-color-3); }
.card-acuerdos .icon { background-color: var(–icon-color-4); }
.card-resoluciones .icon { background-color: var(–icon-color-5); }
.card-reglamentos .icon { background-color: var(–icon-color-6); }
.card-actas .icon { background-color: var(–icon-color-7); }
.card-proyectos .icon { background-color: var(–icon-color-8); }
.card-calendario .icon { background-color: var(–icon-color-9); }
.card-pecuniarios .icon { background-color: var(–icon-color-10); }
.card-notificaciones .icon { background-color: var(–icon-color-11); }
.card-repositorio .icon { background-color: var(–icon-color-12); }

/* Estilos del Botón */
.card .btn {
display: inline-block;
padding: 10px 25px;
background-color: var(–primary-color);
color: var(–card-bg);
text-decoration: none;
border-radius: 8px;
font-weight: 700;
letter-spacing: 0.5px;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: auto;
}

.card .btn:hover {
background-color: #003366;
transform: scale(1.05);
}

/* Estilos de Navegación (Flechas y Paginación) */
.swiper-button-next, .swiper-button-prev {
color: var(–primary-color) !important;
opacity: 0.8;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.swiper-pagination-bullet-active {
background: var(–secondary-color) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
.swiper-button-next, .swiper-button-prev { top: 40%; }
}

var swiper = new Swiper(“.mySwiper”, {
spaceBetween: 30,
loop: true,

navigation: {
nextEl: “.swiper-button-next”,
prevEl: “.swiper-button-prev”,
},

pagination: {
el: “.swiper-pagination”,
clickable: true,
},

// Configuración responsiva: Muestra 1, 2 o 4 tarjetas
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
1024: {
slidesPerView: 4,
}
}
});