/* css/custom.css */

/* Define los colores institucionales como variables CSS */
:root {
  --uabcs-cian: #00B7E7;
  --uabcs-azul-oscuro: #005A8C;
  --uabcs-amarillo: #FFDE00;
  --uabcs-crema: #F6F2D2;
  --uabcs-gris: #A7A9AC;
  --uabcs-rojo: #D42E12;
  --uabcs-negro: #2D2A2B;
}

/* Sobrescribe las clases de Bootstrap con los colores institucionales */
.btn-primary {
    background-color: var(--uabcs-azul-oscuro);
    border-color: var(--uabcs-azul-oscuro);
}

.btn-primary:hover {
    background-color: #004a74; /* Una versión más oscura del azul para el hover */
    border-color: #004a74;
}

.text-primary {
    color: var(--uabcs-azul-oscuro) !important;
}

.bg-light-cream {
    background-color: var(--uabcs-crema);
}

/* Estilos para las tarjetas de recursos */
.card-recurso {
    border: none;
    transition: transform .2s; /* Animación para el hover */
}

.card-recurso:hover {
    transform: translateY(-5px); /* Eleva la tarjeta ligeramente */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-recurso img {
    width: 80px; /* Tamaño consistente para los iconos */
}