/* ==========================================================================
   MODELO 4 — MODERNO / TECNOLÓGICO (Precisión Digital, Modular, Monospace)
   ========================================================================== */

:root {
  --m4-primary: #2563EB;
  --m4-primary-glow: rgba(37, 99, 235, 0.4);
  --m4-cyan: #06B6D4;
  --m4-bg: #090D16;
  --m4-surface: #0F172A;
  --m4-card-bg: #1E293B;
  --m4-text: #F8FAFC;
  --m4-muted: #94A3B8;
  --m4-border: #334155;
  --m4-radius: 6px;
}

body.theme-m4 {
  background-color: var(--m4-bg);
  color: var(--m4-text);
  font-family: 'Inter', sans-serif;
}

.theme-m4 h1, .theme-m4 h2, .theme-m4 h3, .theme-m4 .hero-title, .theme-m4 .card-title, .theme-m4 .card-price {
  font-family: 'Space Grotesk', sans-serif;
}

/* HEADER MODERNO DARK CYBER */
.theme-m4 .site-header.header-solid {
  background: rgba(15, 23, 42, 0.94);
  border-bottom: 1px solid var(--m4-border);
}
.theme-m4 .header-brand {
  color: var(--m4-text);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.5px;
}
.theme-m4 .nav-link {
  color: var(--m4-muted);
  border-radius: var(--m4-radius);
  font-size: 0.88rem;
}
.theme-m4 .nav-link:hover, .theme-m4 .nav-link.active {
  background: rgba(37, 99, 235, 0.15);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.theme-m4 .cart-count-badge {
  background: var(--m4-primary);
  border-radius: 4px;
}
.theme-m4 .nav-btn-install {
  background: var(--m4-primary);
  color: #FFFFFF;
  border-radius: var(--m4-radius);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none;
}
.theme-m4 .nav-btn-install:hover {
  background: var(--m4-primary-hover);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

/* HERO CYBERTECH */
.theme-m4 .hero-overlay-gradient {
  background: linear-gradient(180deg, rgba(9, 13, 22, 0.7) 0%, rgba(9, 13, 22, 0.95) 100%);
}
.theme-m4 .hero-badge {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid #38BDF8;
  color: #38BDF8;
  border-radius: 4px;
  font-family: monospace;
}
.theme-m4 .btn-hero-primary {
  background: var(--m4-primary);
  border-radius: 6px;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.6);
  border: 1px solid #38BDF8;
}

/* PRODUCTOS DESTACADOS — MODULAR CYBER BOXES */
.theme-m4 .featured-showcase-card {
  background: var(--m4-surface);
  border: 1px solid var(--m4-border);
  border-top: 3px solid #38BDF8;
  border-radius: var(--m4-radius);
  padding: 16px;
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.08);
}
.theme-m4 .featured-showcase-card .card-img-wrapper {
  background: #0B1120;
  border: 1px solid var(--m4-border);
  border-radius: 4px;
  height: 200px;
}
.theme-m4 .featured-badge {
  background: #0284C7;
  color: #FFF;
  border-radius: 2px;
  font-family: monospace;
  font-size: 0.7rem;
}

/* PRODUCTOS NORMALES */
.theme-m4 .catalog-products-grid .nexxis-card {
  background: var(--m4-surface);
  border: 1px solid var(--m4-border);
  border-radius: var(--m4-radius);
}
.theme-m4 .catalog-products-grid .nexxis-card:hover {
  border-color: #38BDF8;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.15);
}
.theme-m4 .card-img-wrapper {
  background: #0B1120;
  height: 180px;
  border-bottom: 1px solid var(--m4-border);
}
.theme-m4 .card-title {
  color: var(--m4-text);
}
.theme-m4 .card-desc {
  color: var(--m4-muted);
}
.theme-m4 .card-price {
  color: #38BDF8;
}
.theme-m4 .btn-add-card {
  background: var(--m4-primary);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
}
.theme-m4 .btn-add-card:hover {
  background: #1D4ED8;
}
.theme-m4 .nexxis-stepper {
  background: #0B1120;
  border: 1px solid var(--m4-border);
  border-radius: 4px;
}
.theme-m4 .nexxis-stepper-btn {
  background: var(--m4-surface);
  color: #FFF;
}
.theme-m4 .cat-btn {
  color: var(--m4-muted);
  border-radius: 4px;
}
.theme-m4 .cat-btn.active {
  background: var(--m4-primary);
  color: #FFF;
}
.theme-m4 .summary-card, .theme-m4 .info-card, .theme-m4 .catalog-categories-sidebar, .theme-m4 .cart-items-list-card, .theme-m4 .cart-summary-side-card, .theme-m4 .checkout-form-card, .theme-m4 .checkout-summary-card, .theme-m4 .nexxis-official-footer {
  background: var(--m4-surface);
  border-color: var(--m4-border);
  color: var(--m4-text);
}
.theme-m4 .catalog-search-input, .theme-m4 .catalog-sort-select, .theme-m4 .nexxis-input {
  background: #0B1120;
  border-color: var(--m4-border);
  color: #FFF;
}

.theme-m4 .btn-add-detail, .theme-m4 .btn-checkout-primary, .theme-m4 .btn-catalog-cta {
  background: var(--m4-primary);
  border-radius: 6px;
  color: #FFF;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.theme-m4 .btn-add-detail:hover, .theme-m4 .btn-checkout-primary:hover, .theme-m4 .btn-catalog-cta:hover {
  background: var(--m4-primary-hover);
}

/* SLIDER DESTACADOS EN TEMA M4 */
.theme-m4 .catalog-featured-slider-section {
  background: #FFFFFF !important;
  border: 1px solid #334155 !important;
}
.theme-m4 .catalog-featured-slider-section .slider-title {
  color: #0F172A !important;
}
.theme-m4 .catalog-featured-slider-section .slider-card-minimal {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
.theme-m4 .catalog-featured-slider-section .card-title-minimal {
  color: #0F172A !important;
}
.theme-m4 .catalog-featured-slider-section .slider-arrow {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
.theme-m4 .catalog-featured-slider-section .slider-arrow:hover:not(:disabled) {
  background: #0F172A !important;
  border-color: #0F172A !important;
  color: #FFFFFF !important;
}

/* BANNER PWA FLOTANTE TECH SOBER (Sin glow, sin neon) */
.theme-m4 .pwa-install-banner {
  background: #0F172A;
  border: 1px solid var(--m4-border);
  border-radius: var(--m4-radius);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5);
}
.theme-m4 .pwa-banner-title {
  color: #F8FAFC;
}
.theme-m4 .pwa-banner-desc {
  color: #94A3B8;
}
.theme-m4 .pwa-banner-btn-secondary {
  background: #1E293B;
  color: #94A3B8;
}
.theme-m4 .pwa-banner-btn-secondary:hover {
  background: #334155;
  color: #F8FAFC;
}
.theme-m4 .pwa-banner-btn-primary {
  background: var(--m4-primary);
  color: #FFFFFF;
  border-radius: var(--m4-radius);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none;
}
.theme-m4 .pwa-banner-btn-primary:hover {
  background: var(--m4-primary-hover);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}