/* === Contenedor principal con margen interno lateral === */
.abc-biblioteca-wrapper {
    width: 100%;
    box-sizing: border-box; /* Incluye el padding en el ancho total */
}

/* 1. Contenedor del Grid */
.abc-grid-biblioteca {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 30px !important;
	padding: 20px 0 !important;
    perspective: 1000px; /* Vital para el efecto 3D */
}

/* 2. La Tarjeta */
.abc-card-biblioteca {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* 3. El Contenedor del Giro */
.abc-card-biblioteca .abc-card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
}

/* Estilo para el título Biblioteca */
.abc-biblioteca-titulo {
    font-family: Arial, sans-serif;
    color: #000000;
    font-size: 24px;
    margin-bottom: 10px; /* Espacio debajo del título */
}

/* Estilo para el párrafo descriptivo */
.abc-biblioteca-parrafo {
    font-family: Arial, sans-serif;
    color: #000000;
    font-size: 18px;
    margin-bottom: 20px; /* Espacio antes de las tarjetas */
}

/* Estilo para el mensaje cuando no hay tarjetas */
.abc-vacio {
    font-family: Arial, sans-serif;
    color: #000000;
    font-size: 18px;
    width: 100%;
    padding: 40px 0; /* Espaciado para mejor presentación */
}

/* --- REGLA PARA EL GIRO --- */
.abc-card-biblioteca:hover .abc-card-flip-inner {
    transform: rotateY(180deg) !important;
}

/* 4. Caras Frontal y Trasera */
.abc-card-biblioteca .abc-flip-front, 
.abc-card-biblioteca .abc-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    visibility: visible; 
    backface-visibility: hidden;
}: hidden;
}

/* Cara Frontal: Imagen Sangrada */
.abc-card-biblioteca .abc-flip-front {
    z-index: 5;
    background: #000;
}

.abc-card-biblioteca .abc-flip-front img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border: none !important;
}

/* Cara Trasera: Oscura con botones */
.abc-card-biblioteca .abc-flip-back {
    background: rgba(10, 10, 10, 0.95) !important;
    transform: rotateY(180deg);
    z-index: 1; /* Menor que el front inicialmente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px !important;
    box-sizing: border-box;
}

/* 5. Botones */
.abc-biblioteca-acciones {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 85%;
}

.abc-btn-remover-simple, 
.abc-btn-descargar-simple {
    padding: 12px;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.abc-btn-remover-simple:hover { background: #ff4444; border-color: #ff4444; }
.abc-btn-descargar-simple:hover { background: #fff; color: #000; }

/* Corrección de interacción para Firefox (Añadir al final) */
.abc-card-biblioteca:hover .abc-flip-front {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.3s;
}

.abc-card-biblioteca:hover .abc-flip-back {
    z-index: 10 !important;
}