:root {
    --brand: #7FD6FF; /* azul claro */
    --brand-strong: #5CCBFF;
    --sidebar-width: 260px;
    --sidebar-collapsed: 74px;
    --topbar-height: 56px;
    --text-on-brand: #0f1f2a; /* negro azulado */
    --text-muted: rgba(15,31,42,.60);
    --hover-bg: rgba(255,255,255,.35);
    --active-bg: rgba(255,255,255,.55);
    --content-bg: #ffffff;
    --border: rgba(0,0,0,.08);
}

/* base */
html, body {
    height: 100%;
}

    body.app-shell {
        margin: 0;
        overflow: hidden;
        background: var(--content-bg);
    }

/* ====== NUEVO FRAME 2 COLUMNAS ====== */
.app-frame {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* sidebar full height */
.app-sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--brand);
    color: var(--text-on-brand);
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,.35);
}

/* main right */
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* topbar only on right */
.app-topbar {
    flex: 0 0 auto;
    height: var(--topbar-height);
    background: #f4f6f8; /* gris muy suave */
    border-bottom: 1px solid var(--border);
}

.app-topbar-inner {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
    .app-topbar-inner span {
        color: #2c3e50;
    }

/* content scroll only here */
.app-content {
    flex: 1 1 auto;
    overflow-y: auto;
    background: var(--content-bg);
}

/* ====== BRAND (logo+nombre) ====== */
.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.app-brand-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.app-name {
    font-weight: 700;
    color: var(--text-on-brand);
    white-space: nowrap;
}

/* separator in sidebar */
.app-sep {
    height: 1px;
    background: rgba(255,255,255,.55);
    margin: 6px 14px 8px 14px;
}

/* group title */
.app-nav-title {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(15,31,42,.55);
    padding: 10px 14px 6px 14px;
}

/* links */
.app-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 2px 10px;
    border-radius: 10px;
    color: var(--text-on-brand);
    text-decoration: none;
    position: relative;
    transition: background .12s ease;
}

    .app-nav-link:hover {
        background: var(--hover-bg);
        color: #000;
    }

    .app-nav-link.active {
        background: var(--active-bg);
        font-weight: 600;
        color: #000;
    }

        .app-nav-link.active::before {
            content: "";
            position: absolute;
            left: -10px;
            top: 8px;
            bottom: 8px;
            width: 4px;
            border-radius: 6px;
            background: rgba(0,0,0,.55);
        }

/* icons */
.app-nav-icon {
    font-size: 1.15rem;
    width: 22px;
    text-align: center;
    color: var(--text-on-brand);
}

.app-nav-text {
    white-space: nowrap;
}

/* collapsed */
body.sidebar-collapsed .app-sidebar {
    width: var(--sidebar-collapsed);
}

body.sidebar-collapsed .app-name,
body.sidebar-collapsed .app-nav-title,
body.sidebar-collapsed .app-nav-text {
    display: none;
}

body.sidebar-collapsed .app-brand {
    justify-content: center;
}

body.sidebar-collapsed .app-nav-link {
    justify-content: center;
    margin: 2px 8px;
}

    body.sidebar-collapsed .app-nav-link.active::before {
        left: -8px;
    }
/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
    /* ocultamos sidebar fijo en móvil (se usa offcanvas) */
    .app-sidebar {
        display: none !important;
    }
}

/* Offcanvas (móvil) que herede el look del sidebar */
.offcanvas .app-sidebar {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* ===== OFFCANVAS (móvil) - aplicar tema sidebar ===== */
.app-sidebar--offcanvas {
    width: 100%;
    height: 100%;
    background: var(--brand);
    color: var(--text-on-brand);
}

/* El contenedor de Bootstrap por defecto es blanco */
#sidebarOffcanvas .offcanvas-body {
    background: var(--brand);
}

/* Header del offcanvas también con tema */
#sidebarOffcanvas .offcanvas-header {
    background: var(--brand);
    border-bottom: 1px solid rgba(255,255,255,.55);
}

/* Título del offcanvas */
#sidebarOffcanvas .offcanvas-title {
    color: var(--text-on-brand);
    font-weight: 700;
}

/* Botón X (por defecto es oscuro, aquí lo hacemos visible) */
#sidebarOffcanvas .btn-close {
    filter: none; /* si usas fondo claro */
    opacity: .7;
}

#sidebarOffcanvas .app-brand {
    display: none;
}

#sidebarOffcanvas .app-sep {
    display: none;
}

/* ===== AUTH (Login) ===== */
.auth-content {
    min-height: calc(100vh - var(--topbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #ffffff;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 22px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.auth-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.auth-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f1f2a;
}

.auth-subtitle {
    margin: 0;
    color: rgba(15,31,42,.65);
    font-size: .95rem;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .app-brand:hover {
        opacity: 0.85;
    }