/* ============================================================================
   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) */
/* Redesenho 03/09/2026 (insight do usuário — mesma textura sutil aplicada
   no Mundo da Criança, agora na cor de identidade do Responsável —
   --cor-responsavel, laranja — pra dar consistência visual entre as duas
   experiências mobile do app sem misturar as cores de cada papel). Só o
   fundo muda aqui: barra do topo e navegação por abas continuam iguais. */
.shell-mobile {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: var(--cor-fundo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23E8875E' fill-opacity='0.10'%3E%3Cpath d='M14 4l2.2 5.2L21 11l-4.8 1.8L14 18l-2.2-5.2L7 11l4.8-1.8z'/%3E%3Ccircle cx='52' cy='20' r='2.4'/%3E%3Ccircle cx='60' cy='52' r='1.8'/%3E%3Cpath d='M40 46l1.6 3.8L46 51l-3.4 1.3L41 56l-1.6-3.7L36 51l3.4-1.2z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 72px 72px;
    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) */
/* Redesenho 03/09/2026 (insight do usuário — opção "A" de um mockup com 4
   alternativas de textura): estrelinhas e bolinhas bem sutis (10% de opacidade,
   tom roxo do mascote/--cor-crianca) por cima do degradê de sempre — dá um ar
   lúdico/educacional sem competir com os cards, que continuam sólidos por cima. */
.shell-crianca {
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%238B5FBF' fill-opacity='0.10'%3E%3Cpath d='M14 4l2.2 5.2L21 11l-4.8 1.8L14 18l-2.2-5.2L7 11l4.8-1.8z'/%3E%3Ccircle cx='52' cy='20' r='2.4'/%3E%3Ccircle cx='60' cy='52' r='1.8'/%3E%3Cpath d='M40 46l1.6 3.8L46 51l-3.4 1.3L41 56l-1.6-3.7L36 51l3.4-1.2z'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #F3EEFF 0%, #FAF7F2 40%);
    background-repeat: repeat, no-repeat;
    background-size: 72px 72px, auto;
    position: relative;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    --fonte-display: var(--fonte-crianca);   /* White Label: fonte dos títulos escolhida pela clínica */
}
/* White Label completo (25/09/2026): camada de cenário por trás do conteúdo
   (js/cenarios_animados.js). "estrelas" = o fundo de sempre, acima. */
.shell-crianca-conteudo { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; color: var(--cor-tinta); }
.shell-crianca:not([data-fundo="estrelas"]) { background-image: none; }
.shell-crianca[data-tom="escuro"] .shell-crianca-conteudo { --cor-tinta: #FFFFFF; --cor-tinta-suave: #FFFFFFDD; }
.shell-crianca[data-tom="escuro"] .shell-crianca-conteudo :is(h1, h2, h3, .fonte-display, .medalha-nome) { text-shadow: 0 2px 0 #0004; }
.shell-crianca[data-tom="escuro"] :is(.missao-crianca-card, .cartao-flat, .cartao, .badge, .btn-crianca-voltar, .modal-caixa) {
    --cor-tinta: #2B2640; --cor-tinta-suave: #6A6280; color: var(--cor-tinta); text-shadow: none;
}
.shell-crianca[data-tom="escuro"] :is(.missao-crianca-card, .cartao-flat, .cartao) :is(h1, h2, h3, .fonte-display) { text-shadow: none; }
.modal-caixa.fonte-crianca { --fonte-display: var(--fonte-crianca); }

/* ---------------------------------------------------------------- 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)); }
}
/* Nos fundos animados o degradê claro da barra do topo apagava o título. */
.shell-crianca:not([data-fundo="estrelas"]) .crianca-topo-barra { background: transparent; }

/* ---------------------------------------------------------------- Fundo da clínica (White Label, 26/09/2026)
   Camada fixa atrás do #app (js/cenarios_animados.js::atualizarFundoClinica).
   Só aparece nas telas da equipe e das famílias, com as cores vivas (pedido do
   usuário). As linhas das listas viram cartões brancos e o título da página
   troca de cor conforme o fundo (body[data-tom-fundo] = claro/escuro). */
#fundo-clinica { display: none; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
body:has(#app > .shell, #app > .shell-mobile) #fundo-clinica { display: block; }
#app { position: relative; z-index: 1; }
body:has(#fundo-clinica) .shell-mobile { background-color: transparent; background-image: none; }
body:has(#fundo-clinica) .pessoa-linha { background: #fff; border-color: var(--cor-borda); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
body[data-tom-fundo="escuro"]:has(#fundo-clinica) .shell-topo h1 { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
body[data-tom-fundo="claro"]:has(#fundo-clinica) .shell-topo h1 { color: var(--cor-tinta); text-shadow: 0 1px 8px rgba(255, 255, 255, 0.7); }
/* Estado vazio solto na página vira cartão quando há fundo da clínica
   (texto cinza direto sobre um fundo escuro ficava ilegível — 26/09/2026). */
body:has(#fundo-clinica) .shell-conteudo .estado-vazio:not(.cartao) { background: #fff; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }