@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Sistema de Variables CSS para Modo Claro y Oscuro */
/* Inspirado en el diseño SaaS moderno con color de acento #D6FF00 */

:root {
  /* Configuración base */
  --border-radius: 0.5rem;
  
  /* Sistema de fuentes */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Modo claro - Colores principales */
  --background: #ffffff;
  --foreground: #161618;
  --card: #ffffff;
  --card-foreground: #161618;
  --card-two: #2B2C32;
  --card-two-foreground: #FFFFFF;
  --card-three: #D9DFE5;
  --card-three-foreground: #2B2C32;
  --popover: #ffffff;
  --popover-foreground: #161618;
  
  /* Color de acento personalizado #D6FF00 */
  --primary: #161618;
  --primary-foreground: #FFFFFF;
  --accent: #161618;
  --accent-foreground: #FFFFFF;
  
  /* Colores secundarios */
  --secondary: #ffffff;
  --secondary-foreground: #6F747D;
  --muted: #A3A7AD;
  --muted-foreground: #6F747D;
  --hovering: #2E2E33;
  
  /* Estados y bordes */
  --destructive: #E73D43;
  --destructive-foreground: #ffffff;
  --border: #D9DBDD;
  --input: #FCFCFD;
  --input-placeholder: #4D576A50;
  --input-blocked: #7D89A1;
  --ring: #161618;
  
  /* Colores para gráficos */
  --chart-1: #D6FF00;
  --chart-2: #00d4ff;
  --chart-3: #ff6b6b;
  --chart-4: #4ecdc4;
  --chart-5: #45b7d1;
  
  --navbar-background: #EAEAEA;

  /* Sidebar */
  --sidebar: #ffffff;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #D6FF00;
  --sidebar-primary-foreground: #22272f;
  --sidebar-accent: #D6FF00;
  --sidebar-accent-foreground: #22272f;
  --sidebar-border: #d6d9e1;
  --sidebar-ring: #D6FF00;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}


.rounded { border-radius: var(--border-radius) !important; }
.rounded-lg { border-radius: calc(var(--border-radius) + .125rem) !important; }
.rounded-xl { border-radius: calc(var(--border-radius) + .25rem) !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }



/* Utilidades para componentes */
.bg-background { background-color: var(--background) !important; }
.bg-card { background-color: var(--card) !important; }
.bg-card-two { background-color: var(--card-two) !important; }
.bg-card-three { background-color: var(--card-three) !important; }
.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-muted { background-color: var(--muted) !important; }
.bg-accent { background-color: var(--accent) !important; }
.bg-destructive { background-color: var(--destructive) !important; }

.bg-navbar { background-color: var(--navbar-background) !important; }

.text-foreground { color: var(--foreground) !important; }
.text-card-foreground { color: var(--card-foreground) !important; }
.text-card-two-foreground { color: var(--card-two-foreground) !important; }
.text-card-three-foreground { color: var(--card-three-foreground) !important; }
.text-primary { color: var(--primary) !important; }
.text-primary-foreground { color: var(--primary-foreground) !important; }
.text-secondary-foreground { color: var(--secondary-foreground) !important; }
.text-muted-foreground { color: var(--muted-foreground) !important; }
.text-accent-foreground { color: var(--accent-foreground) !important; }

.border-border { border-color: var(--border) !important; }
.border-input { border-color: var(--border) !important; }
.border-ring { border-color: var(--ring) !important; }
.radius { border-radius: var(--border-radius) !important; }

/* Card Hover Animation */
.card-hover {
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent) !important;
}

/* Border Radius Utilities */
.radius-top {
    border-top-left-radius: var(--border-radius) !important;
    border-top-right-radius: var(--border-radius) !important;
}

/* Carousel Styles */
.carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.carousel-track {
    display: flex;
    transition: transform 0.3s ease;
    align-items: stretch;
}

.carousel-slide {
    flex-shrink: 0;
    box-sizing: border-box;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
    background-color: var(--secondary);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-btn-prev {
    left: -24px;
}

.carousel-btn-next {
    right: -24px;
}

/* Color dots styles */
.color-dot {
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-dot:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.color-dot.active {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--accent);
}

/* Cart button styles */
.btn.bg-primary {
    transition: all 0.2s ease;
}

.btn.bg-primary:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.btn.bg-primary:active {
    transform: scale(0.95);
}

/* Productos destacados card styles */
.productos-destacados-section .carousel-slide .border {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.productos-destacados-section .carousel-slide .p-3 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1rem !important;
}

.productos-destacados-section .carousel-slide .p-3 > div:first-child {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.productos-destacados-section .carousel-slide .text-muted-foreground {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: calc(1.4em * 2);
    margin-bottom: 1rem !important;
}

.productos-destacados-section .carousel-slide .d-flex.justify-content-between {
    align-items: flex-end !important;
    margin-top: auto;
}

.productos-destacados-section .carousel-slide .btn.bg-primary {
    align-self: flex-end;
    margin-top: auto;
}