/* ==========================================================================
   MY SHOP - ESTILOS GLOBALES Y ARQUITECTURA
   ========================================================================== */

/* --- 1. Utilidades Globales e Interfaz --- */
.tracking-wide { letter-spacing: 0.05em; }

.link-hover-primary, 
.link-hover-white { 
    transition: color 0.2s ease; 
}
.link-hover-primary:hover { color: var(--bs-primary) !important; }
.link-hover-white:hover { color: #ffffff !important; text-decoration: underline !important; }

/* --- 2. Animaciones Base --- */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important; }

.banner-hover { transition: transform 0.3s ease; }
.banner-hover:hover { transform: scale(1.02); }

/* --- 3. Fix: Autocompletado WebKit en Modo Oscuro --- */
[data-bs-theme="dark"] input:-webkit-autofill,
[data-bs-theme="dark"] input:-webkit-autofill:hover,
[data-bs-theme="dark"] input:-webkit-autofill:focus,
[data-bs-theme="dark"] input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--bs-body-bg) inset !important;
    -webkit-text-fill-color: var(--bs-body-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
   COMPONENTES ESPECÍFICOS
   ========================================================================== */

/* --- Slider Horizontal (Productos Recomendados / Móvil) --- */
.horizontal-slider-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: thin;
    scrollbar-color: #adb5bd transparent;
    padding-bottom: 15px; 
}

.horizontal-slider-container::-webkit-scrollbar { height: 8px; }
.horizontal-slider-container::-webkit-scrollbar-track { background: transparent; }
.horizontal-slider-container::-webkit-scrollbar-thumb { background-color: #dee2e6; border-radius: 20px; }

.card-similar { width: 260px; flex: 0 0 auto; scroll-snap-align: start; }
@media (min-width: 768px) { .card-similar { flex: 0 0 45%; } }
@media (min-width: 992px) { .card-similar { flex: 0 0 23.5%; } }

/* --- Buscador Integrado Estilo Amazon --- */
.search-container { display: flex; align-items: center; width: 100%; }
.search-form-wrapper { max-width: 600px; }
.search-container input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: none !important; }
.search-container input::placeholder { color: #4a5568 !important; opacity: 1 !important; font-weight: 500; }
.search-container button { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* --- Pantalla de Login --- */
.login-container { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 120px); }
.login-card { 
    background-color: var(--bs-body-bg); 
    color: var(--bs-body-color); 
    padding: 40px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
    text-align: center; 
    width: 300px; 
    margin-top: 40px; 
    border: 1px solid var(--bs-border-color); 
}
.logo-placeholder { background: linear-gradient(135deg, #0d6efd, #0dcaf0); color: white; font-size: 50px; font-weight: bold; width: 100px; height: 100px; line-height: 100px; margin: 0 auto 20px auto; border-radius: 8px; }

/* ==========================================================================
   VISTAS PRINCIPALES (INDEX, PRODUCTO, PERFIL)
   ========================================================================== */

/* --- Index Banners --- */
.banner-gaming { background: linear-gradient(135deg, #0d6efd, #0043a8); }
.banner-iva { background: linear-gradient(135deg, #ffc107, #fd7e14); }
.banner-novedades { background: linear-gradient(135deg, #20c997, #0ca678); }
.geo-banner-text { font-size: 0.95rem; }

/* --- Vista de Producto --- */
.product-img-wrapper { flex-grow: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 350px; }
.product-img-fixed { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.catalog-product-img { height: 220px; object-fit: contain; }
.card-similar-img { height: 180px; object-fit: contain; }

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Perfil de Usuario --- */
.profile-sticky-card { top: 20px; }
.avatar-header-container { width: 90px; height: 90px; }
.avatar-edit-btn { width: 32px; height: 32px; top: 15px; right: 15px; }
.avatar-img-main { width: 100px; height: 100px; object-fit: cover; background-color: transparent; }

/* --- Panel de Administración --- */
.admin-card-header { background-color: #212529; color: #ffffff; padding: 1.5rem; border: none; }
.admin-form-control { background-color: var(--bs-body-secondary-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }

/* --- Cabecera y Navegación --- */
.btn-theme-toggle, .avatar-sm, .avatar-placeholder-sm { width: 30px; height: 30px; }
.avatar-sm { object-fit: cover; }
.nav-categories-bar { background-color: #212529; border-top: 1px solid #3b3f45; }
.nav-categories-list { font-size: 0.85rem; font-weight: 600; }

/* ==========================================================================
   FACTURACIÓN (INVOICE GENERATOR)
   ========================================================================== */
.invoice-container { max-width: 800px; margin: auto; padding: 30px; font-size: 14px; line-height: 24px; background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.invoice-header { border-bottom: 2px solid var(--bs-border-color); padding-bottom: 20px; margin-bottom: 20px; }
.invoice-title { font-size: 32px; font-weight: bold; color: var(--bs-primary); }
.invoice-table { width: 100%; line-height: inherit; text-align: left; border-collapse: collapse; }
.invoice-table th { background-color: var(--bs-secondary-bg); padding: 10px; border-bottom: 2px solid var(--bs-border-color); }
.invoice-table td { padding: 10px; border-bottom: 1px solid var(--bs-border-color); }
.total-section { margin-top: 30px; text-align: right; }
.total-row { font-weight: bold; font-size: 18px; border-top: 2px solid var(--bs-border-color); }

/* ==========================================================================
   MEDIA QUERIES (ADAPTACIÓN MÓVIL)
   ========================================================================== */
@media (max-width: 991px) {
    .banners-wrapper { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 15px; scrollbar-width: none; }
    .banners-wrapper::-webkit-scrollbar { display: none; }
    .banners-wrapper .banner-item { flex: 0 0 85% !important; max-width: 85% !important; scroll-snap-align: center; }
}