/* ============================================================
   Sunbytech — Sistema de Diseño
   Archivo: static/css/sunby.css
   ============================================================ */

/* --- Variables --- */
:root {
    --sunby-bg:       #EBEBE8;
    --sunby-card:     #FFFFFF;
    --sunby-primary:  #1D4ED8;
    --sunby-border:   #E2E8F0;
    --sunby-accent:   #0891B2;
    --sunby-text:     #0F172A;
    --sunby-text-sec: #64748B;
    --sunby-sale:     #DC2626;
    --sunby-stock:    #059669;
    --rounded-box: 0.25rem;
    --rounded-btn: 0.25rem;
    --rounded-badge: 0.1875rem;
}

/* --- Base --- */
body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--sunby-bg);
    color: var(--sunby-text);
}

/* --- Border Radius Global --- */
.rounded-xl, .rounded-lg, .rounded-box, .rounded-2xl,
.btn, .card, .badge, .join, .join-item {
    border-radius: var(--rounded-box) !important;
}
.rounded-full { border-radius: 9999px; }

/* --- Utility Classes --- */
.bg-sunby-primary { background-color: var(--sunby-primary); }
.bg-sunby-accent  { background-color: var(--sunby-accent); }
.bg-sunby-card    { background-color: var(--sunby-card); }
.text-sunby-primary { color: var(--sunby-primary); }
.text-sunby-accent  { color: var(--sunby-accent); }
.text-sunby-sec     { color: var(--sunby-text-sec); }
.text-sunby-sale    { color: var(--sunby-sale); }
.border-sunby       { border-color: var(--sunby-border); }
.bg-sunby-light     { background-color: var(--sunby-bg); }
.bg-sunby-soft      { background-color: var(--sunby-border); }
.text-sunby-strong  { color: var(--sunby-text); }

/* --- Discount Badge --- */
.discount-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* --- Tag Colors (Light) --- */
.tag-gray   { background-color: #BBBDBF; color: #555; }
.tag-red    { background-color: #fecaca; color: #991b1b; }
.tag-orange { background-color: #fed7aa; color: #9a3412; }
.tag-yellow { background-color: #fef08a; color: #854d0e; }
.tag-green  { background-color: #bbf7d0; color: #166534; }
.tag-teal   { background-color: #99f6e4; color: #115e59; }
.tag-blue   { background-color: #bfdbfe; color: #1e40af; }
.tag-purple { background-color: #e9d5ff; color: #6b21a8; }
.tag-pink   { background-color: #fbcfe8; color: #9d174d; }

/* --- Hover Effects --- */
.product-card { transition: transform 0.2s, box-shadow 0.2s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.12); }
a, button, .btn, .badge, .card, [onclick] { transition: all 0.2s ease; }
a:not(.btn):hover, button:not(.btn):hover { opacity: 0.8; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn:active { transform: translateY(0); }
nav a:hover, nav button:hover { opacity: 0.85 !important; }
.card-hover { transition: transform 0.2s, box-shadow 0.2s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

/* --- Variant Selector --- */
.variant-option { transition: all 0.2s ease; }
.variant-option:not(.cursor-not-allowed):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.variant-option.variant-active {
    border-color: #1D4ED8 !important;
    background-color: #EFF6FF !important;
    box-shadow: 0 0 0 1px #1D4ED8;
}

/* --- Carousel --- */
.carousel { scroll-behavior: smooth; scroll-snap-type: x mandatory; }
.carousel-item { scroll-snap-align: start; }

/* --- Page Transition --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
main { animation: fadeIn 0.25s ease; }

/* --- Toast Animations --- */
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.animate-slide-in { animation: slideIn 0.3s ease-out; }
.animate-slide-out { animation: slideOut 0.3s ease-in forwards; }

/* ============================================================
   MODO OSCURO
   ============================================================ */
[data-theme="dark"] body {
    background-color: #02040A;
    color: #F8FAFC;
}
[data-theme="dark"] .bg-white,
[data-theme="dark"] .card,
[data-theme="dark"] .bg-sunby-card,
[data-theme="dark"] .product-card {
    background-color: #121824 !important;
    border: 1px solid #1E293B;
}
[data-theme="dark"] .product-card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.6);
}
[data-theme="dark"] .badge {
    color: #F8FAFC;
}
[data-theme="dark"] .variant-option.variant-active {
    border-color: #3B82F6 !important;
    background-color: #1E3A5F !important;
    box-shadow: 0 0 0 1px #3B82F6;
}

/* --- Dark: Tags --- */
[data-theme="dark"] .tag-gray   { background-color: #1E293B; color: #94A3B8; }
[data-theme="dark"] .tag-red    { background-color: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tag-orange { background-color: #431407; color: #fdba74; }
[data-theme="dark"] .tag-yellow { background-color: #422006; color: #fde047; }
[data-theme="dark"] .tag-green  { background-color: #052e16; color: #86efac; }
[data-theme="dark"] .tag-teal   { background-color: #042f2e; color: #5eead4; }
[data-theme="dark"] .tag-blue   { background-color: #0c1f5c; color: #93c5fd; }
[data-theme="dark"] .tag-purple { background-color: #2e1065; color: #d8b4fe; }
[data-theme="dark"] .tag-pink   { background-color: #4c0519; color: #f9a8d4; }

/* --- Dark: Text --- */
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600 {
    color: #94A3B8 !important;
}
[data-theme="dark"] .text-sunby-strong {
    color: #F8FAFC !important;
}

/* --- Dark: Inputs --- */
[data-theme="dark"] .join .input,
[data-theme="dark"] #qty-selector,
[data-theme="dark"] select.select-bordered {
    background-color: #121824;
    color: #F8FAFC;
    border-color: #1E293B;
}

/* --- Image containers (product cards & detail) --- */
.bg-card-img { background-color: #F8FAFC; }
[data-theme="dark"] .bg-card-img { background-color: #0F172A; }

/* --- Dark: Main image container --- */
[data-theme="dark"] #main-image-container {
    background: transparent !important;
    border: 1px solid #1E293B;
}

/* --- Dark: Dividers & Borders --- */
[data-theme="dark"] .divide-y > * { border-color: #1E293B; }
[data-theme="dark"] .border      { border-color: #1E293B !important; }

/* --- Navbar & Footer gradient (light mode) --- */
.nav-sunby {
    background: linear-gradient(135deg, #1D4ED8 0%, #0F172A 100%);
}
.footer-sunby {
    background: linear-gradient(135deg, #1D4ED8 0%, #0F172A 100%);
}

/* --- Barra de categorías (segundo navbar, #6/#7) --- */
.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.cat-bar {
    background: linear-gradient(135deg, #002050 0%, #001438 100%);
    scrollbar-width: none;
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat-bar .cat-item:not(.hidden) {
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, color .15s;
    flex: none;
    cursor: pointer;
}
.cat-bar .cat-item:hover,
.cat-bar .dropdown:hover > .cat-item {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.cat-bar .cat-cta {
    background: #fbbf24;
    color: #1f2937;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .15s, transform .1s;
    flex: none;
}
.cat-bar .cat-cta:hover {
    background: #fcd34d;
    transform: translateY(-1px);
}
/* Menú desplegable de categorías (hover) */
.cat-menu {
    background: #ffffff !important;
    color: #374151 !important;
    max-height: 70vh;
    overflow-y: auto;
}
.cat-menu li a {
    color: #374151 !important;
    font-size: 13px;
    padding: 6px 10px;
}
.cat-menu li a:hover {
    background: #f3f4f6 !important;
    color: #05AD98 !important;
}
[data-theme="dark"] .cat-bar {
    background: linear-gradient(135deg, #0d1b3a 0%, #071027 100%);
}
[data-theme="dark"] .cat-menu {
    background: #1E293B !important;
    color: #e5e7eb !important;
}
[data-theme="dark"] .cat-menu li a {
    color: #e5e7eb !important;
}
[data-theme="dark"] .cat-menu li a:hover {
    background: #334155 !important;
    color: #7dd3c0 !important;
}

/* --- Navbar & Footer (modo oscuro) --- */
[data-theme="dark"] .nav-sunby {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}
[data-theme="dark"] .footer-sunby {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}
[data-theme="dark"] .cat-bar {
    background: linear-gradient(135deg, #16233b 0%, #0b111f 100%);
}

/* --- Logo siempre blanco (navbar azul en ambos modos) --- */
nav img.h-7[alt="Sunbytech"] {
    filter: brightness(0) invert(1);
}

/* --- Dark: Search Input --- */
[data-theme="dark"] nav input::placeholder {
    color: rgba(255,255,255,0.4);
}
[data-theme="dark"] #mobile-search input {
    background-color: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
    color: white;
}
[data-theme="dark"] nav .join input {
    background-color: #2C2C2E;
    color: #E5E5E7;
    border-color: #3A3A3C;
}

/* --- Dark: Alerts --- */
[data-theme="dark"] .alert {
    background-color: #2C2C2E !important;
    color: #E5E5E7;
}
[data-theme="dark"] .alert-success { border-left: 4px solid #22c55e; }
[data-theme="dark"] .alert-warning { border-left: 4px solid #f59e0b; }
[data-theme="dark"] .alert-error   { border-left: 4px solid #ef4444; }
[data-theme="dark"] .alert-info    { border-left: 4px solid #3b82f6; }

/* --- Dark: Trash Icon --- */
[data-theme="dark"] .btn-ghost.text-gray-400 {
    color: #8E8E93;
}

/* --- Guard anti-overflow movil (P1/P2, 2026-09-12) ---
   'clip' (no 'hidden') no crea contenedor de scroll -> position:sticky sigue OK */
@media (max-width: 767px) {
    html, body { overflow-x: clip; max-width: 100%; }
}