/* ==============================================================================
   MITALADRO.COM - SISTEMA DE PLANTILLAS VISUALES & TEMAS TRUPER
   1. theme-truper-stone: Piedra Tallada & Granito Truper (Carved Stone Heavy-Duty)
   2. theme-truper-dark:  Taller Industrial Oscuro (Carbon Black & Safety Orange)
   3. theme-truper-clean: Ferretería Moderna / Light (Crisp Clean & Truper Accents)
   ============================================================================== */

/* Tipografía de Alto Impacto para Herramientas */
.theme-truper-stone h1, .theme-truper-stone h2, .theme-truper-stone h3,
.theme-truper-stone .section-title, .theme-truper-stone .product-price,
.theme-truper-stone .category-chip, .theme-truper-stone .btn-primary,
.theme-truper-dark h1, .theme-truper-dark h2, .theme-truper-dark h3,
.theme-truper-dark .section-title, .theme-truper-dark .product-price,
.theme-truper-dark .category-chip, .theme-truper-dark .btn-primary {
    font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif;
    letter-spacing: 0.5px;
}

/* ==============================================================================
   1. TEMA: PIEDRA TALLADA & GRANITO TRUPER (theme-truper-stone)
   ============================================================================== */
body.theme-truper-stone {
    background-color: #121316 !important;
    background-image: 
        radial-gradient(circle at 50% 8%, rgba(243, 112, 33, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 10% 30%, rgba(38, 39, 46, 0.8) 0%, transparent 40%),
        radial-gradient(circle at 90% 70%, rgba(30, 31, 38, 0.8) 0%, transparent 45%),
        linear-gradient(180deg, #101114 0%, #18191f 40%, #111215 100%) !important;
    background-attachment: fixed !important;
    color: #e4e4e7 !important;
}

/* Cabecera Estilo Losa de Granito Tallado */
.theme-truper-stone .header {
    background: linear-gradient(180deg, #1a1b22 0%, #121317 100%) !important;
    border-bottom: 3px solid #F37021 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(243, 112, 33, 0.25) !important;
    backdrop-filter: blur(12px) !important;
}

/* Logotipo en Relieve de Piedra Cincelada */
.theme-truper-stone .header .logo span {
    color: #f4f4f5 !important;
    text-shadow: 
        1px 1px 1px rgba(255, 255, 255, 0.15),
        -1px -1px 2px rgba(0, 0, 0, 0.9),
        0 2px 8px rgba(0, 0, 0, 0.95),
        0 0 15px rgba(243, 112, 33, 0.3) !important;
    letter-spacing: -0.2px;
}

.theme-truper-stone .header .logo span span[style*="color: #F37021"] {
    color: #F37021 !important;
    text-shadow: 
        0 0 12px rgba(243, 112, 33, 0.6),
        1px 1px 1px rgba(255, 255, 255, 0.2),
        -1px -1px 2px rgba(0,0,0,0.8) !important;
}

.theme-truper-stone .header .logo img {
    border: 2px solid #F37021 !important;
    box-shadow: 0 0 15px rgba(243, 112, 33, 0.5), inset 0 0 8px rgba(0,0,0,0.5) !important;
}

/* Enlaces de navegación */
.theme-truper-stone .header .nav-link {
    color: #e4e4e7 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
}

.theme-truper-stone .header .nav-link:hover {
    color: #ffffff !important;
    background: rgba(243, 112, 33, 0.15) !important;
    border-color: #F37021 !important;
    box-shadow: 0 0 12px rgba(243, 112, 33, 0.3) !important;
}

/* Barra de Búsqueda Cincelada */
.theme-truper-stone .search-bar,
.theme-truper-stone .search-input {
    background: #17181d !important;
    border: 1.5px solid rgba(243, 112, 33, 0.35) !important;
    color: #f4f4f5 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.theme-truper-stone .search-input:focus {
    border-color: #F37021 !important;
    box-shadow: 0 0 15px rgba(243, 112, 33, 0.4), inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.theme-truper-stone .search-bar .search-icon,
.theme-truper-stone .search-input::placeholder {
    color: #a1a1aa !important;
}

/* Chips de Categorías en Losa de Piedra */
.theme-truper-stone .category-chip {
    background: linear-gradient(180deg, #23252d 0%, #191a20 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #d4d4d8 !important;
    text-transform: uppercase !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
}

.theme-truper-stone .category-chip:hover {
    background: linear-gradient(180deg, #2d2f3a 0%, #20222a 100%) !important;
    border-color: #F37021 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(243, 112, 33, 0.2) !important;
}

.theme-truper-stone .category-chip.active {
    background: linear-gradient(135deg, #F37021 0%, #C2410C 100%) !important;
    border-color: #fb923c !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(243, 112, 33, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Tarjetas de Producto - Pedestales de Granito */
.theme-truper-stone .product-card {
    background: linear-gradient(170deg, #1f2128 0%, #15161b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-top: 3px solid #F37021 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

.theme-truper-stone .product-card:hover {
    transform: translateY(-5px) !important;
    border-color: #F37021 !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.7), 0 0 20px rgba(243, 112, 33, 0.25) !important;
}

.theme-truper-stone .product-card .product-image-container,
.theme-truper-stone .product-image-wrap {
    background: #0f1013 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.theme-truper-stone .product-card .product-title,
.theme-truper-stone .product-name {
    color: #f4f4f5 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

.theme-truper-stone .product-card .product-description {
    color: #a1a1aa !important;
}

.theme-truper-stone .product-price {
    color: #F37021 !important;
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 12px rgba(243, 112, 33, 0.3) !important;
}

.theme-truper-stone .product-card .btn-add-cart,
.theme-truper-stone .btn-primary {
    background: linear-gradient(180deg, #F37021 0%, #C2410C 100%) !important;
    border: none !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    font-size: 1.02rem !important;
    box-shadow: 0 4px 14px rgba(243, 112, 33, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.theme-truper-stone .product-card .btn-add-cart:hover,
.theme-truper-stone .btn-primary:hover {
    background: linear-gradient(180deg, #ea580c 0%, #9a3412 100%) !important;
    box-shadow: 0 6px 20px rgba(243, 112, 33, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Modales y Paneles Deslizantes en Piedra Oscura */
.theme-truper-stone .modal-content,
.theme-truper-stone .cart-sidebar,
.theme-truper-stone .checkout-modal,
.theme-truper-stone .product-modal-content {
    background: #17181e !important;
    color: #f4f4f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 25px rgba(243, 112, 33, 0.2) !important;
}

.theme-truper-stone .cart-sidebar .cart-header,
.theme-truper-stone .checkout-header {
    background: linear-gradient(180deg, #22242c 0%, #18191f 100%) !important;
    border-bottom: 2px solid #F37021 !important;
    color: #ffffff !important;
}

.theme-truper-stone .cart-item {
    background: #1c1d24 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f4f4f5 !important;
}

.theme-truper-stone .cart-item-name {
    color: #f4f4f5 !important;
}

.theme-truper-stone .cart-footer {
    background: #131418 !important;
    border-top: 2px solid rgba(243, 112, 33, 0.3) !important;
}

/* Footer Sólido de Cantería y Acero */
.theme-truper-stone .footer,
.theme-truper-stone .modern-footer {
    background: linear-gradient(180deg, #141519 0%, #0d0e11 100%) !important;
    border-top: 3px solid #F37021 !important;
    color: #a1a1aa !important;
}

.theme-truper-stone .footer h3,
.theme-truper-stone .footer h4,
.theme-truper-stone .modern-footer h3,
.theme-truper-stone .modern-footer h4 {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(243, 112, 33, 0.3) !important;
}

.theme-truper-stone .footer a,
.theme-truper-stone .modern-footer a {
    color: #d4d4d8 !important;
}

.theme-truper-stone .footer a:hover,
.theme-truper-stone .modern-footer a:hover {
    color: #F37021 !important;
}

/* Carrito de Compras en Piedra Oscura */
.theme-truper-stone.cart-page,
.theme-truper-stone .cart-page {
    background: #121316 !important;
}

.theme-truper-stone .cart-content {
    background: #181920 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f4f4f5 !important;
}

/* ==============================================================================
   2. TEMA: TALLER INDUSTRIAL OSCURO (theme-truper-dark)
   ============================================================================== */
body.theme-truper-dark {
    background-color: #0d0e12 !important;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(243, 112, 33, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0d0e12 0%, #15161d 50%, #0a0b0e 100%) !important;
    background-attachment: fixed !important;
    color: #e4e4e7 !important;
}

.theme-truper-dark .header {
    background: #121318 !important;
    border-bottom: 2px solid #F37021 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7) !important;
}

.theme-truper-dark .header .logo span {
    color: #ffffff !important;
}

.theme-truper-dark .header .nav-link {
    color: #e4e4e7 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
}

.theme-truper-dark .header .nav-link:hover {
    color: #ffffff !important;
    background: rgba(243, 112, 33, 0.2) !important;
    border-color: #F37021 !important;
}

.theme-truper-dark .search-bar,
.theme-truper-dark .search-input,
.theme-truper-dark #search-input {
    background: #171821 !important;
    border: 1.5px solid #2d2f3b !important;
    color: #f4f4f5 !important;
}

.theme-truper-dark #search-input:focus {
    border-color: #F37021 !important;
    box-shadow: 0 0 10px rgba(243, 112, 33, 0.4) !important;
}

.theme-truper-dark .filters {
    background: #14151c !important;
    border: 1px solid #252632 !important;
}

.theme-truper-dark .filter-group label {
    color: #e4e4e7 !important;
}

.theme-truper-dark .category-chip {
    background: #1a1b24 !important;
    color: #cbd5e1 !important;
    border: 1px solid #2f3140 !important;
    font-weight: 700 !important;
}

.theme-truper-dark .category-chip:hover {
    background: #242633 !important;
    border-color: #F37021 !important;
    color: #ffffff !important;
}

.theme-truper-dark .category-chip.active {
    background: #F37021 !important;
    color: #ffffff !important;
    border-color: #F37021 !important;
    box-shadow: 0 4px 14px rgba(243, 112, 33, 0.45) !important;
}

.theme-truper-dark .product-card {
    background: #161720 !important;
    border: 1px solid #272836 !important;
    border-top: 3px solid #F37021 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

.theme-truper-dark .product-card:hover {
    border-color: #F37021 !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.7), 0 0 15px rgba(243, 112, 33, 0.25) !important;
    transform: translateY(-4px) !important;
}

.theme-truper-dark .product-card .product-image-container,
.theme-truper-dark .product-card .product-image-wrap {
    background: #0d0e13 !important;
    border: 1px solid #22232e !important;
}

.theme-truper-dark .product-card .product-title,
.theme-truper-dark .product-card .product-name {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.theme-truper-dark .product-card .product-description {
    color: #9ca3af !important;
}

.theme-truper-dark .product-price {
    color: #F37021 !important;
    font-weight: 800 !important;
}

.theme-truper-dark .modal-content,
.theme-truper-dark .cart-sidebar,
.theme-truper-dark .checkout-modal,
.theme-truper-dark .product-modal-content {
    background: #14151c !important;
    color: #f4f4f5 !important;
    border: 1px solid #2b2c3a !important;
}

.theme-truper-dark .cart-sidebar .cart-header,
.theme-truper-dark .checkout-header {
    background: #1b1c26 !important;
    border-bottom: 2px solid #F37021 !important;
    color: #ffffff !important;
}

.theme-truper-dark .cart-item {
    background: #1a1b24 !important;
    border: 1px solid #2b2c3a !important;
    color: #f4f4f5 !important;
}

.theme-truper-dark .cart-item-name {
    color: #ffffff !important;
}

.theme-truper-dark .footer,
.theme-truper-dark .modern-footer {
    background: #0a0b0e !important;
    border-top: 3px solid #F37021 !important;
    color: #9ca3af !important;
}

.theme-truper-dark .cart-page {
    background: #0d0e12 !important;
}

.theme-truper-dark .cart-content {
    background: #15161d !important;
    border: 1px solid #252632 !important;
    color: #f4f4f5 !important;
}

/* ==============================================================================
   3. TEMA: FERRETERÍA MODERNA / LIGHT (theme-truper-clean)
   ============================================================================== */
body.theme-truper-clean {
    background-color: #f8fafc !important;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(243, 112, 33, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    background-attachment: fixed !important;
    color: #0f172a !important;
}

.theme-truper-clean .header {
    background: #ffffff !important;
    border-bottom: 2px solid #F37021 !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06) !important;
}

.theme-truper-clean .header .logo span {
    color: #18181b !important;
    text-shadow: none !important;
}

.theme-truper-clean .header .nav-link {
    color: #334155 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

.theme-truper-clean .header .nav-link:hover {
    color: #F37021 !important;
    background: #fff7ed !important;
    border-color: #F37021 !important;
}

.theme-truper-clean .search-bar,
.theme-truper-clean .search-input,
.theme-truper-clean #search-input {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: none !important;
}

.theme-truper-clean #search-input:focus {
    border-color: #F37021 !important;
    box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.15) !important;
}

.theme-truper-clean #search-input::placeholder {
    color: #94a3b8 !important;
}

.theme-truper-clean .filters {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}

.theme-truper-clean .filter-group label {
    color: #1e293b !important;
}

.theme-truper-clean .filter-group select {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1.5px solid #e2e8f0 !important;
}

.theme-truper-clean .category-chip {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.theme-truper-clean .category-chip:hover {
    background: #fff7ed !important;
    color: #ea580c !important;
    border-color: #F37021 !important;
}

.theme-truper-clean .category-chip.active {
    background: linear-gradient(135deg, #F37021 0%, #C2410C 100%) !important;
    color: #ffffff !important;
    border-color: #F37021 !important;
    box-shadow: 0 4px 12px rgba(243, 112, 33, 0.35) !important;
}

.theme-truper-clean .product-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 3px solid #F37021 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

.theme-truper-clean .product-card:hover {
    border-color: #F37021 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 0 15px rgba(243, 112, 33, 0.15) !important;
    transform: translateY(-4px) !important;
}

.theme-truper-clean .product-card .product-image-container,
.theme-truper-clean .product-card .product-image-wrap {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
}

.theme-truper-clean .product-card .product-title,
.theme-truper-clean .product-card .product-name {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.theme-truper-clean .product-card .product-description {
    color: #64748b !important;
}

.theme-truper-clean .product-price {
    color: #ea580c !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

.theme-truper-clean .product-card .btn-add-cart,
.theme-truper-clean .btn-primary {
    background: linear-gradient(135deg, #F37021 0%, #C2410C 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(243, 112, 33, 0.35) !important;
}

.theme-truper-clean .product-card .btn-add-cart:hover,
.theme-truper-clean .btn-primary:hover {
    background: linear-gradient(135deg, #ea580c 0%, #9a3412 100%) !important;
    box-shadow: 0 6px 18px rgba(243, 112, 33, 0.5) !important;
}

.theme-truper-clean .modal-content,
.theme-truper-clean .cart-sidebar,
.theme-truper-clean .checkout-modal,
.theme-truper-clean .product-modal-content {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}

.theme-truper-clean .cart-sidebar .cart-header,
.theme-truper-clean .checkout-header {
    background: #f8fafc !important;
    border-bottom: 2px solid #F37021 !important;
    color: #0f172a !important;
}

.theme-truper-clean .cart-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

.theme-truper-clean .cart-item-name {
    color: #0f172a !important;
}

.theme-truper-clean .cart-footer {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

.theme-truper-clean .footer,
.theme-truper-clean .modern-footer {
    background: #0f172a !important;
    border-top: 3px solid #F37021 !important;
    color: #94a3b8 !important;
}

.theme-truper-clean .footer h3,
.theme-truper-clean .footer h4,
.theme-truper-clean .modern-footer h3,
.theme-truper-clean .modern-footer h4 {
    color: #ffffff !important;
}

.theme-truper-clean .footer a,
.theme-truper-clean .modern-footer a {
    color: #cbd5e1 !important;
}

.theme-truper-clean .footer a:hover,
.theme-truper-clean .modern-footer a:hover {
    color: #F37021 !important;
}

.theme-truper-clean .cart-page {
    background: #f8fafc !important;
}

.theme-truper-clean .cart-content {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
}

.theme-truper-clean .section-title,
.theme-truper-clean h1,
.theme-truper-clean h2,
.theme-truper-clean h3 {
    color: #0f172a !important;
}