/* ============================================================
Sist. Gest. Psicologia — Estilos
Paleta: azul-petróleo como cor primária (calma e sóbria, sem o
frio do azul corporativo puro), sobre neutros de ardósia levemente
azulados. As cores de status ficam em famílias de matiz bem
separadas — verde (confirmado), âmbar (aguardando), azul (realizada)
e coral (não compareceu) — pra serem distinguíveis num relance,
inclusive lado a lado num mesmo card.
Regra dos tons: "-50" é fundo, "-100" é borda/detalhe, "-700" é o
tom escuro para texto e botões. Todos os "-700" passam de 4.5:1 de
contraste sobre fundo claro (WCAG AA), assim como o --brand-500 com
texto branco. Ao trocar qualquer cor, refaça essa conta.
Design system (base visual global — fase UX/UI):
- Tipografia: Inter para a interface (números tabulares nos valores);
Comfortaa fica só na marca (.logo-text).
- Escalas: espaçamento --sp-*, tipos --text-*, raios --radius-*,
sombras --shadow-*, bordas --border/--border-strong, foco --ring.
- Componentes base: .btn (+ variantes/tamanhos), .input/select/textarea,
.badge (+ tons), .panel/cards, .data-table, .modal-*, .estado-vazio,
cabeçalhos de página (.topbar, .view-toolbar, .panel-header).
Telas específicas só herdam daqui; o redesenho tela a tela vem depois.
============================================================ */
:root {
/* Neutros — ardósia levemente azulada, harmoniza com o petróleo
sem virar cinza morto */
--ink-900: #16242B;
--ink-800: #22353E;
--ink-700: #334C57;
--ink-600: #445F6B;
--ink-500: #56707D; /* texto secundário — escurecido até passar 4.5:1
também sobre --brand-50 (item selecionado da lista) */
--ink-400: #93A8B0;
--ink-300: #BAC9CF;
--ink-200: #D9E3E7;
--ink-100: #ECF1F3;
--ink-50: #F6F9FA;
--bg: #F7FAFB;
--surface: #FFFFFF;
--surface-2: #F2F7F8;
--surface-3: #E6EFF1;
/* Marca — azul-petróleo */
--brand-50: #E9F4F5;
--brand-100: #B3DBDD; /* fundos e detalhes claros */
--brand-300: #6BB6BA;
--brand-500: #1B7E84; /* preenchimentos (aba ativa) — 4.9:1 com branco */
--brand-700: #12595F; /* texto, links e botões primários — 8.0:1 */
--brand-900: #0A3B40;
/* Folha — sucesso / sessão confirmada */
--leaf-50: #EDF6EC;
--leaf-100: #BADCB4;
--leaf-700: #2F6B33; /* 6.6:1 */
--leaf-900: #204A23; /* hover do botão de confirmação */
/* Sol — aviso / sessão aguardando */
--mint-50: #EAF6F7;
--mint-100: #A8DBDE;
--mint-700: #2E6E73;
--sun-50: #FDF4E3;
--sun-100: #F5D48C;
--sun-700: #8A5A12; /* 5.9:1 */
/* Coral — erro / não vai comparecer */
--rose-50: #FDEDEE;
--rose-100: #F3B3B8;
--rose-700: #A63744; /* 6.5:1 */
--rose-900: #7C2732; /* hover do botão destrutivo */
/* Azul — sessão realizada (matiz separada do petróleo da marca) */
--sky-50: #EBF2FC;
--sky-100: #B3CCEE;
--sky-700: #2A5490; /* 7.5:1 */
/* Semânticas (reaproveitam as famílias acima). "Informação" usa a
própria marca — uma matiz a menos deixa a interface mais coesa. */
--success: var(--leaf-700); --success-bg: var(--leaf-50);
--warning: var(--sun-700); --warning-bg: var(--sun-50);
--danger: var(--rose-700); --danger-bg: var(--rose-50);
--info: var(--brand-700); --info-bg: var(--brand-50);
/* Bordas: --border para divisórias e contornos de card (quase invisível),
--border-strong para controles (input, botão secundário). */
--border: var(--ink-100);
--border-strong: var(--ink-200);
--ring: 0 0 0 3px rgba(27, 126, 132, .22); /* anel de foco (brand-500) */
--radius-xs: 6px;
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--shadow-xs: 0 1px 2px rgba(22,36,43,.05);
--shadow-sm: 0 1px 3px rgba(22,36,43,.06), 0 4px 12px rgba(22,36,43,.05);
--shadow-md: 0 4px 12px rgba(22,36,43,.08), 0 12px 32px rgba(22,36,43,.08);
--shadow-lg: 0 24px 64px rgba(22,36,43,.18), 0 4px 12px rgba(22,36,43,.08);
/* Escala de espaçamento (base 4px). */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
/* Escala tipográfica. */
--text-xs: 0.72rem; /* ~11px: rótulos maiúsculos, metadados */
--text-sm: 0.8rem; /* ~12px: texto de apoio */
--text-base: 0.9rem; /* ~13.5px: texto de interface */
--text-md: 1rem; /* títulos de painel */
--text-lg: 1.2rem; /* títulos de seção */
--text-xl: 1.5rem; /* título de página */
--text-2xl: 1.9rem; /* número de destaque */
--font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-marca: "Comfortaa", var(--font-ui);
--dur: .15s;
--ease: cubic-bezier(.2, .7, .3, 1);
font-size: 15px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
background: var(--bg);
color: var(--ink-800);
font-family: var(--font-ui);
font-size: var(--text-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
max-width: 100%;
/* Rede de segurança: a página nunca deve rolar na horizontal. Quem arrisca
estourar a largura já tem rolagem própria (.table-scroll, .tarefas-carrossel)
ou vira coluna única no mobile — isto só garante que nada escape. */
overflow-x: hidden;
}
/* Nenhuma imagem ultrapassa o container que a segura. */
img { max-width: 100%; }
#app-root { min-height: 100vh; }
/* ---------- Tipografia ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; color: var(--ink-900); line-height: 1.25; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }
p { margin: 0; }
strong, b { font-weight: 600; }
.muted { color: var(--ink-500); font-size: var(--text-sm); }
/* Números que se comparam em coluna (valores, horários) não "dançam". */
.num, .kpi-value, .toolbar-total strong, .ponto-prev-valor, .data-table td, .ponto-total { font-variant-numeric: tabular-nums; }
/* Rótulo pequeno em caixa alta — o mesmo desenho em toda a interface. */
.rotulo, .kpi-label, .toolbar-total span,
.ficha-info-rotulo, .proxima-rotulo, .ponto-ajustes-titulo, .cal-dow, .pac-grupo, .data-table th {
font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500);
}
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--brand-100); color: var(--ink-900); }
/* Foco visível só no teclado: anel da marca, igual em botão, link e campo. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: var(--radius-xs); }
.input:focus-visible { outline: none; }
/* Barras de rolagem discretas (áreas internas: tabelas, listas, modais). */
.table-scroll, .pac-lista-itens, .modal-box, .sidebar, .mobile-nav-menu, .tarefas-carrossel { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
.table-scroll::-webkit-scrollbar, .pac-lista-itens::-webkit-scrollbar, .modal-box::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .tarefas-carrossel::-webkit-scrollbar { width: 8px; height: 8px; }
.table-scroll::-webkit-scrollbar-thumb, .pac-lista-itens::-webkit-scrollbar-thumb, .modal-box::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .tarefas-carrossel::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
/* ---------- Login ---------- */
.login-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background:
radial-gradient(circle at 15% 10%, var(--brand-100) 0%, transparent 45%),
radial-gradient(circle at 88% 12%, var(--sun-100) 0%, transparent 40%),
radial-gradient(circle at 88% 85%, var(--brand-50) 0%, transparent 45%),
var(--bg);
}
.login-card {
width: 100%;
max-width: 420px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
padding: var(--sp-8) var(--sp-7);
display: flex;
flex-direction: column;
gap: var(--sp-5);
position: relative;
overflow: hidden;
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.login-brand p { color: var(--ink-500); font-size: 0.85rem; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-error {
background: var(--danger-bg); color: var(--danger); padding: 10px 12px;
border-radius: var(--radius-sm); font-size: 0.85rem;
}
.login-demo { font-size: 0.85rem; color: var(--ink-700); background: var(--surface-2); border: 1px solid var(--ink-100); border-radius: var(--radius); padding: 12px 14px; }
.login-demo summary { cursor: pointer; font-weight: 700; color: var(--brand-700); }
.login-demo ul { margin: 10px 0 0; padding-left: 18px; }
.login-demo code { background: #fff; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--ink-100); }.login-change-note {
font-size: 0.88rem; color: var(--ink-700); line-height: 1.5;
background: var(--brand-50); border: 1px solid var(--brand-100);
border-radius: var(--radius-sm); padding: 10px 12px;
}
/* ---------- Campos de formulário ----------
Um desenho só para input, select e textarea: 40px de altura, borda
--border-strong, hover escurece a borda, foco = borda da marca + anel.
Estados: :disabled / .input-readonly (fundo cinza, sem interação),
.is-invalid (borda e anel em coral). */
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); color: var(--ink-700); font-weight: 500; min-width: 0; }
.field-label { display: block; }
.field-hint { font-weight: 400; color: var(--ink-500); font-size: var(--text-xs); }
.input {
font: inherit; font-size: 14px; line-height: 1.4; color: var(--ink-900); background: var(--surface);
border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
height: 40px; padding: 0 var(--sp-3); outline: none; width: 100%; min-width: 0;
transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.input::placeholder { color: var(--ink-400); }
.input:hover { border-color: var(--ink-300); }
.input:focus { border-color: var(--brand-500); box-shadow: var(--ring); }
.input:disabled, .input-readonly { background: var(--surface-2); color: var(--ink-500); cursor: not-allowed; border-color: var(--border); }
.input.is-invalid, .input:user-invalid { border-color: var(--rose-700); }
.input.is-invalid:focus, .input:user-invalid:focus { box-shadow: 0 0 0 3px rgba(166, 55, 68, .18); }
select.input {
appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
select.input:disabled { cursor: not-allowed; }
textarea.input { height: auto; padding: 10px var(--sp-3); resize: vertical; min-height: 84px; line-height: 1.5; }
input[type="date"].input, input[type="time"].input, input[type="month"].input { padding-right: 10px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-500); width: 16px; height: 16px; cursor: pointer; }
input[type="file"] { font: inherit; font-size: var(--text-sm); color: var(--ink-600); }
input[type="file"]::file-selector-button {
font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--ink-700);
background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
padding: 6px 12px; margin-right: 10px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--surface-2); }
/* Campos lado a lado dentro de um formulário. */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--sp-3) var(--sp-4); }
/* ---------- Botões ----------
Hierarquia: .btn-primary (a ação principal da tela, no máximo uma por
contexto) → .btn-ghost (secundária, contorno) → .btn-subtle (terciária,
sem contorno) → .btn-link (texto). Semânticos: .btn-success, .btn-danger.
Tamanhos: .btn-sm 32px, padrão 38px, .btn-lg 46px. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 38px; padding: 0 var(--sp-4); border-radius: var(--radius-sm);
font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -.005em; line-height: 1;
border: 1px solid transparent; background: transparent; color: var(--ink-800);
cursor: pointer; user-select: none; white-space: nowrap;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform .06s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn .icn { width: 16px; height: 16px; }
.btn-primary { background: var(--brand-700); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--brand-900); }
.btn-ghost { background: var(--surface); color: var(--ink-700); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-300); color: var(--ink-900); }
.btn-subtle { background: transparent; color: var(--ink-700); }
.btn-subtle:hover { background: var(--surface-3); color: var(--ink-900); }
.btn-link { background: transparent; color: var(--brand-700); padding: 0 4px; height: auto; }
.btn-link:hover { text-decoration: underline; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--rose-900); }
.btn-danger-ghost { background: var(--surface); color: var(--danger); border-color: var(--rose-100); }
.btn-danger-ghost:hover { background: var(--danger-bg); }
.btn-success { background: var(--leaf-700); color: #fff; }
.btn-success:hover { background: var(--leaf-900); }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: 13px; border-radius: var(--radius-xs); }
.btn-lg { height: 46px; padding: 0 var(--sp-6); font-size: 15px; }
.btn-icone { width: 38px; padding: 0; }
.btn-sm.btn-icone { width: 32px; }
.icon-btn-topbar { padding: 0 10px; }
/* Grupo de botões-pílula que se excluem (Semana/Mês, filtros). */
.btn-grupo { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
/* ---------- Icons ---------- */
.icn { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Ícones do menu são sólidos, não de traço — precisam desfazer o padrão acima.
A especificidade dupla (.icn.icn-nav) é o que faz isso valer. */
.icn.icn-nav { fill: currentColor; stroke: none; }
/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; gap: var(--sp-5); padding: var(--sp-5); align-items: flex-start; max-width: 1720px; margin: 0 auto; }
.sidebar {
width: 172px; flex-shrink: 0; color: var(--ink-700);
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3);
position: sticky; top: var(--sp-5);
/* Com ícone em cima do rótulo cada item ficou mais alto, e em tela baixa o
menu passa da altura da janela. Sendo sticky, o fim dele ficaria
inalcançável — daí o limite de altura com rolagem própria. */
max-height: calc(100vh - 40px); overflow-y: auto;
}
.sidebar-brand {
display: flex; align-items: center; justify-content: center; padding: 4px 10px 14px;
margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
}
/* "+ Novo": pílula escura fixa no topo, acima da lista — a única ação da
barra lateral que não é navegação, então precisa se destacar das outras. */
.sidebar-novo-wrap { position: relative; margin-bottom: 12px; }
.sidebar-novo {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--brand-900); color: #fff; border: none; border-radius: 999px;
padding: 11px 14px; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
transition: background .15s ease;
}
.sidebar-novo .icn { width: 16px; height: 16px; }
.sidebar-novo:hover, .sidebar-novo.active { background: var(--brand-700); }
.sidebar-novo-menu {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
background: var(--surface); border: 1px solid var(--brand-100); border-radius: var(--radius-sm);
box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.sidebar-novo-item {
text-align: left; background: none; border: none; color: var(--ink-700); font: inherit;
padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem;
}
.sidebar-novo-item:hover { background: var(--surface-2); color: var(--brand-700); }
.sidebar-alert {
background: var(--sun-50); border: 1px solid var(--sun-100); border-radius: var(--radius-sm);
padding: 10px 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
}
.sidebar-alert-title { font-size: 0.78rem; font-weight: 700; color: var(--sun-700); }
.sidebar-alert-item { display: flex; flex-direction: column; gap: 1px; }
/* Nome pode ser longo numa coluna de 168px — corta com reticências em vez de
empurrar a sidebar. */
.sidebar-alert-item strong {
font-size: 0.8rem; color: var(--ink-900); line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-alert-item span { font-size: 0.72rem; color: var(--ink-600); line-height: 1.3; }
/* Aniversário do dia em destaque — é o único que pede ação hoje. */
.sidebar-alert-item.is-hoje strong { color: var(--sun-700); }
.sidebar-alert-mais {
background: none; border: none; padding: 2px 0 0; font: inherit; cursor: pointer;
font-size: 0.72rem; font-weight: 700; color: var(--sun-700); text-align: left;
}
.sidebar-alert-mais:hover { text-decoration: underline; }
/* Menu: ícone em cima, rótulo embaixo, item centralizado. O ícone grande é
quem identifica a tela de relance; o rótulo confirma. */
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-link {
background: none; border: none; color: var(--ink-700); font: inherit; font-weight: 500;
padding: 8px 6px 7px; border-radius: var(--radius-sm); cursor: pointer;
font-size: var(--text-xs); line-height: 1.2; text-align: center;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
position: relative;
transition: background var(--dur), color var(--dur);
}
.sidebar-link-texto { display: block; }
.sidebar-link .icn { color: var(--ink-500); width: 22px; height: 22px; transition: color var(--dur); }
.sidebar-link:hover { background: var(--surface-2); color: var(--ink-900); }
.sidebar-link:hover .icn { color: var(--brand-500); }
.sidebar-link.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.sidebar-link.active .icn { color: var(--brand-700); }
/* Sininho da Central de Tarefas: no canto do item, já que na coluna não há
mais um "fim da linha" pra encostar. */
.nav-badge {
position: absolute; top: 6px; right: 8px;
background: var(--rose-700); color: #fff; font-size: 0.66rem; font-weight: 700;
line-height: 1; border-radius: 999px; padding: 3px 7px;
}
.sidebar-link.active .nav-badge { background: var(--brand-700); color: #fff; }
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: var(--sp-4); }
/* ---------- Cabeçalho de página ----------
Título da tela à esquerda (h2 + pílula do mês + ação rápida opcional);
à direita o seletor de mês, os alternadores de privacidade e o usuário. */
.topbar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: var(--sp-3); min-height: 44px; padding: 0 var(--sp-1);
}
/* Linha flexível: permite encaixar uma ação grande ao lado do H2 da tela. */
.topbar-title { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.topbar-title h2 { font-size: var(--text-xl); }
.topbar-month-label {
font-size: var(--text-xs); font-weight: 600; color: var(--ink-600);
background: var(--surface); border: 1px solid var(--border-strong);
padding: 4px 10px; border-radius: 999px; letter-spacing: .01em;
}
.topbar-right { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.topbar-right > select.input { width: auto; height: 36px; }
.topbar-right .btn { height: 36px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 0 var(--sp-2) 0 var(--sp-1); }
.icon-circle {
width: 32px; height: 32px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700);
display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; flex-shrink: 0;
}
.user-chip-text { display: flex; flex-direction: column; line-height: 1.25; }
.user-chip-text strong { font-size: var(--text-sm); font-weight: 600; color: var(--ink-900); }
.user-chip-text span { font-size: var(--text-xs); color: var(--ink-500); }
.content {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5);
position: relative; overflow: hidden;
/* Sem min-width:0, um filho largo (tabela de muitas colunas dentro de
.table-scroll) empurra este flex item além do espaço disponível em vez
de deixar SÓ o .table-scroll rolar por dentro — é a causa raiz do
estouro horizontal, não só um sintoma pra mascarar no body. */
min-width: 0;
}
/* ---------- Início (dashboard): resumo executivo do dia ----------
Cabeçalho (saudação + data + atalho) e uma grade de duas colunas: a
principal traz o que precisa de atenção, o mês (profissional) e as
tarefas; a lateral traz o dia (números, próxima sessão, lista de hoje).
Poucos painéis, seções separadas por título e divisória. */
.dash-tela { gap: var(--sp-5); }
.dash-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.dash-hello { display: flex; flex-direction: column; gap: 2px; }
.dash-hello h2 { font-size: var(--text-xl); }
.dash-hello-date { color: var(--ink-500); font-size: var(--text-sm); }
.dash-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: var(--sp-4); align-items: start; }
.dash-principal, .dash-lateral { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dash-lateral { position: sticky; top: var(--sp-5); }
/* Título de seção dentro dos painéis: h3 + contagem + ação à direita. */
.dash-secao-titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.dash-secao-titulo h3 { font-size: var(--text-md); display: inline-flex; align-items: center; gap: 8px; }
.dash-secao-titulo h4 { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.dash-secao-titulo.is-sub { margin-top: var(--sp-2); }
.dash-secao-contagem {
display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
border-radius: 999px; background: var(--surface-3); color: var(--ink-600); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.dash-secao-contagem:empty { display: none; }
/* ----- Precisa de atenção ----- */
.dash-atencao { display: flex; flex-direction: column; gap: var(--sp-5); }
.aviso-bloco { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid transparent; }
.aviso-bloco.is-atencao { background: var(--sun-50); border-color: var(--sun-100); }
.aviso-bloco.is-urgente { background: var(--rose-50); border-color: var(--rose-100); }
.aviso-bloco.is-tranquilo { background: var(--leaf-50); border-color: var(--leaf-100); }
.aviso-marca {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
font-size: .95rem; font-weight: 700; background: rgba(255,255,255,.7);
}
.aviso-bloco.is-atencao .aviso-marca { color: var(--sun-700); }
.aviso-bloco.is-urgente .aviso-marca { color: var(--rose-700); }
.aviso-bloco.is-tranquilo .aviso-marca { color: var(--leaf-700); }
.aviso-texto { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.aviso-texto strong { font-size: var(--text-base); color: var(--ink-900); }
.aviso-bloco.is-atencao .aviso-texto strong { color: var(--sun-700); }
.aviso-bloco.is-urgente .aviso-texto strong { color: var(--rose-700); }
.aviso-bloco.is-tranquilo .aviso-texto strong { color: var(--leaf-700); }
.aviso-resumo { font-size: var(--text-sm); color: var(--ink-600); }
.aviso-bloco .btn { flex-shrink: 0; }
.dash-alertas { display: flex; flex-direction: column; gap: var(--sp-5); }
.alertas-secao { display: flex; flex-direction: column; gap: var(--sp-3); }
.alertas-secao-titulo {
display: flex; align-items: center; gap: 8px; margin: 0;
font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border);
}
/* A cor do título é o que separa os dois grupos de relance: o de hoje puxa
pro coral do "vencido", o da semana pro âmbar do "a vencer". */
.alertas-secao.is-hoje .alertas-secao-titulo { color: var(--danger); }
.alertas-secao.is-semana .alertas-secao-titulo { color: var(--warning); }
.alertas-contagem { color: #fff; border-color: transparent; }
.alertas-secao.is-hoje .alertas-contagem { background: var(--danger); }
.alertas-secao.is-semana .alertas-contagem { background: var(--warning); }
/* Grupos de alerta (renderAlertPanel): dentro do Início perdem a caixa
colorida — viram um subtítulo e a lista de linhas. */
.dash-alertas .panel.alert-panel, .dash-alertas .alert-panel.is-danger { background: transparent; border: none; box-shadow: none; padding: 0; }
.dash-alertas .alert-panel .panel-header { margin-bottom: 4px; }
.dash-alertas .alert-panel .panel-header h3 { font-size: var(--text-base); font-weight: 600; color: var(--ink-800); }
.dash-alertas .alert-panel > .muted { margin-bottom: var(--sp-2); }
.dash-alertas .alert-list { margin-top: var(--sp-2); gap: 6px; }
.dash-alertas .alert-item { border-color: var(--border); padding: 10px 12px; }
.dash-alertas .alert-item.is-overdue { border-left: 3px solid var(--danger); }
.dash-alertas .alertas-secao.is-semana .alert-item { border-left: 3px solid var(--sun-100); }
.dash-alertas .alert-item strong { font-size: var(--text-base); }
.dash-alertas .alert-item-meta { font-size: var(--text-sm); }
.dash-alertas .alert-badge { background: var(--sun-50); color: var(--sun-700); border-color: var(--sun-100); }
.dash-alertas .alert-panel.is-danger .alert-badge, .dash-alertas .alert-badge.is-overdue { background: var(--rose-50); color: var(--rose-700); border-color: var(--rose-100); }
/* ----- Hoje (lateral) ----- */
.dash-hoje { display: flex; flex-direction: column; gap: var(--sp-3); }
.hoje-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.hoje-numero {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-3);
background: var(--surface); border: none; border-right: 1px solid var(--border); font: inherit; text-align: left; cursor: pointer; min-width: 0;
transition: background var(--dur);
}
.hoje-numero:last-child { border-right: none; }
.hoje-numero:hover { background: var(--surface-2); }
.hoje-numero-valor { font-size: var(--text-2xl); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.hoje-numero-rotulo { font-size: var(--text-xs); color: var(--ink-500); line-height: 1.3; }
.hoje-numero.is-brand .hoje-numero-valor { color: var(--brand-700); }
.hoje-numero.is-sun .hoje-numero-valor { color: var(--sun-700); }
.proxima-sessao {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--brand-50); border: 1px solid var(--brand-100);
font: inherit; text-align: left; cursor: pointer;
transition: border-color var(--dur), background var(--dur);
}
.proxima-sessao:hover { border-color: var(--brand-300); }
.proxima-icone { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-700); }
.proxima-icone .icn { width: 17px; height: 17px; }
.proxima-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.proxima-valor { font-size: var(--text-base); color: var(--ink-900); overflow-wrap: anywhere; }
.proxima-sessao.is-vazia { background: var(--surface-2); border-color: var(--border); }
.proxima-sessao.is-vazia .proxima-icone { color: var(--ink-400); }
.proxima-sessao.is-vazia .proxima-valor { color: var(--ink-500); font-weight: 400; }
.hoje-sessoes { display: flex; flex-direction: column; }
.hoje-sessao {
display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px;
padding: 8px 6px; background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0;
font: inherit; text-align: left; cursor: pointer; transition: background var(--dur);
}
.hoje-sessao:last-of-type { border-bottom: none; }
.hoje-sessao:hover { background: var(--surface-2); }
.hoje-sessao-hora { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; font-size: var(--text-base); }
.hoje-sessao-quem { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hoje-sessao-quem strong { font-size: var(--text-base); font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoje-sessao-meta { font-size: var(--text-xs); color: var(--ink-500); }
.hoje-sessao .badge { padding: 2px 8px; }
.hoje-sessao.is-passada .hoje-sessao-hora, .hoje-sessao.is-passada strong { color: var(--ink-500); }
.hoje-sessao.is-cancelada strong { text-decoration: line-through; color: var(--ink-500); }
.hoje-mais { align-self: flex-start; margin-top: var(--sp-2); }
/* ----- Tarefas (pendências) ----- */
.dash-pendencias { display: flex; flex-direction: column; gap: var(--sp-5); }
.dash-tarefas { display: flex; flex-direction: column; gap: var(--sp-2); }
.tarefas-resumo { display: flex; flex-direction: column; }
.tarefa-linha {
display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px;
padding: 8px 6px; background: none; border: none; border-bottom: 1px solid var(--border);
font: inherit; text-align: left; cursor: pointer; transition: background var(--dur);
}
.tarefa-linha:last-of-type { border-bottom: none; }
.tarefa-linha:hover { background: var(--surface-2); }
.tarefa-linha-marca {
width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ink-300); display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; color: #fff; background: transparent;
}
.tarefa-linha-marca.is-feita { background: var(--leaf-700); border-color: var(--leaf-700); }
.tarefa-linha-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tarefa-linha-titulo { font-size: var(--text-base); font-weight: 500; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-linha-desc { font-size: var(--text-xs); color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-linha.is-feita .tarefa-linha-titulo { color: var(--ink-500); text-decoration: line-through; }
.tarefa-linha .badge { padding: 2px 8px; }
.dash-tarefas > .btn-link { align-self: flex-start; }
/* ----- Meu mês (profissional) ----- */
.dash-meu-mes { display: flex; flex-direction: column; gap: var(--sp-3); }
.dash-meu-mes .kpi-card { box-shadow: none; }
/* Responsivo: abaixo de 1000px a lateral desce para baixo da atenção. */
@media (max-width: 1000px) {
.dash-grade { grid-template-columns: 1fr; }
.dash-lateral { position: static; }
.dash-lateral { order: 1; }
.dash-principal { order: 2; display: contents; }
.dash-principal > .aviso-bloco { order: 0; }
.dash-principal > .dash-atencao { order: 2; }
.dash-principal > .dash-meu-mes { order: 3; }
.dash-principal > .dash-pendencias { order: 4; }
}
@media (max-width: 600px) {
.dash-cabecalho .btn { width: 100%; }
.hoje-numeros { grid-template-columns: 1fr 1fr 1fr; }
.hoje-numero { padding: 10px 8px; }
.hoje-numero-valor { font-size: var(--text-xl); }
.hoje-sessao { grid-template-columns: 44px minmax(0, 1fr); }
.hoje-sessao .badge { grid-column: 2; justify-self: start; }
.aviso-bloco .btn { width: 100%; }
}
/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; }
.kpi-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-xs);
padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.kpi-label { }
.kpi-value { font-size: var(--text-xl); font-weight: 600; color: var(--ink-900); letter-spacing: -.02em; }
.kpi-positive .kpi-value { color: var(--success); }
/* ---------- Financeiro: painel do mês ----------
Cabeçalho (mês + ‹ Hoje › + lançar), resumo com saldo em destaque,
faixa dos pacotes ativos (pendências) e as movimentações. Reaproveita
.agenda-periodo/.agenda-nav e .dash-secao-titulo do Design System. */
.fin-tela { gap: var(--sp-4); }
.fin-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.fin-acoes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* Resumo: saldo grande à esquerda (fundo tingido pelo sinal), faturamento e
saídas ao lado, divididos por hairlines; meta embaixo. */
.fin-resumo { padding: 0; overflow: hidden; }
.fin-resumo-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.fin-numero { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-5); border-right: 1px solid var(--border); min-width: 0; }
.fin-numero:last-child { border-right: none; }
.fin-numero-valor { font-size: var(--text-xl); font-weight: 600; letter-spacing: -.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.fin-numero-nota { font-size: var(--text-xs); color: var(--ink-500); line-height: 1.35; }
.fin-numero.is-destaque .fin-numero-valor { font-size: var(--text-2xl); }
.fin-numero.is-destaque.is-positivo { background: var(--leaf-50); }
.fin-numero.is-destaque.is-positivo .fin-numero-valor, .fin-numero.is-destaque.is-positivo .rotulo { color: var(--leaf-700); }
.fin-numero.is-destaque.is-negativo { background: var(--rose-50); }
.fin-numero.is-destaque.is-negativo .fin-numero-valor, .fin-numero.is-destaque.is-negativo .rotulo { color: var(--rose-700); }
.fin-numero.is-entrada .fin-numero-valor { color: var(--leaf-700); }
.fin-numero.is-saida .fin-numero-valor { color: var(--rose-700); }
.fin-meta { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid var(--border); background: var(--ink-50); }
.fin-meta-linha { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.fin-meta-valor { font-size: var(--text-sm); color: var(--ink-700); font-variant-numeric: tabular-nums; margin-right: auto; }
.fin-meta-barra { margin: 0; height: 8px; }
.fin-meta-barra .progress-fill.is-concluido { background: var(--leaf-700); }
/* Pacotes ativos: quatro itens numa faixa, hairlines entre eles. */
.fin-pacotes { display: flex; flex-direction: column; gap: var(--sp-3); }
.fin-secao-apoio { font-size: var(--text-sm); color: var(--ink-500); }
.fin-itens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.fin-item { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3) var(--sp-4); border-right: 1px solid var(--border); min-width: 0; }
.fin-item:last-child { border-right: none; }
.fin-item-valor { font-size: var(--text-lg); font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fin-item.is-positivo .fin-item-valor { color: var(--leaf-700); }
.fin-item.is-aguardando .fin-item-valor { color: var(--sun-700); }
.fin-item.is-negativo { background: var(--rose-50); }
.fin-item.is-negativo .fin-item-valor { color: var(--rose-700); }
/* Movimentações: entradas e saídas lado a lado em telas largas. */
.fin-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(680px, 100%), 1fr)); gap: var(--sp-4); align-items: start; }
.fin-movimentos { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.fin-movimentos .table-scroll { max-height: 60vh; }
.fin-col-data { white-space: nowrap; }
.fin-col-obs { color: var(--ink-600); font-size: var(--text-sm); max-width: 260px; overflow-wrap: anywhere; }
.fin-col-valor { font-weight: 600; white-space: nowrap; }
td.fin-col-valor.is-entrada { color: var(--leaf-700); }
td.fin-col-valor.is-saida { color: var(--rose-700); }
.fin-tipo { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
@media (max-width: 900px) {
.fin-resumo-grade { grid-template-columns: 1fr 1fr; }
.fin-numero.is-destaque { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid var(--border); }
.fin-itens { grid-template-columns: 1fr 1fr; }
.fin-item:nth-child(2) { border-right: none; }
.fin-item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 600px) {
.fin-cabecalho { flex-direction: column; align-items: stretch; }
.fin-acoes { display: grid; grid-template-columns: 1fr 1fr; }
.fin-acoes .agenda-nav { grid-column: 1 / -1; }
.fin-acoes .agenda-nav-hoje { flex: 1; }
.fin-numero { padding: var(--sp-4); }
.fin-numero.is-destaque .fin-numero-valor { font-size: var(--text-xl); }
.fin-col-obs { max-width: 160px; }
}
/* ---------- Configurações: grupos de assunto ----------
Navegação por grupo no topo (uma linha, rola na horizontal dentro de si
no celular) e um painel só por grupo, com seções separadas por hairlines.
Cada seção: título + descrição + ações à direita; o "Salvar" fica no pé
do próprio formulário. Seções sensíveis levam uma faixa âmbar discreta. */
.cfg-tela { gap: var(--sp-4); }
.cfg-nav { display: flex; gap: 4px; padding: 3px; background: var(--surface-3); border-radius: var(--radius-sm); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.cfg-nav::-webkit-scrollbar { display: none; }
.cfg-nav-item {
font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--ink-600); background: transparent; border: none;
padding: 8px 14px; border-radius: var(--radius-xs); cursor: pointer; white-space: nowrap; line-height: 1.2; flex-shrink: 0;
transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}
.cfg-nav-item:hover { color: var(--ink-900); }
.cfg-nav-item.active { background: var(--surface); color: var(--ink-900); font-weight: 600; box-shadow: var(--shadow-xs); }
.cfg-grupo { padding: 0; overflow: hidden; }
.cfg-grupo-cabecalho { padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.cfg-grupo-titulo { font-size: var(--text-lg); }
.cfg-grupo-descricao { font-size: var(--text-sm); color: var(--ink-500); }
.cfg-secao { padding: var(--sp-5); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; position: relative; }
.cfg-secao:last-child { border-bottom: none; }
.cfg-secao.is-sensivel { box-shadow: inset 3px 0 0 var(--sun-100); }
.cfg-secao-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.cfg-secao-titulo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.cfg-secao-titulo h3 { font-size: var(--text-md); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-secao-descricao { font-size: var(--text-sm); color: var(--ink-500); line-height: 1.5; max-width: 72ch; }
.cfg-secao-acoes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; flex-shrink: 0; }
.cfg-subtitulo { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); margin-top: var(--sp-2); }
/* Formulário: campos em grade e a ação alinhada à esquerda logo abaixo. */
.cfg-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.cfg-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--sp-3) var(--sp-4); max-width: 960px; }
.cfg-campos .field { min-width: 0; max-width: 440px; }
.cfg-nota { font-size: var(--text-xs); color: var(--ink-500); }
.cfg-form-acoes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cfg-form-acoes.is-inicio { margin-top: 0; }
/* Campo + botão numa linha só (criar grupo, escolher profissional da grade). */
.cfg-inline { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.cfg-inline .field { flex: 1 1 240px; max-width: 420px; }
.cfg-filtros { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.cfg-filtros .field { flex: 1 1 160px; max-width: 280px; }
/* Listas de itens configuráveis (grupos, links, mensagens, faixas da grade). */
.cfg-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.cfg-linha {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.cfg-linha.is-inativa { background: var(--ink-50); }
.cfg-linha.is-inativa strong { color: var(--ink-600); }
.cfg-linha-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cfg-linha-info strong { font-size: var(--text-base); font-weight: 600; color: var(--ink-900); }
.cfg-linha-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-linha-meta { font-size: var(--text-xs); color: var(--ink-500); }
.cfg-linha-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.cfg-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-xs); color: var(--ink-600); background: var(--ink-50); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 3px 8px; overflow-wrap: anywhere; display: inline-block; max-width: 100%; }
.cfg-citacao { font-size: var(--text-sm); color: var(--ink-600); font-style: italic; line-height: 1.5; }
.cfg-grade-campos { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(100px, 1fr) minmax(100px, 1fr); gap: var(--sp-3); flex: 1; min-width: 0; }
.cfg-grade-linha { align-items: flex-end; }
.cfg-logo { display: flex; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
.cfg-logo-previa { max-height: 56px; max-width: 200px; border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 6px; background: var(--surface); }
.cfg-logo .cfg-form { flex: 1 1 280px; }
.cfg-col-detalhe { font-size: var(--text-xs); color: var(--ink-600); max-width: 360px; overflow-wrap: anywhere; }
.cfg-secao .table-scroll { max-height: 60vh; }
@media (max-width: 600px) {
.cfg-grupo-cabecalho, .cfg-secao { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.cfg-secao-acoes { width: 100%; }
.cfg-secao-acoes .btn { flex: 1 1 auto; }
.cfg-form-acoes .btn, .cfg-inline .btn { width: 100%; }
.cfg-inline .field, .cfg-filtros .field { max-width: none; flex-basis: 100%; }
.cfg-grade-campos { grid-template-columns: 1fr 1fr; }
.cfg-grade-campos .field:first-child { grid-column: 1 / -1; }
.cfg-linha-acoes { width: 100%; }
.cfg-linha-acoes .btn { flex: 1 1 auto; }
}
/* ---------- Alerta de pagamento ---------- */
/* .panel.alert-panel (não só .alert-panel): o elemento sempre tem as duas
classes juntas (ver renderAlertPanel) e a regra genérica .panel — mais
abaixo no arquivo — tem a mesma especificidade; sem o .panel aqui na
frente, ela ganhava por ordem e o amarelo nunca aparecia. */
.panel.alert-panel { border-color: var(--sun-100); background: var(--sun-50); }
/* Alerta com tom mais urgente (ex.: Pagamentos a vencer) — vermelho da
paleta desde o início, não só quando um item individual está vencido. */
.alert-panel.is-danger { border-color: var(--rose-100); background: var(--rose-50); }
.alert-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.alert-item {
background: var(--surface); border: 1px solid var(--sun-100); border-radius: var(--radius-sm);
padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.alert-panel.is-danger .alert-item { border-color: var(--rose-100); }
.alert-item.is-overdue { border-color: var(--rose-100); }
.alert-item strong { font-size: 0.87rem; color: var(--ink-900); }
.alert-item-info {
flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.alert-item-meta { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--ink-600); }
.alert-item-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alert-badge {
font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
background: var(--warning-bg); color: var(--warning);
}
.alert-panel.is-danger .alert-badge { background: var(--danger-bg); color: var(--danger); }
.alert-badge.is-overdue { background: var(--danger-bg); color: var(--danger); }
/* ---------- Abas de situação (Pacientes & Planos) ---------- */
.situacao-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.situacao-tab {
background: var(--surface); border: 1px solid var(--border-strong); color: var(--ink-700);
font: inherit; font-size: var(--text-sm); font-weight: 600; padding: 7px 14px; line-height: 1.2;
border-radius: 999px; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.situacao-tab:hover { background: var(--surface-2); border-color: var(--ink-300); }
.situacao-tab.active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
/* ---------- Pacientes: lista à esquerda + ficha à direita ---------- */
.pac-tela { gap: var(--sp-4); }
.pac-situacoes { margin-bottom: 0; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.situacao-tab-contagem {
display: inline-flex; align-items: center; justify-content: center; margin-left: 6px;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
background: var(--surface-3); color: var(--ink-600);
}
.situacao-tab.active .situacao-tab-contagem { background: rgba(255,255,255,.22); color: #fff; }
.situacao-tab.is-zerada:not(.active) { color: var(--ink-500); }
.pac-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.pac-lista { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: var(--sp-5); }
.pac-lista-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.pac-lista-titulo { display: flex; align-items: center; gap: 8px; }
.pac-lista-titulo strong { font-size: var(--text-md); font-weight: 600; color: var(--ink-900); }
.pac-lista-contagem {
display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
border-radius: 999px; background: var(--surface-3); color: var(--ink-600); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pac-lista-acoes { display: flex; align-items: center; gap: 6px; }
/* Caixa de busca com lupa desenhada no próprio campo. */
.pac-pesquisa .input {
width: 100%; padding-left: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: 11px center;
}
.pac-pesquisa .input::-webkit-search-cancel-button { cursor: pointer; }
.pac-filtro-grupo .input { width: 100%; }
.pac-lista-itens { display: flex; flex-direction: column; max-height: calc(100vh - 340px); min-height: 160px; overflow-y: auto; margin: 0 calc(-1 * var(--sp-2)); padding: 0 var(--sp-2); }
/* Título do grupo por profissional — clicar minimiza/expande o grupo */
.pac-grupo {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
background: none; border: none; font: inherit; cursor: pointer; width: 100%;
padding: 12px 6px 6px; text-align: left; border-radius: var(--radius-xs);
color: var(--ink-500);
position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.pac-grupo:hover { color: var(--brand-700); }
.pac-grupo-nome { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pac-grupo-seta { width: 10px; font-size: 10px; color: var(--ink-400); }
.pac-grupo-contagem { font-size: var(--text-xs); font-weight: 600; color: var(--ink-400); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.pac-item {
text-align: left; background: none; border: none;
font: inherit; cursor: pointer; padding: 8px 8px; width: 100%;
display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm);
transition: background var(--dur);
}
.pac-item + .pac-item { margin-top: 1px; }
.pac-item:hover { background: var(--surface-2); }
.pac-item.active { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-500); }
.pac-item-avatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-3); color: var(--ink-600); font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.pac-item.active .pac-item-avatar { background: var(--brand-100); color: var(--brand-700); }
.pac-item-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pac-item strong { font-size: var(--text-base); font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pac-item.active strong { color: var(--brand-700); }
.pac-item-meta { font-size: var(--text-xs); color: var(--ink-500); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pac-item-alerta { margin-left: 5px; font-size: .8em; }
.pac-item-situacao { flex-shrink: 0; }
.pac-item-situacao .badge { padding: 2px 7px; }
.pac-item.is-arquivado strong { color: var(--ink-600); }
.pac-item.is-arquivado .pac-item-avatar { opacity: .7; }
/* ---------- Ficha do paciente ----------
Um painel só; dentro dele, cabeçalho (avatar + nome + etiquetas + ações),
destaques, e seções separadas por divisórias — sem caixa dentro de caixa. */
.pac-ficha { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ficha { padding: 0; overflow: hidden; }
.ficha-cabecalho { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.ficha-topo { display: flex; align-items: flex-start; gap: var(--sp-4); min-width: 0; }
.ficha-avatar {
width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100);
font-size: 1.1rem; font-weight: 600; letter-spacing: .02em;
}
.ficha-identidade { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ficha-nome { font-size: var(--text-xl); line-height: 1.15; overflow-wrap: anywhere; }
.ficha-apoio { font-size: var(--text-sm); color: var(--ink-500); }
.ficha-etiquetas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Ações: uma barra com quebra; a destrutiva fica depois de um separador. */
.ficha-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.ficha-acoes-separador { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; }
.ficha-excluir { color: var(--ink-500); }
.ficha-excluir:hover { color: var(--danger); background: var(--danger-bg); }
/* Destaques: quatro dados em faixa cinza clara, logo abaixo do cabeçalho. */
.ficha-destaques {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--sp-3) var(--sp-5);
padding: var(--sp-4) var(--sp-5); background: var(--ink-50); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ficha-info.is-destaque .ficha-info-valor { font-size: var(--text-md); font-weight: 600; color: var(--ink-900); }
.ficha-secao { padding: var(--sp-5); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.ficha-secao:last-child { border-bottom: none; }
.ficha-secao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ficha-secao-cabecalho h3 { font-size: var(--text-md); }
.ficha-secao-apoio { font-size: var(--text-sm); color: var(--ink-500); }
.ficha-subtitulo { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); margin-top: var(--sp-2); }
.ficha-duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ficha-duas-colunas .ficha-secao + .ficha-secao { border-left: 1px solid var(--border); }
.ficha-duas-colunas .ficha-secao { border-bottom: 1px solid var(--border); }
.ficha-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--sp-3) var(--sp-5); }
.ficha-info-grid.is-compacto { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.ficha-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ficha-info.is-largo { grid-column: 1 / -1; }
.ficha-info-valor { font-size: var(--text-base); color: var(--ink-800); overflow-wrap: anywhere; line-height: 1.4; }
.ficha-info-valor.is-vazio { color: var(--ink-400); }
.ficha-frequencia-resumo { font-size: var(--text-base); }
.ficha-frequencia-resumo strong { color: var(--ink-900); }
.ficha-progresso { margin: 0 0 var(--sp-2); height: 8px; }
.ficha-progresso .progress-fill.is-concluido { background: var(--leaf-700); }
.ficha-secao.is-sessoes .btn { align-self: flex-start; }
/* Avisos em linha (pendência de evolução, erro de carga, motivos). */
.aviso-inline { font-size: var(--text-sm); line-height: 1.5; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.aviso-inline.is-warning { background: var(--sun-50); color: var(--sun-700); border-color: var(--sun-100); }
.aviso-inline.is-danger { background: var(--rose-50); color: var(--rose-700); border-color: var(--rose-100); }
.aviso-inline.is-neutral { background: var(--surface-2); color: var(--ink-700); border-color: var(--border); display: grid; gap: var(--sp-3); }
/* Registros clínicos e documentos: linhas, não caixas. */
.registros-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.registro-item {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
transition: border-color var(--dur);
}
.registro-item:hover { border-color: var(--ink-300); }
.registro-item.is-rascunho { border-style: dashed; }
.registro-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.registro-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.registro-titulo strong { font-size: var(--text-base); font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; }
.registro-meta { font-size: var(--text-xs); color: var(--ink-500); }
.registro-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) {
.pac-layout { grid-template-columns: 1fr; }
.pac-lista { position: static; }
.pac-lista-itens { max-height: 38vh; }
.ficha-duas-colunas .ficha-secao + .ficha-secao { border-left: none; }
}
@media (max-width: 600px) {
.ficha-cabecalho, .ficha-secao, .ficha-destaques { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.ficha-avatar { width: 44px; height: 44px; border-radius: 12px; font-size: .95rem; }
.ficha-nome { font-size: var(--text-lg); }
.ficha-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ficha-acoes .btn { width: 100%; white-space: normal; height: auto; min-height: 38px; padding: 8px 10px; line-height: 1.2; }
.ficha-acoes-separador { display: none; }
.ficha-destaques { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.registro-acoes { width: 100%; }
}
/* Caixa de pesquisa de paciente (Pacientes & Planos) */
.pesquisa-paciente { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pesquisa-paciente .input { width: 100%; max-width: 230px; }
.pesquisa-lupa { opacity: 0.55; font-size: 0.9rem; }
/* ---------- Painéis (cards) e tabelas ----------
.panel é o card base: superfície branca, borda quase invisível, raio
médio, sombra mínima. Variantes: .panel-suave (sem contorno), .is-clicavel
(hover eleva). Cabeçalho: .panel-header (h3 + apoio + ações à direita). */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); padding: var(--sp-5); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.panel-header h3 { font-size: var(--text-md); }
.panel-header span { font-size: var(--text-sm); color: var(--ink-500); font-weight: 500; }
.panel-header .btn { flex-shrink: 0; }
.panel-acoes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* Barra de ferramentas da tela: título/resumo à esquerda, filtros e ações à direita. */
.view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.toolbar-total { display: flex; flex-direction: column; gap: 2px; margin-right: var(--sp-5); }
.toolbar-total strong { font-size: var(--text-lg); font-weight: 600; color: var(--ink-900); letter-spacing: -.01em; }
/* max-height + overflow-y faz a barra horizontal ficar sempre visível logo
abaixo das linhas carregadas, em vez de só aparecer no fim de uma lista
comprida (senão só dava pra ver rolando a página inteira até o final). */
.table-scroll { overflow-x: auto; overflow-y: auto; max-height: 65vh; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-base); }
.data-table th {
text-align: left; padding: 10px var(--sp-3); border-bottom: 1px solid var(--border);
position: sticky; top: 0; background: var(--surface-2); z-index: 1; white-space: nowrap;
}
.data-table td { padding: 11px var(--sp-3); border-bottom: 1px solid var(--border); color: var(--ink-800); vertical-align: middle; }
.data-table tbody tr { transition: background var(--dur); }
.data-table tbody tr:hover td { background: var(--ink-50); }
.data-table tr:last-child td { border-bottom: none; }
.data-table td strong { color: var(--ink-900); }
.data-table .num, .data-table td.num, .data-table th.num { text-align: right; }
.col-actions { width: 72px; text-align: right; white-space: nowrap; }
.empty-cell { text-align: center; color: var(--ink-500); padding: var(--sp-7) var(--sp-3) !important; font-size: var(--text-sm); }
.empty-cell:hover { background: transparent !important; }
.icon-btn {
background: none; border: none; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 6px 7px;
border-radius: var(--radius-xs); color: var(--ink-400); transition: background var(--dur), color var(--dur);
}
.icon-btn:hover { background: var(--surface-3); color: var(--brand-700); }
.icon-btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.tag-auto {
display: inline-block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
letter-spacing: .04em; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100);
padding: 2px 8px; border-radius: 999px; vertical-align: middle; line-height: 1.4;
}
/* ---------- Pasta do paciente ---------- */
.confidencial-note {
background: var(--sun-50); color: var(--sun-700); font-size: 0.8rem; line-height: 1.55;
padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 18px;
border: 1px solid var(--sun-100);
}
.pasta-section { margin-bottom: 26px; }
.pasta-section h4 { margin-bottom: 10px; color: var(--ink-900); font-size: .95rem; font-weight: 700; }
.pasta-section input[type="file"] { font-size: 0.83rem; margin-bottom: 12px; }
.pasta-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pasta-item {
border: 1px solid var(--ink-100); border-radius: var(--radius-sm); padding: 10px 14px;
display: flex; flex-direction: column; gap: 8px;
}
.pasta-item-info { display: flex; flex-direction: column; gap: 2px; }
.pasta-item-info strong { font-size: 0.87rem; color: var(--ink-900); }
.pasta-item-actions { display: flex; gap: 8px; }
.pasta-audio { width: 100%; height: 34px; }
.pasta-prontuario-texto { font-size: 0.85rem; color: var(--ink-800); white-space: pre-wrap; margin: 0; }
.freq-done { background: var(--leaf-50); border-color: var(--leaf-100); }
/* ---------- Agenda: cabeçalho ----------
Linha 1: período em destaque (rótulo pequeno + título + resumo) | ‹ Hoje ›
| Semana/Mês | + Nova sessão. Linha 2: filtro por profissional (staff) e,
no mês, a legenda. Sem caixa em volta — o cabeçalho é a própria tela. */
.agenda-tela { gap: var(--sp-4); }
.agenda-cabecalho { display: flex; flex-direction: column; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); }
.agenda-cabecalho-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.agenda-cabecalho-linha.is-secundaria { align-items: center; }
.agenda-periodo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-titulo { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.015em; color: var(--ink-900); line-height: 1.2; font-variant-numeric: tabular-nums; }
.agenda-resumo { font-size: var(--text-sm); color: var(--ink-500); }
.agenda-controles { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.agenda-nova { margin-left: var(--sp-2); }
/* ‹ Hoje ›: um grupo só, com divisórias internas — lê-se como uma peça. */
.agenda-nav { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; height: 36px; }
.agenda-nav-btn {
font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-700); background: transparent; border: none;
border-right: 1px solid var(--border); padding: 0 var(--sp-3); min-width: 36px; cursor: pointer; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur), color var(--dur);
}
.agenda-nav-btn:last-child { border-right: none; }
.agenda-nav-btn:hover { background: var(--surface-2); color: var(--ink-900); }
.agenda-nav-btn:not(.agenda-nav-hoje) { font-size: 18px; font-weight: 500; padding: 0 var(--sp-2); color: var(--ink-600); }
.agenda-nav-btn:focus-visible { outline-offset: -2px; border-radius: 0; }
/* Alternador Semana/Mês: controle segmentado (fundo cinza, item ativo branco
elevado) — hierarquia abaixo de ‹ Hoje › e de "+ Nova sessão". */
.segmentado { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--surface-3); border-radius: var(--radius-sm); height: 36px; }
.segmentado-item {
font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-600); background: transparent; border: none;
padding: 0 var(--sp-3); height: 100%; border-radius: var(--radius-xs); cursor: pointer; line-height: 1;
transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}
.segmentado-item:hover { color: var(--ink-900); }
.segmentado-item.active { background: var(--surface); color: var(--ink-900); font-weight: 600; box-shadow: var(--shadow-xs); }
.agenda-filtro { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
.agenda-filtro-rotulo { flex-shrink: 0; }
.agenda-filtro-chips { margin: 0; gap: 6px; }
.agenda-filtro-chips .situacao-tab { padding: 5px 12px; font-size: var(--text-xs); }
/* Remarcação de falta: uma linha por sessão faltada, com a data de origem em
cima e os campos da reposição embaixo. */
.remarcar-linha {
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 10px 12px; margin-bottom: 10px;
display: flex; flex-direction: column; gap: 8px;
}
.remarcar-origem { font-size: 0.78rem; font-weight: 600; color: var(--ink-600); }
.remarcar-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* ---------- Agenda: semana em colunas (um painel por dia) ----------
Colunas de 240px+ que se ajustam à largura (7 numa tela larga, 4 num
notebook, 1 no celular). O dia não é uma caixa: é um cabeçalho de data
(dia da semana pequeno + número grande) com os cards embaixo; só o card
tem contorno. O dia de hoje ganha uma faixa fina da marca no topo e o
selo "Hoje". */
.semana-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--sp-4) var(--sp-3); align-items: start; }
.dia-panel { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding-top: var(--sp-2); border-top: 2px solid var(--border); }
.dia-panel.is-hoje { border-top-color: var(--brand-500); }
.dia-panel.is-vazio { opacity: .85; }
.dia-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.dia-data { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.dia-semana { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.dia-numero { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink-900); line-height: 1; font-variant-numeric: tabular-nums; }
.dia-mes { font-size: var(--text-xs); color: var(--ink-500); text-transform: lowercase; }
.dia-panel.is-hoje .dia-numero { color: var(--brand-700); }
.dia-hoje { margin-left: 4px; align-self: center; padding: 2px 8px; }
.dia-contagem {
align-self: center; margin-left: 2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
background: var(--surface-3); color: var(--ink-600); font-size: var(--text-xs); font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.dia-panel-acoes { display: flex; align-items: center; gap: 4px; }
.dia-btn {
border: 1px solid transparent; background: transparent; cursor: pointer;
font: inherit; font-size: 0.95rem; font-weight: 500; line-height: 1; color: var(--ink-500);
width: 30px; height: 30px; border-radius: var(--radius-xs);
display: flex; align-items: center; justify-content: center;
transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.dia-btn:hover { background: var(--surface-3); color: var(--brand-700); }
.dia-sessoes { display: flex; flex-direction: column; gap: var(--sp-2); }
.dia-vazio { font-size: var(--text-sm); color: var(--ink-400); padding: var(--sp-3) 0; text-align: left; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding-left: var(--sp-3); }
.dia-panel .agenda-feriado { align-self: flex-start; }
/* ---------- Card de sessão ----------
Uma linha só para o essencial: hora (coluna fixa, tabular) · paciente em
destaque · badge de status; embaixo, a linha de apoio (profissional,
marcadores, observação) e as ações. */
.consulta-card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
display: flex; flex-direction: column; gap: 8px; cursor: pointer; min-width: 0;
box-shadow: var(--shadow-xs);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.consulta-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
/* OP (Orientação Parental): faixa da marca na lateral do card. */
.consulta-card.is-op { box-shadow: inset 3px 0 0 var(--brand-300), var(--shadow-xs); }
.consulta-card.is-op:hover { box-shadow: inset 3px 0 0 var(--brand-300), var(--shadow-sm); }
.consulta-card.is-cancelada .consulta-paciente { text-decoration: line-through; color: var(--ink-500); }
.consulta-linha { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; }
.consulta-hora {
font-size: var(--text-base); font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums;
padding-top: 1px; min-width: 42px; letter-spacing: -.01em;
}
.consulta-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.consulta-paciente { font-size: var(--text-base); font-weight: 600; color: var(--ink-900); line-height: 1.3; overflow-wrap: anywhere; }
.consulta-meta { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--ink-500); line-height: 1.4; }
.consulta-meta-texto { overflow-wrap: anywhere; min-width: 0; }
.consulta-status { padding: 2px 8px; }
.consulta-status { flex-shrink: 0; }
/* Ações: principal à esquerda com destaque, secundária em contorno, e
Cancelar como texto discreto encostado à direita — só ganha cor no hover. */
.consulta-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.consulta-acoes .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.consulta-cancelar {
border: none; background: none; cursor: pointer; font: inherit;
font-size: 11.5px; font-weight: 500; color: var(--ink-500); padding: 6px 4px; margin-left: auto;
border-radius: var(--radius-xs); transition: color var(--dur), background var(--dur);
}
.consulta-cancelar:hover { color: var(--danger); background: var(--danger-bg); }
.freq-done .pasta-item-info strong { color: var(--success); }
/* ---------- Agenda: calendário mensal ---------- */
.cal-panel { padding: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; padding: 6px 0 4px; }
.cal-cell {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
overflow: hidden;
}
.cal-cell.cal-empty { background: transparent; border: none; min-height: 0; }
.cal-cell.cal-clicavel { cursor: pointer; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.cal-cell.cal-clicavel:hover { border-color: var(--brand-300); background: var(--brand-50); }
.cal-cell.cal-today { border-color: var(--brand-500); box-shadow: inset 0 2px 0 var(--brand-500); }
.cal-cell.cal-today .cal-day-num { color: #fff; background: var(--brand-700); }
.cal-day-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.cal-day-num {
font-size: var(--text-xs); font-weight: 600; color: var(--ink-600); font-variant-numeric: tabular-nums;
min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.cal-feriado-btn {
border: none; background: transparent; cursor: pointer; font-size: 0.78rem; line-height: 1;
padding: 1px 3px; border-radius: 4px; opacity: 0.45; transition: opacity var(--dur), background var(--dur);
}
.cal-feriado-btn:hover { opacity: 1; background: var(--surface-3); }
.cal-chip {
display: block; width: 100%; text-align: left; font: inherit;
font-size: 0.7rem; font-weight: 500; line-height: 1.35;
padding: 3px 7px; border-radius: var(--radius-xs); cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: filter var(--dur);
}
.cal-chip:hover { filter: brightness(0.95); }
.cal-chip.is-aguardando { background: var(--sun-50); color: var(--sun-700); border: 1px solid var(--sun-100); }
.cal-chip.is-confirmado { background: var(--leaf-50); color: var(--leaf-700); border: 1px solid var(--leaf-100); }
.cal-chip.is-realizada { background: var(--sky-50); color: var(--sky-700); border: 1px solid var(--sky-100); }
.cal-chip.is-nao-compareceu { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--rose-100); }
/* OP (Orientação Parental): metade da cor do status + metade da marca. */
.cal-chip.is-op.is-aguardando { background: linear-gradient(to right, var(--sun-50) 50%, var(--brand-100) 50%); }
.cal-chip.is-op.is-confirmado { background: linear-gradient(to right, var(--leaf-50) 50%, var(--brand-100) 50%); }
.cal-chip.is-op.is-realizada { background: linear-gradient(to right, var(--sky-50) 50%, var(--brand-100) 50%); }
.cal-chip.is-op.is-nao-compareceu { background: linear-gradient(to right, var(--danger-bg) 50%, var(--brand-100) 50%); }
.cal-legend { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--text-xs); color: var(--ink-600); flex-wrap: wrap; margin-left: auto; }
.cal-legend-item { display: inline-flex; gap: 6px; align-items: center; }
.cal-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.cal-dot.is-aguardando { background: var(--sun-100); border: 1px solid var(--sun-700); }
.cal-dot.is-confirmado { background: var(--leaf-100); border: 1px solid var(--leaf-700); }
.cal-dot.is-realizada { background: var(--sky-100); border: 1px solid var(--sky-700); }
.cal-dot.is-nao-compareceu { background: var(--rose-100); border: 1px solid var(--danger); }
.cal-dot.is-op { background: linear-gradient(to right, var(--ink-100) 50%, var(--brand-100) 50%); border: 1px solid var(--brand-300); }
/* Responsividade da Agenda: no tablet duas/três colunas de dia; no celular
uma coluna, controles em linha cheia, "+ Nova sessão" ocupa a largura. */
@media (max-width: 1100px) {
.semana-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
}
@media (max-width: 600px) {
.agenda-cabecalho-linha { flex-direction: column; align-items: stretch; }
.agenda-controles { justify-content: space-between; }
.agenda-nav { flex: 1; }
.agenda-nav-hoje { flex: 1; }
.agenda-nova { width: 100%; margin-left: 0; order: 3; }
.agenda-titulo { font-size: var(--text-md); }
.cal-legend { margin-left: 0; }
.dia-panel-header { min-height: 40px; }
}
/* ---------- OP (Orientação Parental) — checkbox na Frequência ---------- */
.op-check {
display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 700;
color: var(--brand-700); cursor: pointer; user-select: none;
}
.op-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--brand-500); }
/* Grupo de marcadores de tipo de sessão no formulário da Agenda (OP,
Dev inicial, Dev de acompanhamento, Reunião escolar, Sessão inicial pais). */
.marcadores-grid { display: flex; flex-wrap: wrap; gap: 10px 18px; }
/* ---------- Progress ---------- */
.progress-track { background: var(--surface-3); border-radius: 999px; height: 10px; overflow: hidden; margin: 10px 0 8px; }
.progress-fill { background: linear-gradient(90deg, var(--brand-500), var(--rose-100)); height: 100%; border-radius: 999px; }
/* ---------- Chart ---------- */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding-top: 10px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; }
.chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 170px; }
.bar { width: 12px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-income { background: var(--success); }
.bar-expense { background: var(--danger); }
.chart-label { font-size: 0.68rem; color: var(--ink-500); }
.chart-legend { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--ink-600); margin-top: 8px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 12px; }
.legend-dot:first-child { margin-left: 0; }
.legend-income { background: var(--success); }
.legend-expense { background: var(--danger); }
/* Pizza de saídas por categoria (só admin) — cores fixas por posição (maior
valor primeiro), escolhidas para contraste/daltonismo, não são as cores
pastéis da marca (não dá pra diferenciar fatias de gráfico com elas). */
.pie-chart-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.pie-chart { position: relative; width: 190px; height: 190px; border-radius: 50%; flex-shrink: 0; }
.pie-chart-hole {
position: absolute; inset: 22%; background: var(--surface); border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
box-shadow: var(--shadow-xs);
}
.pie-chart-hole strong { font-size: 0.95rem; color: var(--ink-900); }
.pie-chart-hole span { font-size: 0.68rem; color: var(--ink-500); margin-top: 2px; }
.pie-legend { display: flex; flex-direction: column; gap: 9px; min-width: min(220px, 100%); flex: 1; }
.pie-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-800); flex-wrap: wrap; }
.pie-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
/* ---------- Central de Tarefas / Meus afazeres ---------- */
.tarefas-categoria + .tarefas-categoria { margin-top: 16px; }
.tarefas-categoria-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tarefas-carrossel {
display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
}
.tarefa-card {
flex: 0 0 230px; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
box-shadow: var(--shadow-xs); cursor: grab; transition: box-shadow var(--dur) ease, opacity var(--dur) ease, border-color var(--dur) ease;
}
.tarefa-card:hover { box-shadow: var(--shadow-sm); border-color: var(--ink-300); }
.tarefa-card.is-concluida { opacity: 0.6; }
.tarefa-card.is-arrastando { opacity: 0.4; cursor: grabbing; }
.tarefa-card.is-drop-alvo { box-shadow: 0 0 0 2px var(--brand-500) inset; }
.tarefa-card-top { display: flex; align-items: flex-start; gap: 8px; }
.tarefa-card-top input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
.tarefa-titulo { font-weight: 700; font-size: 0.88rem; color: var(--ink-900); line-height: 1.35; }
.tarefa-titulo.is-riscado { text-decoration: line-through; color: var(--ink-500); }
.tarefa-descricao { font-size: 0.78rem; color: var(--ink-600); line-height: 1.4; white-space: pre-wrap; }
.tarefa-meta { font-size: 0.7rem; color: var(--ink-400); }
.tarefa-card-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.tarefa-empty { font-size: 0.82rem; color: var(--ink-500); padding: 10px 2px; }
/* ---------- Goal row ---------- */
.goal-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
/* ---------- Modal ---------- */
@keyframes modal-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-entrada { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-overlay {
position: fixed; inset: 0; background: rgba(22, 36, 43, .5);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center; padding: var(--sp-5); z-index: 100;
animation: modal-fundo var(--dur) var(--ease);
}
.modal-box {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; max-height: min(90vh, 900px); overflow-y: auto;
animation: modal-entrada .2s var(--ease);
}
.modal-wide { max-width: 600px; }
.modal-header {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.modal-header h3 { font-size: var(--text-md); }
.modal-close {
background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--ink-400); line-height: 1;
width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: background var(--dur), color var(--dur);
}
.modal-close:hover { color: var(--ink-800); background: var(--surface-3); }
.modal-body { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
/* flex-wrap: com 4+ botões (ex.: Interromper atendimento, alcance da Agenda)
eles não cabem numa linha só no modal — sem a quebra, o primeiro botão
transbordava pra fora do modal e ficava escondido. */
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.entry-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.confirm-text { margin-bottom: var(--sp-4); color: var(--ink-700); line-height: 1.55; }
/* ---------- Toast ---------- */
@keyframes toast-entrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast-host { position: fixed; bottom: var(--sp-6); right: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 200; max-width: min(360px, calc(100vw - 48px)); }
.toast {
background: var(--ink-900); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.45;
box-shadow: var(--shadow-md); opacity: 1; transition: opacity .25s ease, transform .25s ease;
animation: toast-entrada .2s var(--ease); border-left: 3px solid var(--leaf-100);
}
.toast-error { background: var(--rose-900); border-left-color: var(--rose-100); }
.toast-out { opacity: 0; transform: translateY(6px); }
/* ---------- Navegação mobile ----------
Abaixo de 860px a barra lateral inteira some e dá lugar a esta barra
sozinha (logo + "+ Novo" + ☰); o menu de navegação só aparece suspenso,
sob o toque no ☰. */
.mobile-topbar-wrap { display: none; position: relative; }
.mobile-topbar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs);
padding: 8px 10px;
}
.mobile-topbar-marca { display: flex; align-items: center; min-width: 0; }
.mobile-topbar-actions { display: flex; align-items: center; gap: 8px; }
.mobile-hamburger {
width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm);
border: 1px solid var(--brand-100); background: var(--surface); color: var(--brand-700);
font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.mobile-hamburger:hover, .mobile-hamburger.active { background: var(--brand-100); border-color: var(--brand-300); }
/* O "+ Novo" reaparece aqui (mesmo componente, ver buildNovoWrap em app.js) —
tamanho compacto, ajustado ao espaço da barra em vez de ocupar 100%. */
.mobile-topbar-actions .sidebar-novo-wrap { width: auto; margin-bottom: 0; }
.mobile-topbar-actions .sidebar-novo { width: auto; padding: 0 14px; height: 40px; font-size: 0.8rem; }
.mobile-topbar-actions .sidebar-novo-menu { left: auto; right: 0; width: 200px; }
/* Menu suspenso do ☰: lista vertical simples, ícone + rótulo lado a lado
(diferente da versão desktop, que empilha ícone em cima do rótulo). */
.mobile-nav-menu {
position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
background: var(--surface); border: 1px solid var(--brand-100); border-radius: var(--radius);
box-shadow: var(--shadow-lg); padding: 8px; display: flex; flex-direction: column; gap: 2px;
max-height: 70vh; overflow-y: auto;
}
.mobile-nav-item {
position: relative;
display: flex; align-items: center; gap: 12px; width: 100%;
text-align: left; background: none; border: none; color: var(--ink-700); font: inherit;
padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem;
}
.mobile-nav-item .icn-nav { width: 20px; height: 20px; color: var(--brand-500); flex-shrink: 0; }
.mobile-nav-item:hover { background: var(--surface-2); }
.mobile-nav-item.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.mobile-nav-item.active .icn-nav { color: var(--brand-700); }
.mobile-nav-item .nav-badge { position: static; margin-left: auto; }
/* Aniversariantes: no desktop moram na barra lateral; no menu suspenso do
celular entram no fim da lista, senão sumiriam junto com a barra. */
.mobile-nav-menu .sidebar-alert { margin-top: 8px; }
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
html, body { overflow-x: hidden; }
/* align-items: stretch (não o flex-start do desktop) — na coluna do
mobile o eixo cruzado é a LARGURA; sem esticar, .main-col vira
"encolher-para-caber" no filho mais largo (ex.: a tabela dentro de
.table-scroll) em vez de ocupar os 100% da tela. Essa é a causa raiz do
estouro horizontal — o overflow-x:hidden acima é só reforço. */
.shell { flex-direction: column; align-items: stretch; padding: 12px; gap: 12px; max-width: 100vw; }
/* A barra lateral inteira sai de cena e a .mobile-topbar-wrap assume. */
.sidebar { display: none; }
.mobile-topbar-wrap { display: block; }
.content { padding: 16px; }
.main-col { gap: 12px; min-width: 0; }
/* Barra de cima da tela: título + seletor de mês + ícones + usuário +
Sair — muita coisa pra uma linha só em 375px; deixa quebrar em mais de
uma linha e o nome/cargo do usuário sai (avatar continua visível). */
.topbar { gap: 10px; }
.topbar-right { gap: 8px; }
.user-chip-text { display: none; }
/* Cards, KPIs e semana da Agenda: uma coluna só no mobile — mais legível
que deixar o grid decidir sozinho quantas colunas cabem. */
.kpi-grid, .semana-grid { grid-template-columns: 1fr; }
.pie-chart-row { justify-content: center; }
.pie-legend { min-width: 0; }
.modal-body { padding: 16px 16px 20px; }
.modal-header { padding: 14px 16px; }
/* Panorama Anual: as 12 colunas do ano pedem ~434px e não cabem em nenhum
celular. Como a página não rola na horizontal, sem isto os últimos meses
ficavam recortados e inalcançáveis — pior que rolar. O gráfico passa a
rolar por dentro, como as tabelas (.table-scroll) já fazem. */
.chart { overflow-x: auto; padding-bottom: 8px; }
.chart-col { flex: 0 0 auto; min-width: 30px; }
/* Agenda em Mês: 7 colunas num celular dão ~28px por dia, e o texto do chip
("08:00 RAFAEL QUEIROZ · Dra. Helena") vira uma letra por linha. Os chips
viram barras coloridas: o mês continua respondendo o que se pergunta a
ele — quais dias têm sessão, quantas e em que situação, pelas mesmas
cores da legenda logo abaixo. O texto por extenso está a um toque (o chip
continua abrindo a sessão) e na visão Semana, que é a padrão. */
.cal-panel { padding: 10px; }
.cal-grid { gap: 3px; }
.cal-cell { padding: 5px 3px; gap: 3px; }
/* A barra pintada fica fina (8px), mas o alvo de toque tem 18px: o
background-clip: content-box mantém a cor só no miolo enquanto o padding
cresce a área clicável — o chip continua abrindo a sessão. */
.cal-chip {
font-size: 0; height: 18px; padding: 5px 0; border-radius: 999px;
overflow: hidden; background-clip: content-box;
}
.cal-day-num { font-size: 0.7rem; }
/* Sem espaço ao lado do número num dia de 28px. Marcar feriado continua
disponível na visão Semana, no cabeçalho do dia (.dia-btn). */
.cal-feriado-btn { display: none; }
/* Alvos de toque: no dedo, 22-28px erra. Vale sobretudo para o par
editar/excluir das tabelas, onde errar apaga a linha errada. Só no
celular — no desktop, com ponteiro, os tamanhos atuais estão certos. */
.icon-btn { padding: 8px 10px; min-width: 38px; min-height: 38px; }
.dia-btn { width: 36px; height: 36px; }
.consulta-acoes .btn-sm { height: 36px; padding: 0 14px; }
.consulta-cancelar { padding: 8px 6px; min-height: 34px; }
.pac-grupo { padding: 12px 8px 8px; min-height: 42px; }
}
/* ---------- Logomarca (placeholder de demonstração) ----------
Símbolo + nome lado a lado. O SVG é inline (ver UI.logo em components.js),
então as cores saem daqui e acompanham a paleta. */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { flex-shrink: 0; display: block; }
.logo-mark-bg { fill: var(--brand-700); }
.logo-mark-fg { stroke: var(--surface); }
.logo-mark-dot { fill: var(--brand-100); }
.logo-text { font-family: var(--font-marca); font-weight: 700; color: var(--brand-700); letter-spacing: -.2px; white-space: nowrap; }
.logo-lg { gap: 12px; }
.logo-lg .logo-mark { width: 44px; height: 44px; }
.logo-lg .logo-text { font-size: 1.5rem; }
.logo-sm .logo-mark { width: 30px; height: 30px; }
.logo-sm .logo-text { font-size: 1rem; }
.login-demo-hint { font-size: 0.78rem; color: var(--ink-500); text-align: center; margin-top: 4px; }
/* ============================================================
Controle de Ponto + Feriados (portados do AMPLI - R14)
============================================================ */
.ponto-btn-topbar { box-shadow: var(--shadow-sm); }
.ponto-btn-topbar .icn { width: 18px; height: 18px; }
.ponto-btn { height: 48px; padding: 0 28px; font-size: 15px; }
.ponto-aviso {
background: var(--sun-50); border: 1px solid var(--sun-100); border-radius: var(--radius-sm);
color: var(--sun-700); font-size: 0.85rem; padding: 10px 14px; margin-bottom: 12px; line-height: 1.5;
}
.ponto-status {
font-size: 0.74rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.ponto-status.is-trabalhando { background: var(--leaf-50); color: var(--leaf-700); border: 1px solid var(--leaf-100); }
.ponto-status.is-intervalo { background: var(--sun-50); color: var(--sun-700); border: 1px solid var(--sun-100); }
.ponto-status.is-encerrado { background: var(--sky-50); color: var(--sky-700); border: 1px solid var(--sky-100); }
.ponto-status.is-sem { background: var(--surface-2); color: var(--ink-500); border: 1px solid var(--ink-100); }
.ponto-hoje-linha { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ponto-contador { color: var(--brand-700); }
.ponto-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ponto-resumo {
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
padding-bottom: 14px; border-bottom: 1px solid var(--ink-100);
}
.ponto-mes-label { font-size: 0.85rem; font-weight: 700; color: var(--ink-700); min-width: 110px; text-align: center; }
.ponto-batidas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ponto-batidas-hoje { margin-top: 16px; }
.ponto-batida {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.ponto-batida.is-entrada { background: var(--leaf-50); color: var(--leaf-700); border: 1px solid var(--leaf-100); }
.ponto-batida.is-intervalo { background: var(--sun-50); color: var(--sun-700); border: 1px solid var(--sun-100); }
.ponto-batida.is-retorno { background: var(--mint-50); color: var(--mint-700); border: 1px solid var(--mint-100); }
.ponto-batida.is-saida { background: var(--sky-50); color: var(--sky-700); border: 1px solid var(--sky-100); }
button.ponto-batida { font: inherit; cursor: pointer; transition: box-shadow .15s ease; font-weight: 700; font-size: 0.78rem; }
button.ponto-batida:hover { box-shadow: var(--shadow-sm); }
.ponto-ajustada { font-size: 0.72rem; opacity: 0.75; }
.ponto-lista { display: flex; flex-direction: column; gap: 10px; }
.ponto-dia {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
border: 1px solid var(--ink-100); border-radius: var(--radius-sm); padding: 10px 14px;
}
.ponto-dia-info { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.ponto-dia-info strong { font-size: 0.87rem; color: var(--ink-900); }
.ponto-dia-info .ponto-status { align-self: flex-start; }
.ponto-dia .ponto-batidas { flex: 1; }
.ponto-total { font-size: 0.82rem; font-weight: 700; color: var(--ink-600); white-space: nowrap; }
.ponto-disp { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ponto-ajustes { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.ponto-ajustes-titulo { font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 8px; }
.ponto-ajuste-item { font-size: 0.78rem; color: var(--ink-600); line-height: 1.5; }
.ponto-prev-linha { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ponto-prev-valor { font-size: 1.6rem; font-weight: 700; color: var(--brand-700); letter-spacing: -.01em; }
.ponto-prev-jornada { font-size: 0.85rem; font-weight: 600; color: var(--ink-600); }
.ponto-prev-hist { font-size: 0.82rem; color: var(--ink-700); }
.agenda-feriado {
display: inline-block; align-self: flex-start; max-width: 100%;
font-size: 0.72rem; font-weight: 700; line-height: 1.3;
color: var(--rose-700); background: var(--rose-50); border: 1px solid var(--rose-100);
border-radius: 6px; padding: 3px 8px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agenda-feriado.is-normal { color: var(--mint-700); background: var(--mint-50); border-color: var(--mint-100); }
.agenda-feriado.is-mini { font-size: 0.62rem; padding: 2px 6px; display: block; }
.feriado-func-btn {
font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
padding: 4px 12px; border-radius: 999px; white-space: nowrap;
color: var(--rose-700); background: var(--rose-50); border: 1px solid var(--rose-100);
transition: box-shadow .15s ease;
}
.feriado-func-btn.is-normal { color: var(--mint-700); background: var(--mint-50); border-color: var(--mint-100); }
.feriado-func-btn:hover { box-shadow: var(--shadow-sm); }
.ponto-prev-conta { font-size: 0.78rem; line-height: 1.55; margin: 10px 0 0; }
/* Mensagens (US4) + status Cancelada da Agenda */
.ponto-status.is-falha { background: var(--rose-50); color: var(--rose-700); border: 1px solid var(--rose-100); }
.cal-chip.is-cancelado { background: var(--surface-2); color: var(--ink-500); border-color: var(--ink-100); text-decoration: line-through; }
.cal-dot.is-cancelado { background: var(--ink-300, #9aa5a6); }
/* Pré-agendado (link público — US5) */
.cal-chip.is-pre-agendado { background: var(--sun-50); color: var(--sun-700); border: 1px dashed var(--sun-100); }
/* ============================================================
Design system — componentes base transversais
(badges, estados vazios, cards, responsividade fina)
============================================================ */
/* ---------- Badges ----------
Uma receita só para todo marcador de situação: pílula, texto pequeno em
peso 600, fundo -50 + borda -100 + texto -700 da família da cor.
Classe genérica .badge + tom (.is-brand/.is-success/.is-warning/
.is-danger/.is-info/.is-neutral); os marcadores já existentes nas telas
(.ponto-status, .alert-badge, .ponto-batida,
.agenda-feriado, .feriado-func-btn) herdam o mesmo desenho. */
.badge, .ponto-status, .alert-badge, .ponto-batida, .agenda-feriado, .feriado-func-btn, .alertas-contagem {
display: inline-flex; align-items: center; gap: 5px;
font-size: var(--text-xs); font-weight: 600; line-height: 1.2; letter-spacing: .01em;
padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
vertical-align: middle;
}
.badge.is-brand { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.badge.is-success { background: var(--leaf-50); color: var(--leaf-700); border-color: var(--leaf-100); }
.badge.is-warning { background: var(--sun-50); color: var(--sun-700); border-color: var(--sun-100); }
.badge.is-danger { background: var(--rose-50); color: var(--rose-700); border-color: var(--rose-100); }
.badge.is-info { background: var(--sky-50); color: var(--sky-700); border-color: var(--sky-100); }
.badge.is-neutral { background: var(--surface-2); color: var(--ink-600); border-color: var(--border); }
.badge.is-solido { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }.alertas-contagem { padding: 2px 8px; }
/* ---------- Estado vazio ----------
Caixa tracejada, ícone opcional, título curto, uma frase de apoio e, se
fizer sentido, a ação que resolve o vazio. UI.estadoVazio() monta isto.
.is-compacto: versão de uma linha para listas pequenas. */
.estado-vazio {
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
gap: var(--sp-2); padding: var(--sp-7) var(--sp-5);
border: 1px dashed var(--border-strong); border-radius: var(--radius);
background: var(--ink-50); color: var(--ink-500);
}
.estado-vazio-icone {
width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--surface); border: 1px solid var(--border); color: var(--ink-400); margin-bottom: var(--sp-1);
}
.estado-vazio-icone .icn { width: 20px; height: 20px; }
.estado-vazio-titulo { font-size: var(--text-base); font-weight: 600; color: var(--ink-800); }
.estado-vazio-texto { font-size: var(--text-sm); color: var(--ink-500); max-width: 40ch; line-height: 1.5; }
.estado-vazio .btn { margin-top: var(--sp-2); }
.estado-vazio.is-compacto { flex-direction: row; justify-content: flex-start; text-align: left; padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
.estado-vazio.is-compacto .estado-vazio-icone { width: 32px; height: 32px; margin: 0; }
.estado-vazio.is-compacto .estado-vazio-icone .icn { width: 16px; height: 16px; }
.estado-vazio.is-compacto .btn { margin: 0 0 0 auto; }
/* Vazios antigos das telas herdam o mesmo tom de voz (cor e tamanho). */
.dia-vazio, .pac-lista-vazia, .tarefa-empty { font-size: var(--text-sm); color: var(--ink-500); }
/* ---------- Cards de conteúdo (harmonização) ----------
Painéis internos das telas passam a usar as mesmas bordas/sombras/raios
do .panel — sem mudar o layout de cada tela. */
.consulta-card, .dia-panel, .pasta-item, .ponto-dia, .remarcar-linha, .alert-item, .cal-cell, .login-demo, .sidebar-novo-menu, .mobile-nav-menu { border-color: var(--border); }
.consulta-card { box-shadow: var(--shadow-xs); }
.consulta-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.dia-panel { box-shadow: var(--shadow-xs); }
.dia-panel:nth-child(even) { border-color: var(--border); }
.proxima-sessao:hover { box-shadow: var(--shadow-sm); }
.pac-item.active { background: var(--brand-50); }
.sidebar-novo { background: var(--brand-700); border-radius: var(--radius-sm); font-weight: 600; }
.sidebar-novo:hover, .sidebar-novo.active { background: var(--brand-900); }
.sidebar-novo-item { font-weight: 500; }
.sidebar-alert { background: var(--sun-50); border-color: var(--sun-100); }
.aviso-bloco { border-radius: var(--radius); }
.confidencial-note, .ponto-aviso, .login-change-note { border-radius: var(--radius-sm); }
.progress-fill { background: var(--brand-500); }
/* ---------- Responsividade fina ---------- */
/* Tablet e notebooks estreitos: menos respiro nas margens, mesma estrutura. */
@media (max-width: 1100px) and (min-width: 861px) {
.shell { gap: var(--sp-4); padding: var(--sp-4); }
.content { padding: var(--sp-5); }
.sidebar { width: 156px; }
}
/* Celular: modais como folha de baixo, botões de ação em coluna, título da
página um pouco menor, toasts centralizados. */
@media (max-width: 600px) {
.topbar-title h2 { font-size: var(--text-lg); }
.modal-overlay { padding: 0; align-items: flex-end; }
.modal-box, .modal-wide { max-width: none; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none; }
.modal-actions { flex-direction: column-reverse; }
.modal-actions .btn { width: 100%; height: 44px; }
.btn-primary.btn-block, .login-form .btn { height: 44px; }
.toast-host { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); max-width: none; }
.estado-vazio { padding: var(--sp-5) var(--sp-4); }
.content { padding: var(--sp-4); gap: var(--sp-4); }
.panel { padding: var(--sp-4); }
.table-scroll { max-height: 70vh; }
}
/* Celular: a linha de ações do cabeçalho vira uma faixa só — o seletor de
mês estica e os controles ficam ao lado; a pílula do mês sai (o seletor
já diz o mês). */
@media (max-width: 600px) {
.topbar-title .topbar-month-label { display: none; }
.topbar-right { width: 100%; flex-wrap: nowrap; gap: var(--sp-1); }
.topbar-right > select.input { flex: 1; min-width: 0; }
.topbar-right .user-chip { padding: 0; }
}
/* Tablet em pé (601–860px): dois dias lado a lado — a regra geral do mobile
(uma coluna) fica só para o celular. Especificidade dobrada para vencer a
regra .semana-grid do bloco responsivo antigo. */
@media (min-width: 601px) and (max-width: 860px) {
.semana-grid.semana-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pasta do paciente (modal): seções separadas por divisória, título no padrão da ficha. */
.pasta-section { margin-bottom: 0; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.pasta-section:last-child { border-bottom: none; padding-bottom: 0; }
.pasta-section h4 { margin-bottom: var(--sp-2); font-size: var(--text-base); font-weight: 600; }
.pasta-section input[type="file"] { margin-bottom: var(--sp-2); }
.pasta-section .btn { margin-top: var(--sp-2); }
.pasta-list { gap: var(--sp-2); margin-top: var(--sp-2); }
.pasta-item { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.pasta-item-info { flex: 1; min-width: 0; }
.pasta-item-info strong { font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.pasta-item .pasta-audio { flex-basis: 100%; }