/**
 * ============================================================================
 * SD DISTRIBUCIONES - SISTEMA DE DISEÑO UNIFICADO
 * ============================================================================
 * 
 * @version     1.1.0
 * @date        21 Noviembre 2025
 * @author      SD Distribuciones
 * @file        sd-design-system.css
 * 
 * DESCRIPCIÓN:
 * Este archivo centraliza TODAS las variables CSS del sistema.
 * Debe cargarse ANTES que cualquier otro CSS personalizado.
 * 
 * COLOR CORPORATIVO: #0072CE (SD Blue)
 * 
 * ÚLTIMOS 3 CAMBIOS:
 * ------------------
 * 2025-11-21 v1.1.0 - INTEGRACIÓN COMPONENTES
 *   - ✅ Añadido: Estilos de Product Card Compact (sección 14)
 *   - ✅ Añadido: Estilos de View Product modales (sección 15)
 *   - ✅ Eliminado: Necesidad de product-card-compact.css externo
 * 
 * 2025-11-21 v1.0.0 - CREACIÓN INICIAL
 *   - ✅ Variables de colores corporativos (#0072CE base)
 *   - ✅ Paleta semántica (success, warning, danger, info)
 *   - ✅ Escala de grises neutrales
 *   - ✅ Gradientes corporativos
 *   - ✅ Sombras con tinte azul corporativo
 * 
 * ORDEN DE CARGA CSS:
 * 1. Bootstrap 5.3.0 (CDN)
 * 2. Bootstrap Icons 1.11.0 (CDN)
 * 3. sd-design-system.css (ESTE ARCHIVO) ← Variables, overrides y componentes
 * 4. [página].css ← Estilos específicos de página (si necesario)
 * 
 * ============================================================================
 */

/* ============================================================================
   1. COLORES CORPORATIVOS - PALETA PRINCIPAL
   ============================================================================
   Derivados del color corporativo #0072CE (color del logo SD Distribuciones)
*/
:root {
    /* ─── Color Principal SD Blue ─── */
    --sd-blue: #0072CE;              /* Color principal, botones primarios, enlaces */
    --sd-blue-dark: #005BA1;         /* Hover states, headers */
    --sd-blue-darker: #004477;       /* Elementos de máximo énfasis */
    --sd-blue-light: #3D9AE2;        /* Accents, iconos secundarios */
    --sd-blue-pale: #E5F3FC;         /* Fondos de cards, alerts info */
    --sd-blue-xpale: #F2F9FE;        /* Fondos de página, hover sutil */
    
    /* ─── Alias para compatibilidad con archivos existentes ─── */
    --sd-blue-primary: var(--sd-blue);
    --primary-color: var(--sd-blue);
    --primary-dark: var(--sd-blue-dark);
}

/* ============================================================================
   2. COLORES SEMÁNTICOS - ESTADOS Y ACCIONES
   ============================================================================
*/
:root {
    /* ─── Success (Verde) ─── */
    --sd-success: #2E7D32;
    --sd-success-light: #E8F5E9;
    --sd-success-dark: #1B5E20;
    
    /* ─── Warning (Naranja) ─── */
    --sd-warning: #F57C00;
    --sd-warning-light: #FFF3E0;
    --sd-warning-dark: #E65100;
    
    /* ─── Danger (Rojo) ─── */
    --sd-danger: #C62828;
    --sd-danger-light: #FFEBEE;
    --sd-danger-dark: #B71C1C;
    
    /* ─── Info (Azul Info) ─── */
    --sd-info: #0288D1;
    --sd-info-light: #E1F5FE;
    --sd-info-dark: #01579B;
    
    /* ─── Alias para compatibilidad ─── */
    --success-color: var(--sd-success);
    --warning-color: var(--sd-warning);
    --danger-color: var(--sd-danger);
    --info-color: var(--sd-info);
}

/* ============================================================================
   3. COLORES NEUTRALES - GRISES
   ============================================================================
*/
:root {
    --sd-gray-900: #212121;          /* Texto principal */
    --sd-gray-800: #424242;          /* Texto secundario fuerte */
    --sd-gray-700: #616161;          /* Texto secundario */
    --sd-gray-600: #757575;          /* Texto terciario */
    --sd-gray-500: #9E9E9E;          /* Texto deshabilitado, placeholders */
    --sd-gray-400: #BDBDBD;          /* Bordes secundarios */
    --sd-gray-300: #E0E0E0;          /* Bordes, divisores */
    --sd-gray-200: #EEEEEE;          /* Fondos alternos claros */
    --sd-gray-100: #F5F5F5;          /* Fondos alternos */
    --sd-gray-50: #FAFAFA;           /* Fondo página */
    --sd-white: #FFFFFF;             /* Fondo cards, modales */
    
    /* ─── Alias para compatibilidad ─── */
    --gray-100: var(--sd-gray-100);
    --gray-200: var(--sd-gray-200);
    --gray-300: var(--sd-gray-300);
    --gray-700: var(--sd-gray-700);
    --gray-800: var(--sd-gray-800);
}

/* ============================================================================
   4. GRADIENTES CORPORATIVOS
   ============================================================================
*/
:root {
    /* ─── Gradiente Principal - Headers y elementos destacados ─── */
    --sd-gradient-primary: linear-gradient(135deg, #0072CE 0%, #004477 100%);
    
    /* ─── Gradiente Hero - Login, landing pages ─── */
    --sd-gradient-hero: linear-gradient(135deg, #005BA1 0%, #004477 100%);
    
    /* ─── Gradiente Horizontal - Barras de progreso, headers anchos ─── */
    --sd-gradient-horizontal: linear-gradient(90deg, #0072CE 0%, #005BA1 100%);
    
    /* ─── Gradiente Sutil - Fondos de sección ─── */
    --sd-gradient-subtle: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
    
    /* ─── Gradiente Sidebar ─── */
    --sd-gradient-sidebar: linear-gradient(180deg, #0072CE 0%, #004477 100%);
    
    /* ─── Alias para compatibilidad ─── */
    --primary-gradient: var(--sd-gradient-primary);
    --sidebar-gradient: var(--sd-gradient-sidebar);
}

/* ============================================================================
   5. SOMBRAS - CON TINTE AZUL CORPORATIVO
   ============================================================================
*/
:root {
    /* ─── Sombra Sutil - Cards en reposo ─── */
    --sd-shadow-sm: 0 1px 3px rgba(0, 114, 206, 0.08);
    
    /* ─── Sombra Media - Cards hover, dropdowns ─── */
    --sd-shadow-md: 0 4px 12px rgba(0, 114, 206, 0.12);
    
    /* ─── Sombra Grande - Modales, elementos flotantes ─── */
    --sd-shadow-lg: 0 8px 24px rgba(0, 114, 206, 0.16);
    
    /* ─── Sombra Elevada - Elementos muy prominentes ─── */
    --sd-shadow-xl: 0 16px 48px rgba(0, 114, 206, 0.20);
    
    /* ─── Sombra para Focus Ring ─── */
    --sd-focus-ring: 0 0 0 3px rgba(0, 114, 206, 0.15);
}

/* ============================================================================
   6. TIPOGRAFÍA
   ============================================================================
*/
:root {
    /* ─── Familias tipográficas ─── */
    --sd-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                      'Helvetica Neue', Arial, sans-serif;
    --sd-font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
    
    /* ─── Escala tipográfica ─── */
    --sd-h1: 2rem;                   /* 32px */
    --sd-h2: 1.5rem;                 /* 24px */
    --sd-h3: 1.25rem;                /* 20px */
    --sd-h4: 1.125rem;               /* 18px */
    --sd-h5: 1rem;                   /* 16px */
    --sd-body: 0.9375rem;            /* 15px */
    --sd-small: 0.875rem;            /* 14px */
    --sd-xsmall: 0.75rem;            /* 12px */
    
    /* ─── Pesos tipográficos ─── */
    --sd-font-light: 300;
    --sd-font-normal: 400;
    --sd-font-medium: 500;
    --sd-font-semibold: 600;
    --sd-font-bold: 700;
    
    /* ─── Line heights ─── */
    --sd-line-height-tight: 1.2;
    --sd-line-height-normal: 1.5;
    --sd-line-height-relaxed: 1.75;
}

/* ============================================================================
   7. ESPACIADO - SISTEMA DE 4px
   ============================================================================
*/
:root {
    --sd-space-1: 4px;               /* Espaciado mínimo, padding iconos */
    --sd-space-2: 8px;               /* Espaciado entre elementos inline */
    --sd-space-3: 12px;              /* Padding interno pequeño */
    --sd-space-4: 16px;              /* Padding estándar, gap */
    --sd-space-5: 20px;              /* Padding cards */
    --sd-space-6: 24px;              /* Separación entre secciones */
    --sd-space-8: 32px;              /* Márgenes grandes */
    --sd-space-10: 40px;             /* Espaciado entre bloques */
    --sd-space-12: 48px;             /* Padding contenedores principales */
}

/* ============================================================================
   8. BORDER RADIUS
   ============================================================================
*/
:root {
    --sd-radius-sm: 4px;             /* Inputs, badges pequeños */
    --sd-radius-md: 8px;             /* Botones, cards */
    --sd-radius-lg: 12px;            /* Cards grandes, modales */
    --sd-radius-xl: 16px;            /* Elementos hero */
    --sd-radius-full: 9999px;        /* Avatares, pills */
    
    /* ─── Alias para compatibilidad ─── */
    --border-radius: var(--sd-radius-md);
}

/* ============================================================================
   9. TRANSICIONES Y ANIMACIONES
   ============================================================================
*/
:root {
    /* ─── Transiciones estándar ─── */
    --sd-transition: all 0.2s ease;
    --sd-transition-fast: all 0.15s ease;
    --sd-transition-slow: all 0.3s ease;
    --sd-transition-transform: transform 0.3s ease;
    --sd-transition-opacity: opacity 0.2s ease;
    
    /* ─── Alias para compatibilidad ─── */
    --transition-speed: 0.2s;
}

/* ============================================================================
   10. LAYOUT - DIMENSIONES FIJAS
   ============================================================================
*/
:root {
    --sd-sidebar-width: 260px;
    --sd-header-height: 60px;
    --sd-toolbar-height: 90px;
    
    /* ─── Alias para compatibilidad ─── */
    --sidebar-width: var(--sd-sidebar-width);
}

/* ============================================================================
   11. Z-INDEX SCALE
   ============================================================================
*/
:root {
    --sd-z-dropdown: 1000;
    --sd-z-sticky: 1020;
    --sd-z-fixed: 1030;
    --sd-z-modal-backdrop: 1040;
    --sd-z-modal: 1050;
    --sd-z-popover: 1060;
    --sd-z-tooltip: 1070;
}

/* ============================================================================
   12. OVERRIDES DE BOOTSTRAP - APLICAR COLORES CORPORATIVOS
   ============================================================================
   Estos overrides aseguran que Bootstrap use nuestros colores corporativos
*/

/* ─── Links ─── */
a {
    color: var(--sd-blue);
    transition: var(--sd-transition);
}

a:hover {
    color: var(--sd-blue-dark);
}

/* ─── Focus visible para accesibilidad ─── */
:focus-visible {
    outline: none;
    box-shadow: var(--sd-focus-ring);
}

/* ─── Selección de texto ─── */
::selection {
    background-color: var(--sd-blue-pale);
    color: var(--sd-gray-900);
}

/* ============================================================================
   13. CLASES DE UTILIDAD - COLORES CORPORATIVOS
   ============================================================================
*/

/* ─── Texto ─── */
.text-sd-blue { color: var(--sd-blue) !important; }
.text-sd-blue-dark { color: var(--sd-blue-dark) !important; }
.text-sd-success { color: var(--sd-success) !important; }
.text-sd-warning { color: var(--sd-warning) !important; }
.text-sd-danger { color: var(--sd-danger) !important; }
.text-sd-info { color: var(--sd-info) !important; }

/* ─── Backgrounds ─── */
.bg-sd-blue { background-color: var(--sd-blue) !important; }
.bg-sd-blue-pale { background-color: var(--sd-blue-pale) !important; }
.bg-sd-blue-xpale { background-color: var(--sd-blue-xpale) !important; }
.bg-sd-success-light { background-color: var(--sd-success-light) !important; }
.bg-sd-warning-light { background-color: var(--sd-warning-light) !important; }
.bg-sd-danger-light { background-color: var(--sd-danger-light) !important; }

/* ─── Gradientes ─── */
.bg-sd-gradient { background: var(--sd-gradient-primary) !important; }
.bg-sd-gradient-hero { background: var(--sd-gradient-hero) !important; }

/* ─── Bordes ─── */
.border-sd-blue { border-color: var(--sd-blue) !important; }
.border-sd-success { border-color: var(--sd-success) !important; }
.border-sd-warning { border-color: var(--sd-warning) !important; }
.border-sd-danger { border-color: var(--sd-danger) !important; }


/* ============================================================================
   14. COMPONENTE: PRODUCT CARD COMPACT
   ============================================================================
   Estilos para el componente de ficha de producto compacta
   Usado en: view-product.php, catalogo-modal-handler.php
*/

/* ─── Contenedor Principal ─── */
.product-compact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
    background: var(--sd-gray-100);
}

/* ─── Header Compacto ─── */
.product-compact-header {
    background: var(--sd-gradient-primary);
    border-radius: var(--sd-radius-lg);
    padding: 20px 25px;
    color: var(--sd-white);
    margin-bottom: 15px;
    box-shadow: var(--sd-shadow-lg);
}

.product-compact-header .product-name {
    font-size: 1.75rem;
    font-weight: var(--sd-font-bold);
    margin: 0 0 5px 0;
    line-height: var(--sd-line-height-tight);
}

.product-compact-header .product-ref {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 0;
}

/* ─── Código de Barras ─── */
.barcode-compact {
    text-align: center;
    background: var(--sd-white);
    border-radius: var(--sd-radius-md);
    padding: 10px;
    max-width: 300px;
}

.barcode-compact .barcode-wrapper {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: flex-end;
}

.barcode-compact svg {
    max-width: 100%;
    height: auto;
}

.barcode-compact #barcode-compact-adendum {
    display: none;
}

.barcode-compact .barcode-ean {
    color: var(--sd-gray-700);
    font-size: var(--sd-small);
    margin-top: 5px;
}

/* ─── Layout Principal ─── */
.product-main-section {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: var(--sd-space-6);
    margin-bottom: 15px;
}

/* ─── Imagen Principal ─── */
.product-image-compact {
    background: var(--sd-white);
    border-radius: var(--sd-radius-lg);
    padding: var(--sd-space-1);
    box-shadow: var(--sd-shadow-md);
    height: fit-content;
    position: sticky;
    top: 15px;
}

.product-image-compact h5 {
    font-size: 1rem;
    font-weight: var(--sd-font-semibold);
    color: var(--sd-gray-900);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--sd-space-2);
}

.product-image-compact img {
    width: 100%;
    height: auto;
    border-radius: var(--sd-radius-sm);
    cursor: pointer;
    transition: var(--sd-transition-transform);
}

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

.product-image-compact .image-info {
    text-align: center;
    margin-top: 0;
    font-size: var(--sd-small);
    color: var(--sd-gray-600);
}

/* ─── Info Básica ─── */
.product-info-compact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-basic-card {
    background: var(--sd-white);
    border-radius: var(--sd-radius-lg);
    padding: 15px;
    box-shadow: var(--sd-shadow-md);
}

.info-basic-card h5 {
    font-size: 1rem;
    font-weight: var(--sd-font-semibold);
    color: var(--sd-gray-900);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: var(--sd-space-2);
}

.info-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sd-space-3);
}

.info-item-compact {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-item-compact .label {
    font-size: 0.8rem;
    color: var(--sd-gray-600);
    font-weight: var(--sd-font-medium);
    display: flex;
    align-items: center;
    gap: 5px;
}

.info-item-compact .value {
    font-size: 0.95rem;
    color: var(--sd-gray-900);
    font-weight: var(--sd-font-semibold);
}

/* ─── Cards de Precios ─── */
.price-cards-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.price-card-compact {
    background: var(--sd-white);
    border-radius: var(--sd-radius-md);
    padding: var(--sd-space-3);
    text-align: center;
    box-shadow: var(--sd-shadow-sm);
    border-left: 4px solid;
}

.price-card-compact.sin-iva { border-left-color: var(--sd-blue); }
.price-card-compact.con-iva { border-left-color: #8b5cf6; }
.price-card-compact.pvp { border-left-color: var(--sd-success); }
.price-card-compact.iva-percent { border-left-color: var(--sd-warning); }

.price-card-compact .label {
    font-size: var(--sd-xsmall);
    color: var(--sd-gray-600);
    font-weight: var(--sd-font-semibold);
    text-transform: uppercase;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.price-card-compact .value {
    font-size: 1.1rem;
    color: var(--sd-gray-900);
    font-weight: var(--sd-font-bold);
}

/* ─── Cards de Stock ─── */
.stock-cards-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.stock-card-compact {
    background: var(--sd-white);
    border-radius: var(--sd-radius-md);
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--sd-shadow-sm);
}

.stock-card-compact.disponible { border-left: 4px solid var(--sd-success); }
.stock-card-compact.pendiente { border-left: 4px solid var(--sd-warning); }

.stock-card-compact .icon {
    font-size: 2rem;
    opacity: 0.7;
}

.stock-card-compact.disponible .icon { color: var(--sd-success); }
.stock-card-compact.pendiente .icon { color: var(--sd-warning); }

.stock-card-compact .info h6 {
    font-size: var(--sd-xsmall);
    color: var(--sd-gray-600);
    font-weight: var(--sd-font-semibold);
    text-transform: uppercase;
    margin: 0 0 5px 0;
}

.stock-card-compact .info .value {
    font-size: 1.5rem;
    color: var(--sd-gray-900);
    font-weight: var(--sd-font-bold);
}

/* ─── Sinopsis ─── */
.sinopsis-section {
    background: var(--sd-white);
    border-radius: var(--sd-radius-lg);
    padding: var(--sd-space-5);
    margin-bottom: 15px;
    box-shadow: var(--sd-shadow-md);
}

.sinopsis-section h5 {
    font-size: 1rem;
    font-weight: var(--sd-font-semibold);
    color: var(--sd-gray-900);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: var(--sd-space-2);
}

.sinopsis-text {
    font-size: 0.95rem;
    color: var(--sd-gray-700);
    line-height: var(--sd-line-height-relaxed);
    max-height: 150px;
    overflow-y: auto;
}

/* ─── Tabs Compactos ─── */
.tabs-section {
    background: var(--sd-white);
    border-radius: var(--sd-radius-lg);
    padding: 0;
    margin-bottom: 15px;
    box-shadow: var(--sd-shadow-md);
    overflow: hidden;
}

.nav-tabs-compact {
    border-bottom: 2px solid var(--sd-gray-300);
    padding: 0 20px;
    margin: 0;
}

.nav-tabs-compact .nav-link {
    color: var(--sd-gray-600);
    font-size: 0.9rem;
    font-weight: var(--sd-font-semibold);
    padding: 15px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    transition: var(--sd-transition);
}

.nav-tabs-compact .nav-link:hover {
    color: var(--sd-blue);
    background: var(--sd-blue-pale);
}

.nav-tabs-compact .nav-link.active {
    color: var(--sd-blue);
    background: var(--sd-blue-pale);
    border-bottom-color: var(--sd-blue);
}

.tab-content-compact {
    padding: var(--sd-space-5);
}

/* ─── Contenido de Tabs ─── */
.dates-grid,
.libro-grid,
.dimensions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.date-item,
.libro-item,
.dimension-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.date-item .label,
.libro-item .label,
.dimension-item .label {
    font-size: 0.8rem;
    color: var(--sd-gray-600);
    font-weight: var(--sd-font-medium);
}

.date-item .value,
.libro-item .value,
.dimension-item .value {
    font-size: 0.95rem;
    color: var(--sd-gray-900);
    font-weight: var(--sd-font-semibold);
}

/* ─── Toolbar Descargas ─── */
.downloads-toolbar {
    background: var(--sd-white);
    border-radius: var(--sd-radius-lg);
    padding: 15px 20px;
    margin-bottom: 15px;
    box-shadow: var(--sd-shadow-md);
}

.downloads-toolbar h5 {
    font-size: 1rem;
    font-weight: var(--sd-font-semibold);
    color: var(--sd-gray-900);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: var(--sd-space-2);
}

.downloads-toolbar .btn {
    font-size: 0.9rem;
    padding: var(--sd-space-2) var(--sd-space-4);
}

/* ─── Galería Compacta ─── */
.gallery-section {
    background: var(--sd-white);
    border-radius: var(--sd-radius-lg);
    padding: var(--sd-space-5);
    margin-bottom: 15px;
    box-shadow: var(--sd-shadow-md);
}

.gallery-section h5 {
    font-size: 1rem;
    font-weight: var(--sd-font-semibold);
    color: var(--sd-gray-900);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: var(--sd-space-2);
}

/* ─── Toolbar Galería ─── */
.gallery-toolbar-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sd-space-3) 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--sd-gray-300);
}

.gallery-toolbar-left,
.gallery-toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-selection-mode {
    background: var(--sd-gray-200);
    border: 2px solid var(--sd-gray-400);
    color: var(--sd-gray-700);
    font-weight: var(--sd-font-semibold);
    transition: var(--sd-transition);
}

.btn-selection-mode:hover {
    background: var(--sd-gray-300);
    border-color: var(--sd-gray-500);
}

.btn-selection-mode.active {
    background: var(--sd-blue);
    border-color: var(--sd-blue);
    color: var(--sd-white);
}

.btn-delete-selected {
    background: var(--sd-danger);
    border: none;
    color: var(--sd-white);
    font-weight: var(--sd-font-semibold);
    transition: var(--sd-transition);
}

.btn-delete-selected:hover {
    background: var(--sd-danger-dark);
}

.btn-delete-selected:disabled {
    background: var(--sd-gray-500);
    cursor: not-allowed;
    opacity: 0.5;
}

/* ─── Grid Galería ─── */
.gallery-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sd-space-6);
}

.gallery-item-compact {
    position: relative;
    border-radius: var(--sd-radius-md);
    overflow: hidden;
    background: var(--sd-gray-100);
    box-shadow: var(--sd-shadow-sm);
    transition: var(--sd-transition);
}

.gallery-item-compact:hover {
    box-shadow: var(--sd-shadow-md);
    transform: translateY(-2px);
}

.image-wrapper-compact {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    cursor: pointer;
}

.image-wrapper-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--sd-transition-transform);
}

.gallery-item-compact:hover .image-wrapper-compact img {
    transform: scale(1.1);
}

/* ─── Badge Principal ─── */
.badge-principal {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, var(--sd-warning) 0%, var(--sd-warning-dark) 100%);
    color: var(--sd-white);
    font-size: 0.7rem;
    font-weight: var(--sd-font-bold);
    padding: 4px 8px;
    border-radius: var(--sd-radius-sm);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
    z-index: 10;
}

/* ─── Orden de Imagen ─── */
.image-order {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--sd-white);
    font-size: var(--sd-xsmall);
    font-weight: var(--sd-font-semibold);
    padding: 3px 8px;
    border-radius: var(--sd-radius-sm);
    z-index: 10;
}

/* ─── Checkbox Selección ─── */
.image-checkbox-compact {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 15;
    opacity: 0;
    transition: var(--sd-transition-opacity);
}

.gallery-item-compact.selection-mode .image-checkbox-compact {
    opacity: 1;
}

.image-checkbox-compact input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--sd-blue);
}

/* ─── Dropdown Acciones ─── */
.image-actions-dropdown {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 12;
    opacity: 0;
    transition: var(--sd-transition-opacity);
}

.gallery-item-compact:hover .image-actions-dropdown {
    opacity: 1;
}

.btn-image-actions {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--sd-radius-full);
    box-shadow: var(--sd-shadow-md);
    color: var(--sd-gray-700);
    font-size: 1rem;
    transition: var(--sd-transition);
}

.btn-image-actions:hover {
    background: var(--sd-white);
    transform: scale(1.1);
    color: var(--sd-blue);
}

.dropdown-menu-compact {
    min-width: 180px;
    border: none;
    box-shadow: var(--sd-shadow-lg);
    border-radius: var(--sd-radius-md);
}

.dropdown-item-compact {
    padding: 10px 16px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--sd-transition-fast);
}

.dropdown-item-compact:hover {
    background: var(--sd-gray-200);
}

.dropdown-item-compact i {
    width: 18px;
}

/* ─── Botones Acción Finales ─── */
.actions-section {
    background: var(--sd-white);
    border-radius: var(--sd-radius-lg);
    padding: var(--sd-space-5);
    display: flex;
    gap: var(--sd-space-3);
    justify-content: center;
    box-shadow: var(--sd-shadow-md);
}

.actions-section .btn {
    font-size: 0.95rem;
    font-weight: var(--sd-font-semibold);
    padding: var(--sd-space-3) var(--sd-space-6);
    border-radius: var(--sd-radius-md);
    transition: var(--sd-transition);
}

.actions-section .btn-primary {
    background: var(--sd-gradient-primary);
    border: none;
}

.actions-section .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--sd-shadow-lg);
}

.actions-section .btn-danger {
    background: var(--sd-danger);
    border: none;
}

.actions-section .btn-danger:hover {
    background: var(--sd-danger-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.4);
}


/* ============================================================================
   15. COMPONENTE: VIEW PRODUCT MODALES
   ============================================================================
   Estilos para los modales de view-product.php
*/

/* ─── Modal Ver Imagen Grande ─── */
#imageModal .modal-content {
    background: transparent;
    border: none;
}

#imageModal .modal-header {
    border: none;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10;
}

#imageModal .btn-close {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: var(--sd-radius-full);
    padding: 10px;
    opacity: 1;
    filter: brightness(0) invert(1);
}

#imageModal .modal-body img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--sd-radius-md);
    box-shadow: var(--sd-shadow-xl);
}

/* ─── Modal Editar Producto ─── */
#productDetailModal .modal-header {
    background: var(--sd-gradient-primary);
    color: var(--sd-white);
}

#productDetailModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

#productDetailModal .form-label {
    font-weight: var(--sd-font-medium);
    color: var(--sd-gray-900);
}

#productDetailModal .form-control:focus {
    border-color: var(--sd-blue);
    box-shadow: var(--sd-focus-ring);
}

#productDetailModal .alert-info {
    background-color: var(--sd-blue-pale);
    border-color: var(--sd-blue-light);
    color: var(--sd-blue-darker);
}

/* ─── Modal Reemplazar Imagen ─── */
#replaceImageModal .modal-header {
    background: var(--sd-gradient-primary);
    color: var(--sd-white);
}

#replaceImageModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

#replacePreview {
    border-radius: var(--sd-radius-md);
}


/* ============================================================================
   16. RESPONSIVE - PRODUCT CARD COMPACT
   ============================================================================
*/
@media (max-width: 1024px) {
    .product-main-section {
        grid-template-columns: 1fr;
    }
    
    .product-image-compact {
        position: static;
    }
}

@media (max-width: 768px) {
    .info-grid-compact,
    .dates-grid,
    .libro-grid,
    .dimensions-grid {
        grid-template-columns: 1fr;
    }
    
    .price-cards-compact {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stock-cards-compact {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid-compact {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}


/* ============================================================================
   FIN DEL SISTEMA DE DISEÑO
   ============================================================================
   
   EJEMPLO DE USO EN OTROS ARCHIVOS:
   
   .mi-boton {
       background: var(--sd-blue);
       color: var(--sd-white);
       padding: var(--sd-space-3) var(--sd-space-5);
       border-radius: var(--sd-radius-md);
       transition: var(--sd-transition);
   }
   
   .mi-boton:hover {
       background: var(--sd-blue-dark);
       box-shadow: var(--sd-shadow-md);
   }
   
   ============================================================================
*/