/* ═══════════════════════════════════════════════════════════════════════════
MZSQUAD OS · THEME v3 (icefield console)
Camada de tema aplicada POR CIMA de styles.css + student-os.css.
Traz a identidade do CONSOLE v3 para o painel operacional, sem tocar em uma
linha de JS e sem editar os 282 KB do design system antigo.
Kit de origem: 00 · MARCA/identidade-visual/console-v3-ui-kit/
Reverter = remover o para abrir a home: precisa apagar o estilo do user-agent */
appearance: none; border: 0; background: transparent; cursor: pointer;
display: flex; align-items: center;
height: 34px; width: auto; padding: 0 14px; margin: 0;
/* gap:10px do tema antigo separava "MZ" de "SQUAD" — a marca é uma palavra só */
gap: 0;
font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .24em;
color: var(--ink-50);
transition: color 400ms ease;
}
.consultant-page .dock-wrap:hover .dock-brand,
.consultant-page .dock-wrap:focus-within .dock-brand { width: auto; }
.consultant-page .dock-brand:hover { color: var(--ink); }
.consultant-page .dock-brand span { opacity: 1; transform: none; }
/* Tab: só ícone; o rótulo abre no hover DO PRÓPRIO item (não da ilha inteira). */
.consultant-page .dock-item {
position: relative;
width: auto; height: 38px;
padding: 0 11px;
border: 0; border-radius: 999px;
background: transparent;
color: var(--ink-50);
gap: 0;
overflow: hidden;
font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
transition: background 500ms ease, color 500ms ease, transform 300ms var(--ease);
}
.consultant-page .dock-wrap:hover .dock-item,
.consultant-page .dock-wrap:focus-within .dock-item { width: auto; }
.consultant-page .dock-item svg { width: 17px; height: 17px; stroke-width: 1.6; }
.consultant-page .dock-item span:not(.dock-unread-badge) {
max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap;
transition: max-width 650ms var(--ease), opacity 500ms ease, margin-left 650ms var(--ease);
}
.consultant-page .dock-item:hover span:not(.dock-unread-badge),
.consultant-page .dock-wrap:hover .dock-item:hover span:not(.dock-unread-badge) {
max-width: 130px; opacity: 1; margin-left: 9px;
}
.consultant-page .dock-item:hover { background: rgba(237, 244, 246, .05); color: var(--ink); border-color: transparent; }
.consultant-page .dock-item.on {
background: rgba(237, 244, 246, .1);
color: var(--ink);
border-color: transparent;
box-shadow: none;
}
.consultant-page .dock-item:active { transform: scale(.94); }
.consultant-page .dock-item.on::after { display: none; }
/* Contador de pendências: bolinha vermelha antiga → número azul do v3. */
.consultant-page .dock-unread-badge {
position: absolute; top: 2px; right: 4px; left: auto; bottom: auto;
min-width: 0; width: auto; height: auto;
padding: 0; border: 0; border-radius: 0;
background: transparent; box-shadow: none;
font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums;
color: var(--blue);
}
/* Sair: neutro. O v3 não usa vermelho. */
.consultant-page .dock-logout,
.consultant-page .dock-logout.on { margin-top: 0; margin-left: 6px; color: var(--ink-50); border-color: transparent; }
.consultant-page .dock-logout:hover { color: var(--ink); background: rgba(237, 244, 246, .05); border-color: transparent; }
/* ═══ 5 · SHELL ═══════════════════════════════════════════════════════════ */
.consultant-page .command-shell {
padding: var(--shell-top) var(--shell-x) 40px;
transition: none;
}
.consultant-page .dock-wrap:hover + .command-shell,
.consultant-page .dock-wrap:focus-within + .command-shell { padding-left: var(--shell-x); }
.consultant-page .command-shell.cockpit-open { padding-right: var(--shell-x); }
/* A largura é limitada no contêiner, não em cada filho — senão cada seção
se centraliza sozinha e o cabeçalho desalinha do conteúdo. */
/* O shell é coluna flex (bloco 17), e margin:auto num item flex desliga o
stretch — a largura viria do conteúdo. Centralizar é trabalho do contêiner. */
.consultant-page .command-shell { align-items: center; }
.consultant-page .command-top,
.consultant-page #workspace { width: 100%; max-width: min(var(--shell-max), 100%); margin-left: 0; margin-right: 0; }
/* O tema antigo abria cada view com 44–96px de respiro porque a navegação era
lateral e o topo ficava vazio. Com a ilha no topo isso virou um segundo
vão morto logo abaixo da busca — cada view recupera essa altura. */
.consultant-page :is(.finance-layout, .todos-layout, .students-layout, .diets-layout, .proof-layout) {
padding-top: 14px;
}
.consultant-page .command-top { border-bottom: 0; }
.consultant-page .command-top::after {
background: linear-gradient(90deg, transparent, var(--hair) 18%, var(--hair) 82%, transparent);
}
.consultant-page .weekly-layout { padding-top: 20px; }
.consultant-page .command-search {
border: 0; border-radius: 999px;
background: rgba(237, 244, 246, .05);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .1);
font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
transition: width .42s var(--ease), padding .42s var(--ease), box-shadow 400ms ease, color 400ms ease, background 400ms ease;
}
.consultant-page .command-search.search-open {
background: rgba(237, 244, 246, .03);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .45);
}
/* ═══ 6 · SUPERFÍCIES DE VIDRO ════════════════════════════════════════════ */
.consultant-page .glass-panel,
.auth-overlay .glass-panel {
border: 0;
border-radius: var(--r-card);
background: var(--glass-bg);
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: var(--glass-shadow);
animation: csIn 850ms var(--ease) both;
}
.consultant-page .cockpit,
.consultant-page .pm-panel {
border: 0;
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .015) 45%), rgba(10, 15, 20, .88);
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px -20px rgba(0, 0, 0, .7);
}
.consultant-page .cockpit-backdrop,
.consultant-page .pm-overlay {
background: rgba(4, 7, 10, .55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* ═══ 7 · TIPOGRAFIA ══════════════════════════════════════════════════════ */
.consultant-page .panel-title,
.auth-overlay .panel-title {
font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: 0;
}
.consultant-page .queue-title {
font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: 0;
color: var(--ink); text-transform: none;
}
.consultant-page .micro,
.auth-overlay .micro {
font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-38);
}
.consultant-page .word { font-family: var(--display); font-weight: 600; letter-spacing: .14em; }
/* Todo número grande do painel ganha alinhamento tabular. */
.consultant-page b, .consultant-page strong, .consultant-page .kpi-value { font-variant-numeric: tabular-nums; }
/* A wake-line pulsante do tema antigo não existe no v3: vira filete estático. */
.consultant-page .wake-line,
.auth-overlay .wake-line {
animation: none; width: 40px;
background: linear-gradient(90deg, var(--hair), transparent);
}
/* ═══ 8 · BOTÕES ══════════════════════════════════════════════════════════ */
.consultant-page .primary-action,
.consultant-page .ghost-action,
.consultant-page .icon-btn,
.auth-overlay .primary-action {
border: 0; border-radius: 12px; min-height: 38px; padding: 0 18px;
font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
transition: transform 300ms var(--ease), background 400ms ease, color 400ms ease, box-shadow 400ms ease;
}
.consultant-page .ghost-action,
.consultant-page .icon-btn {
background: rgba(237, 244, 246, .06); color: var(--ink-75);
}
.consultant-page .ghost-action:hover,
.consultant-page .icon-btn:hover { background: rgba(237, 244, 246, .1); color: var(--ink); transform: translateY(-1px); }
.consultant-page .primary-action,
.auth-overlay .primary-action {
background: var(--ink); color: var(--void);
box-shadow: 0 2px 10px rgba(237, 244, 246, .12);
}
.consultant-page .primary-action:hover,
.auth-overlay .primary-action:hover { box-shadow: 0 6px 20px rgba(237, 244, 246, .2); transform: translateY(-1px); }
.consultant-page .primary-action:active,
.consultant-page .ghost-action:active,
.consultant-page .icon-btn:active { transform: scale(.96); opacity: 1; }
.consultant-page .compact-action { min-height: 30px; padding: 0 12px; border-radius: 10px; }
/* Destrutivo: azul-gelo com anel, não vermelho. */
.consultant-page .danger-action {
color: var(--bright);
background: rgba(207, 233, 255, .05);
box-shadow: inset 0 0 0 1px rgba(207, 233, 255, .18);
}
.consultant-page .text-action { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--ink-38); }
.consultant-page .text-action:hover { color: var(--ink); }
.consultant-page button:focus-visible,
.consultant-page a:focus-visible,
.consultant-page input:focus-visible {
outline: 1px solid rgba(90, 167, 255, .7); outline-offset: 2px;
}
/* ═══ 9 · CAMPOS ══════════════════════════════════════════════════════════ */
.consultant-page .line-input,
.consultant-page .area-input,
.auth-overlay .line-input {
border-bottom: 0;
box-shadow: 0 1px 0 rgba(237, 244, 246, .1);
font-family: var(--body); font-size: 13px;
transition: box-shadow 500ms ease;
}
.consultant-page .line-input:focus,
.consultant-page .area-input:focus,
.auth-overlay .line-input:focus {
border-bottom-color: transparent;
box-shadow: 0 1px 0 rgba(90, 167, 255, .55);
}
.consultant-page input::placeholder,
.consultant-page textarea::placeholder { color: var(--ink-28); }
.consultant-page input[type="date"] { color-scheme: dark; }
.consultant-page .seg-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-38); }
/* ═══ 10 · PILLS / FILTROS ════════════════════════════════════════════════ */
.consultant-page .queue-stat {
height: 30px; min-height: 30px; padding: 0 16px;
border: 0; border-radius: 999px;
background: rgba(237, 244, 246, .05); color: var(--ink-50);
font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
transition: background 400ms ease, color 400ms ease, transform 300ms var(--ease), box-shadow 400ms ease;
}
.consultant-page .queue-stat:hover { transform: translateY(-1px); color: var(--ink); }
.consultant-page .queue-stat.active {
background: var(--ink); color: var(--void); border-color: transparent;
box-shadow: 0 2px 10px rgba(237, 244, 246, .14);
}
.consultant-page .queue-kpi-row { border-bottom-color: var(--hair-soft); }
/* ═══ 11 · LINHAS DE LISTA ════════════════════════════════════════════════ */
.consultant-page .queue-row {
min-height: 56px;
border-bottom: 1px solid var(--hair-soft);
border-left: 0;
transition: padding-left 450ms var(--ease), background 400ms ease;
}
.consultant-page .queue-row:hover { padding-left: 14px; background: rgba(237, 244, 246, .03); }
.consultant-page .queue-row.queue-row-active {
background: rgba(237, 244, 246, .05);
border-radius: 14px; border-bottom-color: transparent;
padding-left: 12px; padding-right: 12px;
}
/* O status vinha como faixa colorida à esquerda; no v3 é um ponto com glow. */
.consultant-page .queue-row[data-status]::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 7px; height: 7px; border-radius: 999px;
}
.consultant-page .queue-row[data-status="blue"]::before { background: var(--blue); box-shadow: 0 0 6px rgba(90, 167, 255, .6); animation: csPulse 2.2s ease infinite; }
.consultant-page .queue-row[data-status="red"]::before { background: var(--bright); box-shadow: 0 0 6px rgba(207, 233, 255, .55); }
.consultant-page .queue-row[data-status="amber"]::before { background: var(--blue-soft); }
.consultant-page .queue-row[data-status="green"]::before,
.consultant-page .queue-row[data-status="grey"]::before { background: rgba(237, 244, 246, .3); }
.consultant-page .queue-row[data-status] { padding-left: 18px; }
.consultant-page .queue-row[data-status]:hover { padding-left: 26px; }
/* ═══ 12 · LOGIN: nada de painel atrás ════════════════════════════════════
Enquanto a sessão não existe, a ilha, a busca e o conteúdo somem. O login
é a única coisa na tela — nenhuma feature aparece antes de entrar. */
body.consultant-page:has(#consultantLogin:not(.hidden)) .dock-wrap,
body.consultant-page:has(#consultantLogin:not(.hidden)) .mobile-nav,
body.consultant-page:has(#consultantLogin:not(.hidden)) .command-top,
body.consultant-page:has(#consultantLogin:not(.hidden)) #workspace { display: none; }
.consultant-page .auth-overlay { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* ═══ 13 · BUSCA ══════════════════════════════════════════════════════════
Sai a bolinha que expande no hover. Entra um campo cru, sempre aberto,
e só nas views em que buscar faz sentido. */
/* Pequena e centrada logo abaixo da ilha — não é uma barra de ferramentas,
é um campo de busca. */
.consultant-page .command-top { justify-content: center; padding: 0; min-height: 0; }
.consultant-page .command-search,
.consultant-page .command-search.search-open {
/* o tema antigo empurrava o campo para a direita com margin-left:auto */
margin-left: auto; margin-right: auto;
width: min(240px, 46vw); height: 30px; padding: 0 13px; text-align: center;
border: 0; border-radius: 999px;
background: rgba(237, 244, 246, .03);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .1);
color: var(--ink); cursor: text;
font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
transition: box-shadow 400ms ease, background 400ms ease, width 420ms var(--ease);
}
.consultant-page .command-search:focus { width: min(320px, 60vw); }
.consultant-page .command-search::placeholder,
.consultant-page .command-search.search-open::placeholder { color: var(--ink-28); }
.consultant-page .command-search:focus,
.consultant-page .command-search.search-open:focus {
background: rgba(237, 244, 246, .03);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .55);
}
/* Lista de permissão: a busca só existe onde há o que buscar. Em qualquer
outra view (home, financeiro, tarefas) a barra inteira some. */
.consultant-page .command-shell .command-top { display: none; }
.consultant-page .command-shell[data-view="checkins"] .command-top,
.consultant-page .command-shell[data-view="students"] .command-top,
.consultant-page .command-shell[data-view="messages"] .command-top,
.consultant-page .command-shell[data-view="anamnese"] .command-top { display: flex; }
/* ═══ 14 · VITRINE DESATIVADA ═════════════════════════════════════════════
Conceito preservado no código (renderProofView/renderProofStudio seguem
intactos em app.js) — apenas sem porta de entrada na navegação. */
.consultant-page .dock-item[data-view="proof"],
.consultant-page .mobile-nav-item[data-view="proof"] { display: none; }
/* ═══ 15 · SEM SCROLL DE PÁGINA ═══════════════════════════════════════════
A página nunca rola. Cada painel rola por dentro. */
.consultant-page .command-shell { overflow: hidden; display: flex; flex-direction: column; }
/* height:100% no workspace ignorava os 44px da barra de busca e empurrava o
fim de toda view para fora da tela (a lista de renovações vinha cortada).
Como coluna flex, o workspace fica exatamente com o que sobra. */
.consultant-page #workspace { flex: 1; height: auto; min-height: 0; overflow: hidden; }
.consultant-page #workspace > * { min-height: 0; }
/* Listas longas viram áreas roláveis internas. */
.consultant-page #queueList,
.consultant-page .students-layout,
.consultant-page .lifecycle-layout,
.consultant-page .anamnese-list,
.consultant-page .todos-layout { min-height: 0; overflow-y: auto; }
/* Rolagem suave e barra fina em TODA área rolável — a barra grossa do sistema
era metade da sensação de painel travado. */
.consultant-page #queueList,
.consultant-page .home-layout,
.consultant-page .fin-scroll,
.consultant-page .task-col-body,
.consultant-page .anamnese-list,
.consultant-page .students-layout,
.consultant-page .todos-layout,
.consultant-page .cockpit,
.consultant-page .pm-panel {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(237, 244, 246, .16) transparent;
}
.consultant-page ::-webkit-scrollbar { width: 8px; height: 8px; }
.consultant-page ::-webkit-scrollbar-track { background: transparent; }
.consultant-page ::-webkit-scrollbar-thumb {
border: 2px solid transparent; background-clip: padding-box;
border-radius: 999px; background-color: rgba(237, 244, 246, .14);
}
.consultant-page ::-webkit-scrollbar-thumb:hover { background-color: rgba(237, 244, 246, .26); }
/* ═══ 16 · ANIMAÇÕES ══════════════════════════════════════════════════════
Uma entrada só para o painel inteiro. Toda view usa a MESMA curva, a mesma
duração e o mesmo stagger — trocar de aba tem sempre a mesma sensação.
Antes cada superfície tinha a sua (.glass-panel 850ms, .stu-tile 420ms,
.task-card 380ms), e por isso Tarefas parecia outra tela. */
@keyframes csSwap { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
@keyframes csMsg { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }
@keyframes csView { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }
@keyframes csRise { from { opacity: 0; transform: translateY(7px); } }
@keyframes csCell { from { opacity: 0; transform: scale(.3); } }
/* Nenhuma superfície anima sozinha: quem anima é a troca de view. */
.consultant-page #workspace .glass-panel { animation: none; }
.consultant-page #workspace.workspace-enter > *,
.consultant-page #workspace.workspace-enter :is(.fin-grid, .home-stack, .tasks-board, .anamnese-grid) > * {
animation: csView 460ms var(--ease) both;
}
.consultant-page #workspace.workspace-enter > *:nth-child(2),
.consultant-page #workspace.workspace-enter :is(.fin-grid, .home-stack, .tasks-board, .anamnese-grid) > *:nth-child(2) { animation-delay: 60ms; }
.consultant-page #workspace.workspace-enter > *:nth-child(3),
.consultant-page #workspace.workspace-enter :is(.fin-grid, .home-stack, .tasks-board, .anamnese-grid) > *:nth-child(3) { animation-delay: 120ms; }
.consultant-page #workspace.workspace-enter > *:nth-child(4),
.consultant-page #workspace.workspace-enter :is(.fin-grid, .home-stack, .tasks-board, .anamnese-grid) > *:nth-child(4) { animation-delay: 180ms; }
.consultant-page #workspace.workspace-enter > *:nth-child(n+5),
.consultant-page #workspace.workspace-enter :is(.fin-grid, .home-stack, .tasks-board, .anamnese-grid) > *:nth-child(n+5) { animation-delay: 240ms; }
/* Itens de lista: uma subida curta, igual em fila, tarefas, home e renovações. */
.consultant-page #queueList > *,
.consultant-page .task-col-body > *,
.consultant-page .home-list > *,
.consultant-page .fhorizon-row { animation: csRise 320ms var(--ease) both; }
/* Modal de plano e cockpit: entram com a curva do v3 em vez de aparecer secos. */
.consultant-page .pm-overlay:not(.hidden) { animation: csFade 250ms ease both; }
.consultant-page .pm-overlay:not(.hidden) .pm-panel { animation: csIn 420ms var(--ease) both; }
.consultant-page .cockpit-backdrop:not(.hidden) { animation: csFade 250ms ease both; }
.consultant-page .cockpit:not(.hidden) { animation: csIn 460ms var(--ease) both; }
/* Chat: cada bolha entra; trocar de conversa reanima a lista inteira. */
.consultant-page .chat-msg,
.consultant-page .msg-bubble,
.consultant-page .chat-line { animation: csMsg 420ms var(--ease) both; }
/* ═══ 17 · FINANCEIRO — horizonte de renovações 30/60/90 ══════════════════ */
.consultant-page .fhorizon { display: flex; flex-direction: column; gap: 18px; margin: 10px 0 4px; }
.consultant-page .fhorizon-band { display: flex; flex-direction: column; }
.consultant-page .fhorizon-head {
display: flex; align-items: baseline; gap: 12px;
padding-bottom: 8px; border-bottom: 1px solid var(--hair);
}
.consultant-page .fhorizon-total {
margin-left: auto;
font-family: var(--display); font-weight: 600; font-size: 15px;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.consultant-page .fhorizon-count { color: var(--ink-38); }
.consultant-page .fhorizon-row {
display: flex; align-items: center; gap: 14px;
min-height: 40px; padding: 4px 4px;
border-bottom: 1px solid var(--hair-soft); cursor: pointer;
transition: padding-left 450ms var(--ease), background 400ms ease;
}
.consultant-page .fhorizon-row:hover { padding-left: 12px; background: rgba(237, 244, 246, .03); }
.consultant-page .fhorizon-name {
font-family: var(--display); font-weight: 500; font-size: 13px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.consultant-page .fhorizon-plan { flex: 1; min-width: 0; color: var(--ink-38); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consultant-page .fhorizon-days {
font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
font-variant-numeric: tabular-nums; color: var(--blue); flex: 0 0 auto;
}
.consultant-page .fhorizon-amount {
font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
color: var(--ink-75); flex: 0 0 auto; min-width: 76px; text-align: right;
}
.consultant-page .fhorizon-empty { padding: 10px 4px; color: var(--ink-38); }
/* ═══ 18 · TAREFAS ════════════════════════════════════════════════════════ */
.consultant-page .tasks-layout {
display: grid; grid-template-rows: auto auto minmax(0, 1fr);
gap: 16px; height: 100%; min-height: 0; overflow: hidden;
}
.consultant-page .tasks-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.consultant-page .cs-like-input {
height: 34px; padding: 0 12px; border: 0; border-radius: 12px;
background: rgba(237, 244, 246, .03); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .1);
font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
outline: 0; transition: box-shadow 400ms ease;
}
.consultant-page .cs-like-input:focus { box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .55); }
.consultant-page select.cs-like-input option { background: #0c1116; color: var(--ink); }
/* Criar tarefa é um "+": os campos vivem no modal. */
.consultant-page .task-add-btn {
margin-left: auto; flex: 0 0 auto;
width: 34px; height: 34px; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(90, 167, 255, .14); color: var(--blue);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .28);
font-family: var(--display); font-size: 20px; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: background 400ms ease, color 400ms ease, transform 300ms var(--ease);
}
.consultant-page .task-add-btn:hover { background: rgba(90, 167, 255, .24); color: var(--bright); transform: translateY(-1px); }
.consultant-page .task-add-btn:active { transform: scale(.94); }
/* Heatmap: um quadradinho por dia, intensidade = atividade. */
.consultant-page .task-activity { position: relative; display: flex; flex-direction: column; gap: 10px; }
/* Balão do heatmap — substitui o tooltip nativo que o title= disparava em cada
uma das 365 células (a "marca branca" que aparecia no hover). */
.consultant-page .heat-tip {
position: absolute; z-index: 4; transform: translate(-50%, -100%); pointer-events: none;
display: flex; flex-direction: column; gap: 2px; white-space: nowrap;
padding: 7px 11px; border-radius: 11px;
background: linear-gradient(150deg, rgba(237, 244, 246, .07), rgba(237, 244, 246, .02) 45%), rgba(8, 12, 17, .88);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .45);
animation: csFade 160ms ease both;
}
/* display:flex do autor vence o [hidden] do user-agent — mesma armadilha do
balão da curva de caixa. */
.consultant-page .heat-tip[hidden] { display: none; }
.consultant-page .heat-tip-d { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }
.consultant-page .heat-tip b { font-family: var(--display); font-weight: 500; font-size: 12px; color: var(--ink); }
.consultant-page .task-activity-head { display: flex; align-items: baseline; gap: 12px; }
.consultant-page .task-activity-total { margin-left: auto; color: var(--ink-50); }
.consultant-page .task-heat { display: grid; grid-template-columns: repeat(35, minmax(0, 1fr)); gap: 5px; }
.consultant-page .task-heat-cell {
aspect-ratio: 1; border-radius: 4px; min-height: 14px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .05);
transition: transform 300ms var(--ease);
}
.consultant-page .task-heat-cell:hover { transform: translateY(-2px); }
.consultant-page .task-heat-cell[data-level="1"] { background: rgba(90, 167, 255, .22); }
.consultant-page .task-heat-cell[data-level="2"] { background: rgba(90, 167, 255, .42); }
.consultant-page .task-heat-cell[data-level="3"] { background: rgba(90, 167, 255, .66); }
.consultant-page .task-heat-cell[data-level="4"] { background: var(--blue); box-shadow: 0 0 8px rgba(90, 167, 255, .5); }
.consultant-page .tasks-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.consultant-page .tasks-board {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px; min-height: 0; align-items: stretch;
}
.consultant-page .task-col {
display: flex; flex-direction: column; gap: 12px; min-height: 0;
padding: 18px; border-radius: var(--r-card);
background: var(--glass-bg);
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: var(--glass-shadow);
transition: box-shadow 300ms ease;
}
.consultant-page .task-col-over { box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(90, 167, 255, .4); }
.consultant-page .task-col-head { display: flex; align-items: baseline; gap: 10px; }
.consultant-page .task-col-count { margin-left: auto; color: var(--ink-38); }
/* O board não cresce: cada coluna rola por dentro. */
.consultant-page .task-col-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.consultant-page .task-card {
display: flex; flex-direction: column; gap: 8px;
padding: 12px 14px; border-radius: 14px; cursor: grab;
background: rgba(237, 244, 246, .03);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .09);
transition: box-shadow 300ms ease, transform 300ms var(--ease), opacity 250ms ease;
}
.consultant-page .task-card:hover { box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .18); transform: translateY(-1px); }
.consultant-page .task-dragging { opacity: .4; }
.consultant-page .task-card-late { box-shadow: inset 0 0 0 1px rgba(207, 233, 255, .28); }
.consultant-page .task-card-top { display: flex; align-items: flex-start; gap: 10px; }
.consultant-page .task-card-title { font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.consultant-page .task-x {
margin-left: auto; border: 0; background: transparent; color: var(--ink-28);
font-size: 14px; line-height: 1; cursor: pointer; flex: 0 0 auto;
transition: color 300ms ease;
}
.consultant-page .task-x:hover { color: var(--bright); }
.consultant-page .task-student {
align-self: flex-start; padding: 3px 9px; border-radius: 999px; cursor: pointer;
background: rgba(90, 167, 255, .1); color: var(--blue-soft);
font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
}
.consultant-page .task-student-none { background: rgba(237, 244, 246, .04); color: var(--ink-28); cursor: default; }
.consultant-page .task-notes { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-62); }
.consultant-page .task-card-foot { display: flex; align-items: center; gap: 8px; }
.consultant-page .task-due, .consultant-page .task-pri {
height: 26px; padding: 0 8px; border: 0; border-radius: 9px; outline: 0; cursor: pointer;
background: rgba(237, 244, 246, .04); color: var(--ink-62);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
transition: box-shadow 400ms ease, color 400ms ease;
}
.consultant-page .task-due { flex: 1; min-width: 0; color-scheme: dark; }
.consultant-page .task-due:focus, .consultant-page .task-pri:focus { box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .55); }
.consultant-page .task-due-late { color: var(--bright); }
.consultant-page .task-pri-alta { color: var(--blue-soft); }
.consultant-page .task-pri-urgente { color: var(--bright); }
.consultant-page .task-pri option { background: #0c1116; }
.consultant-page .task-empty { margin: 0; padding: 18px 0; text-align: center; color: var(--ink-28); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
/* ═══ 19 · HOME (dashboard-resumo) ════════════════════════════════════════
UMA rolagem. O layout inteiro rola e nenhum card rola por dentro.
A versão anterior tentava caber numa tela só: grade com linhas de piso fixo
e cada lista com overflow próprio. Com a base cheia isso empilhava quatro
áreas roláveis, cortava nome no meio e dava a um card de "0 itens" o mesmo
espaço de um card com dezessete. Agora o bloco vazio nem chega à grade — vai
para a faixa "tudo em dia" — e o bloco cheio mostra o começo da lista com um
"+N · ver todos" que leva à view completa.
O padding com margem negativa é o respiro do halo do vidro: área rolável
recorta o que sai da caixa, e a sombra se espalha ~30px além do card. */
.consultant-page .home-layout {
display: flex; flex-direction: column; gap: 20px;
height: 100%; min-height: 0;
/* Medida de leitura, não largura de tela. Esticado nos 1760px do painel, o
card ficava com quase seiscentos pixels de ar depois da última coluna —
e ar demais lê como layout quebrado, do mesmo jeito que aperto demais.
O padding lateral é o respiro do halo do vidro, que se espalha ~30px. */
width: 100%; max-width: 1240px; margin: 0 auto;
padding: 16px 16px 28px;
}
/* Bloco 15 deixa todo #workspace em overflow:hidden. Aqui a rolagem é a da
própria home, então o quadro precisa devolvê-la — e só o seletor com id
ganha do seletor com id. */
.consultant-page #workspace.home-layout {
overflow-y: auto; overflow-x: hidden;
/* max-width vive aqui e não na regra de classe acima: "#workspace" carrega
um id e venceria o seletor de classe, devolvendo os 1760px do shell. */
max-width: 1240px; margin-inline: auto;
}
.consultant-page .home-hero {
position: relative; display: flex; align-items: center; gap: 36px;
/* 96px à direita é a casa do SAIR: sem essa reserva ele caía em cima do
valor de "entra em 30d". */
padding: 24px 96px 24px 32px; flex-wrap: wrap;
}
/* SAIR mora aqui desde que saiu da ilha: canto do hero, discreto. */
.consultant-page .home-exit {
position: absolute; top: 14px; right: 18px;
border: 0; border-radius: 999px; height: 28px; padding: 0 14px; cursor: pointer;
background: transparent; color: var(--ink-38);
/* 9px é o tamanho que a identidade lista como defeito (anti-padrão 5): o
degrau de rótulo do painel é 10px, e SAIR é um rótulo. */
font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
transition: background 400ms ease, color 400ms ease;
}
.consultant-page .home-exit:hover { background: rgba(237, 244, 246, .06); color: var(--ink); }
.consultant-page .home-hero-main { display: flex; align-items: center; gap: 20px; }
.consultant-page .home-big {
font-family: var(--display); font-weight: 600; font-size: 50px; line-height: 1;
font-variant-numeric: tabular-nums;
}
.consultant-page .home-hero-sub { display: flex; flex-direction: column; gap: 6px; max-width: 280px; }
.consultant-page .home-hero-sub em { font-style: normal; font-size: 13px; line-height: 1.5; color: var(--ink-62); }
.consultant-page .home-kpis { flex: 1; display: flex; justify-content: flex-end; gap: clamp(24px, 3.4vw, 66px); flex-wrap: wrap; }
.consultant-page .home-kpi { display: flex; flex-direction: column; gap: 8px; min-width: 110px; }
.consultant-page .home-kpi b {
font-family: var(--display); font-weight: 500; font-size: 22px; font-variant-numeric: tabular-nums;
}
.consultant-page .home-kpi-blue { color: rgba(90, 167, 255, .85); }
.consultant-page .home-kpi-alert { color: var(--bright); }
/* Pilha única, largura cheia. Grade lado a lado só valeria se todos os blocos
estivessem sempre cheios; como o bloco vazio some, a grade ficava com buraco
e o encontro das seções encostava os halos de vidro. */
.consultant-page .home-stack { display: flex; flex-direction: column; gap: 20px; }
.consultant-page .home-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px; }
.consultant-page .home-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.consultant-page .home-card-count { color: var(--ink-50); font-variant-numeric: tabular-nums; }
.consultant-page .home-list { display: flex; flex-direction: column; }
.consultant-page .home-row {
gap: 16px; min-height: 52px; padding: 6px 2px;
border-bottom: 1px solid var(--hair-soft); cursor: pointer;
transition: padding-left 450ms var(--ease), background 400ms ease;
}
.consultant-page .home-list .home-row:last-child { border-bottom: 0; }
.consultant-page .home-row:hover { padding-left: 10px; background: rgba(237, 244, 246, .03); }
.consultant-page .home-dot {
width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto;
background: var(--blue); box-shadow: 0 0 6px rgba(90, 167, 255, .6);
animation: csPulse 2.2s ease infinite;
}
/* Pendência de agenda: erro silencioso do aluno, precisa saltar sem gritar. */
.consultant-page .home-dot-alert {
background: var(--bright); box-shadow: 0 0 6px rgba(255, 255, 255, .35);
}
.consultant-page .home-card-alert { border-color: rgba(90, 167, 255, .28); }
.consultant-page .home-row-name {
font-family: var(--display); font-weight: 500; font-size: 13px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* O motivo da pendência é CONTEÚDO, não rótulo. Estava em mono 10px caixa alta
a 38% de opacidade — a razão de a tela pedir zoom. Mono e caixa alta ficam
para o rótulo de seção; aqui vale a família de leitura, no degrau de corpo. */
.consultant-page .home-row-meta {
min-width: 0;
font-family: var(--body); font-size: 12.5px; letter-spacing: 0;
text-transform: none; color: var(--ink-50);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Número alinha em mono — mas no degrau que se lê sem esforço. */
.consultant-page .home-row-due {
font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
color: var(--blue); font-variant-numeric: tabular-nums;
}
.consultant-page .home-late { color: var(--bright); }
/* Em card de largura cheia, alinhar o dado à direita joga o motivo a mais de
mil pixels do nome: lê-se atravessando a tela. A linha vira colunas de
medida fechada — nome, motivo e ação numa varredura curta, e a ação caindo
sempre na mesma vertical em todas as linhas. */
.consultant-page .home-row {
display: grid;
/* fit-content e não uma medida fixa: a coluna do motivo vale o maior texto
da lista, até o teto. Fixa em 620px, uma lista de motivos curtos
("Trimestral") deixava a ação boiando a meia tela de distância. */
grid-template-columns: auto minmax(0, 260px) fit-content(620px) auto;
justify-content: start; align-items: center;
}
/* Sem o ponto, a linha perde a primeira coluna e o nome escorrega para ela. */
.consultant-page .home-row:not(:has(> .home-dot)) {
grid-template-columns: minmax(0, 260px) fit-content(620px) auto;
}
.consultant-page .home-row > .home-row-name { max-width: none; }
.consultant-page .home-row > .home-row-meta {
text-align: left; white-space: normal; overflow: visible; line-height: 1.45;
}
.consultant-page .home-row > .home-row-due { justify-self: end; }
/* O bloco "precisa de você hoje" existe para virar mensagem enviada, e a única
ação dele era um texto de 17px de altura dentro de uma linha clicável de 52px:
errar o alvo por três pixels abria o perfil do aluno em vez do WhatsApp.
Agora a ação tem corpo de ação — altura de botão, moldura e área de clique
que cobre a linha inteira — sem virar um botão cheio, que competiria com o
nome. O stopPropagation continua sendo quem separa os dois cliques. */
.consultant-page .home-row-action {
justify-self: end; display: inline-flex; align-items: center;
min-height: 34px; padding: 0 14px; border-radius: 999px;
font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; text-decoration: none;
color: var(--blue); background: rgba(90, 167, 255, .08);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .2);
transition: background 400ms ease, color 400ms ease, box-shadow 400ms ease;
}
.consultant-page .home-row-action:hover {
background: rgba(90, 167, 255, .16); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .38);
}
/* Sem telefone não é ação: fica como dado, e o contraste diz que está faltando
algo. Vira a explicação de por que não há botão nesta linha. */
.consultant-page .home-row-none {
justify-self: end; font-family: var(--body); font-size: 12.5px;
letter-spacing: 0; text-transform: none; color: var(--ink-38);
}
/* A home mostra o começo da lista. O resto tem uma view inteira para ele. */
.consultant-page .home-more {
align-self: flex-start; border: 0; background: transparent; cursor: pointer;
padding: 8px 0 2px; font-family: var(--body); font-size: 12.5px; letter-spacing: 0;
text-transform: none; color: var(--ink-50);
transition: color 400ms ease;
}
.consultant-page .home-more:hover { color: var(--blue); }
.consultant-page .home-more-note {
margin: 4px 0 0; font-family: var(--body); font-size: 12.5px;
letter-spacing: 0; text-transform: none; color: var(--ink-38);
}
.consultant-page .home-empty { margin: 0; padding: 24px 10px; text-align: center; color: var(--ink-38); font-size: 13px; line-height: 1.6; }
.consultant-page .home-empty .micro { display: block; padding-bottom: 6px; }
/* O que está zerado não some da tela: vira uma linha só. A diferença entre
"conferi e não tem nada" e "sumiu" é o que essa faixa preserva. */
.consultant-page .home-clear {
display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap;
padding: 16px 26px;
}
.consultant-page .home-clear-label { color: var(--ink-38); }
.consultant-page .home-clear-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* Os chips navegam para a view completa — são controle, não etiqueta. Em 27px
ficavam menores que qualquer outro alvo da tela. */
.consultant-page .home-chip {
border: 0; border-radius: 999px; cursor: pointer;
display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
background: rgba(237, 244, 246, .04); color: var(--ink-50);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07);
font-family: var(--mono); letter-spacing: .12em;
transition: background 400ms ease, color 400ms ease;
}
.consultant-page .home-chip:hover { background: rgba(237, 244, 246, .09); color: var(--ink); }
.consultant-page .home-chip.is-static { cursor: default; }
.consultant-page .home-chip.is-static:hover { background: rgba(237, 244, 246, .04); color: var(--ink-50); }
.consultant-page .home-heat { padding: 22px 26px 24px; }
@media (max-width: 1100px) {
.consultant-page .tasks-board { grid-template-columns: 1fr; overflow-y: auto; }
}
/* ═══ 20 · ANAMNESES ══════════════════════════════════════════════════════
Sem filtros: pendentes e revisadas na tela ao mesmo tempo. */
.consultant-page .anamnese-layout {
display: grid; grid-template-rows: auto minmax(0, 1fr);
gap: 20px; height: 100%; min-height: 0; overflow: hidden;
}
.consultant-page .anamnese-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.consultant-page .anamnese-head .status { margin: 0; }
.consultant-page .anamnese-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 0; }
.consultant-page .anamnese-col { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; min-height: 0; }
.consultant-page .anamnese-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.consultant-page .anamnese-count { color: var(--ink-38); }
.consultant-page .anamnese-list { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
/* ── Ficha aberta: cabeçalho fixo, corpo rolável ──────────────────────────
O cockpit do painel é uma grade de três linhas com overflow hidden — feita
para o check-in, onde a terceira linha (.ck-grid) rola por dentro. A ficha
de anamnese tem mais faixas: a última caía numa linha implícita e o que
passava da dobra ficava inacessível, sem rolagem em lugar nenhum. Aqui ela
ganha o mesmo contrato do resto do painel: um contêiner que rola por dentro.
O seletor é :has para valer só nas fichas que trazem .cockpit-scroll. */
.consultant-page .cockpit:has(> .cockpit-scroll),
.consultant-page .cockpit:has(> .cockpit-body) { grid-template-rows: auto minmax(0, 1fr); }
/* Mesmo defeito, mesma cura: a ficha operacional legada do aluno também é
cabeçalho + corpo único e vinha sendo cortada. */
.consultant-page .cockpit > .cockpit-body { min-height: 0; overflow-y: auto; padding-bottom: 28px; }
.consultant-page .cockpit-scroll {
display: flex; flex-direction: column; gap: 4px;
min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 32px;
scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: rgba(237, 244, 246, .16) transparent;
}
/* Dentro do corpo rolável quem define a margem é o próprio contêiner: as
margens laterais herdadas do cockpit antigo desalinhavam a identidade em
relação aos cards. */
.consultant-page .cockpit-scroll > * { margin-left: 0; margin-right: 0; }
.consultant-page .an-contact { color: var(--ink-38); margin-top: 8px; }
.consultant-page .an-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px; align-items: start;
}
.consultant-page .an-block { gap: 14px; }
.consultant-page .an-block-wide { grid-column: 1 / -1; }
.consultant-page .an-block .answer-grid { margin: 0; gap: 0 20px; }
/* Card largo não merece duas colunas de 700px: densidade em vez de vão. */
.consultant-page .an-block-wide .answer-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.consultant-page .an-block .answer-line {
border-bottom: 1px solid var(--hair-soft); padding: 9px 0;
}
/* Só a última FILEIRA perde o filete: o último item sempre, e o penúltimo
quando ele divide a fileira com o último (contagem ímpar em duas colunas). */
.consultant-page .an-block .answer-line:last-child,
.consultant-page .an-block .answer-line:nth-last-child(2):nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
.consultant-page .an-block .answer-line span {
font-family: var(--mono); font-size: 9px; letter-spacing: .13em;
text-transform: uppercase; color: var(--ink-38);
}
.consultant-page .an-block .answer-line strong {
margin-top: 5px; font-family: var(--body); font-weight: 500; font-size: 13.5px;
line-height: 1.45; color: var(--ink);
}
/* A strip nasceu filha direta do cockpit e carrega margem lateral de até 72px;
dentro de um card isso vira um recuo solto. Vale para a ficha e para o
check-in, que também aninha a strip num bloco. */
.consultant-page :is(.an-block, .ck-block) .cockpit-photo-strip { margin: 0; }
/* Fotos: três ou quatro imagens não esticam para preencher a faixa — ficam do
tamanho em que se olha um corpo, alinhadas à esquerda. */
.consultant-page .an-block-photos .cockpit-photo-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.consultant-page .an-block-photos .photo-drop { flex: 0 0 auto; width: 148px; aspect-ratio: 3 / 4; }
/* O cálculo é a conclusão da ficha: os quatro números que viram a dieta. */
.consultant-page .an-block-calc { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(90, 167, 255, .22); }
.consultant-page .an-macro-strip {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
padding: 14px 16px; border-radius: 14px;
background: rgba(90, 167, 255, .07); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .16);
}
.consultant-page .an-macro-strip > div { display: flex; flex-direction: column; gap: 5px; }
.consultant-page .an-macro-strip b {
font-family: var(--display); font-weight: 500; font-size: 20px;
font-variant-numeric: tabular-nums; color: var(--ink);
}
@media (max-width: 1180px) {
.consultant-page .an-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
/* Cinco botões não cabem numa pílula só em tela estreita. */
.consultant-page .cockpit:has(> .cockpit-scroll) .cockpit-head-actions { flex-wrap: wrap; row-gap: 4px; }
.consultant-page .an-macro-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Coluna única: cada linha fecha sozinha — só a última perde o filete. */
.consultant-page .an-block .answer-grid,
.consultant-page .an-block-wide .answer-grid { grid-template-columns: minmax(0, 1fr); }
.consultant-page .an-block .answer-line:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--hair-soft); padding-bottom: 9px; }
}
/* ═══ 21 · FILA UNIFICADA — check-in e ficha na mesma linha ═══════════════ */
.consultant-page .queue-profile-btn {
border: 0; border-radius: 999px; height: 26px; padding: 0 12px;
background: rgba(237, 244, 246, .05); color: var(--ink-50); cursor: pointer;
font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
transition: background 400ms ease, color 400ms ease, transform 300ms var(--ease);
}
.consultant-page .queue-profile-btn:hover { background: rgba(237, 244, 246, .1); color: var(--ink); transform: translateY(-1px); }
/* ═══ 22 · ALUNOS EM CARDS FLUTUANTES ═════════════════════════════════════
Nem lista com filetes, nem os cards antigos entulhados: um tile por aluno,
quatro informações no máximo. */
/* A fila é um grid de tiles. O layout precisa reservar altura para o cabeçalho
e para os filtros e deixar só a grade rolando. */
.consultant-page .weekly-layout {
display: grid; grid-template-rows: minmax(0, 1fr);
height: 100%; min-height: 0; overflow: hidden;
}
.consultant-page .weekly-queue {
display: grid; grid-template-rows: auto auto minmax(0, 1fr);
gap: 14px; min-height: 0; overflow: hidden;
}
.consultant-page .queue-kpi-row { display: flex; gap: 8px; flex-wrap: wrap; }
.consultant-page .queue-none { padding: 40px 0; }
.consultant-page #queueList {
display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
gap: 12px; align-content: start; padding-right: 6px;
}
/* Sem backdrop-filter por tile: com 40 alunos na tela eram 40 camadas de blur,
e era daí que vinha a lentidão ao rolar a fila. */
.consultant-page .stu-tile {
display: flex; flex-direction: column; gap: 7px;
padding: 14px 16px; border-radius: 16px; cursor: pointer;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .015) 55%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: transform 300ms var(--ease), box-shadow 400ms ease;
}
.consultant-page .stu-tile:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(237, 244, 246, .16), 0 18px 40px -22px rgba(0, 0, 0, .9);
}
.consultant-page .stu-tile-active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(90, 167, 255, .4); }
.consultant-page .stu-tile-top { display: flex; align-items: center; gap: 9px; }
.consultant-page .stu-dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; background: rgba(237, 244, 246, .3); }
.consultant-page .stu-dot[data-dot="blue"] { background: var(--blue); box-shadow: 0 0 6px rgba(90, 167, 255, .6); animation: csPulse 2.2s ease infinite; }
.consultant-page .stu-dot[data-dot="red"] { background: var(--bright); box-shadow: 0 0 6px rgba(207, 233, 255, .55); }
.consultant-page .stu-dot[data-dot="yellow"] { background: var(--blue-soft); }
.consultant-page .stu-tile-name {
font-family: var(--display); font-weight: 500; font-size: 14px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.consultant-page .stu-elite {
margin-left: auto; flex: 0 0 auto; padding: 2px 7px; border-radius: 999px;
font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
color: var(--blue-soft); box-shadow: inset 0 0 0 1px rgba(143, 194, 255, .3);
}
/* A única linha extra do card, e só quando há algo pendente: revisar o
check-in que chegou, ou o tempo de silêncio de quem sumiu. */
.consultant-page .stu-mark {
align-self: flex-start; max-width: 100%;
font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.consultant-page .stu-mark-review {
border: 0; padding: 3px 9px; border-radius: 999px; cursor: pointer;
background: rgba(90, 167, 255, .12); color: var(--blue);
transition: background 400ms ease, color 400ms ease;
}
.consultant-page .stu-mark-review:hover { background: rgba(90, 167, 255, .22); color: var(--bright); }
.consultant-page .stu-mark-silent { padding: 3px 0; color: var(--ink-38); }
/* Três filtros, com a contagem colada no rótulo. */
.consultant-page .queue-stat {
display: inline-flex; align-items: center; gap: 8px;
height: 28px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(237, 244, 246, .04); color: var(--ink-50);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
transition: background 400ms ease, color 400ms ease, box-shadow 400ms ease;
}
.consultant-page .queue-stat b {
font-family: var(--mono); font-size: 9.5px; font-weight: 500;
font-variant-numeric: tabular-nums; color: var(--ink-38);
}
.consultant-page .queue-stat:hover { background: rgba(237, 244, 246, .08); color: var(--ink); }
.consultant-page .queue-stat.active {
background: rgba(90, 167, 255, .12); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .3);
}
.consultant-page .queue-stat.active b { color: var(--blue); }
/* Os dois últimos recortes trocam de eixo: saem do check-in da semana e entram
no contrato. O intervalo maior à esquerda marca a virada sem precisar de
rótulo de grupo. */
.consultant-page .queue-stat-contract { color: var(--ink-38); }
/* :first-of-type olharia o primeiro da linha — que é "TODOS". O que
marca a virada de eixo é a pill de contrato logo após uma pill de fila. */
.consultant-page .queue-stat:not(.queue-stat-contract) + .queue-stat-contract { margin-left: 10px; }
.consultant-page .stu-tile-contract { cursor: pointer; }
/* Mesma pílula do selo Elite, em tom neutro: cortesia é classificação, não posto. */
.consultant-page .stu-courtesy { color: var(--ink-50); box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .14); }
.consultant-page .stu-dot[data-dot="off"] { background: rgba(237, 244, 246, .16); }
/* Aqui a linha não é acessório: é o motivo do card estar nesta lista. Deixa
quebrar em vez de cortar o plano no meio da palavra. */
.consultant-page .stu-mark-contract {
padding: 3px 0; color: var(--ink-38);
white-space: normal; overflow: visible; line-height: 1.5;
}
/* ═══ 23 · FINANCEIRO ═════════════════════════════════════════════════════
Mesma gramática da home: um hero largo com o número que importa e, abaixo,
uma grade de blocos de peso parecido. Sem tira horizontal de KPIs e sem
card espremido no canto. */
.consultant-page .finance-layout { height: 100%; min-height: 0; overflow: hidden; }
.consultant-page .finance-admin {
display: grid; grid-template-rows: auto minmax(0, 1fr);
gap: 18px; height: 100%; min-height: 0; overflow: hidden;
/* styles.css prendia a view em 1060px dentro de um workspace já centralizado
— era a "caixa no meio da tela". Quem limita a largura é o shell. */
width: 100%; max-width: none; margin: 0;
}
/* Hero: o MRR em corpo grande, a leitura executiva ao lado e, embaixo, a
composição da receita como uma faixa só. */
.consultant-page .fin-hero { display: flex; flex-direction: column; gap: 18px; padding: 22px clamp(22px, 2vw, 34px); }
.consultant-page .fin-hero-top { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; }
.consultant-page .fin-hero-main { display: flex; flex-direction: column; gap: 6px; }
.consultant-page .fin-hero-big {
font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1;
font-variant-numeric: tabular-nums;
}
.consultant-page .fin-hero-main em { font-style: normal; font-size: 12.5px; color: var(--ink-50); }
/* Agrupados à direita com respiro fixo: espalhar de ponta a ponta num monitor
largo só cria vazio entre números que se leem juntos. */
.consultant-page .fin-hero-kpis { flex: 1; display: flex; justify-content: flex-end; gap: clamp(26px, 3.4vw, 68px); flex-wrap: wrap; }
.consultant-page .fin-kpi { display: flex; flex-direction: column; gap: 5px; min-width: 96px; }
.consultant-page .fin-kpi b {
font-family: var(--display); font-weight: 500; font-size: 19px;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.consultant-page .fin-kpi small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--ink-38); }
.consultant-page .fin-kpi-blue { color: rgba(90, 167, 255, .9); }
.consultant-page .fin-kpi-alert { color: var(--bright); }
/* Composição da receita: uma faixa empilhada em vez de dois blocos de barras.
A largura conta a fatia do MRR; a legenda diz o valor e quantos alunos. */
.consultant-page .fin-mix { display: flex; flex-direction: column; gap: 12px; }
.consultant-page .fin-mix-bar {
display: flex; gap: 3px; height: 8px; border-radius: 999px; overflow: hidden;
}
.consultant-page .fin-mix-seg {
width: var(--w); min-width: 4px; border-radius: 999px;
animation: csMixIn 700ms var(--ease) both;
}
@keyframes csMixIn { from { transform: scaleX(0); transform-origin: left; opacity: 0; } }
.consultant-page .fin-mix-seg[data-i="0"] { background: var(--blue); box-shadow: 0 0 12px rgba(90, 167, 255, .4); }
.consultant-page .fin-mix-seg[data-i="1"] { background: rgba(143, 194, 255, .72); }
.consultant-page .fin-mix-seg[data-i="2"] { background: rgba(90, 167, 255, .4); }
.consultant-page .fin-mix-seg[data-i="3"] { background: rgba(237, 244, 246, .3); }
.consultant-page .fin-mix-seg[data-i="4"] { background: rgba(237, 244, 246, .16); }
.consultant-page .fin-mix-legend { display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 2.4vw, 38px); }
.consultant-page .fin-mix-key { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.consultant-page .fin-mix-key i { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; align-self: center; }
.consultant-page .fin-mix-key i[data-i="0"] { background: var(--blue); }
.consultant-page .fin-mix-key i[data-i="1"] { background: rgba(143, 194, 255, .72); }
.consultant-page .fin-mix-key i[data-i="2"] { background: rgba(90, 167, 255, .4); }
.consultant-page .fin-mix-key i[data-i="3"] { background: rgba(237, 244, 246, .3); }
.consultant-page .fin-mix-key i[data-i="4"] { background: rgba(237, 244, 246, .16); }
.consultant-page .fin-mix-key b { font-family: var(--body); font-weight: 400; font-size: 12.5px; color: var(--ink-75); }
.consultant-page .fin-mix-key em {
font-style: normal; font-family: var(--display); font-weight: 500; font-size: 13px;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.consultant-page .fin-mix-key small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--ink-38); }
/* Grade: três superfícies grandes. Curva e calendário empilhados à esquerda,
renovações numa coluna alta à direita. */
.consultant-page .fin-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
grid-template-rows: minmax(0, .96fr) minmax(0, 1.04fr);
gap: 18px; min-height: 0;
}
.consultant-page .fin-block-curve { grid-column: 1; grid-row: 1; }
.consultant-page .fin-block-cal { grid-column: 1; grid-row: 2; }
.consultant-page .fin-block-renew { grid-column: 2; grid-row: 1 / 3; }
.consultant-page .fin-block { padding: 18px clamp(18px, 1.6vw, 26px); display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.consultant-page .fin-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.consultant-page .fin-block-head .micro:last-child { color: var(--ink-38); }
.consultant-page .fin-hint { color: var(--ink-38); }
.consultant-page .fin-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 6px; }
/* Em bloco estreito o conteúdo encolhe em vez de rolar de lado. */
.consultant-page .fin-block * { min-width: 0; }
.consultant-page .fin-block .fhorizon-name { flex: 1; font-size: 12.5px; }
.consultant-page .fin-block .fhorizon-amount { min-width: 0; font-size: 10.5px; }
.consultant-page .finance-upgrade-insight { display: none; }
.consultant-page .finance-spacer { margin-top: 18px; }
.consultant-page .risk-text { color: var(--bright); }
/* Calendário de entradas: um quadradinho por dia dos próximos 90, intensidade
= quanto entra. Colunas são semanas, linhas são dias da semana — mesma
leitura do heatmap de tarefas, aplicada ao caixa. As colunas são frações,
então a grade preenche o bloco em qualquer largura. */
.consultant-page .fin-cal {
position: relative; flex: 1; min-height: 0;
display: flex; flex-direction: column; gap: 12px;
}
.consultant-page .fin-cal-plot { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.consultant-page .fin-cal-months,
.consultant-page .fin-cal-grid {
display: grid; grid-template-columns: repeat(var(--cols, 26), minmax(0, 1fr));
}
.consultant-page .fin-cal-months { gap: 0 4px; color: var(--ink-28); }
.consultant-page .fin-cal-months span { grid-row: 1; white-space: nowrap; }
/* A grade preenche o bloco: as colunas são frações e a altura é o que sobra.
26 semanas × 7 dias mantêm a célula perto do quadrado na largura do card. */
.consultant-page .fin-cal-grid {
flex: 1; min-height: 0;
grid-template-rows: repeat(7, minmax(0, 1fr));
grid-auto-flow: column; gap: 4px; max-height: 250px;
}
.consultant-page .fin-cal-cell {
border-radius: 4px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .05);
transition: transform 300ms var(--ease), box-shadow 300ms ease;
}
.consultant-page .fin-cal-void { background: transparent; box-shadow: none; }
.consultant-page .fin-cal-cell[data-level] { cursor: default; }
.consultant-page .fin-cal-cell[data-level]:hover { transform: translateY(-2px) scale(1.06); }
.consultant-page .fin-cal-open { cursor: pointer; }
.consultant-page .fin-cal-cell[data-level="1"] { background: rgba(90, 167, 255, .22); box-shadow: none; }
.consultant-page .fin-cal-cell[data-level="2"] { background: rgba(90, 167, 255, .42); box-shadow: none; }
.consultant-page .fin-cal-cell[data-level="3"] { background: rgba(90, 167, 255, .66); box-shadow: none; }
.consultant-page .fin-cal-cell[data-level="4"] { background: var(--blue); box-shadow: 0 0 10px rgba(90, 167, 255, .5); }
/* Hoje: anel, não preenchimento — a cor continua contando o valor. */
.consultant-page .fin-cal-today { box-shadow: inset 0 0 0 1.5px rgba(207, 233, 255, .7); }
.consultant-page .fin-cal-foot { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap; padding-top: 2px; }
.consultant-page .fin-cal-band { display: inline-flex; align-items: baseline; gap: 8px; }
.consultant-page .fin-cal-band i { font-style: normal; color: var(--ink-38); }
.consultant-page .fin-cal-band b {
font-family: var(--display); font-weight: 500; font-size: 14px;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.consultant-page .fin-cal-scale { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.consultant-page .fin-cal-scale em { font-style: normal; }
.consultant-page .fin-cal-scale i { width: 9px; height: 9px; border-radius: 3px; }
.consultant-page .fin-cal-scale i[data-level="1"] { background: rgba(90, 167, 255, .22); }
.consultant-page .fin-cal-scale i[data-level="2"] { background: rgba(90, 167, 255, .42); }
.consultant-page .fin-cal-scale i[data-level="3"] { background: rgba(90, 167, 255, .66); }
.consultant-page .fin-cal-scale i[data-level="4"] { background: var(--blue); }
.consultant-page .fin-cal .heat-tip-n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--blue); }
/* Curva de caixa: escala à esquerda, valores por mês embaixo. */
.consultant-page .cash-curve {
flex: 1; min-height: 0;
display: grid; grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto; gap: 8px 12px;
}
.consultant-page .cash-scale {
grid-column: 1; grid-row: 1;
display: flex; flex-direction: column; justify-content: space-between;
text-align: right; color: var(--ink-28);
}
.consultant-page .cash-plot { grid-column: 2; grid-row: 1; position: relative; min-height: 0; }
.consultant-page .cash-curve svg { width: 100%; height: 100%; display: block; }
.consultant-page .cash-dot { opacity: 0; transition: opacity 200ms ease; }
.consultant-page .cash-dot.on { opacity: 1; }
.consultant-page .cash-hit { position: absolute; inset: 0; display: flex; }
.consultant-page .cash-hit-col { flex: 1; cursor: crosshair; }
.consultant-page .cash-labels { grid-column: 2; grid-row: 2; display: flex; }
.consultant-page .cash-label { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.consultant-page .cash-label em {
font-style: normal; font-family: var(--mono); font-size: 10px;
font-variant-numeric: tabular-nums; color: var(--ink-50);
}
.consultant-page .cash-tip {
position: absolute; top: 4px; transform: translateX(-50%); z-index: 3; pointer-events: none;
padding: 10px 14px; border-radius: 14px; white-space: nowrap;
background: linear-gradient(150deg, rgba(237, 244, 246, .07), rgba(237, 244, 246, .02) 45%), rgba(8, 12, 17, .82);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .4);
animation: csFade 180ms ease both;
display: flex; flex-direction: column; gap: 3px;
}
/* display:flex do autor vence o [hidden] do user-agent — a armadilha que o
kit v3 documenta. Sem esta linha o balão fica visível vazio. */
.consultant-page .cash-tip[hidden] { display: none; }
.consultant-page .cash-tip-m { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--ink-50); text-transform: uppercase; }
.consultant-page .cash-tip b { font-family: var(--display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.consultant-page .cash-tip-c { font-family: var(--mono); font-size: 10px; color: var(--blue); }
/* ═══ 24 · TAREFAS COMPACTAS ══════════════════════════════════════════════ */
/* O ano ocupa a largura inteira do card: as colunas são frações, não pixels
fixos, então 53 semanas × 7 dias preenchem a superfície de ponta a ponta.
O aspect-ratio mantém as células quadradas seja qual for a largura. */
.consultant-page .tasks-activity-card {
padding: 16px 20px; display: flex; flex-direction: column; gap: 10px;
}
.consultant-page .task-heat-months {
display: grid;
grid-template-columns: repeat(var(--cols, 53), minmax(0, 1fr));
gap: 0 3px; color: var(--ink-28);
}
.consultant-page .task-heat-months span { overflow: hidden; white-space: nowrap; }
.consultant-page .task-heat-year {
display: grid;
grid-template-columns: repeat(var(--cols, 53), minmax(0, 1fr));
grid-template-rows: repeat(7, minmax(0, 1fr));
grid-auto-flow: column;
gap: 3px; width: 100%;
aspect-ratio: calc(var(--cols, 53) / 7);
}
.consultant-page .task-heat-year .task-heat-cell {
width: auto; height: auto; min-height: 0; aspect-ratio: auto; border-radius: 3px;
/* Varredura da esquerda para a direita: cada coluna entra 7ms depois. */
animation: csCell 380ms var(--ease) both;
animation-delay: calc(var(--c, 0) * 7ms);
}
.consultant-page .task-heat-void { background: transparent; box-shadow: none; animation: none; }
/* Dias que ainda não chegaram: presentes no desenho, apagados. */
.consultant-page .task-heat-ahead { background: rgba(237, 244, 246, .02); box-shadow: none; }
/* Tag por coluna */
.consultant-page .task-tag {
padding: 3px 8px; border-radius: 999px;
font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
}
.consultant-page .task-tag-pending { background: rgba(237, 244, 246, .07); color: var(--ink-62); }
.consultant-page .task-tag-in_progress { background: rgba(90, 167, 255, .14); color: var(--blue); }
.consultant-page .task-tag-done { background: rgba(207, 233, 255, .1); color: var(--bright); }
.consultant-page .task-col-head { gap: 8px; }
/* Card menor: título + rodapé de uma linha */
.consultant-page .task-card { gap: 6px; padding: 9px 11px; border-radius: 11px; }
.consultant-page .task-card-title { font-size: 12.5px; line-height: 1.35; }
.consultant-page .task-card-foot { gap: 6px; flex-wrap: wrap; }
.consultant-page .task-student { padding: 2px 7px; font-size: 9px; }
.consultant-page .task-due-wrap {
position: relative; display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
border-radius: 7px; background: rgba(237, 244, 246, .04); cursor: pointer;
font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--ink-50);
}
.consultant-page .task-due-wrap input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.consultant-page .task-due-late { color: var(--bright); }
.consultant-page .task-pri {
height: 20px; width: 30px; padding: 0 4px; border-radius: 7px; text-align: center;
font-size: 10px; letter-spacing: 0;
}
/* Concluída: uma linha, sem data, aluno ou descrição */
.consultant-page .task-mini {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; border-radius: 9px; cursor: grab;
background: rgba(237, 244, 246, .02);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: box-shadow 300ms ease;
}
.consultant-page .task-mini:hover { box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .14); }
.consultant-page .task-mini-check { color: var(--blue); font-size: 10px; flex: 0 0 auto; }
.consultant-page .task-mini-title {
flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-50);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ═══ 24½ · MODAL DE NOVA TAREFA ══════════════════════════════════════════
Acima da ilha (z-index 50) e do cockpit (70), como todo modal do painel. */
.consultant-page .task-modal-overlay {
position: fixed; inset: 0; z-index: 90;
display: flex; align-items: center; justify-content: center; padding: 24px;
background: rgba(3, 6, 9, .55);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; transition: opacity 220ms ease;
}
.consultant-page .task-modal-overlay.on { opacity: 1; }
.consultant-page .task-modal {
width: min(460px, 100%); max-height: 100%; overflow-y: auto;
display: flex; flex-direction: column; gap: 14px;
padding: 26px 28px; border-radius: var(--r-card);
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .015) 45%), rgba(10, 15, 20, .9);
backdrop-filter: blur(30px) saturate(1.08); -webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px -20px rgba(0, 0, 0, .7);
transform: translateY(12px); transition: transform 320ms var(--ease);
}
.consultant-page .task-modal-overlay.on .task-modal { transform: translateY(0); }
.consultant-page .task-modal-head { display: flex; align-items: center; justify-content: space-between; }
.consultant-page .task-modal-x {
border: 0; background: transparent; color: var(--ink-38); cursor: pointer;
font-size: 18px; line-height: 1; transition: color 300ms ease;
}
.consultant-page .task-modal-x:hover { color: var(--ink); }
.consultant-page .task-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.consultant-page .task-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consultant-page .task-field .cs-like-input { width: 100%; }
.consultant-page .task-field textarea.cs-like-input {
height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5;
font-family: var(--body); font-size: 12.5px; letter-spacing: 0;
}
.consultant-page .task-field input[type="date"].cs-like-input { color-scheme: dark; }
.consultant-page .task-pri-pick { display: flex; gap: 6px; }
.consultant-page .task-pri-opt {
flex: 1; height: 32px; border: 0; border-radius: 10px; cursor: pointer;
background: rgba(237, 244, 246, .03); color: var(--ink-50);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
transition: background 400ms ease, color 400ms ease, box-shadow 400ms ease;
}
.consultant-page .task-pri-opt:hover { color: var(--ink); }
.consultant-page .task-pri-opt.active {
background: rgba(90, 167, 255, .13); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .35);
}
.consultant-page .task-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 4px; }
/* ═══ 26 · ESCOLHA DO ALUNO (perfil × check-ins) ══════════════════════════ */
.consultant-page .stu-choice {
width: min(430px, 100%);
display: flex; flex-direction: column; gap: 18px;
padding: 24px 26px 26px; border-radius: var(--r-card);
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .015) 45%), rgba(10, 15, 20, .94);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px -20px rgba(0, 0, 0, .7);
transform: translateY(12px); transition: transform 320ms var(--ease);
}
.consultant-page .stu-choice-overlay.on .stu-choice { transform: translateY(0); }
/* Quatro destinos numa grade 2×2: com quatro cards, a altura de cada um cai —
dois quadrados grandes viravam um modal de tela inteira. */
.consultant-page .stu-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consultant-page .stu-choice-grid .stu-choice-card {
/* quadrado era coerente com dois cards; com quatro, o modal virava uma
coluna de tela inteira — a proporção deitada devolve a altura */
aspect-ratio: 1.45; padding: 14px 12px; gap: 6px;
}
.consultant-page .stu-choice-grid .stu-choice-card svg { width: 20px; height: 20px; }
.consultant-page .stu-choice-card {
aspect-ratio: 1; border: 0; border-radius: 18px; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
background: rgba(237, 244, 246, .035); color: var(--ink-62);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
transition: background 400ms ease, color 400ms ease, box-shadow 400ms ease, transform 300ms var(--ease);
}
.consultant-page .stu-choice-card:hover {
background: rgba(90, 167, 255, .1); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .34);
transform: translateY(-2px);
}
.consultant-page .stu-choice-card svg { width: 24px; height: 24px; stroke-width: 1.5; color: var(--blue); }
.consultant-page .stu-choice-card strong { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; }
.consultant-page .stu-choice-card small { font-size: 11px; color: var(--ink-38); }
/* ═══ 27 · CHECK-IN OCUPA A TELA ══════════════════════════════════════════
Era um painel lateral ancorado em left:220px, resquício da dock antiga:
sobrepunha metade da página e deixava a outra metade viva atrás. Agora é
uma página inteira, por cima da ilha — sem porta na navegação, só entra
por dentro do aluno. */
.consultant-page .cockpit {
left: 0; top: 0; right: 0; bottom: 0;
border-left: 0; border-radius: 0;
background: linear-gradient(180deg, rgba(237, 244, 246, .035), rgba(237, 244, 246, 0) 320px), #06090c;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* A barra do check-in era uma faixa sólida de ponta a ponta com filete — a
única superfície do painel desenhada assim. Vira o que todo o resto usa:
duas ilhas de vidro flutuando sobre o conteúdo, alinhadas à mesma margem. */
.consultant-page .cockpit-head {
background: transparent; border-bottom: 0;
backdrop-filter: none; -webkit-backdrop-filter: none;
width: 100%; max-width: min(1440px, 100%); margin: 0 auto;
padding: 14px 0 4px; gap: 12px;
}
.consultant-page .cockpit-nav,
.consultant-page .cockpit-head-actions {
display: inline-flex; align-items: center; gap: 3px;
padding: 5px 7px; border-radius: 999px;
background: linear-gradient(150deg, rgba(237, 244, 246, .055), rgba(237, 244, 246, .012) 45%), rgba(10, 15, 20, .4);
backdrop-filter: blur(30px) saturate(1.08); -webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 40px -14px rgba(0, 0, 0, .7);
}
.consultant-page .cockpit-nav-btn {
width: 30px; height: 30px; border: 0; border-radius: 999px;
background: transparent; color: var(--ink-50);
transition: background 400ms ease, color 400ms ease, transform 300ms var(--ease);
}
.consultant-page .cockpit-nav-btn:hover { background: rgba(237, 244, 246, .08); color: var(--ink); }
.consultant-page .cockpit-nav-btn:active { transform: scale(.94); }
.consultant-page .cockpit-pos { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-38); padding: 0 6px; }
/* Os botões perdem a caixa própria: a pílula que os abriga já é a superfície. */
.consultant-page .cockpit-head-actions .ghost-action {
min-height: 30px; height: 30px; padding: 0 14px; border-radius: 999px;
background: transparent; color: var(--ink-50); box-shadow: none;
font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
}
.consultant-page .cockpit-head-actions .ghost-action:hover { background: rgba(237, 244, 246, .08); color: var(--ink); transform: none; }
.consultant-page .cockpit-head-actions .ghost-action[disabled] { opacity: .38; }
.consultant-page .cockpit-head-actions [data-close] { width: 30px; padding: 0; color: var(--ink-38); font-size: 13px; }
/* O conteúdo não estica de ponta a ponta num monitor largo — menos a barra
fixa do topo, que precisa cobrir a largura inteira. */
/* width:100% junto do margin auto — sem ele, o item de grid com margem
automática encolhe para o conteúdo e o cabeçalho fica centralizado enquanto
as colunas vão de ponta a ponta. */
.consultant-page .cockpit > *:not(.cockpit-head) {
width: 100%; max-width: min(1440px, 100%); margin-left: auto; margin-right: auto;
}
/* ═══ 28 · SEM VIDRO NAS SUPERFÍCIES ESTÁTICAS ════════════════════════════
Os blocos do workspace não têm nada passando atrás — só o fundo da página.
O backdrop-filter ali não muda o visual, mas obriga o compositor a reler o
fundo a cada repintura de hover, e é isso que deixa retângulos claros pela
tela no Edge. O vidro fica só onde algo realmente passa por baixo: a ilha,
os overlays e os balões. */
.consultant-page #workspace .glass-panel,
.consultant-page .task-col {
backdrop-filter: none; -webkit-backdrop-filter: none;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 55%), rgba(12, 17, 22, .5);
}
/* ═══ 25 · MOBILE (≤900px: dock inferior) ═════════════════════════════════ */
@media (max-width: 900px) {
/* O rodapé reserva a altura da ilha (38 + 10 de padding) + o afastamento do
fundo + folga, senão a última linha de qualquer lista morre atrás dela. */
.consultant-page .command-shell { padding: 24px 14px calc(92px + env(safe-area-inset-bottom)); }
.consultant-page .command-top,
.consultant-page .weekly-layout { max-width: none; }
.consultant-page .weekly-layout { padding-top: 12px; }
/* A dock inferior é a mesma ilha do desktop, ancorada embaixo: pílula
flutuante, largura do conteúdo, 2 abas + marca + 2 abas. Nada de faixa
colada de ponta a ponta com rolagem lateral. */
.consultant-page .mobile-nav {
left: 50%; right: auto; transform: translateX(-50%);
bottom: calc(10px + env(safe-area-inset-bottom));
width: auto; max-width: calc(100vw - 20px);
display: flex; justify-content: center; align-items: center; gap: 2px;
border-top: 0; border-radius: 999px;
padding: 5px 7px;
background: linear-gradient(150deg, rgba(237, 244, 246, .055), rgba(237, 244, 246, .012) 45%), rgba(10, 15, 20, .5);
backdrop-filter: blur(30px) saturate(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 40px -12px rgba(0, 0, 0, .7);
overflow: visible;
}
/* Mesma ordem da ilha — a simetria 2+2 é o que centraliza a marca. */
.consultant-page .mobile-nav-item[data-view="checkins"] { order: 1; }
.consultant-page .mobile-nav-item[data-view="finance"] { order: 2; }
.consultant-page .mobile-nav-brand { order: 3; }
.consultant-page .mobile-nav-item[data-view="todos"] { order: 4; }
.consultant-page .mobile-nav-item[data-view="messages"] { order: 5; }
/* Sair mora na home (botão discreto do hero), aqui como no desktop. E as
abas escondidas continuam escondidas: a regra genérica de .dock-hidden-tab
perde para o display:flex do item mobile, então repete-se com o contexto. */
.consultant-page .mobile-nav .dock-logout,
.consultant-page .mobile-nav .dock-hidden-tab { display: none; }
/* Só ícone, como na ilha: cinco rótulos escritos tomavam a largura inteira
da tela e espremiam a marca até sobrar "MZ" num aparelho de 360px. */
.consultant-page .mobile-nav-item {
flex: 0 0 auto; min-width: 0; max-width: none;
width: auto; height: 38px; padding: 0 13px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
color: var(--ink-50);
transition: color 400ms ease, background 400ms ease, transform 300ms var(--ease);
}
.consultant-page .mobile-nav-item svg { width: 19px; height: 19px; stroke-width: 1.6; }
.consultant-page .mobile-nav-item small { display: none; }
.consultant-page .mobile-nav-item.on { color: var(--ink); background: rgba(237, 244, 246, .1); }
.consultant-page .mobile-nav-item:active { transform: scale(.94); }
.consultant-page .mobile-nav-brand {
order: 3; flex: 0 0 auto; width: auto; height: 38px; margin: 0 2px; padding: 0 12px;
display: flex; align-items: center; justify-content: center; white-space: nowrap;
font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .2em;
color: var(--ink-50); background: transparent; border: 0; cursor: pointer;
transition: color 400ms ease, transform 300ms var(--ease);
}
.consultant-page .mobile-nav-brand span { opacity: 1; transform: none; width: auto; }
.consultant-page .mobile-nav-brand:active { transform: scale(.94); }
/* O badge de não lidas seguia a régua da dock lateral e caía fora da pílula. */
.consultant-page .mobile-nav .dock-unread-badge { top: 0; right: 4px; }
}
/* ═══ 30 · STUDENT OS — PERFIL, TRAINING LAB, DIET LAB ════════════════════
As telas do aluno nasceram como wireframe (`wf-*` em student-os.css): caixa
de 1180px, retângulo com contorno em tudo, tipografia própria. Esta camada
traz as três para a mesma língua do painel — superfície de vidro sem borda,
Chakra/JetBrains, azul-gelo como único destaque — sem tocar no arquivo
original: apagar esta seção devolve o wireframe. */
/* Largura: a mesma do resto do painel, não uma caixa dentro da caixa. */
.consultant-page .wf-panel { max-width: min(var(--shell-max), 100%); margin: 0 auto; }
.consultant-page .wf-stage { padding: 18px 0 40px; }
.consultant-page .wf-os { gap: 0; }
/* ── Ilha de abas (substitui os três botões soltos do cabeçalho) ────────── */
.consultant-page .wf-header {
min-height: 60px; padding: 10px 0 6px;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
border-bottom: 0; gap: 12px;
}
.consultant-page .wf-island {
justify-self: center;
display: flex; align-items: center; gap: 2px;
padding: 5px 7px; border-radius: 999px;
background: linear-gradient(150deg, rgba(237, 244, 246, .055), rgba(237, 244, 246, .012) 45%), rgba(10, 15, 20, .4);
backdrop-filter: blur(30px) saturate(1.08); -webkit-backdrop-filter: blur(30px) saturate(1.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 40px -14px rgba(0, 0, 0, .7);
}
/* O nome do aluno ocupa o lugar da marca: é a âncora do contexto. */
.consultant-page .wf-island-name {
margin: 0 10px; max-width: 220px;
font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .2em;
text-transform: uppercase; color: var(--ink-50);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.consultant-page .wf-tab {
position: relative; display: flex; align-items: center; gap: 0;
height: 38px; padding: 0 11px; border: 0; border-radius: 999px; cursor: pointer;
background: transparent; color: var(--ink-50);
transition: background 400ms ease, color 400ms ease, transform 300ms var(--ease);
}
.consultant-page .wf-tab svg { width: 18px; height: 18px; stroke-width: 1.6; flex: 0 0 auto; }
/* Rótulo fechado por padrão, como na ilha do painel: abre no hover do item. */
.consultant-page .wf-tab span {
max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; opacity: 0;
font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
transition: max-width 650ms var(--ease), opacity 500ms ease, margin-left 650ms var(--ease);
}
.consultant-page .wf-tab:hover span,
.consultant-page .wf-tab.on span { max-width: 120px; opacity: 1; margin-left: 9px; }
.consultant-page .wf-tab:hover { background: rgba(237, 244, 246, .05); color: var(--ink); }
.consultant-page .wf-tab.on { background: rgba(237, 244, 246, .1); color: var(--ink); }
.consultant-page .wf-tab:active { transform: scale(.94); }
.consultant-page .wf-step { justify-self: end; color: var(--ink-38); align-self: center; }
.consultant-page .student-os-back {
justify-self: start; border: 0; background: transparent; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; height: 34px;
color: var(--ink-38); font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
transition: color 400ms ease;
}
.consultant-page .student-os-back:hover { color: var(--ink); }
.consultant-page .student-os-back svg { width: 15px; height: 15px; stroke-width: 1.6; }
/* ── Superfícies: vidro sem contorno, como todo o painel ────────────────── */
.consultant-page :is(.wf-card, .wf-workout-card, .wf-meal, .wf-library, .wf-summary,
.wf-signal, .wf-preset-card, .wf-preset-shelf, .wf-archive-drawer, .wf-renewal-panel,
.wf-profile-action-strip, .wf-build-readout, .wf-option-dup-menu) {
border: 0; border-radius: 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .045), rgba(237, 244, 246, .012) 55%), rgba(12, 17, 22, .5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
}
.consultant-page .wf-workout-card { border-left: 0; padding: 16px 18px; }
.consultant-page .wf-workout-card.archived,
.consultant-page .wf-workout-card.is-archived { opacity: .55; }
/* Rascunho não publicado: anel azul em vez do contorno cinza. */
.consultant-page .wf-workout-card.is-hidden { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(90, 167, 255, .28); }
.consultant-page :is(.wf-card, .wf-workout-card):hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(237, 244, 246, .14);
}
.consultant-page .wf-profile-hero { border-bottom: 1px solid var(--hair-soft); padding: 6px 0 22px; }
.consultant-page .wf-person-dot { background: var(--blue); box-shadow: 0 0 8px rgba(90, 167, 255, .6); }
/* ── Tipografia ────────────────────────────────────────────────────────── */
.consultant-page :is(.wf-title-row, .wf-profile-main) h1 {
font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: 0; color: var(--ink);
}
.consultant-page .wf-title-row p,
.consultant-page .wf-kicker {
font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-38); text-transform: uppercase;
}
.consultant-page .wf-card-head h2 { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--ink); }
.consultant-page .wf-section-label {
font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--ink-38); margin: 22px 0 10px;
}
.consultant-page .wf-section-label::before { content: "// "; color: var(--ink-28); }
.consultant-page .wf-section-label.on { color: var(--ink-50); }
.consultant-page :is(.wf-signal, .wf-profile-fact) span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-38); }
.consultant-page :is(.wf-signal, .wf-profile-fact) strong {
font-family: var(--display); font-weight: 500; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--ink);
}
/* A legenda do fato ("43d restantes", "nacional · BRL") é leitura, não etiqueta:
sai do mono de 9,5px — tamanho que a própria identidade lista como defeito. */
.consultant-page :is(.wf-signal, .wf-profile-fact) small { font-family: var(--body); font-size: 12.5px; letter-spacing: 0; color: var(--ink-50); }
/* Pílula de estado: publicado é azul-gelo, rascunho é neutro com anel. */
.consultant-page .wf-status-pill {
border: 0; border-radius: 999px; padding: 3px 10px;
font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
background: rgba(90, 167, 255, .13); color: var(--blue);
}
.consultant-page .wf-status-pill.warn { background: rgba(237, 244, 246, .06); color: var(--ink-50); box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .12); }
.consultant-page .wf-status-pill.ok { background: rgba(90, 167, 255, .16); color: var(--bright); }
/* Alerta de plano oculto: informação, não emergência — sem vermelho. */
.consultant-page .wf-hidden-alert {
border: 0; border-radius: 16px; padding: 12px 16px; margin: 4px 0 18px;
display: flex; align-items: center; gap: 12px;
background: rgba(90, 167, 255, .08);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .22);
color: var(--ink-75); font-size: 12.5px; line-height: 1.5;
}
.consultant-page .wf-hidden-alert b { color: var(--ink); font-weight: 500; }
.consultant-page .wf-hidden-alert svg { width: 17px; height: 17px; color: var(--blue); flex: 0 0 auto; }
/* ── Agenda da semana: sete chips, um por dia ───────────────────────────── */
.consultant-page .wf-week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.consultant-page .wf-week-strip button {
border: 0; border-radius: 14px; padding: 12px 10px; cursor: pointer; text-align: left;
display: flex; flex-direction: column; gap: 4px; min-width: 0;
background: rgba(237, 244, 246, .03); color: var(--ink-50);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: background 400ms ease, box-shadow 400ms ease, transform 300ms var(--ease);
}
.consultant-page .wf-week-strip button:hover { transform: translateY(-2px); background: rgba(237, 244, 246, .06); }
.consultant-page .wf-week-strip button.on {
background: rgba(90, 167, 255, .1); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .3);
}
.consultant-page .wf-week-strip span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-38); }
.consultant-page .wf-week-strip b {
font-family: var(--display); font-weight: 500; font-size: 12.5px; color: inherit;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.consultant-page .wf-week-strip small { font-family: var(--mono); font-size: 9px; color: var(--ink-28); }
/* Dia que existe na rotina mas não no cronograma: o aluno NÃO vê. Tracejado para
ler como "provisório", nunca como agendado — o preenchido cheio é o que vale. */
.consultant-page .wf-week-strip button.wf-day-unsynced {
background: transparent; color: var(--ink-50);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .10);
outline: 1px dashed rgba(237, 244, 246, .22); outline-offset: -4px;
}
.consultant-page .wf-week-strip button.wf-day-unsynced small { color: var(--bright); }
/* ── Gavetas (arquivadas, protocolos, arsenal) ──────────────────────────── */
.consultant-page :is(.wf-archive-drawer, .wf-preset-shelf) { padding: 14px 18px; margin-top: 18px; }
.consultant-page :is(.wf-archive-drawer, .wf-preset-shelf) summary {
cursor: pointer; list-style: none;
font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-38);
transition: color 400ms ease;
}
.consultant-page :is(.wf-archive-drawer, .wf-preset-shelf) summary:hover { color: var(--ink); }
.consultant-page :is(.wf-archive-drawer, .wf-preset-shelf) summary::-webkit-details-marker { display: none; }
.consultant-page :is(.wf-archive-drawer, .wf-preset-shelf) summary::before { content: "// "; color: var(--ink-28); }
.consultant-page .wf-archive-drawer[open] .wf-routine-grid,
.consultant-page .wf-archive-drawer[open] .wf-stack { margin-top: 14px; }
/* Ações do card: quebram de linha em vez de vazar pela borda. */
.consultant-page :is(.wf-workout-card, .wf-card) .wf-row-actions { flex-wrap: wrap; gap: 6px; margin-top: auto; }
.consultant-page .wf-workout-card { display: flex; flex-direction: column; gap: 4px; }
/* Destrutivo em azul-gelo com anel: o v3 não usa vermelho em lugar nenhum.
O !important responde ao !important do student-os.css — sem ele o vermelho
do wireframe continua vencendo. */
.consultant-page .wf-danger {
color: var(--bright) !important; background: rgba(207, 233, 255, .05);
box-shadow: inset 0 0 0 1px rgba(207, 233, 255, .18);
}
.consultant-page .wf-danger:hover {
color: var(--ink) !important; background: rgba(207, 233, 255, .1);
border-color: transparent !important;
}
/* Dentro do perfil, a busca de alunos do painel não tem função — e empilhar
duas barras acima da ilha do aluno só afasta o conteúdo do topo. */
.consultant-page .command-shell.student-os-mode .command-top { display: none; }
/* ── Grades ────────────────────────────────────────────────────────────── */
.consultant-page .wf-routine-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.consultant-page .wf-ops-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.consultant-page .wf-profile-split { gap: 18px; }
.consultant-page .wf-training-board { gap: 18px; }
/* ── Perfil enxuto: contrato, dados e log ──────────────────────────────── */
/* O contrato é uma leitura, não um formulário: os cinco fatos ocupam a linha
de cima inteira e as ações vêm depois, separadas por um fio. Antes eram duas
colunas centralizadas — os fatos quebravam em duas linhas e a fila de botões
pousava exatamente no meio deles. */
.consultant-page .wf-profile-action-strip {
display: flex; flex-direction: column;
padding: 18px 24px 14px; margin-bottom: 18px;
/* O backdrop-filter da faixa cria contexto de empilhamento: sem z-index
próprio, o menu "Mais ações" fica preso dentro dele e os cards seguintes
pintam por cima. */
position: relative; z-index: 3;
}
.consultant-page .wf-profile-facts {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.consultant-page .wf-profile-fact {
display: flex; flex-direction: column; gap: 5px; min-width: 0;
padding-left: 18px; border-left: 1px solid var(--hair-soft);
}
.consultant-page .wf-profile-fact:first-child { padding-left: 0; border-left: 0; }
/* Ações em linha própria, com o fio marcando onde a leitura acaba e a decisão
começa. Frequentes à esquerda, decisão do contrato à direita. */
.consultant-page .wf-profile-actions {
display: flex; align-items: center; justify-content: space-between;
gap: 10px 16px; flex-wrap: wrap;
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair-soft);
}
.consultant-page .wf-action-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Alvo de 30px é apertado para o controle principal do contrato. Sobe a altura
e o contraste sem mexer no corpo da letra — dois tamanhos de botão no mesmo
painel seriam pior que um botão pequeno. */
.consultant-page .wf-profile-actions :is(.ghost-action, .primary-action) { min-height: 34px; padding: 0 14px; }
.consultant-page .wf-profile-actions .ghost-action { color: var(--ink-62); }
.consultant-page .wf-profile-actions .ghost-action:hover { color: var(--ink); }
.consultant-page .wf-action-more-menu .ghost-action { min-height: 38px; color: var(--ink-62); }
.consultant-page .wf-action-group-end { margin-left: auto; }
/* Encerrar, cortesia e teste mudam o estado do aluno e são raras: atrás de um
clique, para não disputar peso visual com "+2 sem". */
.consultant-page .wf-action-more { position: relative; }
.consultant-page .wf-action-more > summary {
list-style: none; cursor: pointer; user-select: none;
display: inline-flex; align-items: center;
}
.consultant-page .wf-action-more > summary::-webkit-details-marker { display: none; }
.consultant-page .wf-action-more[open] > summary { color: var(--ink); background: rgba(237, 244, 246, .1); }
.consultant-page .wf-action-more-menu {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
display: flex; flex-direction: column; gap: 4px;
min-width: 208px; padding: 8px; border-radius: 16px;
background: linear-gradient(150deg, rgba(237, 244, 246, .06), rgba(237, 244, 246, .02) 55%), rgba(9, 13, 17, .94);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .1), 0 24px 48px rgba(0, 0, 0, .5);
animation: csIn 240ms var(--ease) both;
}
.consultant-page .wf-action-more-menu .ghost-action {
width: 100%; justify-content: flex-start; min-height: 34px; border-radius: 11px;
background: transparent; box-shadow: none;
}
.consultant-page .wf-action-more-menu .ghost-action:hover { background: rgba(237, 244, 246, .08); transform: none; }
/* align-items:start: "Dados" tem cinco linhas e o log tem três — esticar os
dois até a mesma altura só produzia meio card vazio. */
.consultant-page .wf-profile-cols {
display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: 18px; align-items: start;
}
.consultant-page :is(.wf-person-card, .wf-log-card) { padding: 18px 22px; }
.consultant-page .wf-person-rows { display: flex; flex-direction: column; }
.consultant-page .wf-person-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
padding: 13px 0; border-bottom: 1px solid var(--hair-soft);
}
.consultant-page .wf-person-row:last-child { border-bottom: 0; }
.consultant-page .wf-person-row span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-38); }
.consultant-page .wf-person-row b {
font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--ink);
overflow-wrap: anywhere; text-align: right;
}
.consultant-page .wf-person-row b.empty { color: var(--ink-28); }
.consultant-page .wf-log { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.consultant-page .wf-log-row {
display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: baseline;
padding: 12px 0; border-bottom: 1px solid var(--hair-soft);
}
.consultant-page .wf-log-row:last-child { border-bottom: 0; }
.consultant-page .wf-log-row b {
font-family: var(--mono); font-size: 12.5px; font-weight: 400; letter-spacing: .04em;
font-variant-numeric: tabular-nums; color: var(--ink-38);
}
.consultant-page .wf-log-row span { font-size: 12.5px; line-height: 1.5; color: var(--ink-75); overflow-wrap: anywhere; }
/* ═══ 31 · CHECK-IN ═══════════════════════════════════════════════════════
Era uma coluna só: métricas, fotos, respostas, gráfico, nota e um tapete de
chips de histórico, tudo empilhado. Agora são duas colunas — o que o aluno
respondeu de um lado, a evolução do outro — nas superfícies do painel. */
/* Mesa, como os builders: a página do check-in não rola — as duas colunas
têm a mesma altura e cada bloco rola por dentro. */
.consultant-page .cockpit {
display: grid; grid-template-rows: auto auto minmax(0, 1fr);
height: 100%; overflow: hidden;
}
.consultant-page .cockpit-student-info { padding: 18px 0 16px; }
.consultant-page .ck-metrics { display: flex; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; margin-top: 16px; }
.consultant-page .ck-metric { display: flex; flex-direction: column; gap: 5px; }
.consultant-page .ck-metric b {
font-family: var(--display); font-weight: 500; font-size: 22px;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.consultant-page .ck-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px; min-height: 0; padding-bottom: 22px;
}
.consultant-page .ck-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; }
.consultant-page .ck-block { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
/* Quem estica e quem tem tamanho próprio — é isso que deixa as duas colunas
terminando na mesma linha em vez de uma sobrar embaixo da outra. */
/* As respostas ocupam o que precisam (e rolam se o aluno escreveu muito); a
sobra vira área de escrita da nota, em vez de vazio no fim do card. */
.consultant-page .ck-block-answers { flex: 0 1 auto; }
.consultant-page .ck-block-note { flex: 1; }
.consultant-page .ck-block-history { flex: 1; }
.consultant-page :is(.ck-block-chart, .ck-block-photos) { flex: 0 0 auto; }
.consultant-page .ck-block-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.consultant-page .ck-block-note textarea.area-input { flex: 1; min-height: 90px; max-height: none; }
.consultant-page .ck-block-photos .cockpit-photo-strip { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.consultant-page .ck-block-photos .photo-drop { aspect-ratio: 3 / 4; }
.consultant-page .ck-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.consultant-page .ck-block-head .micro:last-child { color: var(--ink-38); }
.consultant-page .ck-block textarea.area-input {
min-height: 96px; border: 0; border-radius: 12px; padding: 12px 14px; resize: vertical;
background: rgba(237, 244, 246, .03); box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .08);
font-family: var(--body); font-size: 13px; line-height: 1.55; color: var(--ink);
}
.consultant-page .ck-block textarea.area-input:focus { box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .5); }
/* Gráfico de peso: mesma curva do financeiro, não a polilinha esticada. */
.consultant-page .ck-chart { display: flex; flex-direction: column; gap: 8px; }
.consultant-page .ck-chart-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.consultant-page .ck-chart-scale {
display: flex; flex-direction: column; justify-content: space-between;
text-align: right; color: var(--ink-28); height: 190px;
}
.consultant-page .ck-chart-plot { position: relative; height: 190px; }
.consultant-page .ck-chart-plot svg { width: 100%; height: 100%; display: block; }
.consultant-page .ck-dot { opacity: 0; transition: opacity 200ms ease; }
.consultant-page .ck-dot.on { opacity: 1; }
.consultant-page .ck-chart-hit { position: absolute; inset: 0; display: flex; }
.consultant-page .ck-hit-col { flex: 1; cursor: crosshair; }
.consultant-page .ck-chart-tip {
position: absolute; top: 2px; transform: translateX(-50%); z-index: 3; pointer-events: none;
display: flex; flex-direction: column; gap: 2px; white-space: nowrap;
padding: 8px 12px; border-radius: 12px;
background: linear-gradient(150deg, rgba(237, 244, 246, .07), rgba(237, 244, 246, .02) 45%), rgba(8, 12, 17, .85);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .45);
animation: csFade 160ms ease both;
}
.consultant-page .ck-chart-tip[hidden] { display: none; }
.consultant-page .ck-chart-tip b { font-family: var(--display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.consultant-page .ck-chart-tip span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--ink-50); }
.consultant-page .ck-chart-axis { display: flex; justify-content: space-between; color: var(--ink-28); }
/* Histórico: uma linha por check-in, com a diferença de peso. */
.consultant-page .history-strip {
display: flex; flex-direction: column; gap: 0;
flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 0 0; margin: 0; border: 0; background: transparent;
}
/* Em tela baixa o gráfico cede altura para a lista, não o contrário. */
@media (max-height: 950px) {
.consultant-page .ck-chart-scale,
.consultant-page .ck-chart-plot { height: 150px; }
.consultant-page .ck-metrics { margin-top: 12px; }
.consultant-page .ck-metric b { font-size: 19px; }
}
.consultant-page .ck-hist-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto 62px; align-items: baseline; gap: 12px;
width: 100%; text-align: left; cursor: pointer;
padding: 11px 4px; border: 0; border-radius: 0; border-bottom: 1px solid var(--hair-soft);
background: transparent; color: var(--ink-75);
transition: padding-left 450ms var(--ease), background 400ms ease, color 400ms ease;
}
.consultant-page .ck-hist-row:hover { padding-left: 12px; background: rgba(237, 244, 246, .03); color: var(--ink); }
.consultant-page .ck-hist-row.on { background: rgba(90, 167, 255, .08); color: var(--ink); }
.consultant-page .ck-hist-date { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-50); }
.consultant-page .ck-hist-weight { font-family: var(--display); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
.consultant-page .ck-hist-diff { font-family: var(--mono); font-size: 10px; text-align: right; color: var(--ink-28); font-variant-numeric: tabular-nums; }
.consultant-page .ck-hist-diff.up { color: var(--blue); }
.consultant-page .ck-hist-diff.down { color: var(--bright); }
/* Respostas do check-in: linhas por categoria, sem caixa dentro de caixa. */
.consultant-page .checkin-compact { display: flex; flex-direction: column; }
.consultant-page .cc-row {
display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: baseline;
padding: 10px 0; border-bottom: 1px solid var(--hair-soft);
}
.consultant-page .cc-cat { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-38); }
.consultant-page .cc-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.consultant-page .cc-vals span {
padding: 3px 10px; border-radius: 999px; border: 0;
background: rgba(237, 244, 246, .05); color: var(--ink-75); font-size: 12px;
}
.consultant-page .cc-obs {
margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 0;
background: rgba(90, 167, 255, .06); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .16);
font-size: 12.5px; line-height: 1.6; color: var(--ink-75);
}
.consultant-page .cockpit-photo-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.consultant-page .photo-drop { border: 0; border-radius: 14px; background: rgba(237, 244, 246, .03); box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .07); }
@media (max-width: 1180px) {
.consultant-page .ck-grid { grid-template-columns: minmax(0, 1fr); }
.consultant-page .wf-profile-cols { grid-template-columns: minmax(0, 1fr); }
.consultant-page .wf-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
/* Empilhado, a mesa não cabe: aqui o check-in volta a rolar como página, e
os blocos deixam de disputar altura entre si. */
.consultant-page .cockpit { grid-template-rows: auto auto auto; height: 100%; overflow-y: auto; }
.consultant-page :is(.ck-block-answers, .ck-block-note, .ck-block-history) { flex: 0 0 auto; }
.consultant-page .ck-block-body { overflow: visible; }
.consultant-page .ck-block-note textarea.area-input { min-height: 110px; }
.consultant-page .history-strip { max-height: 320px; }
/* O check-in ocupa a tela inteira: sem a margem do max-width, o conteúdo
encostaria nas bordas do aparelho. */
.consultant-page .cockpit > *:not(.cockpit-head) { padding-left: 16px; padding-right: 16px; }
.consultant-page .ck-metrics { gap: 20px 28px; }
.consultant-page .ck-metric b { font-size: 19px; }
}
/* ═══ 32 · BUILDERS (dieta e treino) ══════════════════════════════════════
Mesa de trabalho: a tela não rola, os painéis rolam. O topo segura o que não
pode sumir (título, dias, meta × construído) e a grade divide o resto em três
colunas de altura fixa — prescrições/volume, o plano em si, e a biblioteca. */
.consultant-page .wf-builder {
display: grid; grid-template-rows: auto auto minmax(0, 1fr);
height: 100%; min-height: 0; max-width: min(var(--shell-max), 100%); gap: 12px;
}
/* Três zonas de largura igual: identidade, dias, ações. Só assim o seletor de
dias fica no MEIO da barra — com flex simples ele era empurrado pelo título,
que tem largura variável, e parava sempre à direita do centro. */
.consultant-page .wf-builder-top {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: clamp(12px, 1.6vw, 26px);
padding: 12px 18px; border-radius: 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .05), rgba(237, 244, 246, .012) 55%), rgba(12, 17, 22, .5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(237, 244, 246, .06);
}
.consultant-page .wf-builder-top > .wf-day-checks,
.consultant-page .wf-builder-top > .wf-builder-top-facts { justify-self: center; }
.consultant-page .wf-builder-top > .wf-row-actions { justify-self: end; }
@media (max-width: 900px) {
.consultant-page .wf-builder-top { grid-template-columns: 1fr; }
.consultant-page .wf-builder-top > * { justify-self: start !important; }
}
.consultant-page .wf-builder-id { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.consultant-page .wf-builder-id .wf-icon {
width: 32px; height: 32px; border: 0; border-radius: 999px; cursor: pointer; flex: 0 0 auto;
background: rgba(237, 244, 246, .06); color: var(--ink-62);
transition: background 400ms ease, color 400ms ease;
}
.consultant-page .wf-builder-id .wf-icon:hover { background: rgba(237, 244, 246, .12); color: var(--ink); }
.consultant-page .wf-builder-title {
width: 100%; max-width: 420px; border: 0; background: transparent; outline: 0; padding: 2px 0;
font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink);
border-bottom: 1px solid transparent; transition: border-color 400ms ease;
}
.consultant-page .wf-builder-title:focus { border-bottom-color: rgba(90, 167, 255, .55); }
.consultant-page .wf-builder-top-facts { display: flex; gap: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-38); }
.consultant-page .wf-builder-top-facts b { font-family: var(--display); font-size: 14px; color: var(--ink); margin-right: 4px; }
.consultant-page .wf-builder-top .wf-day-checks { display: flex; gap: 5px; flex-wrap: wrap; }
.consultant-page .wf-day-check {
display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; cursor: pointer;
background: rgba(237, 244, 246, .04); color: var(--ink-38);
font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
transition: background 400ms ease, color 400ms ease;
}
.consultant-page .wf-day-check input { display: none; }
.consultant-page .wf-day-check.on { background: rgba(90, 167, 255, .14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .3); }
/* Meta × construído: a linha que se olha o tempo todo enquanto monta. */
.consultant-page .wf-builder-meta {
padding: 12px 18px; border-radius: 16px; min-height: 0;
background: rgba(90, 167, 255, .06); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .16);
}
.consultant-page .wf-builder-meta:empty { display: none; }
/* Quatro linhas empilhadas comiam 200px da mesa: os macros viram quatro
colunas numa faixa de uma linha, com a barra abaixo de cada número. */
/* Só os quatro macros, ocupando a largura toda. A coluna do título saiu junto
com o próprio título: era um rótulo fixo consumindo espaço de leitura, e a
altura devolvida aqui é altura que as três colunas de baixo ganham. */
.consultant-page .wf-builder-meta {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center;
gap: 3px clamp(18px, 2.4vw, 40px); padding: 7px 18px;
}
.consultant-page .wf-builder-meta .wf-build-title { display: none; }
.consultant-page .wf-builder-meta .wf-build-flag {
grid-column: 1 / -1; grid-row: 2; justify-self: start;
font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
color: var(--bright);
}
.consultant-page .wf-builder-meta .wf-build-row {
grid-row: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline;
padding: 0; border: 0; margin: 0;
}
.consultant-page .wf-builder-meta .wf-build-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--ink-38); }
.consultant-page .wf-builder-meta .wf-build-val {
justify-self: end; font-family: var(--display); font-weight: 500; font-size: 15px;
font-variant-numeric: tabular-nums; color: var(--ink);
}
.consultant-page .wf-builder-meta .wf-build-val i { font-style: normal; font-size: 10px; color: var(--ink-38); }
.consultant-page .wf-builder-meta .wf-build-bar {
grid-column: 1 / -1; height: 3px; border-radius: 999px; overflow: hidden;
background: rgba(237, 244, 246, .08);
}
.consultant-page .wf-builder-meta .wf-build-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.consultant-page .wf-builder-meta .wf-build-row.ok .wf-build-bar > span { background: var(--blue); }
.consultant-page .wf-builder-meta .wf-build-row.over .wf-build-bar > span { background: var(--bright); }
.consultant-page .wf-builder-meta .wf-build-row.over .wf-build-val { color: var(--bright); }
.consultant-page .wf-builder-meta .wf-build-note {
grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0;
font-family: var(--mono); font-size: 9.5px; color: var(--ink-28);
}
/* ── Coluna do plano: cards quadrados que abrem modal ────────────────────────
Mesma gramática dos cards do aluno. O quadrado é proposital: são três
destinos de peso igual, e a leitura vira "o que já está definido", não um
formulário espremido. O cofre guarda os campos reais enquanto fechados. */
.consultant-page .wf-panel-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
gap: 10px; padding: 2px 0;
}
.consultant-page .wf-panel-card {
aspect-ratio: 1 / 1;
display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
gap: 6px; padding: 13px; cursor: pointer; text-align: left;
border: 0; border-radius: 16px;
background: linear-gradient(150deg, rgba(237, 244, 246, .055), rgba(237, 244, 246, .012) 60%), rgba(12, 17, 22, .5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .07);
transition: transform 400ms cubic-bezier(.22, 1, .36, 1), box-shadow 400ms ease, background 400ms ease;
}
.consultant-page .wf-panel-card:hover {
transform: translateY(-1px);
background: linear-gradient(150deg, rgba(90, 167, 255, .1), rgba(237, 244, 246, .015) 60%), rgba(12, 17, 22, .5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(90, 167, 255, .3);
}
.consultant-page .wf-panel-card svg { width: 18px; height: 18px; color: var(--blue); stroke-width: 1.6; }
.consultant-page .wf-panel-card strong {
font-family: var(--display); font-weight: 500; font-size: 12.5px; line-height: 1.25; color: var(--ink);
}
.consultant-page .wf-panel-card small {
font-family: var(--mono); font-size: 9px; letter-spacing: .06em; line-height: 1.35; color: var(--ink-38);
}
.consultant-page .wf-vault { display: none; }
/* Na coluna estreita a faixa vira lista: quatro macros lado a lado só cabem na
largura da tela inteira. Mesma leitura (montado / meta + barra), empilhada. */
.consultant-page .wf-meta-side {
grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 12px 13px;
margin-top: 10px; border-radius: 16px;
}
.consultant-page .wf-meta-side .wf-build-row {
grid-row: auto; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px;
}
.consultant-page .wf-meta-side .wf-build-val { font-size: 14px; }
.consultant-page .wf-meta-side .wf-build-flag { grid-row: auto; }
/* Modal dos painéis: mesmo card do modal de meta de volume, um pouco mais
estreito porque aqui é formulário, não grade de grupamentos. */
.consultant-page .wf-diet-card { max-width: 620px; }
.consultant-page .wf-diet-panel-body { display: grid; gap: 12px; }
.consultant-page .wf-diet-panel-body .wf-macro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.consultant-page .wf-diet-panel-body .wf-textarea { min-height: 68px; }
.consultant-page .wf-micro-grid { display: grid; gap: 9px; }
.consultant-page .wf-micro-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; }
.consultant-page .wf-micro-line .wf-build-label { font-family: var(--body); font-size: 11.5px; color: var(--ink-62); text-transform: none; letter-spacing: 0; }
.consultant-page .wf-micro-line .wf-build-val { justify-self: end; font-family: var(--display); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.consultant-page .wf-micro-line .wf-build-val i { font-style: normal; font-size: 9.5px; color: var(--ink-38); }
.consultant-page .wf-micro-line .wf-build-bar { grid-column: 1 / -1; height: 3px; border-radius: 999px; background: rgba(237, 244, 246, .08); overflow: hidden; }
.consultant-page .wf-micro-line .wf-build-bar > span { display: block; height: 100%; border-radius: 999px; background: rgba(90, 167, 255, .5); }
.consultant-page .wf-micro-line.ok .wf-build-bar > span { background: var(--blue); }
.consultant-page .wf-micro-line.over .wf-build-bar > span { background: var(--bright); }
.consultant-page .wf-micro-line.over .wf-build-val { color: var(--bright); }
.consultant-page .wf-micro-line.extra .wf-build-bar > span { background: rgba(237, 244, 246, .18); }
.consultant-page .wf-builder-grid {
display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr) minmax(280px, .9fr);
gap: 14px; min-height: 0;
}
.consultant-page .wf-builder-col {
display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0;
padding: 14px 16px; border-radius: 18px;
background: linear-gradient(150deg, rgba(237, 244, 246, .04), rgba(237, 244, 246, .01) 55%), rgba(12, 17, 22, .45);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(237, 244, 246, .05);
}
.consultant-page .wf-builder-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.consultant-page .wf-builder-col-head .micro:last-child { color: var(--ink-28); }
/* É aqui que a rolagem mora — e só aqui. */
.consultant-page .wf-builder-scroll {
flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
display: flex; flex-direction: column; gap: 10px; padding-right: 6px;
}
/* ── Coluna de meta: faixa curta no topo, prescrições com o resto ──────────
A meta era um bloco de ~290px fixos (grade 2×2 de cartões grandes, linha de
ajuste com margem de 22px e um donut de 112px) antes que a área rolável
começasse — as cinco prescrições disputavam a sobra. Agora a meta é uma
faixa: quatro números numa linha, ajuste numa linha, proporção em barra. */
.consultant-page .wf-meta-block {
display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto;
padding-bottom: 12px; border-bottom: 1px solid var(--hair-soft);
}
.consultant-page .wf-builder-side .wf-macro-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0;
}
.consultant-page .wf-builder-side .wf-macro-card {
margin: 0; gap: 3px; padding: 7px 6px 6px; text-align: center;
border: 0; border-radius: 12px;
background: rgba(237, 244, 246, .04);
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .06);
transition: background 400ms ease, box-shadow 400ms ease;
}
.consultant-page .wf-builder-side .wf-macro-card:focus-within {
background: rgba(90, 167, 255, .07); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .42);
}
.consultant-page .wf-builder-side .wf-macro-card span {
font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ink-38); white-space: nowrap;
}
.consultant-page .wf-builder-side .wf-macro-card input {
width: 100%; height: auto; padding: 0; border: 0; background: transparent; text-align: center;
font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.15;
font-variant-numeric: tabular-nums; color: var(--ink);
}
/* Ajuste calórico: uma linha — campo estreito à esquerda, contexto à direita. */
.consultant-page .wf-builder-side .wf-adjust-row {
display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center;
gap: 10px; margin: 0; padding: 0;
}
.consultant-page .wf-builder-side .wf-adjust-row .wf-field { flex: none; margin: 0; gap: 2px; }
.consultant-page .wf-builder-side .wf-adjust-row .wf-field span { font-size: 8.5px; letter-spacing: .12em; margin: 0; }
.consultant-page .wf-builder-side .wf-adjust-row input[type="number"] {
height: 28px; padding: 0 8px; border-radius: 10px;
font-family: var(--display); font-weight: 500; font-size: 14px;
}
.consultant-page .wf-builder-side .wf-adjust-meta { font-size: 10.5px; line-height: 1.4; color: var(--ink-38); }
/* Proporção P/C/G: barra fina no lugar do donut — mesma leitura, 4px de altura. */
.consultant-page .wf-macro-split {
display: flex; gap: 2px; height: 4px; border-radius: 999px; overflow: hidden;
background: rgba(237, 244, 246, .06);
}
.consultant-page .wf-macro-split i { display: block; height: 100%; border-radius: 999px; transition: width 420ms var(--ease); }
.consultant-page .wf-macro-split i.p { background: var(--blue); }
.consultant-page .wf-macro-split i.c { background: rgba(90, 167, 255, .45); }
.consultant-page .wf-macro-split i.g { background: rgba(237, 244, 246, .28); }
.consultant-page .wf-builder-side .wf-legend {
display: flex; justify-content: space-between; gap: 6px;
font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--ink-38);
}
/* Em tela baixa a faixa perde a legenda: os números e a barra já dizem tudo. */
@media (max-height: 860px) {
.consultant-page .wf-builder-side .wf-legend { display: none; }
.consultant-page .wf-builder-side .wf-macro-card input { font-size: 15px; }
.consultant-page .wf-meta-block { gap: 7px; padding-bottom: 10px; }
}
.consultant-page .wf-builder-lib > .wf-library,
.consultant-page .wf-builder-lib > .wf-card {
display: flex; flex-direction: column; min-height: 0; flex: 1;
padding: 0; border: 0; background: transparent; box-shadow: none;
}
.consultant-page .wf-builder-lib .wf-library-list,
.consultant-page .wf-builder-lib .wf-food-list { flex: 1; min-height: 0; overflow-y: auto; }
.consultant-page .wf-volume-row {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px;
padding: 8px 0; border-bottom: 1px solid var(--hair-soft); font-size: 12.5px; color: var(--ink-75);
}
.consultant-page .wf-volume-row b { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.consultant-page .wf-volume-row i {
grid-column: 1 / -1; height: 3px; border-radius: 999px; width: var(--bar, 0%);
background: linear-gradient(90deg, var(--blue), rgba(90, 167, 255, .25));
}
/* Seletor de protocolo: o vinha com a pele do sistema (caixa branca). */
.consultant-page .wf-builder-meta .wf-preset-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0; border: 0; background: transparent; }
.consultant-page .wf-builder select,
.consultant-page .wf-preset-picker select {
height: 32px; padding: 0 10px; border: 0; border-radius: 10px; cursor: pointer;
background: rgba(237, 244, 246, .06); color: var(--ink); outline: 0;
font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
box-shadow: inset 0 0 0 1px rgba(237, 244, 246, .1);
}
.consultant-page .wf-builder select option { background: #0c1116; color: var(--ink); }
/* As abas de painel só existem em tela estreita. */
.consultant-page .wf-builder-tabs { display: none; }
/* Barra fina: no editor a ilha vira uma linha de contexto e devolve a altura
à mesa. Também é o que resolve a ilha sobrepondo o conteúdo — o builder
ocupa exatamente o que sobra, sem passar por baixo dela. */
.consultant-page .wf-os-compact .wf-header { min-height: 0; padding: 6px 0 4px; }
.consultant-page .wf-os-compact .wf-island {
padding: 2px 4px; gap: 0; background: none; box-shadow: none;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
.consultant-page .wf-os-compact .wf-tab { height: 28px; padding: 0 8px; }
.consultant-page .wf-os-compact .wf-tab svg { width: 15px; height: 15px; }
.consultant-page .wf-os-compact .wf-tab:hover span,
.consultant-page .wf-os-compact .wf-tab.on span { max-width: 0; opacity: 0; margin-left: 0; }
.consultant-page .wf-os-compact .wf-island-name { margin: 0 8px; font-size: 9px; }
.consultant-page .wf-os-compact .wf-stage { padding-top: 6px; padding-bottom: 14px; overflow: hidden; }
.consultant-page .student-os-builder { height: 100%; overflow: hidden; }
@media (max-width: 1180px) {
/* Com pouca largura, some uma coluna por vez — a escolha é das abas. */
.consultant-page .wf-builder-grid { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr); }
.consultant-page .wf-builder-lib { display: none; }
.consultant-page .wf-builder[data-builder-pane="lib"] .wf-builder-lib { display: flex; }
.consultant-page .wf-builder[data-builder-pane="lib"] .wf-builder-side { display: none; }
.consultant-page .wf-builder-tabs { display: flex; gap: 6px; justify-content: center; padding-top: 2px; }
.consultant-page .wf-builder-tabs button {
border: 0; border-radius: 999px; height: 32px; padding: 0 16px; cursor: pointer;
background: rgba(237, 244, 246, .05); color: var(--ink-50);
font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
transition: background 400ms ease, color 400ms ease;
}
.consultant-page .wf-builder-tabs button.on { background: rgba(90, 167, 255, .14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(90, 167, 255, .3); }
/* O builder é a exceção da regra "a página rola": ele continua sendo mesa.
Toda a cadeia precisa voltar a ter altura fixa — shell, workspace, layout,
shell do OS e stage — senão o grid do builder cresce e a página rola. */
.consultant-page .command-shell:has(.wf-builder) { overflow: hidden; }
.consultant-page #workspace:has(.wf-builder) { flex: 1; height: auto; min-height: 0; overflow: hidden; }
.consultant-page .student-os-layout:has(.wf-builder),
.consultant-page .wf-os:has(.wf-builder) { height: 100%; min-height: 0; overflow: hidden; }
.consultant-page .wf-stage:has(.wf-builder) { overflow: hidden; padding-bottom: 8px; }
}
@media (max-width: 900px) {
/* Uma coluna por vez, escolhida pelas abas da base. */
.consultant-page .wf-builder-grid { grid-template-columns: minmax(0, 1fr); }
.consultant-page .wf-builder-col { display: none; }
.consultant-page .wf-builder[data-builder-pane="side"] .wf-builder-side,
.consultant-page .wf-builder[data-builder-pane="main"] .wf-builder-main,
.consultant-page .wf-builder[data-builder-pane="lib"] .wf-builder-lib { display: flex; }
/* Cabeçalho em três faixas: identidade, dias, ações — lado a lado eles se
atropelavam (o kicker quebrava em três linhas sob os chips de dia). */
.consultant-page .wf-builder-top { padding: 10px 14px; gap: 10px; }
.consultant-page .wf-builder-id { flex: 1 0 100%; }
.consultant-page .wf-builder-id .wf-kicker { display: none; }
.consultant-page .wf-builder-title { font-size: 17px; max-width: none; }
.consultant-page .wf-builder-top .wf-day-checks { order: 3; width: 100%; }
.consultant-page .wf-builder-top .wf-row-actions { order: 4; width: 100%; justify-content: flex-end; }
.consultant-page .wf-builder-top-facts { gap: 12px; }
/* Meta em duas colunas: quatro macros numa linha viravam texto sobreposto. */
.consultant-page .wf-builder-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 14px; }
.consultant-page .wf-builder-meta .wf-build-title { grid-column: 1 / -1; }
.consultant-page .wf-builder-meta .wf-build-row { grid-row: auto; }
.consultant-page .wf-builder-tabs { position: sticky; bottom: 0; padding: 8px 0 calc(4px + env(safe-area-inset-bottom)); }
.consultant-page .wf-stage:has(.wf-builder) { padding-bottom: 0; }
}
/* ── Student OS em tela estreita ───────────────────────────────────────── */
@media (max-width: 1180px) {
.consultant-page .student-os-layout { height: auto; overflow: visible; }
.consultant-page .wf-os { height: auto; }
.consultant-page .wf-stage { overflow: visible; padding: 14px 0 20px; }
.consultant-page .wf-profile-split,
.consultant-page .wf-two-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.consultant-page .wf-header { padding: 6px 0 4px; grid-template-columns: auto minmax(0, 1fr); }
.consultant-page .wf-island { justify-self: end; padding: 4px 6px; }
/* O nome já está no corpo da tela; na ilha estreita ele viraria reticências. */
.consultant-page .wf-island-name { display: none; }
.consultant-page .wf-tab { padding: 0 10px; }
.consultant-page .wf-tab:hover span, .consultant-page .wf-tab.on span { max-width: 0; opacity: 0; margin-left: 0; }
.consultant-page .wf-step { display: none; }
.consultant-page .wf-week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.consultant-page .wf-routine-grid { grid-template-columns: minmax(0, 1fr); }
/* A stage tem rolagem própria: sem este rodapé o último bloco fica sob a dock. */
.consultant-page .wf-stage { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.consultant-page :is(.wf-title-row, .wf-profile-hero) { flex-wrap: wrap; }
.consultant-page .wf-profile-facts { grid-template-columns: minmax(0, 1fr); }
.consultant-page .wf-profile-fact { padding: 0 0 10px; border-left: 0; border-bottom: 1px solid var(--hair-soft); }
.consultant-page .wf-profile-fact:last-child { padding-bottom: 0; border-bottom: 0; }
.consultant-page .wf-action-group-end { margin-left: 0; }
/* Empilhado, o "Mais ações" encosta na margem esquerda: ancorado à direita,
o menu se abriria 208px para fora da tela. */
.consultant-page .wf-action-more-menu { left: 0; right: auto; max-width: calc(100vw - 40px); }
.consultant-page :is(.wf-title-row, .wf-profile-main) h1 { font-size: 21px; }
}
/* ═══ 29 · ESCALA ═════════════════════════════════════════════════════════
O painel é uma tela fixa: nada rola no body, cada bloco rola por dentro.
Isso funciona enquanto a altura comporta a grade. Abaixo de certa largura a
grade precisa empilhar, e empilhada ela não cabe mais em uma tela — então o
shell volta a rolar e as views deixam de travar a própria altura. */
/* Laptop: a coluna de renovações não pode espremer a curva. */
@media (max-width: 1500px) {
.consultant-page .fin-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .38fr); }
/* Menos largura para o motivo, que é a coluna elástica da linha. */
.consultant-page .home-row { grid-template-columns: auto minmax(0, 220px) minmax(0, 1fr) auto; }
.consultant-page .home-row:not(:has(> .home-dot)) { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; }
}
/* Tablet / janela estreita: tudo em coluna única e a tela volta a rolar. */
@media (max-width: 1180px) {
.consultant-page .command-shell { overflow-y: auto; overscroll-behavior: contain; }
/* flex:1 travava o workspace na altura da tela e o conteúdo vazava por fora
do fluxo: a barra rolava, mas o padding do rodapé continuava colado nos
780px do quadro — a última linha morria atrás da dock. Com a altura vindo
do conteúdo, o padding volta a ser o fim de verdade da página. */
.consultant-page #workspace { flex: 0 0 auto; height: auto; min-height: 100%; overflow: visible; }
.consultant-page :is(.finance-layout, .finance-admin, .home-layout, .tasks-layout, .anamnese-layout, .weekly-layout, .weekly-queue) {
height: auto; min-height: 0; overflow: visible;
}
.consultant-page .finance-admin { grid-template-rows: none; }
/* Quem rola agora é o shell: a home devolve a rolagem e o respiro da
sombra (a margem negativa aqui só criaria barra horizontal). */
.consultant-page #workspace.home-layout { overflow: visible; padding: 0; margin: 0; }
.consultant-page .fin-grid,
.consultant-page .anamnese-grid,
.consultant-page .tasks-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.consultant-page :is(.fin-block-curve, .fin-block-cal, .fin-block-renew) { grid-column: 1; grid-row: auto; }
.consultant-page .fin-block { min-height: 260px; }
/* Sem altura de tela para dividir, as listas ganham um teto próprio. */
.consultant-page .fin-scroll,
.consultant-page .anamnese-list,
.consultant-page .task-col-body { max-height: 60vh; }
.consultant-page .cash-curve { min-height: 220px; }
}
/* Celular: a ilha vira dock inferior (bloco 25) e a densidade cai um grau. */
@media (max-width: 900px) {
.consultant-page .fin-hero { padding: 20px 20px 22px; }
.consultant-page .fin-hero-top { gap: 20px; }
.consultant-page .fin-hero-big { font-size: 36px; }
.consultant-page .fin-hero-kpis { justify-content: flex-start; gap: 20px 26px; }
.consultant-page .fin-kpi { min-width: 44%; }
.consultant-page .home-kpis { justify-content: flex-start; gap: 18px 24px; }
.consultant-page .home-big { font-size: 40px; }
/* Duas colunas num celular espremem nome e etiqueta na mesma linha de 170px:
a home vira pilha única. (A regra de 2 colunas do bloco 29 vem antes na
cascata e por largura ainda casaria aqui.) */
/* Empilhado, nome e motivo não cabem lado a lado: o motivo desce. */
.consultant-page .home-row,
.consultant-page .home-row:not(:has(> .home-dot)) {
grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 10px 2px;
}
.consultant-page .home-row > .home-dot { display: none; }
.consultant-page .home-row > .home-row-meta { grid-column: 1 / -1; }
/* O motivo ocupa a linha inteira, então a auto-colocação empurrava a ação
para uma terceira linha e a linha virava um L com um buraco no meio.
Ancorada, ela volta para o lado do nome — que é onde a decisão é tomada. */
.consultant-page .home-row > :is(.home-row-due, .home-row-action, .home-row-none) {
grid-row: 1; grid-column: 2; align-self: center;
}
/* Título e total do bloco não cabem lado a lado num celular — viram duas
linhas em vez de se atropelarem. */
.consultant-page .fin-block-head,
.consultant-page .home-card-head { flex-direction: column; align-items: flex-start; gap: 3px; }
/* Seis meses de rótulo na curva só cabem em corpo menor. */
.consultant-page .cash-label em { font-size: 8.5px; letter-spacing: -.02em; }
.consultant-page .cash-label .micro { font-size: 9px; letter-spacing: .06em; }
.consultant-page #queueList { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.consultant-page .queue-title { font-size: 21px; }
/* O horizonte já se ajusta à largura (fitCashCalendar), então no celular a
grade cabe inteira — só o teto de altura muda. */
.consultant-page .fin-cal-grid { max-height: 170px; }
.consultant-page .fin-cal-foot { gap: 14px; }
.consultant-page .fin-cal-scale { margin-left: 0; }
}