/**

RamDrive Frontend Styles
Version: 1.0.1 */
/* ===== CONTENEDOR PRINCIPAL ===== */ .ramdrive-wrapper { width: 100%; position: relative; }

.ramdrive-container { width: 100%; }

/* ===== GRID LAYOUT ===== */ .ramdrive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; margin: 0; padding: 0; list-style: none; }

.ramdrive-grid-1 { grid-template-columns: repeat(1, 1fr); } .ramdrive-grid-2 { grid-template-columns: repeat(2, 1fr); } .ramdrive-grid-3 { grid-template-columns: repeat(3, 1fr); } .ramdrive-grid-4 { grid-template-columns: repeat(4, 1fr); } .ramdrive-grid-5 { grid-template-columns: repeat(5, 1fr); } .ramdrive-grid-6 { grid-template-columns: repeat(6, 1fr); }

.ramdrive-grid-item { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }

.ramdrive-image { position: relative; width: 100%; padding-bottom: 75%; /* Aspect ratio 4:3 */ background: #f5f5f5; }

.ramdrive-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }

.ramdrive-image:hover img { transform: scale(1.05); }

/* ===== SWIPER SLIDER ===== */ .ramdrive-swiper { width: 100%; height: auto; padding-bottom: 40px !important; }

.ramdrive-swiper .swiper-slide { height: auto; border-radius: 8px; overflow: hidden; }

.ramdrive-swiper .swiper-slide .ramdrive-image { padding-bottom: 75%; }

.ramdrive-swiper .swiper-pagination-bullet { width: 10px; height: 10px; background: #ddd; opacity: 1; }

.ramdrive-swiper .swiper-pagination-bullet-active { background: #007cba; }

.ramdrive-swiper .swiper-button-next, .ramdrive-swiper .swiper-button-prev { color: #007cba; background: rgba(255, 255, 255, 0.9); width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.ramdrive-swiper .swiper-button-next:after, .ramdrive-swiper .swiper-button-prev:after { font-size: 20px; }

.ramdrive-swiper .swiper-button-next:hover, .ramdrive-swiper .swiper-button-prev:hover { background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }

/* ===== BOTÓN CARGAR MÁS ===== */ .ramdrive-load-more { text-align: center; margin-top: 30px; }

.ramdrive-btn { display: inline-block; padding: 12px 30px; background: #007cba; color: #fff; border: none; border-radius: 5px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }

.ramdrive-btn:hover { background: #005a87; color: #fff; }

.ramdrive-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ===== LOADER ===== */ .ramdrive-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; }

.ramdrive-spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 124, 186, 0.2); border-top-color: #007cba; border-radius: 50%; animation: ramdrive-spin 1s linear infinite; }

@keyframes ramdrive-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ===== MENSAJES ===== */ .ramdrive-empty, .ramdrive-no-images { padding: 30px; text-align: center; background: #f8f8f8; border: 1px dashed #ddd; border-radius: 8px; color: #666; font-size: 16px; }

/* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .ramdrive-grid-4, .ramdrive-grid-5, .ramdrive-grid-6 { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 768px) { .ramdrive-grid-2, .ramdrive-grid-3, .ramdrive-grid-4, .ramdrive-grid-5, .ramdrive-grid-6 { grid-template-columns: repeat(2, 1fr); }

.ramdrive-swiper .swiper-button-next,
.ramdrive-swiper .swiper-button-prev {
    display: none;
}
}

@media (max-width: 480px) { .ramdrive-grid-1, .ramdrive-grid-2, .ramdrive-grid-3, .ramdrive-grid-4, .ramdrive-grid-5, .ramdrive-grid-6 { grid-template-columns: 1fr; } }

/* ===== GOOGLE DRIVE THUMBNAILS - CALIDAD PERFECTA ===== */ .ramdrive-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.ramdrive-image:hover img { transform: scale(1.08); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }

/* ===== SWIPER PREMIUM ===== */ .ramdrive-swiper { width: 100%; height: auto; padding-bottom: 50px !important; padding-left: 5px; padding-right: 5px; }

.ramdrive-swiper .swiper-slide { height: auto; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; }

.ramdrive-swiper .swiper-slide:hover { transform: translateY(-5px); }

.ramdrive-swiper .swiper-slide .ramdrive-image { position: relative; padding-bottom: 75%; background: linear-gradient(145deg, #f0f0f0, #e6e6e6); }

.ramdrive-swiper .swiper-slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ===== NAVEGACIÓN SWIPER ELEGANTE ===== */ .ramdrive-swiper .swiper-button-next, .ramdrive-swiper .swiper-button-prev { color: white; background: rgba(0, 124, 186, 0.9); width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,124,186,0.3); transition: all 0.3s ease; backdrop-filter: blur(4px); }

.ramdrive-swiper .swiper-button-next:hover, .ramdrive-swiper .swiper-button-prev:hover { background: #007cba; transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,124,186,0.4); }

.ramdrive-swiper .swiper-button-next:after, .ramdrive-swiper .swiper-button-prev:after { font-size: 20px; font-weight: bold; }

/* ===== PAGINACIÓN SWIPER ===== */ .ramdrive-swiper .swiper-pagination-bullet { width: 10px; height: 10px; background: #ccc; opacity: 1; transition: all 0.3s ease; }

.ramdrive-swiper .swiper-pagination-bullet-active { background: #007cba; width: 24px; border-radius: 12px; }

/* ===== ANIMACIÓN DE CARGA ===== */ @keyframes ramdrive-pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }

.ramdrive-image img[loading="lazy"] { animation: ramdrive-pulse 1.5s infinite; }