/* ============================================================================
   LAYOUT — Shells por perfil
   ============================================================================ */

#app { min-height: 100vh; }

/* ---------------------------------------------------------------- Tela cheia (login) */
.tela-cheia {
    min-height: 100vh;
    display: flex;
}
@media (max-width: 780px) {
    .tela-cheia { flex-direction: column; }
    .tela-cheia > div:first-child {
        flex: none !important;
        min-height: 200px;
        padding: 24px !important;
        gap: 10px !important;
    }
    .tela-cheia > div:last-child {
        flex: none !important;
        padding: 28px 20px !important;
    }
    .login-mascote-decorativo { display: none; }
    .login-mascote-principal svg { width: 90px !important; height: 90px !important; }
    .login-titulo { font-size: 24px !important; }
    .login-subtitulo { font-size: 13px !important; }
}

/* ---------------------------------------------------------------- Shell Gestor / Profissional / Admin (sidebar) */
.shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100vh;
}

.shell-sidebar {
    background: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda);
    padding: var(--esp-5) var(--esp-4);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: transform .25s ease;
    z-index: 40;
}
/* overflow-y:auto acima: em telas mais baixas (ou com muitos itens de menu
   liberados pelos módulos do plano), o sidebar rola internamente em vez de
   cortar itens de menu (ex: Configurações) fora da área visível. */

.shell-topo-mobile {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: var(--esp-4) var(--esp-4);
    position: sticky; top: 0; z-index: 30;
    background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
}
.shell-topo-mobile .shell-marca { padding: 0; }
.btn-hamburguer {
    width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--cor-borda);
    background: var(--cor-superficie); font-size: 18px; flex-shrink: 0;
}
.shell-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(43,38,64,.35); z-index: 35;
}
.shell-overlay.aberto { display: block; }

.shell-marca {
    display: flex; align-items: center; gap: 10px;
    padding: 0 var(--esp-2) var(--esp-5);
    font-family: var(--fonte-display);
    font-weight: 600; font-size: 17px;
}
.shell-marca .emoji { font-size: 24px; }

.shell-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.shell-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: var(--raio-md);
    color: var(--cor-tinta-suave); font-weight: 600; font-size: 14.5px;
    transition: background .15s ease, color .15s ease;
}
.shell-nav-item .icone { font-size: 18px; width: 22px; text-align: center; }
.shell-nav-item:hover { background: var(--cor-fundo-alt); color: var(--cor-tinta); }
.shell-nav-item.ativo { background: var(--cor-marca-clara); color: var(--cor-marca-escura); }

.shell-rodape {
    border-top: 1px solid var(--cor-borda);
    padding-top: var(--esp-4);
    display: flex; align-items: center; gap: 10px;
}
.shell-rodape .avatar-usuario {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--cor-marca-clara); display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.shell-rodape-info { flex: 1; min-width: 0; }
.shell-rodape-nome { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-rodape-papel { font-size: 12px; color: var(--cor-tinta-suave); }

.shell-conteudo { padding: var(--esp-6) var(--esp-7); max-width: 1200px; min-width: 0; }

.shell-topo {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--esp-6);
}
.shell-topo h1 { font-size: 26px; }

/* ---------------------------------------------------------------- Shell Responsável (app-like, topo + navegação inferior) */
.shell-mobile {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--cor-fundo);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 60px rgba(43,38,64,.06);
}
.shell-mobile-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--esp-5) var(--esp-5) var(--esp-3);
    position: sticky; top: 0; background: var(--cor-fundo); z-index: 5;
}
.shell-mobile-conteudo {
    flex: 1; padding: 0 var(--esp-5) 100px;
}
.shell-mobile-nav {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 480px;
    background: var(--cor-superficie);
    border-top: 1px solid var(--cor-borda);
    display: flex; justify-content: space-around;
    padding: var(--esp-2) var(--esp-2) calc(var(--esp-2) + env(safe-area-inset-bottom, 0px));
    z-index: 10;
}
.shell-mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 12px; border-radius: var(--raio-md);
    color: var(--cor-tinta-suave); font-size: 11px; font-weight: 700;
}
.shell-mobile-nav-item .icone { font-size: 21px; }
.shell-mobile-nav-item.ativo { color: var(--cor-responsavel); }

/* Com 6 itens no menu (Início/Chat/Agenda/Mural/Financeiro/Perfil), o padding
   padrão estoura em telas bem pequenas — reduz o respiro horizontal nelas. */
@media (max-width: 360px) {
    .shell-mobile-nav-item { padding: 6px 4px; font-size: 9.5px; }
    .shell-mobile-nav-item .icone { font-size: 18px; }
}

/* ---------------------------------------------------------------- Shell Criança (tela cheia lúdica) */
.shell-crianca {
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(180deg, #F3EEFF 0%, #FAF7F2 40%);
    position: relative;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- Notificações (sino) */
.btn-sino {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    background: var(--cor-superficie); border: 1.5px solid var(--cor-borda); font-size: 17px;
}
.sino-contador {
    position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: var(--cor-alerta); color: #fff; font-size: 10.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; border: 2px solid var(--cor-fundo);
}
.painel-notificacoes {
    position: absolute; top: 54px; right: 0; width: 320px; max-height: 420px; overflow-y: auto;
    background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg); z-index: 60; padding: var(--esp-3);
}
.notificacao-item { padding: 10px 12px; border-radius: var(--raio-md); }
.notificacao-item.nao-lida { background: var(--cor-marca-clara); }
.notificacao-item + .notificacao-item { margin-top: 4px; }
.wrap-notificacoes { position: relative; }

/* ---------------------------------------------------------------- Responsivo */
@media (max-width: 900px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .shell-topo-mobile { display: flex; }
    .shell-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; width: 82vw; max-width: 300px;
        transform: translateX(-105%); box-shadow: var(--sombra-lg);
    }
    .shell-sidebar.aberto { transform: translateX(0); }
    .shell-conteudo { padding: var(--esp-4); }
    .shell-topo { flex-direction: column; align-items: flex-start; gap: var(--esp-3); }
    .shell-topo h1 { font-size: 21px; }
    .modal-caixa { padding: var(--esp-5); max-height: 92vh; }
    .painel-notificacoes { width: min(320px, 88vw); right: -8px; }
    #btn-sino-desktop { display: none; }
    .kpi-grade { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}