/* Compu Express — UI moderna (oscuro, glass, sin bloques blancos) */

:root {
    --mx-bg: #0b0f18;
    --mx-surface: rgba(20, 28, 50, 0.94);
    --mx-surface-solid: #161f35;
    --mx-border: rgba(255, 255, 255, 0.11);
    --mx-border-hover: rgba(99, 179, 255, 0.35);
    --mx-text: #ffffff;
    --mx-muted: #f0f4f8;
    --mx-accent: #3b82f6;
    --mx-accent-2: #06b6d4;
    --mx-glow: rgba(59, 130, 246, 0.45);
    --mx-radius: 14px;
    --mx-radius-lg: 22px;
    --mx-font: 'Inter', system-ui, sans-serif;
    --mx-display: 'Poppins', var(--mx-font);
    --mx-max: 1200px;
}

body.modern-ui {
    font-family: var(--mx-font);
    background: var(--mx-bg) !important;
    color: var(--mx-text) !important;
}

body.modern-ui.has-site-bg {
    background: var(--mx-pro-bg, #0b0f18) !important;
}

/* —— Header fijo: siempre visible al hacer scroll —— */
html {
    scroll-padding-top: 100px;
}

/* Solo el menú principal (hijo directo de body), no headers internos de secciones */
body.modern-ui > header {
    position: fixed !important;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000 !important;
    max-width: var(--mx-max);
    width: min(var(--mx-max), calc(100% - 24px));
    margin: 0 !important;
    padding: 12px 20px !important;
    border-radius: var(--mx-radius-lg);
    background: rgba(8, 12, 24, 0.88) !important;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--mx-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
    flex-wrap: wrap;
    gap: 12px;
    transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

body.modern-ui > header.header-scrolled {
    top: 8px;
    background: rgba(6, 10, 20, 0.94) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}

/* Espacio para que el contenido no quede debajo del menú */
body.modern-ui:not(.page-home):not(.auth-page):not(.page-auth):not(.admin-app) main {
    padding-top: 96px;
}

body.modern-ui.page-home main {
    padding-top: 0;
}

/* Evitar que <header> dentro del contenido herede menú fijo / barra azul */
body.modern-ui main header,
body.modern-ui section header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: auto !important;
    flex-wrap: wrap !important;
}

body.modern-ui .logo {
    font-family: var(--mx-display);
    font-size: 1.15rem !important;
    font-weight: 800;
    letter-spacing: 0.12em;
    background: linear-gradient(135deg, #fff 30%, var(--mx-accent-2)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.modern-ui nav {
    margin: 0 !important;
    gap: 6px !important;
}

body.modern-ui nav a {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.88) !important;
    transition: color 0.2s, background 0.2s;
}

body.modern-ui nav a:hover,
body.modern-ui nav a.nav-active {
    color: var(--mx-text) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    text-shadow: none !important;
}

/* Ocultar badge de ubicación si aparece */
body.modern-ui .hero-eyebrow,
body.modern-ui .hero-welcome-badge {
    display: none !important;
}

body.modern-ui .header-auth-links .auth-link:not(.logout-btn) {
    font-size: 0.82rem !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #ecfeff !important;
    background: linear-gradient(135deg, var(--mx-accent), #2563eb) !important;
    border: 1px solid rgba(34, 211, 238, 0.28) !important;
    box-shadow: 0 4px 20px var(--mx-glow);
}

body.modern-ui .header-auth-links .auth-link.logout-btn {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

/* —— Hero —— */
body.modern-ui .hero,
body.modern-ui .hero-home:not(.hero-landing) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 70vh;
    padding: 48px 24px 64px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

body.modern-ui .hero-home:not(.hero-landing) h1 {
    font-family: var(--mx-display);
    font-size: clamp(2.5rem, 6vw, 4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em;
    line-height: 1.05;
    max-width: 800px;
    background: linear-gradient(180deg, #fff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.modern-ui .hero-eyebrow {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
    font-size: 0.75rem !important;
}

/* —— Hero bienvenida (landing profesional) —— */
body.modern-ui .hero-welcome {
    position: relative;
    min-height: min(92vh, 900px) !important;
    padding: 32px 24px 88px !important;
    overflow: hidden;
}

body.modern-ui .hero-welcome.hero-home::before,
body.modern-ui .hero-welcome.hero-home::after {
    display: none;
}

body.modern-ui .hero-welcome h1.hero-welcome-title {
    background: none !important;
    -webkit-text-fill-color: unset !important;
    border: none !important;
    cursor: default;
}

body.modern-ui .hero-welcome-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body.modern-ui .hero-welcome-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: heroGlow 10s ease-in-out infinite;
}

body.modern-ui .hero-welcome-glow--1 {
    width: min(560px, 90vw);
    height: min(560px, 90vw);
    top: -18%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 68%);
}

body.modern-ui .hero-welcome-glow--2 {
    width: min(420px, 70vw);
    height: min(420px, 70vw);
    bottom: 5%;
    right: -12%;
    animation-delay: -4s;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.22) 0%, transparent 70%);
}

body.modern-ui .hero-welcome-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 75%);
}

body.modern-ui .hero-welcome-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 820px;
    margin: 0 auto;
}

body.modern-ui .hero-welcome-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px !important;
    padding: 10px 18px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

body.modern-ui .hero-eyebrow-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
    animation: heroPulse 2s ease-in-out infinite;
}

@keyframes heroPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

body.modern-ui .hero-welcome-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0 0 24px !important;
    max-width: 900px;
}

body.modern-ui .hero-title-brand {
    font-family: var(--mx-display);
    font-size: clamp(2.75rem, 7vw, 4.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em;
    line-height: 1.02;
    background: linear-gradient(180deg, #ffffff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.modern-ui .hero-title-tagline {
    font-family: var(--mx-font);
    font-size: clamp(1.05rem, 2.2vw, 1.35rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    line-height: 1.45;
    color: var(--mx-muted) !important;
    -webkit-text-fill-color: var(--mx-muted) !important;
    max-width: 520px;
}

body.modern-ui .hero-welcome-lead {
    font-size: clamp(1rem, 1.8vw, 1.12rem) !important;
    line-height: 1.7 !important;
    max-width: 580px !important;
    margin-bottom: 32px !important;
}

body.modern-ui .hero-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 40px !important;
}

body.modern-ui .btn-hero-primary {
    gap: 8px;
    padding: 14px 28px !important;
    font-size: 0.95rem !important;
}

body.modern-ui .btn-hero-primary .btn-icon {
    transition: transform 0.25s ease;
}

body.modern-ui .btn-hero-primary:hover .btn-icon {
    transform: translateX(4px);
}

body.modern-ui .hero-welcome-trust {
    list-style: none;
    margin: 0;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    border-radius: var(--mx-radius-lg);
    background: rgba(8, 12, 24, 0.55);
    border: 1px solid var(--mx-border);
    backdrop-filter: blur(12px);
}

body.modern-ui .hero-welcome-trust li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--mx-muted);
}

body.modern-ui .hero-trust-icon {
    color: var(--mx-accent-2);
    font-size: 0.5rem;
}

body.modern-ui .hero-trust-text strong {
    color: var(--mx-text);
    font-weight: 600;
}

body.modern-ui .hero-scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--mx-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s;
}

body.modern-ui .hero-scroll-hint:hover {
    color: var(--mx-text);
}

body.modern-ui .hero-scroll-chevron {
    animation: floatSoft 2.5s ease-in-out infinite;
}

body.modern-ui .hero-copy,
body.modern-ui .hero p {
    color: var(--mx-muted) !important;
    font-size: 1.05rem !important;
    max-width: 560px;
}

body.modern-ui .hero-sm {
    background: transparent !important;
    min-height: auto;
    padding: 48px 24px 32px !important;
}

body.modern-ui .hero-sm h1 {
    font-family: var(--mx-display);
    color: var(--mx-text) !important;
    font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
}

body.modern-ui .hero-sm p {
    color: var(--mx-muted) !important;
}

/* —— Botones —— */
body.modern-ui .btn,
body.modern-ui .card-btn,
body.modern-ui .auth-submit,
body.modern-ui .form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 12px !important;
    border: none !important;
    background: linear-gradient(135deg, var(--mx-accent) 0%, #2563eb 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 28px var(--mx-glow) !important;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
    cursor: pointer;
}

body.modern-ui .btn::after,
body.modern-ui .card-btn::after {
    display: none !important;
}

body.modern-ui .btn:hover,
body.modern-ui .card-btn:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    filter: brightness(1.08) !important;
    background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
    outline: none !important;
}

body.modern-ui .btn.secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--mx-border) !important;
    box-shadow: none !important;
    color: var(--mx-text) !important;
}

body.modern-ui .btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--mx-border-hover) !important;
}

body.modern-ui .btn.small {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
}

/* —— Secciones —— */
body.modern-ui main {
    padding-top: 8px;
}

body.modern-ui .section,
body.modern-ui section.section-alt {
    max-width: var(--mx-max);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 48px 20px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body.modern-ui .section h2,
body.modern-ui section.section-alt h2,
body.modern-ui .section.section-dark h2 {
    font-family: var(--mx-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 700 !important;
    color: var(--mx-text) !important;
    letter-spacing: -0.03em;
    margin-bottom: 12px !important;
}

body.modern-ui .section-lead {
    color: #f0f4f8 !important;
    font-size: 1rem !important;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Tipografía clara sobre fondo oscuro */
body.modern-ui main,
body.modern-ui main p,
body.modern-ui main li,
body.modern-ui main label,
body.modern-ui .section,
body.modern-ui .catalog-tagline,
body.modern-ui .cart-page-lead,
body.modern-ui .contact-page-lead,
body.modern-ui .why-section-lead,
body.modern-ui .summary-text,
body.modern-ui .cart-panel-label,
body.modern-ui .product-meta,
body.modern-ui .product-seller,
body.modern-ui .product-detail-row,
body.modern-ui .checkout-field label,
body.modern-ui .auth-side p,
body.modern-ui .auth-benefits li {
    color: #f0f4f8;
}

body.modern-ui h1,
body.modern-ui h2,
body.modern-ui h3,
body.modern-ui h4,
body.modern-ui .cart-page-title,
body.modern-ui .contact-page-title,
body.modern-ui .catalog-title,
body.modern-ui .checkout-page-title,
body.modern-ui .orders-page-title,
body.modern-ui .why-section-title {
    color: #ffffff !important;
}

body.modern-ui .section-label {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.25);
    font-size: 0.72rem !important;
    padding: 6px 12px !important;
}

/* —— Tarjetas glass —— */
body.modern-ui .uiverse-card,
body.modern-ui .card,
body.modern-ui .feature,
body.modern-ui .process-step,
body.modern-ui .review-summary,
body.modern-ui .review-form,
body.modern-ui .review-item,
body.modern-ui .summary-card,
body.modern-ui .cart-item,
body.modern-ui .catalog-intro,
body.modern-ui .catalog-header-bar,
body.modern-ui .mini-categories-wrapper,
body.modern-ui .admin-form,
body.modern-ui .inventory-card,
body.modern-ui .service-card {
    background: var(--mx-surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--mx-border) !important;
    border-radius: var(--mx-radius-lg) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25) !important;
    color: var(--mx-text) !important;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}

body.modern-ui .uiverse-card:hover,
body.modern-ui .card:hover,
body.modern-ui .process-step:hover {
    transform: translateY(-6px);
    border-color: var(--mx-border-hover) !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(59, 130, 246, 0.15) !important;
}

body.modern-ui .uiverse-card {
    max-width: none !important;
    width: 100% !important;
    min-height: 200px !important;
    padding: 1.5rem !important;
    font-family: var(--mx-font) !important;
}

body.modern-ui .uiverse-card-title,
body.modern-ui .card h3 {
    color: var(--mx-text) !important;
    font-family: var(--mx-display) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

body.modern-ui .uiverse-small-desc,
body.modern-ui .card p {
    color: #f0f4f8 !important;
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
}

body.modern-ui .features-row--home {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    max-width: var(--mx-max);
    margin: 32px auto 0 !important;
}

/* —— Catálogo —— */
body.modern-ui .catalog-intro {
    text-align: center;
    padding: 32px 28px !important;
    margin-bottom: 20px;
}

body.modern-ui .catalog-intro .catalog-title,
body.modern-ui .catalog-intro .catalog-tagline {
    color: var(--mx-text) !important;
}

body.modern-ui .catalog-intro .catalog-tagline {
    color: var(--mx-muted) !important;
}

/* Catálogo: ver css/catalog-cards.css */

body.modern-ui .product-info h3,
body.modern-ui .product-price,
body.modern-ui .product-meta,
body.modern-ui .product-seller,
body.modern-ui .section h2,
body.modern-ui .logo,
body.modern-ui nav a,
body.modern-ui .service-content h3,
body.modern-ui .summary-card h3,
body.modern-ui .cart-item-header h3,
body.modern-ui .step-content h4 {
    color: var(--mx-text) !important;
}

body.modern-ui .product-meta,
body.modern-ui .product-detail-row,
body.modern-ui .catalog-summary,
body.modern-ui .summary-text {
    color: #f0f4f8 !important;
}

body.modern-ui .product-price,
body.modern-ui .product-price .price-amount,
body.modern-ui .cart-item-price,
body.modern-ui .cart-item-subtotal strong {
    color: #ffffff !important;
}

body.modern-ui .product-thumb {
    background: rgba(0, 0, 0, 0.35) !important;
    border: none !important;
    border-bottom: 1px solid var(--mx-border) !important;
}

body.modern-ui .category-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-muted) !important;
    font-size: 0.85rem !important;
    padding: 10px 18px !important;
}

body.modern-ui .category-btn:hover,
body.modern-ui .category-btn.active {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #93c5fd !important;
}

body.modern-ui .group .input,
body.modern-ui .search-input,
body.modern-ui .catalog-header-bar .input {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--mx-border) !important;
    border-radius: 12px !important;
    color: var(--mx-text) !important;
    box-shadow: none !important;
}

body.modern-ui .group .input:focus {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

body.modern-ui .cart-link {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 14px !important;
}

/* —— Carrito —— */
body.modern-ui .cart-header h2 {
    color: var(--mx-text) !important;
}

body.modern-ui .cart-header .cart-count {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

body.modern-ui .cart-item-thumb {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
}

body.modern-ui .cart-item-meta,
body.modern-ui .cart-item-price,
body.modern-ui .cart-item-subtotal {
    color: var(--mx-muted) !important;
}

body.modern-ui .cart-item-badge {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

body.modern-ui .quantity-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--mx-border) !important;
    color: var(--mx-text) !important;
}

body.modern-ui .remove-btn {
    background: transparent !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
    border-radius: 10px !important;
}

body.modern-ui .summary-total {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--mx-border) !important;
}

body.modern-ui .summary-total strong {
    color: var(--mx-text) !important;
    font-size: 1.4rem !important;
}

body.modern-ui .cart-hint {
    margin: 16px 0 0;
    font-size: 0.85rem;
    color: var(--mx-muted) !important;
}

/* —— Contacto / reseñas —— */
body.modern-ui .contacto-page .section .card {
    background: var(--mx-surface) !important;
}

body.modern-ui .review-form input,
body.modern-ui .review-form textarea,
body.modern-ui .review-form select,
body.modern-ui .form-group input,
body.modern-ui .form-group select,
body.modern-ui .form-group textarea {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-text) !important;
    border-radius: 10px !important;
}

body.modern-ui .review-form label,
body.modern-ui .form-group label {
    color: var(--mx-muted) !important;
}

body.modern-ui .rating-pill {
    color: #fbbf24 !important;
}

body.modern-ui .map-wrapper {
    border-radius: var(--mx-radius-lg) !important;
    overflow: hidden;
    border: 1px solid var(--mx-border) !important;
}

/* —— Servicios —— */
body.modern-ui .services-grid {
    max-width: var(--mx-max);
    gap: 18px !important;
}

body.modern-ui .service-icon,
body.modern-ui .step-number {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

body.modern-ui .feature-tag {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* —— Footer —— */
body.modern-ui .site-footer,
body.modern-ui footer {
    max-width: var(--mx-max);
    margin: 48px auto 24px;
    width: calc(100% - 32px);
    padding: 28px 24px !important;
    border-radius: var(--mx-radius-lg);
    background: rgba(8, 12, 24, 0.8) !important;
    border: 1px solid var(--mx-border) !important;
    color: #f0f4f8 !important;
}

body.modern-ui .site-footer-brand {
    color: var(--mx-text) !important;
}

body.modern-ui .site-footer a:hover {
    color: var(--mx-accent-2) !important;
}

/* —— Auth pages —— */
body.modern-ui.auth-page {
    background: var(--mx-bg);
}

body.modern-ui .auth-header {
    max-width: var(--mx-max);
    width: calc(100% - 32px);
    margin: 12px auto;
    border-radius: var(--mx-radius-lg);
    background: rgba(8, 12, 24, 0.75) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--mx-border) !important;
}

body.auth-page .auth-header {
    display: none !important;
}

body.modern-ui .auth-card,
body.modern-ui .auth-panel,
body.modern-ui .auth-shell {
    background: rgba(14, 20, 36, 0.88) !important;
    border-color: rgba(148, 163, 184, 0.12) !important;
}

body.modern-ui .auth-field input {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--mx-border) !important;
}

body.modern-ui .auth-social-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--mx-border) !important;
    color: var(--mx-muted) !important;
}

/* Ocultar conflictos viejos */
body.modern-ui .hero-actions .btn,
body.modern-ui button,
body.modern-ui .card-btn {
    background: linear-gradient(135deg, var(--mx-accent), #2563eb) !important;
}

@media (max-width: 768px) {
    body.modern-ui > header {
        top: 8px;
        width: calc(100% - 16px);
        margin: 0 !important;
        padding: 10px 12px !important;
    }

    body.modern-ui:not(.page-home):not(.auth-page):not(.page-auth):not(.admin-app) main {
        padding-top: 120px;
    }

    body.modern-ui nav {
        width: 100%;
        justify-content: center;
    }

    body.modern-ui .header-auth-links {
        width: 100%;
        justify-content: center;
    }

}