/*
  ClubIQ Segreteria - Layout
  V1.2
  Desktop professionale + PWA/mobile safe
*/

.app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:240px minmax(0, 1fr);
    background:var(--bg);
}

.sidebar{
    position:sticky;
    top:0;
    height:100vh;
    background:#020617;
    color:#fff;
    padding:26px 22px;
    display:flex;
    flex-direction:column;
    gap:28px;
    border-right:1px solid rgba(255,255,255,.08);
}

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

.logo-dot{
    width:42px;
    height:42px;
    border-radius:14px;
    display:inline-block;
    background:linear-gradient(135deg, #2563eb, #22c55e);
    box-shadow:0 14px 30px rgba(37,99,235,.25);
}

.brand strong{
    display:block;
    font-size:20px;
    line-height:1.1;
    letter-spacing:-.03em;
}

.brand small{
    display:block;
    margin-top:4px;
    color:#cbd5e1;
    font-size:13px;
}

.side-nav{
    display:grid;
    gap:8px;
}

.side-nav a{
    color:#cbd5e1;
    padding:13px 14px;
    border-radius:14px;
    font-weight:900;
    transition:.18s ease;
}

.side-nav a:hover,
.side-nav a.active{
    color:#fff;
    background:rgba(255,255,255,.10);
}

.main-content{
    width:100%;
    max-width:1480px;
    padding:34px 48px 56px;
    margin:0 auto;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.topbar h1{
    margin:6px 0 0;
    font-size:38px;
    line-height:1.05;
    letter-spacing:-.055em;
}

.eyebrow{
    margin:0;
    color:var(--primary);
    font-size:12px;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:.18em;
}

.panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:26px;
    padding:26px;
    box-shadow:var(--shadow);
    margin-top:24px;
}

.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:18px;
}

.section-heading h2{
    margin:6px 0 0;
    font-size:26px;
    line-height:1.1;
    letter-spacing:-.04em;
}

.message{
    padding:14px 16px;
    border-radius:16px;
    margin:18px 0;
    font-weight:800;
    border:1px solid transparent;
}

.message.success{
    color:#166534;
    background:#f0fdf4;
    border-color:#bbf7d0;
}

.message.error{
    color:#991b1b;
    background:#fef2f2;
    border-color:#fecaca;
}

.message.info{
    color:#1d4ed8;
    background:#eff6ff;
    border-color:#bfdbfe;
}

.hidden{
    display:none !important;
}

.mobile-bottom-nav{
    display:none;
}

/* Desktop largo */
@media (min-width: 1440px){
    .app-shell{
        grid-template-columns:260px minmax(0, 1fr);
    }

    .main-content{
        max-width:1540px;
        padding-left:54px;
        padding-right:54px;
    }
}