/* ============================================================ MedCare — Design Tokens Paleta importada do projeto Claude Design "Internação" (teal + IBM Plex), adotada como padrão das telas redesenhadas. Só tokens. Nenhum reset: o base.css dos design systems reseta body/h1-h6 globalmente e sobrescreveria o template YNEX no sistema inteiro. Tema escuro: pendurado no data-theme-mode do YNEX (StateService.ColorTheme), e não num toggle por página — um toggle local brigaria com o do sistema. ============================================================ */ /* IBM Plex + Material Symbols. O YNEX já carrega Inter por @import no assets/css/styles.css, então este é o padrão do projeto para webfont. */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..600,0,0&display=swap'); :root { /* ---- Marca ---- */ --mc-brand: #0d888c; --mc-brand-2: #0a6c70; --mc-brand-soft: #dbf0f0; --mc-brand-ink: #ffffff; /* Mesmo teal do --mc-brand, em triplete. O YNEX deriva os componentes de rgb(var(--primary-rgb)); com o valor em RGB o mc-page.css consegue reapontar o primary do template inteiro para a marca (ver mc-page.css). */ --mc-brand-rgb: 13, 136, 140; /* ---- Superfícies ---- */ --mc-bg: #eef2f4; --mc-surface: #ffffff; --mc-surface-2: #f5f8f9; --mc-surface-3: #e9eff1; --mc-border: #e4ebee; --mc-border-2: #d4dee2; /* ---- Texto ---- */ --mc-text: #0f2229; --mc-text-2: #4c6068; --mc-text-3: #82989f; /* ---- Semânticos ---- */ --mc-success: #1c9a5e; --mc-success-soft: #e0f3ea; --mc-warning: #c07c13; --mc-warning-soft: #f9edd6; --mc-danger: #d24a3f; --mc-danger-soft: #fae5e2; --mc-info: #2c6fce; --mc-info-soft: #e3edfb; --mc-purple: #7856ce; --mc-purple-soft: #ebe4fb; /* ---- Tipografia ---- */ --mc-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --mc-fw-medium: 500; --mc-fw-semibold: 600; --mc-fw-bold: 700; --mc-fw-extrabold: 700; /* a paleta nova não usa 800 */ /* ---- Raios ---- */ --mc-radius-sm: 8px; --mc-radius-md: 12px; --mc-radius-lg: 16px; --mc-radius-pill: 999px; /* ---- Sombras ---- */ --mc-shadow-sm: 0 1px 2px rgba(15, 34, 41, .05); --mc-shadow: 0 1px 2px rgba(15, 34, 41, .04), 0 12px 32px -12px rgba(15, 34, 41, .14); --mc-shadow-lg: 0 24px 70px -24px rgba(15, 34, 41, .3); /* ---- Movimento ---- */ --mc-ease: cubic-bezier(.16, 1, .3, 1); --mc-dur-fast: .25s; /* ---- Gradientes ---- */ --mc-grad-primary: linear-gradient(135deg, var(--mc-brand-2), var(--mc-brand)); --mc-grad-deep: linear-gradient(135deg, #07484b, var(--mc-brand)); /* ========================================================= PONTE DE NOMES ANTIGOS A primeira paleta nomeava os tokens pelo matiz (--mc-blue, --mc-gray-200). O /ambulatorio e o /internacao/dashboard foram escritos com esses nomes. Em vez de reescrever os dois CSS, os nomes antigos apontam para a paleta nova — as telas herdam o teal automaticamente. Nomes novos são semânticos (--mc-brand, --mc-surface): use esses. ========================================================= */ --mc-blue: var(--mc-brand); --mc-blue-light: var(--mc-brand-2); --mc-blue-50: var(--mc-brand-soft); --mc-blue-100: var(--mc-brand-soft); --mc-blue-200: var(--mc-border-2); --mc-blue-700: var(--mc-brand-2); --mc-blue-900: #07484b; --mc-ink: var(--mc-text); --mc-white: var(--mc-surface); --mc-gray-50: var(--mc-surface-2); --mc-gray-100: var(--mc-surface-3); --mc-gray-200: var(--mc-border); --mc-gray-300: var(--mc-border-2); --mc-gray-400: var(--mc-text-3); --mc-gray-500: var(--mc-text-2); --mc-gray-600: var(--mc-text-2); --mc-gray-700: var(--mc-text); --mc-gray-800: var(--mc-text); --mc-gray-900: var(--mc-text); --mc-green: var(--mc-success); --mc-green-50: var(--mc-success-soft); --mc-orange: var(--mc-warning); --mc-orange-50: var(--mc-warning-soft); --mc-red: var(--mc-danger); --mc-red-50: var(--mc-danger-soft); --mc-teal: var(--mc-info); --mc-teal-50: var(--mc-info-soft); --mc-indigo: var(--mc-info); --mc-indigo-50: var(--mc-info-soft); --mc-pink: var(--mc-purple); --mc-pink-50: var(--mc-purple-soft); --mc-purple-50: var(--mc-purple-soft); --mc-yellow: var(--mc-warning); --mc-primary: var(--mc-brand); --mc-primary-strong: var(--mc-brand-2); --mc-text-strong: var(--mc-text); --mc-text-muted: var(--mc-text-2); --mc-text-faint: var(--mc-text-3); --mc-border-soft: var(--mc-surface-3); } /* Tema escuro do sistema (data-theme-mode="dark" vem do StateService.ColorTheme). */ [data-theme-mode="dark"] { --mc-brand: #2bb7bc; --mc-brand-2: #3acace; --mc-brand-soft: #0f302f; --mc-brand-ink: #04201f; --mc-brand-rgb: 43, 183, 188; --mc-bg: #070e11; --mc-surface: #0f1a1f; --mc-surface-2: #15242a; --mc-surface-3: #1c2e35; --mc-border: #213339; --mc-border-2: #31474f; --mc-text: #e8f0f2; --mc-text-2: #a5b9c0; --mc-text-3: #6d838b; --mc-success: #33bd77; --mc-success-soft: #0f2a1f; --mc-warning: #dda23f; --mc-warning-soft: #2c2412; --mc-danger: #ee6a5f; --mc-danger-soft: #2d1917; --mc-info: #5c9af1; --mc-info-soft: #112238; --mc-purple: #a58bea; --mc-purple-soft: #201a33; --mc-blue-900: #0a6c70; } /* ===== Escala proporcional de tela ===== Aplicada por wwwroot/js/mc-scale.js, que define --mc-scale a partir da largura útil. Sem a classe a página fica no comportamento normal (reflow), então falha de JS degrada para o layout antigo em vez de quebrar a tela. zoom e não transform: scale(). transform não reflui — o elemento continua ocupando a caixa original, o que exigia pré-compensar a largura e puxar o fim da página com margin-bottom negativo. Medido: sobra de 281px à direita em 1366 e barra de rolagem horizontal em 1920/2560. zoom recalcula o layout, então largura e altura saem certas sozinhas. */ .mc-scaled { zoom: var(--mc-scale, 1); }