/* =========================================================
   LAYOUT PRINCIPAL FSM
   Estructura: Sidebar + Main (Header + Content + Footer)
   Responsiu: Desktop → Tablet → Mòbil
   ========================================================= */

/* =========================================================
   APP
   ========================================================= */

.fsm-app {
    display: flex;

    min-height: 100vh;
}

/* =========================================================
   SIDEBAR (Navegació principal)
   ========================================================= */


.fsm-sidebar {
    position: fixed;
    top: 0;
    left: 0;

    width: var(--fsm-sidebar-width);
    height: 100vh;

    background: linear-gradient(
        180deg,
        var(--fsm-primary-dark),
        var(--fsm-primary)
    );

    color: white;
    overflow-y: auto;
    z-index: 1000;

    transition: transform 0.25s ease;
}

.fsm-sidebar-logo {
    padding: var(--fsm-space-xl);
    border-bottom: 1px solid rgba(255,255,255,.1);

    display: flex;
    align-items: center;
    gap: var(--fsm-space-md);
}

.fsm-sidebar-logo img {
    width: 48px;
    height: 48px;
}

.fsm-nav {
    padding: var(--fsm-space-md);
}

.fsm-nav ul {
    list-style: none;
}

.fsm-nav li {
    margin-bottom: 6px;
}

.fsm-nav .fsm-nav-subtitol {
    padding: var(--fsm-space-md) 16px 6px;

    color: var(--fsm-white-alpha-55);

    margin-bottom: 6px;
}

.fsm-nav a {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 16px;

    border-radius: var(--fsm-radius-md);

    color: rgba(255,255,255,.9);
    text-decoration: none;

    transition: var(--fsm-transition);
}

.fsm-nav a:hover {
    background: rgba(255,255,255,.08);
}

.fsm-nav a.active {
    background: var(--fsm-accent);
    color: white;
}

/* =========================================================
   SIDEBAR: TOGGLE I BACKDROP (mòbil)
   ========================================================= */

.fsm-sidebar-toggle {
    display: none;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border: 1px solid var(--fsm-border);

    border-radius: var(--fsm-radius-md);

    background: var(--fsm-card);

    color: var(--fsm-primary);

    font-size: var(--fsm-text-lg);

    cursor: pointer;
}

.fsm-backdrop {
    display: none;

    position: fixed;

    inset: 0;

    background: rgba(var(--fsm-primary-rgb), 0.55);

    z-index: 900;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.25s ease;
}
/* =========================================================
   MAIN
========================================================= */

.fsm-main {
    flex: 1;
    margin-left: var(--fsm-sidebar-width);

    display: flex;
    flex-direction: column;

    min-height: 100vh;
}

/* =========================================================
   HEADER
========================================================= */

.fsm-header {
    height: var(--fsm-header-height);

    background: white;

    border-bottom: 1px solid var(--fsm-border);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 var(--fsm-space-xl);

    position: sticky;
    top: 0;

    z-index: 500;
}

.fsm-header-left,
.fsm-header-right {
    display: flex;
    align-items: center;
    gap: var(--fsm-space-md);
}

/* =========================================================
   CONTENT
========================================================= */

.fsm-content {
    flex: 1;
    padding: var(--fsm-space-xl);
}

.fsm-container {
    max-width: 1600px;
    margin: 0 auto;
}

.fsm-section {
    margin-bottom: var(--fsm-space-xl);
}
/* =========================================================
   GRID
========================================================= */

.fsm-grid {
    display: grid;
    gap: var(--fsm-space-lg);
}

.fsm-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.fsm-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.fsm-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* =========================================================
   FOOTER
========================================================= */

.fsm-footer {
    border-top: 1px solid var(--fsm-border);

    background: white;

    padding: var(--fsm-space-lg);

    text-align: center;

    color: var(--fsm-text-secondary);
}
/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .fsm-sidebar {
        width: 80px;
    }

    .fsm-main {
        margin-left: 80px;
    }

    .fsm-sidebar-logo h1 {
        display: none;
    }

    .fsm-nav a span {
        display: none;
    }

    .fsm-grid-4,
    .fsm-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   MÒBIL
========================================================= */

@media (max-width: 767px) {

    .fsm-sidebar {
        transform: translateX(-100%);
    }

    .fsm-sidebar.open {
        transform: translateX(0);
    }

    .fsm-sidebar-toggle {
        display: inline-flex;
    }

    .fsm-backdrop {
        display: block;
    }

    .fsm-backdrop.open {
        opacity: 1;

        pointer-events: auto;
    }

    .fsm-main {
        margin-left: 0;
    }

    .fsm-content {
        padding: var(--fsm-space-md);
    }

    .fsm-header {
        padding: 0 var(--fsm-space-md);
    }

    .fsm-grid-2,
    .fsm-grid-3,
    .fsm-grid-4 {
        grid-template-columns: 1fr;
    }

    .fsm-info-grid {
        grid-template-columns: 1fr;
    }
}