/* ══════════════════════════════════════════════════════
   CRM Design System — sidebar + topbar + base
   Tokens light/dark via [data-app-theme] (sin duplicar el
   sistema de tema existente). Aditivo, no toca el panel web.
   ══════════════════════════════════════════════════════ */

:root,
[data-app-theme="light"] {
    --crm-primary: #6366f1;
    --crm-primary-600: #4f46e5;
    --crm-primary-50: #eef2ff;
    --crm-success: #25d366;
    --crm-success-600: #16a34a;
    --crm-success-50: #ecfdf5;
    --crm-surface: #ffffff;
    --crm-surface-2: #f8fafc;
    --crm-surface-3: #f1f5f9;
    --crm-border: #e2e8f0;
    --crm-text: #0f172a;
    --crm-text-muted: #64748b;
    --crm-sidebar-bg: #ffffff;
    --crm-topbar-bg: rgba(255, 255, 255, .85);
    --crm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --crm-shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
    --crm-shadow-lg: 0 12px 40px rgba(15, 23, 42, .18);
    --crm-radius: 12px;
    --crm-radius-sm: 8px;
    --crm-badge-bg: #eef2ff;
    --crm-badge-text: #4f46e5;
}

[data-app-theme="dark"] {
    --crm-primary: #818cf8;
    --crm-primary-600: #6366f1;
    --crm-primary-50: #1e1b4b;
    --crm-success: #25d366;
    --crm-success-600: #22c55e;
    --crm-success-50: #052e16;
    --crm-surface: #1e293b;
    --crm-surface-2: #0f172a;
    --crm-surface-3: #334155;
    --crm-border: #334155;
    --crm-text: #f1f5f9;
    --crm-text-muted: #94a3b8;
    --crm-sidebar-bg: #162033;
    --crm-topbar-bg: rgba(15, 23, 42, .85);
    --crm-shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
    --crm-shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
    --crm-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
    --crm-badge-bg: #312e81;
    --crm-badge-text: #a5b4fc;
}

/* ── Shell ──────────────────────────────────────────── */
body.crm-body {
    background: var(--crm-surface-2);
}

.crm-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    height: 56px;
    background: var(--crm-topbar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--crm-border);
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    gap: .5rem;
}

.crm-page {
    padding-top: 56px;
    min-height: 100vh;
}

/* ── Botón hamburguesa ─────────────────────────────── */
.crm-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-sm);
    background: var(--crm-surface);
    color: var(--crm-text);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.crm-topbar-toggle:hover {
    background: var(--crm-primary-50);
    color: var(--crm-primary);
}

/* ── Drawer sidebar (oculto por defecto) ───────────── */
.crm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: 268px;
    background: var(--crm-sidebar-bg);
    border-right: 1px solid var(--crm-border);
    transform: translateX(-100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--crm-shadow-lg);
}
.crm-sidebar.open {
    transform: translateX(0);
}
.crm-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.crm-sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

/* ── Sidebar: header ───────────────────────────────── */
.crm-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--crm-border);
}
.crm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--crm-text);
    text-decoration: none;
}
.crm-sidebar-brand:hover { color: var(--crm-text); }
.crm-sidebar-logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--crm-primary), var(--crm-primary-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.crm-sidebar-close {
    border: 0;
    background: transparent;
    color: var(--crm-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: .25rem;
}
.crm-sidebar-close:hover { color: var(--crm-text); }

/* ── Sidebar: nav ──────────────────────────────────── */
.crm-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .75rem .65rem 1rem;
}
.crm-nav-section {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--crm-text-muted);
    padding: 1rem .55rem .35rem;
}
.crm-nav-section:first-child { padding-top: .25rem; }

.crm-nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    margin-bottom: 2px;
    border-radius: var(--crm-radius-sm);
    color: var(--crm-text);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background .12s, color .12s;
    border: 1px solid transparent;
}
.crm-nav-item:hover {
    background: var(--crm-surface-3);
    color: var(--crm-text);
}
.crm-nav-item.active {
    background: var(--crm-primary-50);
    color: var(--crm-primary-600);
    border-color: transparent;
}
.crm-nav-item .crm-nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.crm-nav-item .crm-nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.crm-nav-item.soon {
    color: var(--crm-text-muted);
    cursor: default;
    opacity: .75;
}
.crm-nav-item.soon:hover { background: transparent; }
.crm-nav-soon-badge {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--crm-badge-bg);
    color: var(--crm-badge-text);
    border-radius: 999px;
    padding: .15rem .45rem;
    white-space: nowrap;
}

/* ── Sidebar: footer ───────────────────────────────── */
.crm-sidebar-footer {
    padding: .75rem 1rem;
    border-top: 1px solid var(--crm-border);
    display: flex;
    align-items: center;
    gap: .6rem;
}
.crm-sidebar-footer .crm-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--crm-success-50);
    color: var(--crm-success-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Topbar: contenidos ────────────────────────────── */
.crm-topbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--crm-text);
    text-decoration: none;
    letter-spacing: -.01em;
}
.crm-topbar-brand:hover { color: var(--crm-text); }
.crm-topbar-org {
    font-size: .78rem;
    color: var(--crm-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 999px;
    padding: .32rem .7rem;
    color: var(--crm-text-muted);
    font-size: .8rem;
    width: min(260px, 30vw);
}
.crm-topbar-icon {
    border: 0;
    background: transparent;
    color: var(--crm-text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: .3rem .45rem;
    border-radius: var(--crm-radius-sm);
}
.crm-topbar-icon:hover { color: var(--crm-primary); background: var(--crm-primary-50); }

/* ── Base reutilizable ─────────────────────────────── */
.crm-card {
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow-sm);
}
.crm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 2rem;
    color: var(--crm-text-muted);
    text-align: center;
}
.crm-empty-state i { font-size: 1.8rem; opacity: .6; }

/* ── Responsive ────────────────────────────────────── */
@media (min-width: 992px) {
    .crm-search { width: 300px; }
}