/* Identidad visual por página — misma marca, personalidad distinta */

:root {
    --page-accent: #3b82f6;
    --page-accent-2: #06b6d4;
    --page-accent-soft: rgba(59, 130, 246, 0.14);
    --page-accent-border: rgba(59, 130, 246, 0.28);
    --page-glow: rgba(59, 130, 246, 0.2);
    --page-title-gradient: linear-gradient(120deg, #fff 0%, #cbd5e1 50%, #93c5fd 100%);
}

/* —— Fondo ambiental distinto por página —— */
body.modern-ui.page-home .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 90% 50% at 50% -5%, rgba(59, 130, 246, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 95% 88%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 35% 28% at 5% 70%, rgba(99, 102, 241, 0.06) 0%, transparent 48%);
}

body.modern-ui.catalog-page {
    --page-accent: #06b6d4;
    --page-accent-2: #22d3ee;
    --page-accent-soft: rgba(6, 182, 212, 0.14);
    --page-accent-border: rgba(6, 182, 212, 0.32);
    --page-glow: rgba(6, 182, 212, 0.22);
    --page-title-gradient: linear-gradient(120deg, #ecfeff 0%, #a5f3fc 45%, #22d3ee 100%);
}

body.modern-ui.catalog-page .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 70% 45% at 12% 8%, rgba(6, 182, 212, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 88% 95%, rgba(34, 211, 238, 0.08) 0%, transparent 52%);
}

body.modern-ui.catalog-page .site-bg-pro-grid {
    opacity: 0.35;
    background-size: 48px 48px;
}

body.modern-ui.page-cart {
    --page-accent: #3b82f6;
    --page-accent-2: #60a5fa;
    --page-accent-soft: rgba(59, 130, 246, 0.14);
    --page-accent-border: rgba(59, 130, 246, 0.28);
    --page-glow: rgba(59, 130, 246, 0.22);
    --page-title-gradient: linear-gradient(120deg, #fff 0%, #cbd5e1 55%, #93c5fd 100%);
}

body.modern-ui.page-cart .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 65% 42% at 85% 12%, rgba(59, 130, 246, 0.16) 0%, transparent 58%),
        radial-gradient(ellipse 45% 35% at 8% 88%, rgba(96, 165, 250, 0.07) 0%, transparent 50%);
}

body.modern-ui.page-checkout {
    --page-accent: #f59e0b;
    --page-accent-2: #fbbf24;
    --page-accent-soft: rgba(245, 158, 11, 0.12);
    --page-accent-border: rgba(245, 158, 11, 0.35);
    --page-glow: rgba(245, 158, 11, 0.18);
    --page-title-gradient: linear-gradient(120deg, #fffbeb 0%, #fde68a 50%, #fbbf24 100%);
}

body.modern-ui.page-checkout .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 75% 48% at 50% -10%, rgba(245, 158, 11, 0.12) 0%, transparent 58%),
        radial-gradient(ellipse 38% 32% at 100% 80%, rgba(251, 191, 36, 0.07) 0%, transparent 50%);
}

body.modern-ui.page-orders {
    --page-accent: #818cf8;
    --page-accent-2: #6366f1;
    --page-accent-soft: rgba(99, 102, 241, 0.14);
    --page-accent-border: rgba(129, 140, 248, 0.32);
    --page-glow: rgba(99, 102, 241, 0.2);
    --page-title-gradient: linear-gradient(120deg, #eef2ff 0%, #c7d2fe 50%, #a5b4fc 100%);
}

body.modern-ui.page-orders .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 68% 44% at 20% 5%, rgba(99, 102, 241, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 42% 36% at 92% 92%, rgba(129, 140, 248, 0.08) 0%, transparent 52%);
}

body.modern-ui.page-auth {
    --page-accent: #6366f1;
    --page-accent-2: #818cf8;
    --page-accent-soft: rgba(99, 102, 241, 0.14);
    --page-accent-border: rgba(129, 140, 248, 0.32);
    --page-glow: rgba(99, 102, 241, 0.22);
    --page-title-gradient: linear-gradient(120deg, #eef2ff 0%, #c7d2fe 50%, #a5b4fc 100%);
}

body.modern-ui.page-auth .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 70% 45% at 15% 8%, rgba(99, 102, 241, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 45% 38% at 90% 92%, rgba(129, 140, 248, 0.08) 0%, transparent 52%);
}

body.modern-ui.page-auth--admin {
    --page-accent: #f97316;
    --page-accent-2: #fb923c;
    --page-accent-soft: rgba(249, 115, 22, 0.12);
    --page-accent-border: rgba(251, 146, 60, 0.35);
    --page-glow: rgba(249, 115, 22, 0.18);
    --page-title-gradient: linear-gradient(120deg, #fff7ed 0%, #fed7aa 50%, #fdba74 100%);
}

body.modern-ui.page-auth--admin .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 65% 42% at 18% 6%, rgba(249, 115, 22, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 40% 34% at 88% 90%, rgba(251, 146, 60, 0.07) 0%, transparent 50%);
}

body.modern-ui.page-services {
    --page-accent: #a78bfa;
    --page-accent-2: #8b5cf6;
    --page-accent-soft: rgba(139, 92, 246, 0.14);
    --page-accent-border: rgba(167, 139, 250, 0.32);
    --page-glow: rgba(139, 92, 246, 0.2);
    --page-title-gradient: linear-gradient(120deg, #faf5ff 0%, #ddd6fe 50%, #c4b5fd 100%);
}

body.modern-ui.page-services .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 72% 46% at 78% 8%, rgba(139, 92, 246, 0.15) 0%, transparent 56%),
        radial-gradient(ellipse 40% 34% at 5% 85%, rgba(167, 139, 250, 0.08) 0%, transparent 50%);
}

body.modern-ui.page-services .site-bg-pro-grid {
    opacity: 0.4;
    background-size: 64px 64px;
}

body.modern-ui.page-contact {
    --page-accent: #34d399;
    --page-accent-2: #10b981;
    --page-accent-soft: rgba(16, 185, 129, 0.12);
    --page-accent-border: rgba(52, 211, 153, 0.32);
    --page-glow: rgba(16, 185, 129, 0.18);
    --page-title-gradient: linear-gradient(120deg, #ecfdf5 0%, #a7f3d0 50%, #6ee7b7 100%);
}

body.modern-ui.page-contact .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 70% 45% at 50% -8%, rgba(16, 185, 129, 0.12) 0%, transparent 58%),
        radial-gradient(ellipse 36% 30% at 8% 90%, rgba(52, 211, 153, 0.07) 0%, transparent 48%);
}

body.modern-ui.page-product {
    --page-accent: #fb7185;
    --page-accent-2: #f43f5e;
    --page-accent-soft: rgba(244, 63, 94, 0.1);
    --page-accent-border: rgba(251, 113, 133, 0.28);
    --page-glow: rgba(244, 63, 94, 0.15);
    --page-title-gradient: linear-gradient(120deg, #fff1f2 0%, #fecdd3 50%, #fda4af 100%);
}

body.modern-ui.page-product .site-bg-pro-accent {
    background:
        radial-gradient(ellipse 60% 40% at 92% 15%, rgba(244, 63, 94, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse 45% 38% at 10% 85%, rgba(251, 113, 133, 0.06) 0%, transparent 50%);
}

/* —— Nav: resalta la sección actual —— */
body.modern-ui > header nav a {
    transition: color 0.2s ease;
}

body.modern-ui.catalog-page > header nav a[href*="catalogo"],
body.modern-ui.page-cart > header nav a[href*="carrito"],
body.modern-ui.page-checkout > header nav a[href*="checkout"],
body.modern-ui.page-orders > header nav a[href*="mis-pedidos"],
body.modern-ui.page-services > header nav a[href*="servicios"],
body.modern-ui.page-contact > header nav a[href*="contacto"],
body.modern-ui.page-home > header nav a[href*="index"] {
    color: var(--page-accent) !important;
}

/* —— Tarjetas heredan acento de página —— */
body.modern-ui.page-checkout .checkout-form-card,
body.modern-ui.page-checkout .checkout-summary-card {
    border-color: var(--page-accent-border) !important;
}

body.modern-ui.page-checkout .checkout-form-card:focus-within,
body.modern-ui.page-checkout .checkout-summary-card:hover {
    box-shadow: 0 0 0 1px var(--page-accent-border), 0 16px 40px rgba(0, 0, 0, 0.25) !important;
}

body.modern-ui.page-services .service-card-pro::before {
    background: linear-gradient(90deg, var(--page-accent), var(--page-accent-2));
}

body.modern-ui.page-services .service-card-pro-icon {
    background: linear-gradient(135deg, var(--page-accent-soft), transparent) !important;
    border-color: var(--page-accent-border) !important;
    color: var(--page-accent) !important;
}

body.modern-ui.page-services .service-card-pro:hover {
    border-color: var(--page-accent-border) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35), 0 0 28px var(--page-glow) !important;
}

body.modern-ui.catalog-page .catalog-header-bar {
    border-color: var(--page-accent-border) !important;
}

body.modern-ui.catalog-page .catalog-header-bar .input:focus {
    border-color: var(--page-accent) !important;
    box-shadow: 0 0 0 3px var(--page-accent-soft) !important;
}

body.modern-ui.page-contact .contact-card--whatsapp {
    border-color: rgba(52, 211, 153, 0.35) !important;
}

body.modern-ui.page-cart .cart-page-header-card {
    border-color: var(--page-accent-border);
}

body.modern-ui.page-cart .cart-page-icon,
body.modern-ui.page-cart .cart-count-badge {
    border-color: var(--page-accent-border);
}

body.modern-ui.page-cart .cart-page-icon {
    color: var(--page-accent);
    background: linear-gradient(145deg, var(--page-accent-soft), transparent);
}