/* Shell del panel tenant (sidebar, header, fondo): mismo diseño que el panel de callcenter. */
:root {
    --cc-sidebar-blue: #0f2944;
    --cc-sidebar-line: #0b2239;
    --cc-accent: #16b8a6;
    --cc-accent-dark: #12a895;
    --cc-body-bg: #f4f7fb;
}

body,
.app,
.app-content {
    background: var(--cc-body-bg);
}

/* ── Header ─────────────────────────────────────────────────── */
.app-header { border-bottom: 0; }

.app-header .navbar-header {
    background: var(--cc-sidebar-blue);
    border-right: 1px solid var(--cc-sidebar-line);
    border-bottom: 1px solid var(--cc-sidebar-line);
}

.app-header .navbar-brand,
.app-header .navbar-brand b { color: #fff; }
.app-header .navbar-brand b { font-weight: 850; }
.app-header .navbar-logo { border-radius: 8px; background: var(--cc-accent); }

.app-header .navbar-nav {
    border-bottom: 1px solid #d6dde6;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 18px;
}

.app-header .navbar-spacer { flex: 1 1 auto; }
.app-header .navbar-sidebar-toggle { display: flex; align-items: center; }

.app-header .sidebar-toggle-btn {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: var(--cc-accent);
    color: #fff;
    box-shadow: 0 8px 18px rgba(22, 184, 166, .22);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.app-header .sidebar-toggle-btn:hover,
.app-header .sidebar-toggle-btn:focus {
    background: var(--cc-accent-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(22, 184, 166, .28);
}

.app-header .navbar-form { padding: 0; margin: 0; }

.app-header .navbar-form .form-control {
    width: 260px;
    height: 38px;
    padding-inline-start: 42px;
    border-radius: 8px;
    background: #fff;
    border-color: #dbe3ee;
    color: #25364d;
}

.app-header .navbar-form .form-control:focus {
    width: 300px;
    border-color: #b9c7dc;
    box-shadow: 0 0 0 3px rgba(47, 107, 230, .08);
}

.app-header .navbar-form .btn-search {
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: 38px;
    justify-content: center;
    color: #8a9ab0;
    border-radius: 8px 0 0 8px;
}

.app-header .navbar-user { margin-inline-start: 0; }

@media (min-width: 768px) {
    .app-sidebar-minified:not(.app-without-sidebar) .app-header .navbar-header { width: 60px; }

    .app-sidebar-minified:not(.app-without-sidebar) .app-header .navbar-brand {
        width: 60px;
        justify-content: center;
        padding: 10px 0;
        overflow: hidden;
        font-size: 0;
    }

    .app-sidebar-minified:not(.app-without-sidebar) .app-header .navbar-brand b { display: none; }
    .app-sidebar-minified:not(.app-without-sidebar) .app-header .navbar-logo { margin-inline-end: 0; }
}

@media (max-width: 767.98px) {
    .app-header .navbar-nav { gap: 8px; padding: 8px 12px; }
    .app-header .navbar-sidebar-toggle { display: none; }
    .app-header .navbar-form { flex: 1; }
    .app-header .navbar-form .form-control,
    .app-header .navbar-form .form-control:focus { width: 100%; }
}

/* ── Sidebar ────────────────────────────────────────────────── */
.app-sidebar,
.app-sidebar-bg { background: var(--cc-sidebar-blue) !important; }
.app-sidebar { border-right: 1px solid var(--cc-sidebar-line); }

.app-sidebar .menu .menu-profile { background: transparent !important; }
.app-sidebar .menu .menu-profile .menu-profile-cover { opacity: .42; }
.app-sidebar .menu .menu-profile .menu-profile-info,
.app-sidebar .menu .menu-profile .menu-profile-info small { color: #fff; }

.app-sidebar .menu .menu-header { color: rgba(219, 234, 254, .68); }
.app-sidebar .menu .menu-item .menu-link { color: rgba(255, 255, 255, .78); }

.app-sidebar .menu .menu-item .menu-link:hover,
.app-sidebar .menu .menu-item.active > .menu-link {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.app-sidebar .menu .menu-item.active > .menu-link { border-left: 3px solid #2dd4bf; }
.app-sidebar .menu .menu-icon { color: rgba(219, 234, 254, .86); }

/* Botón con aspecto de ítem de menú (cerrar sesión del perfil: un submit, sin JavaScript en línea) */
.menu-link.menu-link-button { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }