/**
 * Vixii — tokens de color y marca.
 * Cargar después de style.css; antes de modern-*.css
 *
 * --brand-primary: color principal de interfaz (#363636 por defecto).
 * Override por empresa: brand_primary → empresa-theme.js / <style id="empresa-theme-server">.
 */

:root {
    /* Marca Vixii (fijos — marketing / landing) */
    --brand-orange: #F26A4F;
    --brand-orange-hover: #FFB166;
    --brand-green: #A7CDBE;
    --brand-charcoal: #1E1F23;
    --brand-surface-muted: #E7E7EA;
    --brand-white: #FFFFFF;

    /* Principal de interfaz (personalizable) */
    --brand-primary: #363636;
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 78%, white);
    --brand-primary-muted: color-mix(in srgb, var(--brand-primary) 88%, black);

    /* Semánticos */
    --color-text: var(--brand-charcoal);
    --color-text-muted: #5C5F66;
    --color-surface: var(--brand-white);
    --color-surface-muted: var(--brand-surface-muted);
    --color-border: #D4D4D8;
    --color-accent-soft: color-mix(in srgb, var(--brand-green) 42%, var(--brand-white));

    /* Alias legacy (style.css, admin, chat) */
    --brown: var(--brand-primary);
    --brown-variant: var(--brand-primary-muted);
    --black: var(--color-text);
    --white: var(--brand-white);
    --gray-light: var(--color-surface-muted);
    --gray: var(--color-border);
    --gray-dark: var(--color-text-muted);
    --pink-light: var(--color-accent-soft);
    --cream: var(--color-surface-muted);
    --blue-check: #38bdf8;

    /* Alias de compatibilidad */
    --brand-black: var(--brand-charcoal);
    --brand-gray: var(--brand-surface-muted);

    /* Tipografía y forma */
    --modern-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --modern-radius-sm: 8px;
    --modern-radius-md: 12px;
    --modern-radius-lg: 16px;
    --modern-radius-xl: 20px;
    --modern-radius-full: 9999px;

    --modern-shadow-xs: 0 1px 2px rgba(30, 31, 35, 0.05);
    --modern-shadow-sm: 0 2px 8px rgba(30, 31, 35, 0.07);
    --modern-shadow-md: 0 4px 20px rgba(30, 31, 35, 0.09);
    --modern-shadow-lg: 0 12px 40px rgba(30, 31, 35, 0.11);
    --modern-shadow-primary: 0 4px 16px color-mix(in srgb, var(--brand-primary) 32%, transparent);

    --modern-border: rgba(30, 31, 35, 0.09);
    --modern-border-accent: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    --modern-surface-elevated: rgba(255, 255, 255, 0.94);

    --modern-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --modern-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Landing / legales */
    --landing-accent: var(--brand-orange);
    --landing-accent-dark: #D9543A;
    --landing-green: var(--brand-green);
    --landing-bg: var(--brand-surface-muted);
    --landing-surface: var(--brand-white);
    --landing-text: var(--brand-charcoal);
    --landing-muted: var(--color-text-muted);
    --landing-border: var(--color-border);
}

/* Logotipo */
.vixii-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.vixii-logo--nav {
    height: 36px;
}

.vixii-logo--footer {
    height: 34px;
}

.vixii-logo--login {
    height: 56px;
    margin: 0 auto 12px;
}

.vixii-logo--admin {
    height: 34px;
}

.vixii-logo--empty {
    height: 80px;
    margin-bottom: 20px;
    opacity: 0.88;
}

.vixii-logo--legal {
    height: 34px;
}

.admin-sidebar-brand .vixii-logo-link,
.landing-logo,
.landing-footer-logo,
.legal-page-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.login-brand {
    text-align: center;
}

.empty-state .vixii-logo--empty {
    filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--brand-orange) 15%, transparent));
}

/* Botones primary — landing (naranja de marca) */
.landing-btn--primary:hover,
.landing-nav-actions .landing-btn--primary:hover,
.login-submit:hover:not(:disabled) {
    background: var(--brand-orange-hover) !important;
    background-color: var(--brand-orange-hover) !important;
    background-image: none !important;
    border-color: var(--brand-orange-hover) !important;
    filter: none !important;
}

/* Botones primary — app / admin (color principal) */
.admin-btn-primary:hover,
.sidebar-right .admin-btn-primary:hover,
.advanced-filters-btn--primary:hover,
.audio-record-btn-primary:hover:not(:disabled),
.plantilla-picker-send:hover,
#addContactSubmitBtn:hover,
.send-btn:hover {
    background: var(--brand-primary-hover) !important;
    background-color: var(--brand-primary-hover) !important;
    background-image: none !important;
    border-color: var(--brand-primary-hover) !important;
    filter: none !important;
}