/* ============================================= */
/* ====== ESTILOS PÁGINA BIBLIOTECAS ====== */
/* ============================================= */

.card-biblioteca {
    padding: 15px; /* Ajustado a un valor más compacto */
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
}

.card-biblioteca .card-icon {
    font-size: 2.5rem;
    color: #27375F; 
    margin-bottom: 5px; 
}

/* Estilo para los enlaces que envuelven las tarjetas */
.card-link {
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: inherit; /* Hace que el texto herede el color de su contenedor */
}

.card-link:hover {
    color: inherit; /* Mantiene la herencia de color al pasar el mouse */
}

/* ============================================= */
/* ====== EFECTO HOVER PARA LAS TARJETAS ====== */
/* ============================================= */

/* --- Efecto Hover para el Tema Claro --- */
.card-biblioteca:hover {
    transform: translateY(-5px); /* Eleva la tarjeta ligeramente */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* Añade una sombra más pronunciada */
    border-color: #E30C24; /* Cambia el color del borde a rojo */
}

/* ============================================= */
/* ====== ESTILOS TEMA OSCURO PERSONALIZADO ====== */
/* ============================================= */

/* Títulos H3 principales en modo oscuro */
[data-bs-theme="dark"] main h3 {
    color: #f8f9fa; /* Un color blanco/gris claro para alta visibilidad */
}

/* Estilo para las TARJETAS en modo oscuro */
[data-bs-theme="dark"] .card-biblioteca {
    background-color: #2b2b2b;
    border-color: #003C70;
}

/* Colores de texto e ícono para tarjetas en modo oscuro */
[data-bs-theme="dark"] .card-biblioteca h5,
[data-bs-theme="dark"] .card-biblioteca p,
[data-bs-theme="dark"] .card-biblioteca .card-icon {
    color: #ced4da;
}

/* --- Efecto Hover para el Tema Oscuro --- */
[data-bs-theme="dark"] .card-biblioteca:hover {
    border-color: #E30C24; /* Cambia el color del borde a rojo */
}

/* Colores de texto e ícono al pasar el mouse en modo oscuro */
[data-bs-theme="dark"] .card-biblioteca:hover h5,
[data-bs-theme="dark"] .card-biblioteca:hover p,
[data-bs-theme="dark"] .card-biblioteca:hover .card-icon {
    color: #ffffff; /* Cambia el texto a blanco intenso */
}