:root {
    --primary: #0076BC;
    --primary-dark: #0066a3;
    --sidebar-bg: #0076BC;
    --sidebar-text: #e9e9e9;
    --sidebar-section: #ffffff;
    --surface: #ffffff;
    --page-bg: #F1F6FC;
    --text: #17152B;
    --muted: #474747;
    --border: #E6E7EF;
    --success: #16A36A;
    --warning: #EF8B2C;
    --danger: #e4022d;

    /* Tokens normalizados: los módulos no deben declarar colores de marca en duro. */
    --primary-color: var(--primary);
    --primary-dark-color: var(--primary-dark);
    --color-primary: var(--primary);
    --color-primary-dark: var(--primary-dark);
    --color-surface: var(--surface);
    --color-page-bg: var(--page-bg);
    --color-text: var(--text);
    --color-muted: var(--muted);
    --color-border: var(--border);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--danger);
    --on-primary: #fff;
    --white: #fff;
    --black: #000;
    --text-strong: color-mix(in srgb, var(--text) 92%, #000);
    --text-soft: color-mix(in srgb, var(--text) 68%, var(--surface));
    --surface-soft: color-mix(in srgb, var(--page-bg) 58%, var(--surface));
    --surface-muted: color-mix(in srgb, var(--page-bg) 78%, var(--surface));
    --border-soft: color-mix(in srgb, var(--border) 62%, var(--surface));
    --success-soft: color-mix(in srgb, var(--success) 12%, var(--surface));
    --warning-soft: color-mix(in srgb, var(--warning) 13%, var(--surface));
    --danger-soft: color-mix(in srgb, var(--danger) 11%, var(--surface));

    /* Alias globales para todos los módulos */
    --erp-primary: var(--primary);
    --erp-primary-dark: var(--primary-dark);
    --erp-primary-soft: color-mix(in srgb, var(--primary) 11%, var(--surface));
    --erp-primary-softer: color-mix(in srgb, var(--primary) 5%, var(--surface));
    --erp-focus-ring: color-mix(in srgb, var(--primary) 14%, transparent);

    --w-primary: var(--primary);
    --w-primary-dark: var(--primary-dark);
    --w-soft: var(--erp-primary-soft);
    --w-text: var(--text);
    --w-muted: var(--muted);
    --w-border: var(--border);
    --w-card: var(--surface);

    --compras-morado: var(--primary);
    --ventas-morado: var(--primary);

    --dash-primary: #0076BC;
    --dash-primary-dark: #0066a3;
    --dash-text: #17152B;
    --dash-muted: #474747;
    --dash-border: #E6E7EF;
    --dash-card: #ffffff;
}

body.erp-body,
.content-area {
    color: var(--text) !important;
    background: var(--page-bg) !important;
}

.sidebar {
    background: linear-gradient(
        180deg,
        var(--sidebar-bg) 0%,
        color-mix(in srgb, var(--sidebar-bg) 82%, #000) 100%
    ) !important;
}

.nav-item {
    color: var(--sidebar-text) !important;
}

.sidebar-section {
    color: var(--sidebar-section) !important;
}

.nav-item.active {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    ) !important;
}

.sidebar-brand__icon,
.user-avatar {
    color: var(--primary-dark) !important;
    background: color-mix(in srgb, var(--primary) 24%, #fff) !important;
}

.icon-button:hover,
.panel-link,
.dashboard-panel-link,
.dashboard-eyebrow,
.panel-kicker {
    color: var(--primary) !important;
}

.topbar,
.dashboard-panel,
.dashboard-kpi-card,
.dashboard-finance-card,
.settings-card,
.module-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent) !important;
}

.btn-primary,
.primary-button {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-primary:hover,
.primary-button:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}


/* =========================================================
   TEMA DINÁMICO GLOBAL
   Todos los componentes visuales dependen de Apariencia.
   ========================================================= */

/* Superficies y textos */
.module-page,
.contact-page,
.modern-page,
.modulo-compras,
.modulo-ventas {
    color: var(--text) !important;
}

.module-card,
.contact-card,
.form-section,
.compra-kpi,
.compras-panel,
.compra-seccion,
.venta-kpi,
.ventas-panel,
.venta-seccion,
.tool-card,
.coming-panel {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* Botones principales unificados */
.btn-primary,
.primary-button,
.settings-save-button,
.contact-btn.primary,
.btn-filter,
.modulo-compras .btn-primary,
.modulo-ventas .btn-primary,
.preview-content button {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 24%, transparent) !important;
}

.btn-primary:hover,
.primary-button:hover,
.settings-save-button:hover,
.contact-btn.primary:hover,
.btn-filter:hover,
.modulo-compras .btn-primary:hover,
.modulo-ventas .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
    border-color: var(--primary-dark) !important;
}

/* Elementos numerados, iconos y acentos primarios */
.settings-step,
.section-heading > span,
.step-number,
.stat-icon.purple,
.entity-icon,
.tool-card > span,
.coming-panel > span {
    color: var(--primary) !important;
    background: var(--erp-primary-soft) !important;
}

.settings-step,
.section-heading > span,
.step-number {
    color: #fff !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--primary) 24%, transparent) !important;
}

/* Interruptores */
.switch-row input:checked + .switch,
.switch-row input:checked + .switch-control,
input:checked + .switch {
    background: var(--primary) !important;
}

/* Enlaces, títulos pequeños y acciones */
.contact-eyebrow,
.modern-eyebrow,
.eyebrow,
.back-link,
.text-link,
.card-title a,
.numero-compra,
.numero-venta,
.volver-enlace,
.settings-heading > div > span,
.panel-link,
.dashboard-panel-link,
.contact-actions a:hover,
.contact-actions button:hover {
    color: var(--primary) !important;
}

/* Fondos suaves dependientes de la marca */
.avatar,
.large-avatar,
.stat-icon.purple,
.upload-preview,
.settings-tab.active,
.nav-item:hover {
    background: var(--erp-primary-soft) !important;
}

.avatar,
.large-avatar {
    color: var(--primary-dark) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 13%, transparent) !important;
}

.contact-stats article:first-child::before,
.detail-stats article:first-child::before,
.contact-stats article::before {
    background: var(--primary) !important;
}

/* Foco de formularios */
input:focus,
select:focus,
textarea:focus,
.contact-filters input:focus,
.contact-filters select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--erp-focus-ring) !important;
}

/* Herramientas y paneles todavía en construcción */
.tool-hero {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary) 68%, color-mix(in srgb, var(--primary) 72%, #fff)) !important;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 24%, transparent) !important;
}

.coming-panel {
    background: var(--erp-primary-softer) !important;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border)) !important;
}

/* Compras y ventas */
.modulo-compras .btn-secondary,
.modulo-ventas .btn-secondary,
.contact-btn.filter {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #fff !important;
}

.modulo-compras .btn-success,
.modulo-ventas .btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
}

.modulo-compras .btn-danger,
.modulo-ventas .btn-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
}

.estado-recibida,
.estado-pagada,
.contact-status.active,
.status.active {
    color: var(--success) !important;
    background: color-mix(in srgb, var(--success) 13%, var(--surface)) !important;
}

.estado-parcial,
.estado-pendiente {
    color: color-mix(in srgb, var(--warning) 78%, #000) !important;
    background: color-mix(in srgb, var(--warning) 16%, var(--surface)) !important;
}

.estado-anulada,
.estado-cancelada,
.contact-status.inactive,
.status.inactive {
    color: var(--danger) !important;
    background: color-mix(in srgb, var(--danger) 12%, var(--surface)) !important;
}