/* =====================================================
   ACG Planner - Layout Principal
===================================================== */

body{
    margin:0;
    background:#f5f7fb;
    font-family:'Inter',sans-serif;
}

.app{
    display:flex;
    min-height:100vh;
}

/* =======================
   SIDEBAR
======================= */

.sidebar{

    width:270px;

    background:#1F2937;

    color:white;

    display:flex;

    flex-direction:column;

    padding:28px 22px;

    position:fixed;

    top:0;

    left:0;

    bottom:0;

}

/* =======================
   CONTENIDO
======================= */

.content{

    margin-left:270px;

    width:calc(100% - 270px);

    padding:35px;

}

/* =======================
   TOPBAR
======================= */

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.topbar h1{

    margin:0;

    font-size:34px;

    color:#1F2937;

}

.topbar p{

    margin-top:6px;

    color:#6B7280;

}

/* =======================
   ACCIONES
======================= */

.top-actions{

    display:flex;

    align-items:center;

    gap:15px;

}

.search{

    width:260px;

    padding:12px 16px;

    border:none;

    border-radius:12px;

    outline:none;

    background:white;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.notification{

    width:45px;

    height:45px;

    border:none;

    border-radius:12px;

    background:white;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    font-size:18px;

}

.user{

    background:white;

    padding:12px 18px;

    border-radius:12px;

    font-weight:600;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

/* =======================
   RESPONSIVE
======================= */

@media(max-width:900px){

    .sidebar{

        width:90px;

    }

    .content{

        margin-left:90px;

        width:calc(100% - 90px);

        padding:20px;

    }

    .logo span{

        display:none;

    }

    .logo h2{

        display:none;

    }

    .search{

        display:none;

    }

}