/* ========================================================================== HEALTH8 — folha da PLATAFORMA ========================================================================== Separada do `app.css` de propósito. O app.css é white-label: uma clínica troca as cores dela e o arquivo muda. Se a plataforma bebesse da mesma fonte, o tenant 1 mexer no tema mudaria o painel de quem administra todos os tenants. Tema claro/escuro pelo MESMO contrato do painel da clínica (§12): o atributo `data-theme` no `` manda, ausente = claro, e o anti-flash roda inline antes da pintura. Contrato igual evita que alguém aprenda duas regras. ========================================================================== */ :root { --pf-bg: #F6F7F9; --pf-surface: #FFFFFF; --pf-raised: #FFFFFF; --pf-sidebar: #101822; --pf-ink: #12161C; --pf-ink-soft: #5B6472; --pf-ink-faint: #8A93A0; --pf-line: rgba(18,22,28,.10); --pf-line-soft: rgba(18,22,28,.06); --pf-accent: #1F6F63; --pf-accent-in: #FFFFFF; --pf-accent-bg: rgba(31,111,99,.10); --pf-good: #1F7A4D; --pf-warn: #9A5B10; --pf-bad: #A33232; --pf-radius: 10px; --pf-sidebar-w: 244px; --pf-topbar-h: 60px; } :root[data-theme="dark"] { --pf-bg: #0E1216; --pf-surface: #151B22; --pf-raised: #1A222B; --pf-sidebar: #0A0E13; --pf-ink: #F2F5F7; --pf-ink-soft: #94A0AE; --pf-ink-faint: #6C7889; --pf-line: rgba(242,245,247,.12); --pf-line-soft: rgba(242,245,247,.07); --pf-accent: #5FCDB9; --pf-accent-in: #0A0E13; --pf-accent-bg: rgba(95,205,185,.12); /* Calibrados para serem LIDOS sobre o fundo translúcido do selo, não a cor pura — a mesma correção que o §12 registra para os badges do admin. */ --pf-good: #6FC79A; --pf-warn: #E0A860; --pf-bad: #E58080; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--pf-bg); color: var(--pf-ink); font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -.01em; } h2 { font-size: 1.05rem; font-weight: 600; } code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em; } /* ── Estrutura ─────────────────────────────────────────────────────────── */ .pf-shell { display: flex; min-height: 100vh; } .pf-side { width: var(--pf-sidebar-w); flex-shrink: 0; background: var(--pf-sidebar); color: rgba(255,255,255,.72); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 30; } /* A sidebar NÃO inverte com o tema — é superfície de marca, o mesmo caso do painel da clínica (§12). Modo claro é inverter as superfícies do tema, e ela não é uma. */ .pf-brand { display: flex; align-items: center; gap: .6rem; padding: 1.15rem 1.25rem; color: #FFF; border-bottom: 1px solid rgba(255,255,255,.08); } .pf-brand svg { width: 30px; height: 30px; flex-shrink: 0; color: var(--pf-accent); } .pf-brand__name { font-size: 1.06rem; font-weight: 600; letter-spacing: .01em; } .pf-brand__tag { display: block; font-size: .68rem; color: rgba(255,255,255,.42); letter-spacing: .09em; text-transform: uppercase; } .pf-nav { flex: 1; overflow-y: auto; padding: .9rem .7rem 1.5rem; } .pf-nav__group { font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: rgba(255,255,255,.34); padding: 1rem .6rem .35rem; } .pf-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border-radius: 8px; font-size: .9rem; color: rgba(255,255,255,.72); } .pf-nav a i { width: 1.05rem; text-align: center; font-size: .92rem; opacity: .8; } .pf-nav a:hover { background: rgba(255,255,255,.06); color: #FFF; } .pf-nav a.is-active { background: var(--pf-accent); color: var(--pf-accent-in); font-weight: 500; } .pf-nav a.is-active i { opacity: 1; } .pf-main { flex: 1; margin-left: var(--pf-sidebar-w); min-width: 0; } .pf-top { height: var(--pf-topbar-h); position: sticky; top: 0; z-index: 20; /* OPACA. Translúcida, o conteúdo rola por baixo e aparece através — foi o bug que o cliente pegou no `.topbar` do admin (§12). */ background: var(--pf-surface); border-bottom: 1px solid var(--pf-line); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; gap: 1rem; } .pf-top__ctx { font-size: .85rem; color: var(--pf-ink-soft); } .pf-top__acts { display: flex; align-items: center; gap: .5rem; } .pf-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--pf-line); background: var(--pf-surface); color: var(--pf-ink-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: .9rem; } .pf-icon-btn:hover { color: var(--pf-ink); border-color: var(--pf-ink-faint); } .pf-body { padding: 1.75rem 1.5rem 3rem; max-width: 84rem; } /* ── Componentes ───────────────────────────────────────────────────────── */ .card { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 1.25rem 1.35rem; margin-bottom: 1rem; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: -1.25rem -1.35rem 1rem; padding: .9rem 1.35rem; border-bottom: 1px solid var(--pf-line-soft); } .card__title { font-size: .95rem; font-weight: 600; } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; } .grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; } .kpi { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 1.1rem 1.25rem; } .kpi__label { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--pf-ink-soft); } .kpi__value { font-size: 1.75rem; font-weight: 650; line-height: 1.15; margin-top: .25rem; font-variant-numeric: tabular-nums; } .kpi__hint { font-size: .78rem; color: var(--pf-ink-soft); margin-top: .2rem; } table { width: 100%; border-collapse: collapse; font-size: .88rem; } th { text-align: left; font-weight: 600; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--pf-ink-soft); padding: .55rem .7rem; border-bottom: 1px solid var(--pf-line); } td { padding: .7rem; border-bottom: 1px solid var(--pf-line-soft); vertical-align: middle; } tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--pf-accent-bg); } .num { text-align: right; font-variant-numeric: tabular-nums; } .table-wrap { overflow-x: auto; margin: 0 -1.35rem; padding: 0 1.35rem; } .pill { display: inline-block; font-size: .72rem; font-weight: 600; padding: .18rem .55rem; border-radius: 999px; background: rgba(18,22,28,.07); color: var(--pf-ink-soft); } :root[data-theme="dark"] .pill { background: rgba(242,245,247,.09); } .pill.good { background: rgba(31,122,77,.13); color: var(--pf-good); } .pill.warn { background: rgba(154,91,16,.13); color: var(--pf-warn); } .pill.bad { background: rgba(163,50,50,.13); color: var(--pf-bad); } .btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 8px; background: var(--pf-accent); color: var(--pf-accent-in); font-size: .88rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; } .btn:hover { filter: brightness(1.06); } .btn--sm { padding: .35rem .7rem; font-size: .8rem; } .btn--ghost { background: transparent; color: var(--pf-ink); border-color: var(--pf-line); } .btn--ghost:hover { border-color: var(--pf-ink-faint); filter: none; } .btn--danger { background: transparent; color: var(--pf-bad); border-color: rgba(163,50,50,.3); } input, select, textarea { width: 100%; padding: .5rem .65rem; border: 1px solid var(--pf-line); border-radius: 8px; background: var(--pf-raised); color: var(--pf-ink); font: inherit; font-size: .88rem; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--pf-accent); outline-offset: 1px; border-color: transparent; } input[type="checkbox"] { width: auto; accent-color: var(--pf-accent); } label.lbl { display: block; font-size: .74rem; color: var(--pf-ink-soft); margin-bottom: .2rem; } .muted { color: var(--pf-ink-soft); } .sub { color: var(--pf-ink-soft); font-size: .9rem; } .hint { color: var(--pf-ink-soft); font-size: .78rem; } .flash { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .88rem; border: 1px solid var(--pf-line); background: var(--pf-surface); } .flash--ok { border-color: rgba(31,122,77,.35); color: var(--pf-good); } .flash--err { border-color: rgba(163,50,50,.35); color: var(--pf-bad); } .bar { height: .45rem; border-radius: 999px; background: var(--pf-line-soft); overflow: hidden; } .bar__fill { display: block; height: 100%; background: var(--pf-accent); } /* Legado das telas antigas da plataforma, para não quebrarem enquanto migram */ .wrap { max-width: 84rem; margin: 0 auto; } .plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } .plan { background: var(--pf-surface); border: 1px solid var(--pf-line); border-radius: var(--pf-radius); padding: 1.25rem; } .price { font-size: 1.6rem; font-weight: 650; } @media (max-width: 900px) { .pf-side { transform: translateX(-100%); transition: transform .2s ease; } .pf-shell.is-open .pf-side { transform: none; } .pf-main { margin-left: 0; } .pf-body { padding: 1.25rem 1rem 3rem; } } /* Tela sem sessão (login): sem sidebar, sem topbar, conteúdo centrado. */ .pf-shell--nu .pf-main { margin-left: 0; } .pf-shell--nu .pf-body { min-height: 100vh; max-width: 26rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }