/*
 * Estilos globales de PrimeLux SmartShop
 * Variables del sistema de diseño, tipografía base y utilidades reutilizables.
 * Tailwind CDN gestiona las clases utilitarias — este archivo solo contiene
 * lo que Tailwind no puede manejar directamente.
 */

/* ─── Variables del sistema de diseño ─────────────────────────────────────── */
:root {
    /* Marca */
    --color-brand:          #2563EB;
    --color-brand-hover:    #1D4ED8;
    --color-brand-active:   #1E40AF;

    /* Acento (dorado) — oscurecido para contraste sobre fondo claro */
    --color-accent:         #B45309;
    --color-accent-hover:   #92400E;

    /* Fondos — tema claro azulado inspirado en el logo */
    --color-bg-main:        #F0F4F8;
    --color-bg-secondary:   #E2EBF4;
    --color-bg-card:        #FFFFFF;
    --color-bg-hover:       #D4E2F0;
    --color-bg-surface:     #0D1B2A;
    --color-bg-surface-hover: #1A2D42;

    /* Texto — invertido para fondo claro */
    --color-text-primary:   #0D1B2A;
    --color-text-secondary: #4B6080;
    --color-text-muted:     #6B7280;
    --color-text-disabled:  #9CA3AF;

    /* Bordes */
    --color-border:         #C8D8E8;
    --color-divider:        #E2EAF2;

    /* Semánticos */
    --color-success:        #10B981;
    --color-success-bg:     rgba(16, 185, 129, 0.10);
    --color-success-border: rgba(16, 185, 129, 0.30);

    --color-error:          #EF4444;
    --color-error-bg:       rgba(239, 68, 68, 0.10);
    --color-error-border:   rgba(239, 68, 68, 0.30);

    /* Warning oscurecido para contraste sobre fondo claro */
    --color-warning:        #B45309;
    --color-info:           #2563EB;

    /* Links — azul oscuro para contraste sobre fondo claro */
    --color-link:           #2563EB;
    --color-link-hover:     #1D4ED8;

    /* Tipografía */
    --font-base:            'Sora', sans-serif;
    --font-size-body:       15px;
    --line-height-body:     1.6;
}

/* ─── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family:  var(--font-base);
    font-size:    var(--font-size-body);
    line-height:  var(--line-height-body);
    background:   var(--color-bg-main);
    color:        var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x:   hidden; /* evita scroll horizontal en móvil */
}

h1 { font-size: clamp(28px, 4vw, 40px);   font-weight: 700; line-height: 1.2; }
h2 { font-size: clamp(22px, 3vw, 28px);   font-weight: 600; line-height: 1.3; }
h3 { font-size: clamp(18px, 2.5vw, 22px); font-weight: 500; line-height: 1.4; }

/* ─── Autofill ──────────────────────────────────────────────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow:      0 0 0 30px var(--color-bg-secondary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    transition:              background-color 5000s ease-in-out 0s;
}

/* ─── Iconos SVG ────────────────────────────────────────────────────────────── */
.icon { fill: var(--color-text-secondary); transition: fill 0.15s ease; }
button:hover .icon, button:focus .icon { fill: var(--color-text-primary); }

/* ─── Scrollbar global (webkit) ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ─── Scrollbar fina para listas compactas ───────────────────────────────────── */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.scrollbar-thin::-webkit-scrollbar       { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

/* ─── Ocultar scrollbar horizontal ──────────────────────────────────────────── */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ─── Componentes de autenticación ──────────────────────────────────────────── */

/* Tarjeta contenedora de formularios auth */
.auth-card {
    background-color: var(--color-bg-card);
    border:           1px solid var(--color-border);
}

/* Alerta de error (formularios auth y perfil) */
.alert-error {
    background-color: var(--color-error-bg);
    border:           1px solid var(--color-error-border);
    color:            var(--color-error);
}

/* Alerta de éxito (formularios auth y perfil) */
.alert-success {
    background-color: var(--color-success-bg);
    border:           1px solid var(--color-success-border);
    color:            var(--color-success);
}

/* ─── Slider doble de precio ────────────────────────────────────────────────── */
.price-slider {
    -webkit-appearance: none;
    appearance:         none;
    height:             6px;
    background:         transparent;
    outline:            none;
}

/* Thumb — webkit (Chrome, Safari, Edge) */
.price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              18px;
    height:             18px;
    border-radius:      50%;
    background:         var(--color-brand);
    border:             2px solid #FFFFFF;
    cursor:             pointer;
    pointer-events:     all;
    box-shadow:         0 1px 4px rgba(0,0,0,0.4);
    transition:         background 0.15s ease, transform 0.15s ease;
}
.price-slider::-webkit-slider-thumb:hover  { background: var(--color-brand-hover); transform: scale(1.15); }
.price-slider:active::-webkit-slider-thumb { transform: scale(1.2); }

/* Thumb — Firefox */
.price-slider::-moz-range-thumb {
    width:          18px;
    height:         18px;
    border-radius:  50%;
    background:     var(--color-brand);
    border:         2px solid #FFFFFF;
    cursor:         pointer;
    pointer-events: all;
    box-shadow:     0 1px 4px rgba(0,0,0,0.4);
    transition:     background 0.15s ease, transform 0.15s ease;
}
.price-slider::-moz-range-thumb:hover { background: var(--color-brand-hover); transform: scale(1.15); }
.price-slider::-moz-range-track       { background: transparent; height: 6px; }

/* ─── Tarjetas de categorías home ─────────────────────────────────────────── */
.category-card {
  	display: block;
    border: 1px solid transparent;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.category-card-title {
    color: var(--color-text-primary);
    transition: color 0.2s ease;
}

.category-card-description {
    color: var(--color-text-secondary);
}

.category-card-icon {
    border: 1px solid transparent;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.category-card:hover .category-card-icon {
    transform: translateX(1px);
}

/* GOLD */
.category-card--gold {
    background-color: #FEF9EC;
    border-color: #F5D87A;
}

.category-card--gold:hover {
    background-color: #FEF3CC;
}

.category-card--gold .category-card-icon {
    color: #B45309;
    background-color: rgba(180, 83, 9, 0.08);
    border-color: rgba(245, 216, 122, 0.60);
}

.category-card--gold:hover .category-card-title {
    color: #B45309;
}

.category-card--gold:hover .category-card-icon {
    border-color: #B45309;
}

/* BLUE */
.category-card--blue {
    background-color: #EFF6FF;
    border-color: #BFDBFE;
}

.category-card--blue:hover {
    background-color: #DBEAFE;
}

.category-card--blue .category-card-icon {
    color: #2563EB;
    background-color: rgba(37, 99, 235, 0.08);
    border-color: rgba(191, 219, 254, 0.80);
}

.category-card--blue:hover .category-card-title {
    color: #2563EB;
}

.category-card--blue:hover .category-card-icon {
    border-color: #2563EB;
}

/* HYBRID */
.category-card--hybrid {
    background-color: #F0F6FF;
    border-color: #C5D8F0;
}

.category-card--hybrid:hover {
    background-color: #E2EEF8;
}

.category-card--hybrid .category-card-icon {
    color: #CFAE4B;
    background-color: rgba(207, 174, 75, 0.10);
    border-color: rgba(207, 174, 75, 0.35);
}

.category-card--hybrid:hover .category-card-title {
    color: #CFAE4B;
}

.category-card--hybrid:hover .category-card-icon {
    border-color: #CFAE4B;
}