/* =========================================================
   ARTESÃ · O PAINEL DA CÁTIA (a casca do admin, vinda do protótipo aprovado)
   Computador: menu lateral fixo. Celular: barra de atalhos embaixo + "Menu".
   Também: a barra de baixo do app da aluna e as peças dos relatórios (indicadores, barras, dores resolvidas).
   ========================================================= */
.painel { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; background: var(--fundo-app, var(--fundo)); }
@media (min-width: 980px) { .painel { grid-template-columns: 268px minmax(0, 1fr); } }
.painel-corpo { min-width: 0; }
.painel .app { max-width: 1200px; box-shadow: none; padding-bottom: 32px; }
@media (max-width: 979px) { .painel .app { padding-bottom: 110px; } }

/* menu lateral */
.lateral { display: none; position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; overflow-y: auto; flex-direction: column; gap: 2px; padding: 18px 12px 24px; background: var(--superficie); border-right: 1px solid var(--linha); }
@media (min-width: 980px) { .lateral { display: flex; } }
.marca-painel { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.marca-painel .selo { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--destaque); color: var(--sobre-destaque); flex: none; }
.marca-painel .selo svg { width: 22px; height: 22px; }
.marca-painel img.selo { display: block; background: none; border-radius: 22%; }   /* o próprio ícone do app */
.marca-painel b { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 20px; line-height: 1; }
.marca-painel small { display: block; font-size: 12px; color: var(--texto2); font-weight: 700; }
.nav-grupo { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto2); padding: 14px 10px 4px; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 12px; font-weight: 700; font-size: 14.5px; color: var(--texto); width: 100%; text-align: left; }
.nav-link svg { width: 20px; height: 20px; color: var(--texto2); flex: none; }
.nav-link:hover { background: var(--superficie-2); }
.nav-link.ativo { background: var(--destaque-suave); color: var(--destaque-texto); }
.nav-link.ativo svg { color: var(--destaque-texto); }
.nav-link.nav-atelie { font-weight: 800; color: var(--sucesso); }
.nav-sair { margin-top: 12px; }

/* barra de atalhos do painel: só no celular e tablet */
.barra-painel { width: 100%; }
@media (min-width: 980px) { .barra-painel { display: none; } }
.navbar.barra-painel, .navbar.barra-aluna { left: 0; right: 0; transform: none; margin: 0 auto; }
.navbar.barra-painel { width: 100%; max-width: 100%; }
.app.com-barra { padding-bottom: 104px; }

/* menu do painel no celular */
.menu-painel { padding: 4px 12px; }
.menu-painel .item { color: inherit; }

/* grades que se adaptam */
.grade-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.grade-auto.largo { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grade-auto input[type="date"], .grade-auto input[type="time"] { min-width: 0; width: 100%; }
.grade-lado { display: grid; gap: 14px; }
@media (min-width: 980px) { .grade-lado { grid-template-columns: 1.45fr 1fr; align-items: start; } }
.grade-auto > *, .grade-lado > * { min-width: 0; }

/* indicadores */
.kpi { display: grid; gap: 4px; align-content: start; }
.kpi small { font-size: 13px; font-weight: 800; color: var(--texto2); }
.kpi b { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi .delta { justify-self: start; white-space: normal; }
@media (max-width: 640px) {
  .grade-auto:not(.largo) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px; }
  .kpi b { font-size: 22px; }
  .kpi small { font-size: 12px; }
}

/* tabela que rola de lado no celular */
.tabela-rola { overflow-x: auto; position: relative; }   /* o texto escondido "Abrir" fica DENTRO da caixa (antes, alargava a página no celular) */
.tabela-rola table.tabela { min-width: 560px; }
.dica-rolar { display: none; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--texto2); }
@media (max-width: 640px) { .dica-rolar { display: block; } }

/* barras horizontais (ranking de ferramentas) */
.ranking { display: grid; gap: 10px; }
.ranking .linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: 14px; font-weight: 700; }
@media (max-width: 520px) { .ranking .linha { grid-template-columns: 110px minmax(0, 1fr) 46px; font-size: 13px; } }
.ranking .linha .barra { height: 12px; }
.ranking .linha span:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.barra.menta i { background: var(--sucesso); }
.barra.lavanda i { background: var(--lavanda); }
.barra.azul i { background: var(--info); }
.barra.pessego i { background: var(--alerta); }
.barra.amarelo i { background: var(--amarelo); }

/* gráfico de colunas com muitos dias */
.grafico.denso { gap: 4px; }
@media (max-width: 640px) { .grafico.denso em { display: none; } }

/* dor resolvida (Impacto) */
.dor { display: grid; gap: 6px; align-content: start; }
.dor .antes { font-size: 13.5px; font-weight: 700; color: var(--texto2); text-decoration: line-through; text-decoration-color: var(--perigo); }
.dor .depois { font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.dor .prova { font-size: 13px; color: var(--texto2); }

/* linha com interruptor (automações, recursos dos planos) */
.linha-liga { display: flex; align-items: flex-start; gap: 12px; }
.linha-liga .meio { flex: 1; min-width: 0; display: grid; gap: 4px; }
.linha-liga .meio b { font-size: 15.5px; }

/* matriz de níveis de acesso */
.niveis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.nivel { display: grid; gap: 8px; align-content: start; }
.nivel .emoji { font-size: 30px; line-height: 1; }
.nivel h3 { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 18px; }
.nivel ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; }
.nivel .nao-ve { color: var(--texto2); }

/* celular de pré-visualização (notificação) */
.celular-mini { width: 250px; max-width: 100%; margin: 0 auto; border-radius: 34px; padding: 10px; background: #161216; }
.celular-mini .tela-mini { border-radius: 26px; min-height: 260px; padding: 40px 10px 10px; background: linear-gradient(160deg, #F7A8C6, #CDB8FF 55%, #A9E4CF); }
.celular-mini .push { background: rgba(255,255,255,.9); border-radius: 16px; padding: 10px 12px; color: #2B1B26; font-size: 13px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.celular-mini .push b { display: block; font-size: 13.5px; }

/* "recurso de outro plano" e o menu "Mais" da aluna */
.plano-bloqueado { text-align: center; display: grid; gap: 10px; justify-items: center; }
.plano-bloqueado .icone-redondo { width: 56px; height: 56px; }
.mais-grupo .item { color: inherit; }
.mais-grupo .item.trancado { opacity: .62; }
.cadeado-plano { font-size: 12px; font-weight: 800; color: var(--lavanda); white-space: nowrap; }

/* o número grande dos cartões do Impacto */
.kpi-grande { font-family: var(--f-titulo); font-weight: var(--peso-titulo); font-size: 38px; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 640px) { .kpi-grande { font-size: 30px; } }
.dor .depois.mudo { color: var(--texto2); font-weight: 700; }