/**
 * CSS Global para Hello Elementor + Elementor
 * Asociación Cáncer de Mama Triple Negativo
 *
 * Este archivo complementa Hello Elementor con los estilos
 * corporativos de la asociación y ajustes de WooCommerce.
 */

/* ─── Variables CSS Globales ─────────────────────────────────────────── */
:root {
    --atn-primary: #e8c4bb;
    --atn-primary-dark: #d4b3a8;
    --atn-primary-light: #dcc4bc;
    --atn-primary-bg: #faf7f5;
    --atn-on-primary: #3d2c27;
    --atn-primary-strong: #5c4540;
    --atn-secondary: #1a1a2e;
    --atn-text: #333333;
    --atn-text-light: #666666;
    --atn-text-muted: #999999;
    --atn-white: #ffffff;
    --atn-bg: #f8f9fa;
    --atn-border: #e0e0e0;
    --atn-radius: 8px;
    --atn-radius-lg: 12px;
    --atn-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --atn-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);
    --atn-transition: all 0.3s ease;
}

/* ─── Base ────────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--atn-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    transition: var(--atn-transition);
}

/* ─── Elementor Overrides ────────────────────────────────────────────── */

/* Links de Elementor */
.elementor a {
    color: var(--atn-primary-strong);
}

.elementor a:hover {
    color: var(--atn-on-primary);
}

/* Botones primarios de Elementor */
.elementor .elementor-button {
    transition: var(--atn-transition);
}

.elementor .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(232, 196, 187, 0.45);
}

/* ─── Hello Elementor Header ajustes ─────────────────────────────────── */
.site-header {
    box-shadow: var(--atn-shadow);
}

/* Cabecera según estado de membresía (duplica secciones en Elementor y usa estas clases) */
.atn-header--member-active .site-header {
    border-bottom: 3px solid #2e7d32;
}

.atn-header--member-inactive .site-header {
    border-bottom: 3px solid #f57c00;
}

.atn-header--visitor .site-header,
.atn-header--logged-not-member .site-header {
    border-bottom: 3px solid var(--atn-primary);
}

/* Opcional: si duplicas el header en Elementor, oculta uno u otro con estas clases */
.atn-header--member-active .atn-header-for-non-members {
    display: none !important;
}

.atn-header--visitor .atn-header-for-members,
.atn-header--logged-not-member .atn-header-for-members,
.atn-header--member-inactive .atn-header-for-members {
    display: none !important;
}

/* ─── WooCommerce Overrides ──────────────────────────────────────────── */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    border-radius: var(--atn-radius);
    border-top: none;
    border-left: 4px solid;
}

.woocommerce .woocommerce-message {
    border-color: #2e7d32;
    background: #e8f5e9;
}

.woocommerce .woocommerce-info {
    border-color: #1565c0;
    background: #e3f2fd;
}

.woocommerce .woocommerce-error {
    border-color: #c62828;
    background: #ffebee;
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button {
    background: var(--atn-primary) !important;
    color: var(--atn-on-primary) !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    border: none !important;
    transition: var(--atn-transition) !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background: var(--atn-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 196, 187, 0.45) !important;
}

/* WooCommerce Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 10px 16px;
    border-radius: var(--atn-radius);
    color: var(--atn-text);
    font-weight: 500;
    transition: var(--atn-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--atn-primary-bg);
    color: var(--atn-primary-strong);
}

/* WooCommerce Checkout simplificado */
.woocommerce-checkout .page-content {
    padding-top: 40px;
}

/* ─── Animaciones ────────────────────────────────────────────────────── */
@keyframes atnFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.atn-animate-in {
    animation: atnFadeInUp 0.6s ease forwards;
}

/* ─── Utilidades ─────────────────────────────────────────────────────── */
.atn-text-center { text-align: center; }
.atn-text-left { text-align: left; }
.atn-text-right { text-align: right; }

.atn-mt-0 { margin-top: 0; }
.atn-mt-1 { margin-top: 8px; }
.atn-mt-2 { margin-top: 16px; }
.atn-mt-3 { margin-top: 24px; }
.atn-mt-4 { margin-top: 32px; }

.atn-mb-0 { margin-bottom: 0; }
.atn-mb-1 { margin-bottom: 8px; }
.atn-mb-2 { margin-bottom: 16px; }
.atn-mb-3 { margin-bottom: 24px; }
.atn-mb-4 { margin-bottom: 32px; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .woocommerce .button,
    .woocommerce button.button,
    .woocommerce a.button {
        padding: 8px 18px !important;
        font-size: 14px !important;
    }
}