:root {
    --sg-bg: #f5f6fb;
    --sg-surface: #ffffff;
    --sg-surface-soft: #fafaff;
    --sg-text: #202231;
    --sg-muted: #85899b;
    --sg-line: #e6e8ef;
    --sg-dark: #0c0f1d;
    --sg-dark-2: #111526;
    --sg-purple: #7629f5;
    --sg-pink: #ef3f9e;
    --sg-orange: #ff7a2f;
    --sg-green: #30cf91;
    --sg-red: #ff4c68;
    --sg-yellow: #f6b94a;
    --sg-blue: #3b82f6;
    --sg-gradient: linear-gradient(105deg, var(--sg-purple), var(--sg-pink) 58%, var(--sg-orange));
    --sg-radius-sm: 10px;
    --sg-radius: 16px;
    --sg-radius-lg: 24px;
    --sg-shadow: 0 8px 25px rgba(23, 26, 52, .055);
    --sg-shadow-lg: 0 24px 70px rgba(20, 23, 45, .14);
    --sg-sidebar-width: 252px;
}

* {
    scrollbar-color: #c7cad5 transparent;
    scrollbar-width: thin;
}

body.sevengest-app,
body.sevengest-micro {
    color: var(--sg-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.sevengest-app {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--sg-bg);
}

a {
    text-underline-offset: 2px;
}

/* Shell principal */
.sg-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    width: var(--sg-sidebar-width);
    height: 100vh;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 22px 17px 18px;
    border-right: 1px solid rgba(255, 255, 255, .03);
    background: linear-gradient(180deg, #0c0f1d 0%, #0b0e1a 100%);
    box-shadow: 18px 0 50px rgba(13, 16, 32, .06);
    color: #fff;
}

.sg-brand {
    display: block;
    padding: 0 6px 13px;
}

.sg-brand img {
    display: block;
    width: 184px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .25));
}

.sg-workspace {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 1px 17px;
    padding: 11px 7px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sg-workspace-avatar,
.sg-user-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--sg-gradient);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(118, 41, 245, .23);
}

.sg-workspace-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.sg-workspace > span:last-child,
.sg-sidebar-footer > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.sg-workspace strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-workspace small,
.sg-sidebar-footer small {
    overflow: hidden;
    color: #858ba8;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-navigation {
    flex: 1;
}

.sg-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-menu-group {
    margin-bottom: 5px;
}

.sg-menu-toggle,
.sg-menu-nested-toggle,
.sg-menu-link {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    border: 0;
    color: #aeb4cd;
    text-align: left;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.sg-menu-toggle {
    min-height: 44px;
    padding: 10px 11px;
    border-radius: 11px;
    background: transparent;
    font-size: 13px;
    font-weight: 800;
}

.sg-menu-toggle:hover,
.sg-menu-group.is-open > .sg-menu-toggle {
    background: rgba(255, 255, 255, .055);
    color: #fff;
}

.sg-menu-toggle:hover {
    transform: translateX(2px);
}

.sg-menu-group.is-active > .sg-menu-toggle {
    background: linear-gradient(105deg, #6d20e7, #8e34f7 64%, #a246ff);
    color: #fff;
    box-shadow: 0 9px 24px rgba(118, 41, 245, .27);
}

.sg-menu-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    flex: 0 0 20px;
    font-size: 14px;
    opacity: .92;
}

.sg-menu-chevron {
    margin-left: auto;
    font-size: 9px;
    opacity: .52;
    transition: transform .17s ease;
}

.sg-menu-group.is-open > .sg-menu-toggle .sg-menu-chevron,
.sg-menu-nested.is-open > .sg-menu-nested-toggle .sg-menu-chevron {
    transform: rotate(180deg);
}

.sg-menu-children,
.sg-menu-nested-children {
    display: grid;
    max-height: 0;
    gap: 2px;
    overflow: hidden;
    opacity: 0;
    transition: max-height .22s ease, opacity .18s ease, padding .18s ease;
}

.sg-menu-group.is-open > .sg-menu-children,
.sg-menu-nested.is-open > .sg-menu-nested-children {
    max-height: 1200px;
    padding: 5px 0 4px;
    opacity: 1;
}

.sg-menu-link,
.sg-menu-nested-toggle {
    min-height: 36px;
    padding: 8px 10px 8px 16px;
    border-radius: 9px;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
}

.sg-menu-link svg,
.sg-menu-link i,
.sg-menu-nested-toggle svg,
.sg-menu-nested-toggle i:first-child {
    width: 16px;
    color: #7e849f;
}

.sg-menu-link:hover,
.sg-menu-link.active,
.sg-menu-nested-toggle:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.sg-menu-link.active {
    color: #dbcfff;
}

.sg-menu-nested-children .sg-menu-link {
    padding-left: 34px;
}

.sg-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 13px 8px 2px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.sg-sidebar-footer strong {
    color: #d7daea;
    font-size: 11px;
}

.sg-live-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--sg-green);
    box-shadow: 0 0 0 5px rgba(48, 207, 145, .09);
}

.sg-topbar {
    position: fixed;
    inset: 0 0 auto var(--sg-sidebar-width);
    z-index: 1030;
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 28px;
    border-bottom: 1px solid rgba(226, 228, 238, .92);
    background: rgba(251, 251, 254, .91);
    box-shadow: 0 5px 20px rgba(23, 26, 52, .025);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.sg-page-heading {
    min-width: 0;
}

.sg-page-heading > span,
.sg-eyebrow {
    color: #999cad;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.sg-page-heading h1 {
    overflow: hidden;
    margin: 2px 0 0;
    color: #171827;
    font-size: clamp(20px, 2.3vw, 29px);
    font-weight: 750;
    letter-spacing: -.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-top-actions > li {
    list-style: none;
}

.sg-icon-action {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid #e2e4ed;
    border-radius: 11px;
    background: #fff;
    color: #666b7f;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(26, 29, 50, .04);
    transition: .15s ease;
}

.sg-icon-action:hover,
.sg-icon-action.active {
    border-color: #d9cdf8;
    background: #f8f5ff;
    color: var(--sg-purple);
    transform: translateY(-1px);
}

.sg-user-chip {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 5px;
    border: 1px solid #e4e6ee;
    border-radius: 12px;
    background: #fff;
    color: #1d2030;
    box-shadow: 0 5px 16px rgba(20, 22, 42, .04);
}

.sg-user-chip::after {
    margin-left: 3px;
    color: #a0a4b4;
}

.sg-user-avatar {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    font-size: 11px;
}

.sg-user-chip > span:nth-child(2) {
    display: flex;
    max-width: 140px;
    flex-direction: column;
    line-height: 1.08;
    text-align: left;
}

.sg-user-chip strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-user-chip small {
    overflow: hidden;
    margin-top: 3px;
    color: #989bad;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-user-menu {
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--sg-line);
    border-radius: 13px;
    box-shadow: var(--sg-shadow-lg);
}

.sg-user-menu .dropdown-item {
    border-radius: 9px;
    font-size: 13px;
}

.sg-content {
    min-width: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #fbfbfe 0, #f4f5fa 260px, #f5f6fb 100%);
}

.sg-sidebar ~ .sg-content {
    margin-left: var(--sg-sidebar-width);
    padding-top: 80px;
}

.sg-page-options {
    padding: 22px 26px 0;
}

.sg-mobile-toggle,
.sg-sidebar-shade {
    display: none;
}

/* Componentes Bootstrap */
.sevengest-app .card {
    border-color: var(--sg-line);
    border-radius: var(--sg-radius);
    background-color: var(--sg-surface);
    box-shadow: var(--sg-shadow) !important;
}

.sevengest-app .card-header,
.sevengest-app .card-footer {
    border-color: #eceef3;
    background: #fafbfe;
}

.sevengest-app .card-header:first-child {
    border-radius: calc(var(--sg-radius) - 1px) calc(var(--sg-radius) - 1px) 0 0;
}

.sevengest-app .card-footer:last-child {
    border-radius: 0 0 calc(var(--sg-radius) - 1px) calc(var(--sg-radius) - 1px);
}

.sevengest-app .btn {
    border-radius: var(--sg-radius-sm);
    font-weight: 750;
    box-shadow: none;
}

.sevengest-app .btn-primary,
.sevengest-app .bg-primary {
    border-color: transparent;
    background: var(--sg-gradient) !important;
    color: #fff;
}

.sevengest-app .btn-primary {
    box-shadow: 0 8px 20px rgba(118, 41, 245, .15);
}

.sevengest-app .btn-primary:hover {
    border-color: transparent;
    filter: saturate(1.06) brightness(1.03);
    transform: translateY(-1px);
}

.sevengest-app .btn-secondary {
    border-color: #dfe2eb;
    background: #f3f4f8;
    color: #3f4354;
}

.sevengest-app .btn-secondary:hover,
.sevengest-app .btn-secondary.active {
    border-color: #252838;
    background: #252838;
    color: #fff;
}

.sevengest-app .btn-success {
    border-color: var(--sg-green);
    background: var(--sg-green);
    color: #10291f;
}

.sevengest-app .btn-warning {
    border-color: #f5c767;
    background: #fff3d8;
    color: #7e5917;
}

.sevengest-app .btn-danger {
    border-color: var(--sg-red);
    background: var(--sg-red);
    color: #fff;
}

.sevengest-app .btn-outline-primary {
    border-color: #cbbaf6;
    color: var(--sg-purple);
}

.sevengest-app .btn-outline-primary:hover {
    border-color: var(--sg-purple);
    background: var(--sg-purple);
    color: #fff;
}

.sevengest-app .text-primary {
    color: var(--sg-purple) !important;
}

.sevengest-app .form-control,
.sevengest-app .form-select,
.sevengest-app .input-group-text,
.sevengest-app .select2-container--bootstrap-5 .select2-selection {
    min-height: 40px;
    border-color: #e1e4ed;
    border-radius: 10px;
    background-color: #fbfcfe;
    color: #252737;
}

.sevengest-app .input-group > .input-group-text {
    border-radius: 10px 0 0 10px;
    color: #85899b;
}

.sevengest-app .input-group > .form-control:not(:first-child),
.sevengest-app .input-group > .form-select:not(:first-child) {
    border-radius: 0 10px 10px 0;
}

.sevengest-app .form-control:focus,
.sevengest-app .form-select:focus {
    border-color: #b59af5;
    box-shadow: 0 0 0 3px rgba(118, 41, 245, .08);
}

.sevengest-app .form-label,
.sevengest-app label {
    color: #62677a;
}

.sevengest-app .table-responsive {
    border-radius: 0 0 var(--sg-radius) var(--sg-radius);
}

.sevengest-app .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #fafaff;
    margin-bottom: 0;
    color: #2d3040;
}

.sevengest-app .table > :not(caption) > * > * {
    padding: .72rem .75rem;
    border-bottom-color: #eef0f4;
}

.sevengest-app .table thead th {
    border-bottom-color: #e8eaf1;
    background: #f8f9fc;
    color: #888da1;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sevengest-app .table-success {
    --bs-table-bg: #effaf4;
    --bs-table-striped-bg: #e8f7ef;
    --bs-table-hover-bg: #e5f6ed;
}

.sevengest-app .nav-tabs {
    gap: 4px;
    padding: 0 5px;
    border-bottom-color: #e2e4ec;
}

.sevengest-app .nav-tabs .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 9px 9px 0 0;
    color: #707589;
    font-weight: 750;
}

.sevengest-app .nav-tabs .nav-link:hover {
    background: #f5f1ff;
    color: var(--sg-purple);
}

.sevengest-app .nav-tabs .nav-link.active {
    border-bottom-color: var(--sg-purple);
    background: #fff;
    color: var(--sg-purple);
}

.sevengest-app .nav-pills .nav-link {
    margin-bottom: 4px;
    border-radius: 10px;
    color: #606578;
    font-weight: 750;
}

.sevengest-app .nav-pills .nav-link.active {
    background: var(--sg-gradient);
    color: #fff;
}

.sevengest-app .dropdown-menu {
    padding: 7px;
    border-color: var(--sg-line);
    border-radius: 12px;
    box-shadow: var(--sg-shadow-lg);
}

.sevengest-app .dropdown-item {
    padding: 8px 10px;
    border-radius: 8px;
}

.sevengest-app .dropdown-item:hover,
.sevengest-app .dropdown-item.active {
    background: #f3efff;
    color: var(--sg-purple);
}

.sevengest-app .modal-content {
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-radius: 18px;
    box-shadow: var(--sg-shadow-lg);
}

.sevengest-app .modal-header,
.sevengest-app .modal-footer {
    border-color: #eceef3;
    background: #fafbfe;
}

.sevengest-app .alert {
    border-radius: 13px;
    box-shadow: 0 7px 20px rgba(23, 26, 52, .04);
}

.sevengest-app .alert-success {
    border-color: #cbeedc;
    background: #effaf4;
    color: #23774f;
}

.sevengest-app .alert-warning {
    border-color: #f0dfba;
    background: #fff9eb;
    color: #8a621e;
}

.sevengest-app .alert-danger {
    border-color: #ffd3db;
    background: #fff3f5;
    color: #b3354d;
}

.sevengest-app .badge.bg-secondary {
    background: #eff0f5 !important;
    color: #686d80;
}

.sevengest-app .pagination .page-link {
    border-color: #e2e4ec;
    color: #616679;
}

.sevengest-app .pagination .active .page-link {
    border-color: var(--sg-purple);
    background: var(--sg-purple);
    color: #fff;
}

.sevengest-app .breadcrumb {
    color: #888c9f;
    font-size: 12px;
}

.sevengest-app .breadcrumb a {
    color: var(--sg-purple);
    text-decoration: none;
}

.sevengest-app .container[style*="margin-top: -70px"],
.sevengest-app .container[style*="margin-top: -40px"] {
    margin-top: 0 !important;
}

/* Dashboard Sevengest */
.sg-dashboard {
    padding: 4px 28px 48px;
}

.sg-dashboard-hero {
    position: relative;
    display: flex;
    min-height: 168px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 28px 32px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 78% 0%, rgba(239, 63, 158, .24), transparent 38%),
        radial-gradient(circle at 100% 90%, rgba(255, 122, 47, .18), transparent 34%),
        linear-gradient(130deg, #111526, #1b1932);
    box-shadow: 0 18px 46px rgba(20, 23, 45, .16);
    color: #fff;
}

.sg-dashboard-hero::after {
    position: absolute;
    inset: auto -80px -125px auto;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    content: "";
}

.sg-dashboard-hero h2 {
    margin: 5px 0 7px;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -.045em;
}

.sg-dashboard-hero p {
    max-width: 650px;
    margin: 0;
    color: #b9bed3;
}

.sg-dashboard-hero .sg-eyebrow {
    color: #cdbbff;
}

.sg-hero-mark {
    position: relative;
    z-index: 1;
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    flex: 0 0 104px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 28px;
    background: rgba(255, 255, 255, .055);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
    backdrop-filter: blur(10px);
}

.sg-hero-mark img {
    width: 76px;
    height: 76px;
    border-radius: 22px;
}

.sg-dashboard-alert {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sg-dashboard-alert > svg,
.sg-dashboard-alert > i {
    font-size: 22px;
}

.sg-dashboard-alert > div {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sg-dashboard-alert span {
    display: block;
    font-size: 12px;
}

.sg-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
    gap: 16px;
    margin-bottom: 18px;
}

.sg-dashboard-grid > :only-child {
    grid-column: 1 / -1;
}

.sg-dashboard-onboarding,
.sg-dashboard-alerts {
    margin-bottom: 18px;
}

.sg-dashboard-onboarding > .card,
.sg-dashboard-alerts > .card {
    margin-bottom: 0 !important;
}

.sg-dashboard-onboarding .progress-bar {
    background: var(--sg-gradient);
}

.sg-dashboard-alerts .list-group-item-action:hover {
    background: #faf8ff;
    color: var(--sg-purple);
}

.sg-dashboard-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius);
    background: #fff;
    box-shadow: var(--sg-shadow);
}

.sg-dashboard-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 18px 12px;
}

.sg-dashboard-card > header span {
    display: block;
    margin-bottom: 4px;
    color: #9a9daf;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sg-dashboard-card > header h3 {
    margin: 0;
    color: #252735;
    font-size: 17px;
    letter-spacing: -.025em;
}

.sg-dashboard-card > header > svg,
.sg-dashboard-card > header > i {
    color: var(--sg-purple);
}

.sg-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 0 16px 16px;
}

.sg-quick-grid > a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    padding: 11px;
    border: 1px solid #e8e9f0;
    border-radius: 12px;
    background: #fbfbfe;
    color: #303241;
    text-decoration: none;
    transition: .15s ease;
}

.sg-quick-grid > a:hover {
    border-color: #d7cdf7;
    background: #f8f5ff;
    transform: translateY(-1px);
}

.sg-quick-grid > a > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: #f0ebff;
    color: var(--sg-purple);
}

.sg-quick-grid strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-quick-grid > a > svg:last-child,
.sg-quick-grid > a > i:last-child {
    color: #a5a9b9;
    font-size: 10px;
}

.sg-recent-list {
    padding: 0 8px 10px;
}

.sg-recent-list > a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-top: 1px solid #f0f1f5;
    color: #303241;
    text-decoration: none;
}

.sg-recent-list > a:hover {
    background: #fafaff;
}

.sg-recent-icon {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    border-radius: 10px;
    background: #f0effa;
    color: var(--sg-purple);
}

.sg-recent-list > a > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.sg-recent-list strong,
.sg-recent-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-recent-list strong {
    font-size: 11px;
}

.sg-recent-list small {
    color: #9094a4;
    font-size: 9px;
}

.sg-recent-list > a > svg:last-child,
.sg-recent-list > a > i:last-child {
    color: #b0b3c1;
    font-size: 9px;
}

.sg-empty-state {
    display: grid;
    min-height: 150px;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #9a9dad;
    font-size: 12px;
}

.sg-empty-state svg,
.sg-empty-state i {
    font-size: 24px;
}

.sg-dashboard-stats > .row {
    --bs-gutter-x: 14px;
}

.sg-dashboard-stats .card .card-body:first-child {
    border-radius: var(--sg-radius) var(--sg-radius) 0 0;
}

.sg-dashboard-stats .card .bg-danger {
    background: linear-gradient(135deg, #ff6078, #f04764) !important;
}

.sg-dashboard-stats .card .bg-success {
    background: linear-gradient(135deg, #32d6a7, #2bbf82) !important;
}

.sg-dashboard-stats .card .bg-warning {
    background: linear-gradient(135deg, #ffce6b, #f4ad32) !important;
    color: #63420c !important;
}

.sg-dashboard-stats .card .bg-info {
    background: linear-gradient(135deg, #6ba7ff, #557ce8) !important;
}

.sg-dashboard-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sg-dashboard-detail > .card:only-child {
    grid-column: 1 / -1;
}

/* Acerca de */
.sg-about-card {
    overflow: hidden;
}

.sg-about-logo {
    width: min(290px, 100%);
    height: auto;
}

.sg-system-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.sg-system-facts > span {
    display: flex;
    min-width: 112px;
    flex-direction: column;
    padding: 10px 12px;
    border: 1px solid #e8e9f0;
    border-radius: 11px;
    background: #fafaff;
}

.sg-system-facts small {
    color: #9296a7;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-system-facts strong {
    margin-top: 2px;
    color: #292b3a;
    font-size: 12px;
}

.sg-technical-note {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #696e81;
}

.sg-technical-note > svg,
.sg-technical-note > i {
    color: var(--sg-purple);
    font-size: 20px;
}

.sg-technical-note > span {
    display: flex;
    flex-direction: column;
}

.sg-technical-note strong {
    color: #343646;
    font-size: 12px;
}

.sg-technical-note small {
    font-size: 10px;
}

/* Login */
body.sevengest-micro {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 15% 0, rgba(118, 41, 245, .26), transparent 35%),
        radial-gradient(circle at 92% 18%, rgba(239, 63, 158, .18), transparent 29%),
        #080b15;
}

.sg-login-messages {
    position: fixed;
    inset: 14px 14px auto;
    z-index: 1090;
    max-width: 720px;
    margin: auto;
}

.sg-login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 28px;
}

.sg-login-shell {
    display: grid;
    width: min(1040px, 100%);
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
}

.sg-login-brand-panel {
    position: relative;
    display: flex;
    min-height: 650px;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 48px;
    background:
        radial-gradient(circle at 10% 10%, rgba(118, 41, 245, .34), transparent 38%),
        radial-gradient(circle at 92% 82%, rgba(239, 63, 158, .26), transparent 34%),
        linear-gradient(145deg, #0e1120, #17172d);
    color: #fff;
}

.sg-login-brand-panel::before,
.sg-login-brand-panel::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
}

.sg-login-brand-panel::before {
    right: -130px;
    bottom: -120px;
    width: 390px;
    height: 390px;
}

.sg-login-brand-panel::after {
    right: -55px;
    bottom: -50px;
    width: 240px;
    height: 240px;
}

.sg-login-brand-panel > * {
    position: relative;
    z-index: 1;
}

.sg-login-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
    color: #c9cde0;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-login-logo {
    display: block;
    width: min(330px, 92%);
    height: auto;
    margin: 58px 0 32px;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .28));
}

.sg-login-brand-panel h1 {
    max-width: 430px;
    margin: 0 0 14px;
    font-size: clamp(36px, 4.6vw, 52px);
    line-height: .98;
    letter-spacing: -.055em;
}

.sg-login-brand-panel p {
    max-width: 470px;
    margin: 0;
    color: #b8bdd1;
    font-size: 15px;
    line-height: 1.6;
}

.sg-login-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 38px;
}

.sg-login-features span {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: #d5d8e7;
    font-size: 11px;
    font-weight: 750;
}

.sg-login-features svg,
.sg-login-features i {
    color: #be94ff;
}

.sg-login-form-panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 45px 48px;
    background: linear-gradient(180deg, #fff, #fbfbfe);
}

.sg-login-tenant {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    margin-bottom: 34px;
}

.sg-login-tenant img {
    width: auto;
    max-width: 130px;
    height: 38px;
    object-fit: contain;
}

.sg-login-tenant > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.sg-login-tenant small {
    color: #9a9dae;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sg-login-tenant strong {
    overflow: hidden;
    color: #303241;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-login-copy > span {
    color: var(--sg-purple);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sg-login-copy h2 {
    margin: 5px 0 7px;
    color: #1d1f2e;
    font-size: 31px;
    letter-spacing: -.04em;
}

.sg-login-copy p {
    margin: 0 0 24px;
    color: #85899b;
    font-size: 13px;
}

.sg-login-form {
    display: grid;
    gap: 16px;
}

.sg-field {
    display: grid;
    gap: 7px;
    color: #616678;
    font-size: 11px;
    font-weight: 800;
}

.sg-field > input,
.sg-input-wrap {
    width: 100%;
    min-height: 48px;
    border: 1px solid #dfe2eb;
    border-radius: 12px;
    background: #fbfcfe;
    color: #252737;
}

.sg-field > input {
    padding: 12px 13px;
    outline: 0;
}

.sg-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sg-input-wrap:focus-within,
.sg-field > input:focus {
    border-color: #b59af5;
    box-shadow: 0 0 0 3px rgba(118, 41, 245, .08);
}

.sg-input-wrap > svg,
.sg-input-wrap > i {
    color: #9b9faf;
    font-size: 13px;
}

.sg-input-wrap input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #252737;
}

.sg-code-input input {
    font-size: 20px;
    font-weight: 850;
    letter-spacing: .18em;
}

.sg-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: -4px;
}

.sg-login-options > span {
    color: #999dae;
    font-size: 9px;
}

.sg-login-options .btn-link,
.sg-back-login {
    padding: 0;
    color: var(--sg-purple);
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.sg-login-submit {
    display: flex;
    min-height: 49px;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    padding: 12px 16px;
    border: 0;
    border-radius: 11px;
    background: var(--sg-gradient);
    box-shadow: 0 12px 26px rgba(118, 41, 245, .2);
    color: #fff;
    font-weight: 850;
}

.sg-login-submit:hover {
    color: #fff;
    filter: saturate(1.06) brightness(1.03);
    transform: translateY(-1px);
}

.sg-login-footer {
    margin: 29px 0 0;
    color: #a0a4b4;
    font-size: 9px;
    text-align: center;
}

.sg-login-modal {
    overflow: hidden;
    border: 1px solid #e4e6ee;
    border-radius: 18px;
    box-shadow: var(--sg-shadow-lg);
}

.sg-login-modal .modal-header,
.sg-login-modal .modal-footer {
    border-color: #eceef3;
    background: #fafbfe;
}

.sg-login-modal .modal-header small {
    color: var(--sg-purple);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sg-login-modal .modal-body {
    display: grid;
    gap: 14px;
}

.sg-recovery-note {
    margin: 0;
    padding: 12px 13px;
    border: 1px solid #e8e2f8;
    border-radius: 11px;
    background: #faf8ff;
    color: #666b7e;
    font-size: 11px;
}

.sg-login-shell-compact .sg-login-brand-panel {
    min-height: 560px;
}

.sg-two-factor-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 17px;
    background: #f0ebff;
    color: var(--sg-purple);
    font-size: 24px;
}

.sg-back-login {
    justify-self: center;
    margin-top: 4px;
}

/* Experiencia comercial Seven Gest */
[data-sg-controller="Updater"] [data-bs-target="#modalTelemetry"],
[data-sg-controller="Updater"] #modalTelemetry {
    display: none !important;
}

.sg-selectseven-slot {
    clear: both;
}

.sg-selectseven-promo {
    position: relative;
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    padding: 25px 28px;
    border: 1px solid rgba(168, 132, 255, .34);
    border-radius: 20px;
    background:
        radial-gradient(circle at 82% -35%, rgba(255, 122, 47, .33), transparent 40%),
        radial-gradient(circle at 18% 140%, rgba(118, 41, 245, .5), transparent 44%),
        linear-gradient(118deg, #111526 0%, #21173b 58%, #361a3b 100%);
    box-shadow: 0 20px 48px rgba(20, 23, 45, .16);
    color: #fff;
}

.sg-selectseven-promo::after {
    position: absolute;
    right: -65px;
    bottom: -120px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.sg-selectseven-identity {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 17px;
}

.sg-selectseven-mark {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    flex: 0 0 68px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}

.sg-selectseven-mark img {
    width: 39px;
    height: 39px;
    filter: brightness(0) invert(1);
}

.sg-selectseven-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.sg-selectseven-copy small {
    margin-bottom: 3px;
    color: #d9c9ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sg-selectseven-copy strong {
    font-size: clamp(24px, 3vw, 33px);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1;
}

.sg-selectseven-copy > span {
    max-width: 620px;
    margin-top: 8px;
    color: #c8c8d8;
    font-size: 12px;
    line-height: 1.55;
}

.sg-selectseven-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 13px;
    background: linear-gradient(105deg, #7629f5, #ef3f9e 62%, #ff7a2f);
    box-shadow: 0 12px 30px rgba(118, 41, 245, .28);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease;
}

.sg-selectseven-cta:hover {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* SevenRetail mantiene su modo inmersivo */
.retail-topbar + .sg-content {
    margin-left: 0;
    padding-top: 0;
    background: transparent;
}

/* Responsive */
/*
 * Densidad de escritorio compacto.
 *
 * El sidebar conserva sus proporciones. Solo se adapta el lienzo de trabajo
 * para que los portátiles y las ventanas medianas no necesiten reducir el
 * zoom del navegador. El selector de hermano evita afectar al TPV inmersivo
 * de SevenRetail, que no utiliza el sidebar de Sevengest.
 */
@media (min-width: 901px) and (max-width: 1480px) {
    .sg-topbar {
        min-height: 72px;
        gap: 14px;
        padding: 12px 22px;
    }

    .sg-page-heading h1 {
        font-size: clamp(20px, 2vw, 25px);
    }

    .sg-icon-action {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .sg-user-chip {
        min-height: 38px;
        padding: 3px 9px 3px 4px;
    }

    .sg-user-avatar {
        width: 29px;
        height: 29px;
    }

    .sg-sidebar ~ .sg-content {
        padding-top: 72px;
        font-size: 14px;
    }

    .sg-sidebar ~ .sg-content .sg-page-options {
        padding: 14px 18px 0;
    }

    .sg-sidebar ~ .sg-content .container,
    .sg-sidebar ~ .sg-content .container-fluid {
        --bs-gutter-x: 1.5rem;
    }

    .sg-sidebar ~ .sg-content .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: .75rem;
    }

    .sg-sidebar ~ .sg-content h1 {
        font-size: 1.6rem;
    }

    .sg-sidebar ~ .sg-content h2 {
        font-size: 1.45rem;
    }

    .sg-sidebar ~ .sg-content h3 {
        font-size: 1.25rem;
    }

    .sg-sidebar ~ .sg-content h4,
    .sg-sidebar ~ .sg-content h5 {
        font-size: 1.05rem;
    }

    .sg-sidebar ~ .sg-content .card {
        --sg-radius: 14px;
    }

    .sg-sidebar ~ .sg-content .card-body {
        padding: .85rem;
    }

    .sg-sidebar ~ .sg-content .card-header,
    .sg-sidebar ~ .sg-content .card-footer {
        padding: .65rem .85rem;
    }

    .sg-sidebar ~ .sg-content form .mb-3 {
        margin-bottom: .7rem !important;
    }

    .sg-sidebar ~ .sg-content .form-control,
    .sg-sidebar ~ .sg-content .form-select,
    .sg-sidebar ~ .sg-content .input-group-text,
    .sg-sidebar ~ .sg-content .select2-container--bootstrap-5 .select2-selection {
        min-height: 36px;
        padding-top: .35rem;
        padding-bottom: .35rem;
        font-size: .875rem;
    }

    .sg-sidebar ~ .sg-content textarea.form-control {
        line-height: 1.35;
    }

    .sg-sidebar ~ .sg-content .form-label,
    .sg-sidebar ~ .sg-content label,
    .sg-sidebar ~ .sg-content .form-text {
        font-size: .82rem;
    }

    .sg-sidebar ~ .sg-content .btn {
        padding: .38rem .68rem;
        font-size: .82rem;
    }

    .sg-sidebar ~ .sg-content .btn-sm {
        padding: .28rem .55rem;
        font-size: .75rem;
    }

    .sg-sidebar ~ .sg-content .nav-tabs .nav-link,
    .sg-sidebar ~ .sg-content .nav-pills .nav-link {
        padding: .5rem .65rem;
        font-size: .82rem;
    }

    .sg-sidebar ~ .sg-content .table > :not(caption) > * > * {
        padding: .52rem .62rem;
    }

    .sg-sidebar ~ .sg-content .table thead th {
        font-size: 9px;
    }

    .sg-sidebar ~ .sg-content .alert,
    .sg-sidebar ~ .sg-content .list-group-item {
        padding: .65rem .8rem;
    }
}

@media (max-width: 1180px) {
    .sg-quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .sg-sidebar {
        width: min(300px, 86vw);
        transform: translateX(-105%);
        transition: transform .2s ease;
    }

    body.sg-menu-open .sg-sidebar {
        transform: none;
    }

    .sg-topbar {
        left: 0;
        min-height: 76px;
        padding: 14px 16px 14px 72px;
    }

    .sg-sidebar ~ .sg-content {
        margin-left: 0;
        padding-top: 76px;
    }

    .sg-mobile-toggle {
        position: fixed;
        top: 18px;
        left: 15px;
        z-index: 1060;
        display: inline-flex;
        min-height: 39px;
        align-items: center;
        gap: 7px;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: #111526;
        box-shadow: 0 10px 28px rgba(18, 21, 39, .22);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
    }

    .sg-mobile-toggle span {
        display: none;
    }

    .sg-sidebar-shade {
        position: fixed;
        inset: 0;
        z-index: 1035;
        border: 0;
        background: rgba(22, 24, 43, .34);
        opacity: 0;
        pointer-events: none;
        backdrop-filter: blur(2px);
        transition: opacity .2s ease;
    }

    body.sg-menu-open .sg-sidebar-shade {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .sg-page-options {
        padding: 18px 14px 0;
    }

    .sg-dashboard {
        padding: 2px 15px 34px;
    }

    .sg-dashboard-grid,
    .sg-dashboard-detail {
        grid-template-columns: 1fr;
    }

    .sg-dashboard-hero {
        min-height: 150px;
        padding: 24px;
    }

    .sg-dashboard-detail > .card:only-child {
        grid-column: auto;
    }

    .sg-login-shell {
        grid-template-columns: 1fr;
    }

    .sg-login-brand-panel {
        min-height: 0;
        padding: 34px;
    }

    .sg-login-logo {
        width: 265px;
        margin: 35px 0 22px;
    }

    .sg-login-brand-panel h1 {
        font-size: 38px;
    }

    .sg-login-features {
        display: none;
    }

    .sg-login-form-panel {
        padding: 38px;
    }
}

@media (max-width: 640px) {
    .sg-topbar {
        padding-right: 10px;
    }

    .sg-page-heading > span,
    .sg-user-chip > span:nth-child(2),
    .sg-system-action {
        display: none;
    }

    .sg-page-heading h1 {
        max-width: 42vw;
        font-size: 18px;
    }

    .sg-top-actions {
        gap: 5px;
    }

    .sg-icon-action {
        width: 35px;
        height: 35px;
    }

    .sg-user-chip {
        min-height: 37px;
        padding-right: 5px;
    }

    .sg-user-avatar {
        width: 28px;
        height: 28px;
    }

    .sg-dashboard-hero {
        align-items: flex-start;
        padding: 22px;
    }

    .sg-hero-mark {
        display: none;
    }

    .sg-dashboard-hero h2 {
        font-size: 29px;
    }

    .sg-quick-grid {
        grid-template-columns: 1fr;
    }

    .sg-dashboard-alert > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .sg-login-page {
        padding: 12px;
    }

    .sg-login-shell {
        border-radius: 22px;
    }

    .sg-login-brand-panel,
    .sg-login-form-panel {
        padding: 27px 24px;
    }

    .sg-login-logo {
        width: 230px;
        margin: 28px 0 18px;
    }

    .sg-login-brand-panel h1 {
        font-size: 32px;
    }

    .sg-login-options {
        align-items: flex-start;
        flex-direction: column;
    }

    .sg-login-tenant {
        margin-bottom: 24px;
    }

    .sg-system-facts {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sg-selectseven-promo {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
        padding: 22px;
    }

    .sg-selectseven-mark {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        border-radius: 16px;
    }

    .sg-selectseven-mark img {
        width: 32px;
        height: 32px;
    }

    .sg-selectseven-cta {
        width: 100%;
    }
}

@media print {
    .sg-sidebar,
    .sg-topbar,
    .sg-mobile-toggle,
    .sg-sidebar-shade,
    .sg-page-options {
        display: none !important;
    }

    .sg-sidebar ~ .sg-content,
    .sg-content {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .sevengest-app .card {
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}