/* ================================================================
MedCases Pro — CORE LEGACY CSS
BUILD 484-CSS-CONSOLIDATION → BUILD 485-PREMIUM-TOKENS
----------------------------------------------------------------
Consolidação de 14 arquivos CSS fragmentados (build233…build272
+ medcases-ux-v2) em uma única fonte de verdade.
LIMPEZA REALIZADA:
• 133 declarações duplicadas cross-file eliminadas
• Blocos de build233 sobrescritos por build234 removidos
• Cadeia de !important redundantes colapsada em regra única
• Comentários de scaffolding de build removidos
• Blocos vazios e regras mortas (@media que nunca se aplica) removidos
ARQUITETURA INTERNA:
├── §0 Design Tokens (CSS Custom Properties)
├── §1 Reset & Base (html/body/input anti-zoom/overscroll)
├── §2 Hub Accordion — Layout & Grid (3 níveis de cards)
├── §3 Hub Card — Paleta por módulo (trigger/ico/name/body)
├── §4 Componentes globais (mc-btn, mc-input, microinterações)
├── §5 Tema Dark/Light — identidade visual global
├── §6 Formulário Paciente & Live Dashboard ClCr
├── §7 Módulo Fármacos (lista, modal fd-, snap, copy-rx)
├── §8 Calculator Fullscreen Overlay (#calculator-overlay-*)
├── §9 Category Pills (busca de fármacos)
├── §10 Universal Design System (.univ-*, .theme-*)
├── §11 Módulos específicos (hemo, fluid, scores)
└── §12 Animações & utilitários finais
================================================================ */
/* ================================================================
§0 — DESIGN TOKENS (CSS Custom Properties)
BUILD 485-PREMIUM-TOKENS — Contrato Visual Oficial MedCases Pro
Namespace --mc-* (MedCases). Fonte única de tokens de design.
================================================================ */
:root {
/* ══════════════════════════════════════════════════════════
PALETA OFICIAL DARK MODE (padrão — surface clínica premium)
Regra absoluta: sem card sobre card, sem sombras decorativas,
separação apenas por espaçamento e bordas finas de 0.8px.
══════════════════════════════════════════════════════════ */
--mc-bg-body: #1A1D23; /* Fundo Principal — Body */
--mc-bg-surface: #252930; /* Superfície Principal — Painéis/Cards */
--mc-bg-surface2: #2D3340; /* Superfície Secundária — Controles/Hover */
--mc-bg-input: #171B22; /* Fundo Interno de Campos */
--mc-border: #374151; /* Borda Padrão */
--mc-border-width: 0.8px; /* Espessura estrita */
--mc-text-primary: #FFFFFF; /* Texto Principal */
--mc-text-secondary: #D1D5DB; /* Texto Secundário */
--mc-text-muted: #9CA3AF; /* Texto Auxiliar */
--mc-accent: #10B981; /* Verde MedCases — único acento de cor */
--mc-accent-rgb: 16,185,129;
/* Aliases semânticos (mapeiam para legado) */
--bg-body: var(--mc-bg-body);
--bg-card: var(--mc-bg-surface);
--bg-card2: var(--mc-bg-surface2);
--bg-input: var(--mc-bg-input);
--border-std: var(--mc-border);
--text-primary: var(--mc-text-primary);
--text-secondary: var(--mc-text-secondary);
--text-muted: var(--mc-text-muted);
/* ── Spacing ── */
--mc-space-1: 4px; --mc-space-2: 8px; --mc-space-3: 12px;
--mc-space-4: 16px; --mc-space-5: 20px; --mc-space-6: 24px;
--mc-space-7: 28px; --mc-space-8: 32px;
--mc-card-gap: 16px;
--mc-title-sub-gap: 6px;
--mc-pad-l1: 20px; --mc-pad-l2: 16px; --mc-pad-l3: 14px;
--mc-icon-text-gap: 16px;
/* ── Border Radius ── */
--mc-radius-xs: 6px; --mc-radius-sm: 8px; --mc-radius-md: 12px;
--mc-radius-lg: 16px; --mc-radius-xl: 18px;
/* ── Typography ── */
--mc-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
"Inter", "Segoe UI", system-ui, sans-serif;
--mc-card-name-l1: 14.5px; --mc-card-name-l2: 13.5px; --mc-card-name-l3: 12.5px;
--mc-card-desc-size: 10.5px;
/* Legado — mantidos para compatibilidade com JS existente */
--mc-text-title-dark: var(--mc-text-primary);
--mc-text-sub-dark: var(--mc-text-secondary);
--mc-text-muted-dark: var(--mc-text-muted);
--mc-text-title-light: #111827;
--mc-text-sub-light: #4B5563;
--mc-text-muted-light: #6B7280;
/* ── Animation ── */
--mc-dur-fast: 100ms; --mc-dur-normal: 150ms;
--mc-dur-scroll: 200ms; --mc-dur-slow: 300ms;
--mc-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
--mc-ease-in: cubic-bezier(0.4, 0.0, 1.0, 1);
--mc-ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1);
--mc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── Trigger Heights & Icon Sizes ── */
--mc-trigger-h-l1: 68px; --mc-trigger-h-l2: 60px; --mc-trigger-h-l3: 54px;
--mc-ico-size-l1: 42px; --mc-ico-size-l2: 36px; --mc-ico-size-l3: 32px;
--mc-ico-font-l1: 18px; --mc-ico-font-l2: 15px; --mc-ico-font-l3: 13px;
--mc-ico-radius-l1: 13px; --mc-ico-radius-l2: 10px; --mc-ico-radius-l3: 9px;
/* ── Button & Input — BUILD 487 tokens ── */
--mc-btn-height: 52px; --mc-btn-pad-h: 20px; --mc-btn-radius: 16px;
--mc-btn-font: 14px; --mc-btn-weight: 700;
--mc-input-height: 54px; --mc-input-pad-v: 0px; --mc-input-pad-h: 16px;
--mc-input-radius: 18px; --mc-input-font: 15px;
/* ── Shadows: REMOVIDOS por contrato flat — apenas borda 0.8px ── */
/* box-shadow eliminado em §2. Variáveis mantidas vazias para legacy. */
--mc-shadow-sm: none;
--mc-shadow-md: none;
--mc-shadow-lg: none;
/* ── Level 1 Palettes — cor de acento por módulo (flat: sem gradiente) ── */
--mc-l1-patient-a: var(--mc-bg-surface); --mc-l1-patient-b: var(--mc-bg-surface2);
--mc-l1-clcr-a: var(--mc-bg-surface); --mc-l1-clcr-b: var(--mc-bg-surface2);
--mc-l1-drugs-a: var(--mc-bg-surface); --mc-l1-drugs-b: var(--mc-bg-surface2);
--mc-l1-accent-patient: #4ADE80; --mc-l1-accent-clcr: #34D399; --mc-l1-accent-drugs: #2DD4BF;
--mc-l1-border-patient: rgba(74,222,128,0.22);
--mc-l1-border-clcr: rgba(52,211,153,0.22);
--mc-l1-border-drugs: rgba(45,212,191,0.22);
--mc-l1-body-patient: var(--mc-bg-surface);
--mc-l1-body-clcr: var(--mc-bg-surface);
--mc-l1-body-drugs: var(--mc-bg-surface);
/* ── Level 2 Palettes — flat surfaces ── */
--mc-l2-inter-a: var(--mc-bg-surface); --mc-l2-inter-b: var(--mc-bg-surface2);
--mc-l2-infusao-a: var(--mc-bg-surface); --mc-l2-infusao-b: var(--mc-bg-surface2);
--mc-l2-fluidos-a: var(--mc-bg-surface); --mc-l2-fluidos-b: var(--mc-bg-surface2);
--mc-l2-elec-a: var(--mc-bg-surface); --mc-l2-elec-b: var(--mc-bg-surface2);
--mc-l2-hemo-a: var(--mc-bg-surface); --mc-l2-hemo-b: var(--mc-bg-surface2);
--mc-l2-scores-a: var(--mc-bg-surface); --mc-l2-scores-b: var(--mc-bg-surface2);
/* Acentos cromáticos por módulo — mantidos para identidade */
--mc-l2-accent-inter: #38BDF8; --mc-l2-accent-infusao: #22D3EE;
--mc-l2-accent-fluidos: #34D399; --mc-l2-accent-elec: #818CF8;
--mc-l2-accent-hemo: #FB7185; --mc-l2-accent-scores: #94A3B8;
--mc-l2-border-inter: rgba(56,189,248,0.18);
--mc-l2-border-infusao: rgba(34,211,238,0.18);
--mc-l2-border-fluidos: rgba(52,211,153,0.18);
--mc-l2-border-elec: rgba(129,140,248,0.18);
--mc-l2-border-hemo: rgba(251,113,133,0.18);
--mc-l2-border-scores: rgba(148,163,184,0.18);
/* ── Level 3 Palettes ── */
--mc-l3-ped-a: var(--mc-bg-surface); --mc-l3-ped-b: var(--mc-bg-surface2);
--mc-l3-gest-a: var(--mc-bg-surface); --mc-l3-gest-b: var(--mc-bg-surface2);
--mc-l3-accent-ped: #64748B; --mc-l3-accent-gest: #94A3B8;
--mc-l3-border-ped: rgba(100,116,139,0.22);
--mc-l3-border-gest: rgba(148,163,184,0.18);
/* ── Theme accent — padrão usa Verde MedCases ── */
--theme-accent: var(--mc-accent);
--theme-accent-rgb: var(--mc-accent-rgb);
--theme-bg: rgba(var(--mc-accent-rgb), 0.09);
}
/* ══════════════════════════════════════════════════════════
PALETA OFICIAL LIGHT MODE
Classe .theme-light ou atributo [data-theme="light"]
Também compatível com body.light-mode (legado)
══════════════════════════════════════════════════════════ */
.theme-light,
[data-theme="light"],
body.light-mode {
--mc-bg-body: #F3F4F6; /* Cinza 100 — Fundo Principal */
--mc-bg-surface: #FFFFFF; /* Superfície Principal — Cards/Painéis */
--mc-bg-surface2: #E5E7EB; /* Superfície Secundária — Controles/Hover */
--mc-bg-input: #F9FAFB; /* Fundo Interno de Campos */
--mc-border: #D1D5DB; /* Borda Padrão */
--mc-border-width: 0.8px;
--mc-text-primary: #111827; /* Texto Principal */
--mc-text-secondary: #4B5563; /* Texto Secundário */
--mc-text-muted: #6B7280; /* Texto Auxiliar */
--mc-accent: #10B981; /* Verde MedCases — igual no dark */
--mc-accent-rgb: 16,185,129;
/* Re-mapeia aliases */
--bg-body: var(--mc-bg-body);
--bg-card: var(--mc-bg-surface);
--bg-card2: var(--mc-bg-surface2);
--bg-input: var(--mc-bg-input);
--border-std: var(--mc-border);
--text-primary: var(--mc-text-primary);
--text-secondary: var(--mc-text-secondary);
--text-muted: var(--mc-text-muted);
--mc-shadow-sm: none;
--mc-shadow-md: none;
--mc-shadow-lg: none;
--theme-accent: var(--mc-accent);
--theme-accent-rgb: var(--mc-accent-rgb);
--theme-bg: rgba(var(--mc-accent-rgb), 0.09);
/* Level palettes — flat branco */
--mc-l1-patient-a: var(--mc-bg-surface); --mc-l1-patient-b: var(--mc-bg-surface2);
--mc-l1-clcr-a: var(--mc-bg-surface); --mc-l1-clcr-b: var(--mc-bg-surface2);
--mc-l1-drugs-a: var(--mc-bg-surface); --mc-l1-drugs-b: var(--mc-bg-surface2);
--mc-l1-body-patient: var(--mc-bg-surface);
--mc-l1-body-clcr: var(--mc-bg-surface);
--mc-l1-body-drugs: var(--mc-bg-surface);
--mc-l2-inter-a: var(--mc-bg-surface); --mc-l2-inter-b: var(--mc-bg-surface2);
--mc-l2-infusao-a: var(--mc-bg-surface); --mc-l2-infusao-b: var(--mc-bg-surface2);
--mc-l2-fluidos-a: var(--mc-bg-surface); --mc-l2-fluidos-b: var(--mc-bg-surface2);
--mc-l2-elec-a: var(--mc-bg-surface); --mc-l2-elec-b: var(--mc-bg-surface2);
--mc-l2-hemo-a: var(--mc-bg-surface); --mc-l2-hemo-b: var(--mc-bg-surface2);
--mc-l2-scores-a: var(--mc-bg-surface); --mc-l2-scores-b: var(--mc-bg-surface2);
--mc-l3-ped-a: var(--mc-bg-surface); --mc-l3-ped-b: var(--mc-bg-surface2);
--mc-l3-gest-a: var(--mc-bg-surface); --mc-l3-gest-b: var(--mc-bg-surface2);
}
/* Theme variants por módulo — acentos cromáticos preservados */
.theme-renal { --theme-accent: #10B981; --theme-accent-rgb: 16,185,129; --theme-bg: rgba(16,185,129,0.09); }
.theme-hemo { --theme-accent: #FB7185; --theme-accent-rgb: 251,113,133; --theme-bg: rgba(251,113,133,0.09); }
.theme-eletro { --theme-accent: #A78BFA; --theme-accent-rgb: 167,139,250; --theme-bg: rgba(167,139,250,0.09); }
.theme-fluidos{ --theme-accent: #34D399; --theme-accent-rgb: 52,211,153; --theme-bg: rgba(52,211,153,0.09); }
.theme-scores { --theme-accent: #FBBF24; --theme-accent-rgb: 251,191,36; --theme-bg: rgba(251,191,36,0.09); }
/* ================================================================
§1 — RESET & BASE
BUILD 485: body usa --mc-bg-body; flat design sem box-shadow.
================================================================ */
/* Anti-zoom iOS + overscroll (build254) */
html { background: var(--mc-bg-body, #1A1D23); }
html, body {
overscroll-behavior: none;
overscroll-behavior-y: contain;
height: 100dvh;
min-height: 100dvh;
}
body {
background-color: var(--mc-bg-body, #1A1D23) !important;
color: var(--mc-text-primary, #FFFFFF);
font-family: var(--mc-font-family, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif);
}
#app, #scroll-content {
background: var(--mc-bg-body, #1A1D23);
}
#scroll-content {
overscroll-behavior: contain;
height: 100dvh;
max-height: 100dvh;
scroll-behavior: auto;
scroll-behavior: smooth; /* for JS-initiated scroll only */
}
/* Anti-zoom: font-size ≥ 16px em todos os inputs */
input, textarea, select { font-size: max(16px, 1rem) !important; }
/* Remove spinners numéricos */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
/* BUILD 487-PASSO2 (refined in 3.1): Inputs base — fundo oficial, altura 54px, radius 18px.
Seletores scoped ao hub accordion e módulos de cálculo. NÃO usa seletor genérico
input[type] dentro de .hub-accordion para evitar quebrar o grid interno do card paciente
via min-width. Cada classe nominal é listada explicitamente. */
.hm-field-input, .elec2-field-input, input[type="text"].elec2-field-input,
.hm-input, .hm-search,
.meds-search, #hm-drug-search, #input-busca-interacao,
.univ-input-group input[type="number"], .univ-input-group input[type="text"] {
-webkit-appearance: none;
appearance: none;
height: var(--mc-input-height, 54px) !important;
padding: 0 var(--mc-input-pad-h, 16px) !important;
border-radius: var(--mc-input-radius, 18px) !important;
width: 100% !important;
min-width: 0 !important; /* FIX 3.1: evita overflow do item de grid */
box-sizing: border-box !important;
background: var(--mc-bg-input, #171B22) !important;
border: var(--mc-border-width, 0.8px) solid var(--mc-border, #374151) !important;
color: var(--mc-text-primary, #FFFFFF) !important;
font-size: var(--mc-input-font, 15px) !important;
transition: border-color 0.18s ease !important;
}
/* FIX 3.1: item de grid precisa de min-width:0 para não vazar a coluna */
.hm-input-wrap, .hub-l2-grid > *, .hub-l3-row > *,
.univ-input-group, .elec2-fields-grid > * {
min-width: 0;
}
/* Focus premium: borda verde discreta, sem glow, sem outline azul do browser */
input:focus, select:focus, textarea:focus {
outline: none !important;
border-color: var(--mc-accent, #10B981) !important;
box-shadow: none !important;
}
/* Reforço para os seletores expandidos no BUILD 487 */
.hm-field-input:focus, .elec2-field-input:focus,
.hm-input:focus, .hm-search:focus,
.meds-search:focus, #hm-drug-search:focus, #input-busca-interacao:focus,
.hub-accordion input:focus, .calc-overlay input:focus {
outline: none !important;
border-color: var(--mc-accent, #10B981) !important;
box-shadow: none !important;
}
input.field-highlight {
outline: 1.5px solid var(--mc-accent, #10B981) !important;
box-shadow: none !important;
}
/* Transições globais suaves */
button {
transition: opacity 0.15s ease, transform 0.12s ease, background 0.18s ease !important;
}
button:active { transform: scale(0.97) !important; opacity: 0.88 !important; }
/* Flat: transições sem box-shadow */
.drug-result-card, .card, .hm-card {
transition: border-color 0.18s ease !important;
}
.hub-card-trigger, .hub-card-body, .hub-card-ico, .hub-card-chevron {
transition: background 0.22s ease, color 0.18s ease, opacity 0.18s ease !important;
}
/* ================================================================
§2 — HUB ACCORDION — LAYOUT & GRID
================================================================ */
/* BUILD 486-GRID-RESTORE: Container principal — grid mobile-first (flex colapsava masonry) */
.hub-accordion {
display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--mc-card-gap, 16px) !important;
width: 100%;
align-items: start;
}
/* Grid 2 colunas obrigatório (build254 — anti-colapso iOS) */
.hub-l2-grid, .hub-l2-section, .elec2-fields-grid, .elec2-elec-grid,
.hub-l3-row, .hub-l3-section {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.hub-accordion--expanded .hub-l2-grid,
.hub-accordion--expanded .hub-l2-section,
.hub-accordion--expanded .hub-l3-row,
.hub-accordion--expanded .hub-l3-section {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
}
.hub-l2-grid .hub-card.is-open, .hub-l2-section .hub-card.is-open,
.hub-l3-row .hub-card.is-open, .hub-l3-section .hub-card.is-open {
grid-column: 1 / -1 !important;
}
/* Linha padrão 2 colunas */
.hub-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mc-card-gap);
width: 100%;
align-items: start;
}
.hub-row--full { width: 100%; }
@media (max-width: 359px) { .hub-row { grid-template-columns: 1fr; } }
/* BUILD 486-GRID-RESTORE: ≥768px — masonry 2 colunas (tablets e web) */
@media (min-width: 768px) {
.hub-l1-pair { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--mc-card-gap) !important; align-items: start; }
.hub-l2-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--mc-card-gap) !important; align-items: start; }
.hub-accordion { grid-template-columns: repeat(2, 1fr) !important; gap: var(--mc-card-gap, 16px) !important; }
#hub-card-patient, #hub-card-interacoes { grid-column: span 2 !important; }
}
@media (min-width: 900px) {
.elec2-fields-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1024px) {
.hub-l2-grid { grid-template-columns: 1fr 1fr !important; gap: var(--mc-card-gap) !important; }
.hub-card[data-level="1"] .hub-card-inner { padding: 22px 24px !important; }
.hub-card[data-level="2"] .hub-card-inner { padding: 18px 20px !important; }
.hub-card[data-level="3"] .hub-card-inner { padding: 16px 18px !important; }
}
@media (min-width: 1200px) {
.hub-accordion { grid-template-columns: repeat(3, 1fr) !important; }
#hub-card-patient, #hub-card-interacoes { grid-column: span 3 !important; }
}
@media (min-width: 600px) {
.hub-card-inner { padding: 14px 18px 16px !important; }
}
/* Hub card — body transition */
.hub-card-body {
transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease !important;
overflow: hidden;
padding: 0 !important;
}
.hub-card-inner { padding: 12px 14px 14px !important; }
/* Hierarquia visual por data-level */
.hub-card[data-level="1"] .hub-card-trigger { min-height: var(--mc-trigger-h-l1) !important; padding: 0 20px !important; gap: var(--mc-icon-text-gap) !important; }
.hub-card[data-level="1"] .hub-card-ico { width: var(--mc-ico-size-l1) !important; height: var(--mc-ico-size-l1) !important; font-size: var(--mc-ico-font-l1) !important; border-radius: var(--mc-ico-radius-l1) !important; flex-shrink: 0 !important; }
.hub-card[data-level="1"] .hub-card-name { font-size: var(--mc-card-name-l1) !important; font-weight: 700 !important; letter-spacing: -0.2px !important; }
.hub-card[data-level="1"] .hub-card-desc { font-size: 11px !important; margin-top: var(--mc-title-sub-gap) !important; }
.hub-card[data-level="1"] .hub-card-inner { padding: var(--mc-pad-l1) !important; }
.hub-card[data-level="2"] .hub-card-trigger { min-height: var(--mc-trigger-h-l2) !important; padding: 0 16px !important; gap: var(--mc-icon-text-gap) !important; }
.hub-card[data-level="2"] .hub-card-ico { width: var(--mc-ico-size-l2) !important; height: var(--mc-ico-size-l2) !important; font-size: var(--mc-ico-font-l2) !important; border-radius: var(--mc-ico-radius-l2) !important; flex-shrink: 0 !important; }
.hub-card[data-level="2"] .hub-card-name { font-size: var(--mc-card-name-l2) !important; font-weight: 700 !important; }
.hub-card[data-level="2"] .hub-card-desc { font-size: 10.5px !important; margin-top: var(--mc-title-sub-gap) !important; }
.hub-card[data-level="2"] .hub-card-inner { padding: var(--mc-pad-l2) !important; }
.hub-card[data-level="3"] .hub-card-trigger { min-height: var(--mc-trigger-h-l3) !important; padding: 0 14px !important; gap: 12px !important; }
.hub-card[data-level="3"] .hub-card-ico { width: var(--mc-ico-size-l3) !important; height: var(--mc-ico-size-l3) !important; font-size: var(--mc-ico-font-l3) !important; border-radius: var(--mc-ico-radius-l3) !important; flex-shrink: 0 !important; }
.hub-card[data-level="3"] .hub-card-name { font-size: var(--mc-card-name-l3) !important; font-weight: 600 !important; }
.hub-card[data-level="3"] .hub-card-desc { font-size: 10px !important; margin-top: var(--mc-title-sub-gap) !important; }
.hub-card[data-level="3"] .hub-card-inner { padding: var(--mc-pad-l3) !important; }
/* Card estático (clcr dashboard) */
.hub-card--static { cursor: default; }
.hub-card--static .hub-card-trigger { display: none !important; }
.clcr-live-dashboard--standalone { padding-top: 14px; }
/* Overlay ativo: trava scroll de fundo */
body.calc-overlay-open #scroll-content { overflow: hidden !important; touch-action: none; }
.hub-card.is-open .hub-card-body { display: none !important; }
/* ================================================================
§3 — HUB CARD — PALETA POR MÓDULO
(trigger, ico, name, chevron, body, border, shadow)
================================================================ */
/* ──────────────────────────────────────────────────────────────
§3 — HUB CARD — PALETA POR MÓDULO
BUILD 485-PREMIUM-TOKENS: FLAT DESIGN
• Triggers: superfície flat (--mc-bg-surface) com borda de
acento cromático (0.8px). SEM gradiente. SEM box-shadow.
• Aberto: superfície levemente mais clara (--mc-bg-surface2).
• Bodies: mesmo fundo de superfície — zero card-sobre-card.
• Identidade visual: acento cromático por módulo no ícone,
no nome e no chevron. Borda lateral visível.
────────────────────────────────────────────────────────────── */
/* Base comum: todos os hub-card herdam superfície flat */
.hub-card {
background: var(--mc-bg-surface, #252930) !important;
border: var(--mc-border-width, 0.8px) solid var(--mc-border, #374151) !important;
border-radius: var(--mc-radius-lg, 16px) !important;
box-shadow: none !important;
overflow: hidden; /* garante que trigger herda o border-radius do card pai */
}
/* BUILD 487-PASSO1: trigger transparente — peça única com o card, sem "adesivo preto".
O fundo é herdado do .hub-card pai (#252930). overflow:hidden no .hub-card garante
que o trigger fique contido dentro do border-radius do card sem criar um recorte visível.
border-bottom cromáticos por módulo (ex: #hub-card-patient .hub-card-trigger) continuam
funcionando pois já têm !important e specificidade maior. */
.hub-card-trigger {
background: transparent !important;
box-shadow: none !important;
}
/* Trigger aberto: sinaliza estado com surface2 sem criar contraste agressivo */
.hub-card.is-open .hub-card-trigger {
background: var(--mc-bg-surface2, #2D3340) !important;
}
.hub-card-body {
background: var(--mc-bg-surface, #252930) !important;
}
.hub-card-inner {
background: transparent !important;
}
/* ── DADOS DO PACIENTE — acento #4ADE80 ── */
#hub-card-patient { border-color: var(--mc-l1-border-patient, rgba(74,222,128,0.22)) !important; }
#hub-card-patient.is-open { border-color: rgba(74,222,128,0.40) !important; }
#hub-card-patient .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l1-border-patient, rgba(74,222,128,0.22)) !important; }
#hub-card-patient .hub-card-ico { background: rgba(74,222,128,0.12) !important; color: #4ADE80 !important; }
#hub-card-patient .hub-card-name { color: #86EFAC !important; }
#hub-card-patient .hub-card-desc { color: rgba(134,239,172,0.70) !important; }
#hub-card-patient .hub-card-chevron{ color: rgba(134,239,172,0.50) !important; }
#hub-card-patient .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── CLCR RENAL — acento #34D399 ── */
#hub-card-clcr { border-color: var(--mc-l1-border-clcr, rgba(52,211,153,0.22)) !important; }
#hub-card-clcr.is-open { border-color: rgba(52,211,153,0.40) !important; }
#hub-card-clcr .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l1-border-clcr, rgba(52,211,153,0.22)) !important; }
#hub-card-clcr .hub-card-ico { background: rgba(52,211,153,0.12) !important; color: #34D399 !important; }
#hub-card-clcr .hub-card-name { color: #A7F3D0 !important; }
#hub-card-clcr .hub-card-desc { color: rgba(167,243,208,0.70) !important; }
#hub-card-clcr .hub-card-chevron{ color: rgba(167,243,208,0.50) !important; }
#hub-card-clcr .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── FÁRMACOS — acento #2DD4BF ── */
#hub-card-farmacos { border-color: var(--mc-l1-border-drugs, rgba(45,212,191,0.22)) !important; }
#hub-card-farmacos.is-open { border-color: rgba(45,212,191,0.40) !important; }
#hub-card-farmacos .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l1-border-drugs, rgba(45,212,191,0.22)) !important; }
#hub-card-farmacos .hub-card-ico { background: rgba(45,212,191,0.12) !important; color: #2DD4BF !important; }
#hub-card-farmacos .hub-card-name { color: #99F6E4 !important; }
#hub-card-farmacos .hub-card-desc { color: rgba(153,246,228,0.70) !important; }
#hub-card-farmacos .hub-card-chevron{ color: rgba(153,246,228,0.50) !important; }
#hub-card-farmacos .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── INTERAÇÕES — acento #38BDF8 ── */
#hub-card-interacoes { border-color: var(--mc-l2-border-inter, rgba(56,189,248,0.18)) !important; }
#hub-card-interacoes.is-open { border-color: rgba(56,189,248,0.36) !important; }
#hub-card-interacoes .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l2-border-inter, rgba(56,189,248,0.18)) !important; }
#hub-card-interacoes .hub-card-ico { background: rgba(56,189,248,0.10) !important; color: #38BDF8 !important; }
#hub-card-interacoes .hub-card-name { color: #BAE6FD !important; }
#hub-card-interacoes .hub-card-desc { color: rgba(186,230,253,0.68) !important; }
#hub-card-interacoes .hub-card-chevron{ color: rgba(186,230,253,0.45) !important; }
#hub-card-interacoes .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── INFUSÃO — acento #22D3EE ── */
#hub-card-infusao { border-color: var(--mc-l2-border-infusao, rgba(34,211,238,0.18)) !important; }
#hub-card-infusao.is-open { border-color: rgba(34,211,238,0.36) !important; }
#hub-card-infusao .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l2-border-infusao, rgba(34,211,238,0.18)) !important; }
#hub-card-infusao .hub-card-ico { background: rgba(34,211,238,0.10) !important; color: #22D3EE !important; }
#hub-card-infusao .hub-card-name { color: #A5F3FC !important; }
#hub-card-infusao .hub-card-desc { color: rgba(165,243,252,0.68) !important; }
#hub-card-infusao .hub-card-chevron{ color: rgba(165,243,252,0.45) !important; }
#hub-card-infusao .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── FLUIDOS — acento #22C55E ── */
#hub-card-fluidos { border-color: var(--mc-l2-border-fluidos, rgba(52,211,153,0.18)) !important; }
#hub-card-fluidos.is-open { border-color: rgba(34,197,94,0.36) !important; }
#hub-card-fluidos .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l2-border-fluidos, rgba(52,211,153,0.18)) !important; }
#hub-card-fluidos .hub-card-ico { background: rgba(34,197,94,0.14) !important; color: #22C55E !important; }
#hub-card-fluidos .hub-card-name { color: #A7F3D0 !important; }
#hub-card-fluidos .hub-card-desc { color: rgba(167,243,208,0.68) !important; }
#hub-card-fluidos .hub-card-chevron{ color: rgba(167,243,208,0.45) !important; }
#hub-card-fluidos .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── ELETRÓLITOS — acento #818CF8 ── */
#hub-card-eletrolitos { border-color: var(--mc-l2-border-elec, rgba(129,140,248,0.18)) !important; }
#hub-card-eletrolitos.is-open { border-color: rgba(129,140,248,0.36) !important; }
#hub-card-eletrolitos .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l2-border-elec, rgba(129,140,248,0.18)) !important; }
#hub-card-eletrolitos .hub-card-ico { background: rgba(129,140,248,0.10) !important; color: #818CF8 !important; }
#hub-card-eletrolitos .hub-card-name { color: #C7D2FE !important; }
#hub-card-eletrolitos .hub-card-desc { color: rgba(199,210,254,0.68) !important; }
#hub-card-eletrolitos .hub-card-chevron{ color: rgba(199,210,254,0.45) !important; }
#hub-card-eletrolitos .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── HEMODINÂMICA — acento #FB7185 ── */
#hub-card-hemodinamica { border-color: var(--mc-l2-border-hemo, rgba(251,113,133,0.18)) !important; }
#hub-card-hemodinamica.is-open { border-color: rgba(251,113,133,0.36) !important; }
#hub-card-hemodinamica .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l2-border-hemo, rgba(251,113,133,0.18)) !important; }
#hub-card-hemodinamica .hub-card-ico { background: rgba(251,113,133,0.10) !important; color: #FB7185 !important; }
#hub-card-hemodinamica .hub-card-name { color: #FCA5A5 !important; }
#hub-card-hemodinamica .hub-card-desc { color: rgba(252,165,165,0.68) !important; }
#hub-card-hemodinamica .hub-card-chevron{ color: rgba(252,165,165,0.45) !important; }
#hub-card-hemodinamica .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── SCORES — acento #94A3B8 ── */
#hub-card-scores { border-color: var(--mc-l2-border-scores, rgba(148,163,184,0.18)) !important; }
#hub-card-scores.is-open { border-color: rgba(148,163,184,0.35) !important; }
#hub-card-scores .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l2-border-scores, rgba(148,163,184,0.18)) !important; }
#hub-card-scores .hub-card-ico { background: rgba(148,163,184,0.10) !important; color: #94A3B8 !important; }
#hub-card-scores .hub-card-name { color: #CBD5E1 !important; }
#hub-card-scores .hub-card-desc { color: rgba(203,213,225,0.68) !important; }
#hub-card-scores .hub-card-chevron{ color: rgba(203,213,225,0.45) !important; }
#hub-card-scores .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── PEDIATRIA — acento #64748B ── */
#hub-card-pediatria { border-color: var(--mc-l3-border-ped, rgba(100,116,139,0.22)) !important; }
#hub-card-pediatria.is-open { border-color: rgba(100,116,139,0.38) !important; }
#hub-card-pediatria .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l3-border-ped, rgba(100,116,139,0.22)) !important; }
#hub-card-pediatria .hub-card-ico { background: rgba(100,116,139,0.12) !important; color: #64748B !important; }
#hub-card-pediatria .hub-card-name { color: #CBD5E1 !important; }
#hub-card-pediatria .hub-card-desc { color: rgba(203,213,225,0.62) !important; }
#hub-card-pediatria .hub-card-chevron{ color: rgba(203,213,225,0.42) !important; }
#hub-card-pediatria .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* ── GESTANTE — acento #94A3B8 ── */
#hub-card-gestante { border-color: var(--mc-l3-border-gest, rgba(148,163,184,0.18)) !important; }
#hub-card-gestante.is-open { border-color: rgba(148,163,184,0.32) !important; }
#hub-card-gestante .hub-card-trigger { border-bottom: var(--mc-border-width) solid var(--mc-l3-border-gest, rgba(148,163,184,0.18)) !important; }
#hub-card-gestante .hub-card-ico { background: rgba(148,163,184,0.10) !important; color: #94A3B8 !important; }
#hub-card-gestante .hub-card-name { color: #E2E8F0 !important; }
#hub-card-gestante .hub-card-desc { color: rgba(226,232,240,0.60) !important; }
#hub-card-gestante .hub-card-chevron{ color: rgba(226,232,240,0.40) !important; }
#hub-card-gestante .hub-card-body { background: var(--mc-bg-surface, #252930) !important; }
/* Ícones de identidade por módulo — data-hub aliases (flat, sem sombra) */
.hub-card[data-hub="clcr"] .hub-card-ico { background: rgba(16,185,129,0.12) !important; color: #10B981 !important; }
.hub-card[data-hub="eletrolitos"] .hub-card-ico { background: rgba(129,140,248,0.12) !important; color: #818CF8 !important; }
.hub-card[data-hub="infusao"] .hub-card-ico { background: rgba(34,211,238,0.12) !important; color: #22D3EE !important; }
.hub-card[data-hub="farmacos"] .hub-card-ico { background: rgba(45,212,191,0.12) !important; color: #2DD4BF !important; }
.hub-card[data-hub="interacoes"] .hub-card-ico { background: rgba(56,189,248,0.12) !important; color: #38BDF8 !important; }
.hub-card[data-hub="scores"] .hub-card-ico { background: rgba(148,163,184,0.12) !important; color: #94A3B8 !important; }
.hub-card[data-hub="hemodinamica"] .hub-card-ico { background: rgba(251,113,133,0.12) !important; color: #FB7185 !important; }
.hub-card[data-hub="patient"] .hub-card-ico { background: rgba(74,222,128,0.12) !important; color: #4ADE80 !important; }
/* ================================================================
§4 — COMPONENTES GLOBAIS
================================================================ */
/* ── Tipografia dos cards internos ── */
.card-title {
font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
}
/* ── Botão Calcular Premium — Verde MedCases, SEM gradiente azul ── */
.hm-btn--primary, button.hm-btn--primary {
background: var(--mc-accent, #10B981) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: var(--mc-radius-md, 12px) !important;
font-weight: 700 !important;
font-size: 14px !important;
padding: 12px 20px !important;
box-shadow: none !important;
transition: opacity 0.15s ease, transform 0.12s ease !important;
}
.hm-btn--primary:active { opacity: 0.88 !important; transform: scale(0.97) !important; }
.hm-btn--primary:hover { opacity: 0.92 !important; }
/* Botão secundário */
.hm-btn--secondary, button.hm-btn--secondary {
background: var(--mc-bg-surface2, #2D3340) !important;
color: var(--mc-text-secondary, #D1D5DB) !important;
border: var(--mc-border-width, 0.8px) solid var(--mc-border, #374151) !important;
border-radius: var(--mc-radius-md, 12px) !important;
font-weight: 600 !important;
font-size: 13.5px !important;
padding: 10px 18px !important;
box-shadow: none !important;
}
/* Input/card containers internos — flat */
.hm-card, .card {
background: var(--mc-bg-surface, #252930);
border: var(--mc-border-width, 0.8px) solid var(--mc-border, #374151);
border-radius: var(--mc-radius-lg, 16px);
box-shadow: none;
}
.hm-card-inner { background: transparent !important; }
/* ── Bottom Nav ── */
#bottom-nav {
background: var(--mc-bg-surface, #252930) !important;
border-top: var(--mc-border-width, 0.8px) solid var(--mc-border, #374151) !important;
box-shadow: none !important;
}
body.light-mode #bottom-nav {
background: var(--mc-bg-surface, #FFFFFF) !important;
border-top: var(--mc-border-width, 0.8px) solid var(--mc-border, #D1D5DB) !important;
box-shadow: none !important;
}
body.light-mode .nav-btn { color: var(--mc-text-muted, #6B7280) !important; }
body.light-mode .nav-btn.active { color: var(--mc-accent, #10B981) !important; }
body.light-mode .nav-btn .nav-label { color: inherit !important; }
/* ── Drug items ── */
.hm-drug-item { cursor: pointer; transition: background 0.15s ease !important; }
.hm-drug-item:hover, .hm-drug-item:active { background: rgba(16,185,129,0.08) !important; }
.hm-drug-sep { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; padding: 10px 4px 4px; }
.hm-inline-result { border-radius: 12px !important; overflow: hidden !important; }
.hm-inline-result-header { padding: 12px 14px !important; }
/* Scroll suave */
#scroll-content { scroll-behavior: smooth; }
/* Animações de entrada */
#hm-drug-result, #calc-drug-result { animation: coreFactIn 0.22s ease both; }
@keyframes coreFactIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
/* Pill de ClCr — transição semafórica */
#hm-pill-clcr { transition: border-color 0.35s ease, background 0.35s ease; }
/* Fluid result */
.fluid-result-card, #fluid-result .card { border-color: rgba(34,197,94,0.25) !important; }
#fluid-result .card-title { color: #4ADE80 !important; }
#hub-body-patient .hm-card--patient { border-color: rgba(74,222,128,0.22) !important; }
/* Hemodinâmica: flat premium — sem gradiente, borda acento vermelho */
#hub-hemo-slot .card, #hub-body-hemodinamica .card, #subview-hemo .card {
background: var(--mc-bg-surface, #252930) !important;
border-color: rgba(251,113,133,0.25) !important;
box-shadow: none !important;
}
#hub-hemo-slot .card-title, #hub-body-hemodinamica .card-title, #subview-hemo .card-title {
color: #FCA5A5 !important;
background: rgba(251,113,133,0.08) !important;
border-bottom: var(--mc-border-width, 0.8px) solid rgba(251,113,133,0.20) !important;
margin: -14px -14px 14px -14px !important; padding: 12px 14px !important; border-radius: 10px 10px 0 0 !important;
}
#hub-hemo-slot input, #hub-body-hemodinamica input, #subview-hemo input { border-color: rgba(251,113,133,0.25) !important; }
#hub-hemo-slot input:focus, #hub-body-hemodinamica input:focus, #subview-hemo input:focus {
border-color: rgba(251,113,133,0.55) !important; outline: none !important; box-shadow: none !important;
}
#hub-hemo-slot .result-label, #hub-body-hemodinamica .result-label, #subview-hemo .result-label { color: rgba(252,165,165,0.75) !important; }
#hub-hemo-slot .result-value, #hub-body-hemodinamica .result-value, #subview-hemo .result-value { color: #FCA5A5 !important; }
#hub-hemo-slot .results-grid, #hub-body-hemodinamica .results-grid, #subview-hemo .results-grid {
background: rgba(251,113,133,0.05) !important; border-radius: var(--mc-radius-sm, 8px) !important; padding: 10px !important;
border: var(--mc-border-width, 0.8px) solid rgba(251,113,133,0.14) !important;
}
/* ================================================================
§5 — TEMA DARK / LIGHT — IDENTIDADE VISUAL GLOBAL
================================================================ */
/* ── Dark mode: texto global usa tokens oficiais ── */
body:not(.light-mode) { color: var(--mc-text-primary, #FFFFFF); }
body:not(.light-mode) label, body:not(.light-mode) .hm-label,
body:not(.light-mode) input, body:not(.light-mode) button,
body:not(.light-mode) select, body:not(.light-mode) textarea,
body:not(.light-mode) span, body:not(.light-mode) p,
body:not(.light-mode) h1, body:not(.light-mode) h2, body:not(.light-mode) h3,
body:not(.light-mode) h4, body:not(.light-mode) li { color: var(--mc-text-primary, #FFFFFF); }
body:not(.light-mode) input::placeholder, body:not(.light-mode) textarea::placeholder {
color: rgba(255,255,255,0.32) !important;
}
body:not(.light-mode) .hm-input { color: var(--mc-text-primary, #FFFFFF) !important; -webkit-text-fill-color: var(--mc-text-primary, #FFFFFF); }
/* ── Light mode: texto global usa tokens oficiais ── */
body.light-mode {
color: var(--mc-text-primary, #111827);
background-color: var(--mc-bg-body, #F3F4F6) !important;
}
body.light-mode #app,
body.light-mode #scroll-content { background: var(--mc-bg-body, #F3F4F6) !important; }
body.light-mode label:not(.hub-accordion *), body.light-mode .hm-label,
body.light-mode input:not(.hub-accordion *),
body.light-mode button:not(.hub-accordion .hub-card-trigger),
body.light-mode select:not(.hub-accordion *), body.light-mode textarea:not(.hub-accordion *),
body.light-mode span:not(.hub-accordion .hub-card-trigger *),
body.light-mode p:not(.hub-accordion .hub-card-trigger *),
body.light-mode h1:not(.hub-accordion *), body.light-mode h2:not(.hub-accordion *),
body.light-mode h3:not(.hub-accordion *), body.light-mode h4:not(.hub-accordion *),
body.light-mode li:not(.hub-accordion *) { color: var(--mc-text-primary, #111827); }
body.light-mode input::placeholder, body.light-mode textarea::placeholder {
color: rgba(0,0,0,0.32) !important;
}
body.light-mode .hm-input { color: var(--mc-text-primary, #111827) !important; -webkit-text-fill-color: var(--mc-text-primary, #111827); }
/* Light mode: exceções — botões com bg colorido mantêm branco */
body.light-mode .calc-hub-card-v2, body.light-mode .calc-hub-card-v2 *,
body.light-mode .chc-farmacos-btn, body.light-mode .chc-farmacos-btn *,
body.light-mode .hm-btn--primary, body.light-mode .hm-sex-btn--active { color: #FFFFFF !important; }
/* Light mode: cards — superfície branca oficial */
body.light-mode .hm-card {
background: var(--mc-bg-surface, #FFFFFF) !important;
color: var(--mc-text-primary, #111827) !important;
border-color: var(--mc-border, #D1D5DB) !important;
box-shadow: none !important;
}
body.light-mode .hm-card-title { color: var(--mc-text-primary, #111827) !important; }
body.light-mode .hm-card-subtitle{ color: var(--mc-text-secondary, #4B5563) !important; }
body.light-mode .hub-card-inner { background: transparent !important; }
body.light-mode .card {
background: var(--mc-bg-surface, #FFFFFF) !important;
border-color: var(--mc-border, #D1D5DB) !important;
box-shadow: none !important;
}
body.light-mode .card-title { color: var(--mc-text-primary, #111827) !important; }
body.light-mode .calc-hub-card-v2 { box-shadow: none !important; }
/* Light mode: inputs internos */
body.light-mode .drug-result-key { color: #374151 !important; }
body.light-mode .drug-result-value { color: #111827 !important; }
body.light-mode .drug-result-note { color: #4B5563 !important; }
body.light-mode .elec2-field-lbl { color: #374151 !important; }
body.light-mode .elec2-field-input { background: #fff !important; border-color: rgba(0,0,0,0.18) !important; color: #111827 !important; }
body.light-mode .elec2-state-btn { background: rgba(0,0,0,0.07) !important; color: #374151 !important; }
body.light-mode .elec2-field-lbl { color: var(--mc-text-secondary, #4B5563) !important; }
body.light-mode .elec2-field-input {
background: var(--mc-bg-input, #F9FAFB) !important;
border-color: var(--mc-border, #D1D5DB) !important;
color: var(--mc-text-primary, #111827) !important;
}
body.light-mode .elec2-state-btn { background: var(--mc-bg-surface2, #E5E7EB) !important; color: var(--mc-text-secondary, #4B5563) !important; }
body.light-mode .elec2-state-btn.active { background: var(--mc-accent, #10B981) !important; color: #fff !important; }
body.light-mode .hm-search {
background: var(--mc-bg-input, #F9FAFB) !important;
color: var(--mc-text-primary, #111827) !important;
border-color: var(--mc-border, #D1D5DB) !important;
}
body.light-mode .hm-drug-item {
background: var(--mc-bg-surface, #FFFFFF) !important;
border-color: var(--mc-border, #D1D5DB) !important;
}
body.light-mode .hm-drug-name { color: var(--mc-text-primary, #111827) !important; }
body.light-mode .hm-drug-class { color: var(--mc-text-secondary, #4B5563) !important; }
body.light-mode .hm-drug-sep { color: var(--mc-text-muted, #6B7280) !important; }
body.light-mode .hm-drug-item .hm-drug-name { color: var(--mc-text-primary, #111827) !important; }
body.light-mode .hm-drug-item .hm-drug-class { color: var(--mc-text-secondary, #4B5563) !important; }
body.light-mode .hm-drug-dot { background: var(--mc-accent, #10B981) !important; }
body.light-mode .hm-drug-arrow{ color: rgba(0,0,0,0.22) !important; }
body.light-mode .hm-drug-item:hover { background: rgba(16,185,129,0.06) !important; }
body.light-mode .hm-drug-item:active { background: rgba(16,185,129,0.10) !important; }
body.light-mode .hm-pill-val { color: var(--mc-accent, #10B981) !important; }
body.light-mode .hm-pill-lbl { color: var(--mc-text-muted, #6B7280) !important; }
body.light-mode .hm-drug-count { color: var(--mc-text-secondary, #4B5563) !important; background: var(--mc-bg-surface2, #E5E7EB) !important; }
body.light-mode .hm-version-footer { color: rgba(0,0,0,0.25) !important; }
body.light-mode .hm-coming-soon-desc{ color: var(--mc-text-muted, #6B7280) !important; }
body.light-mode .hm-csf-item { color: var(--mc-text-muted, #6B7280) !important; }
body.light-mode .hm-inline-result {
background: rgba(16,185,129,0.06) !important;
border-color: rgba(16,185,129,0.20) !important;
}
body.light-mode .hm-inline-patient-bar { color: var(--mc-text-secondary, #4B5563) !important; }
body.light-mode .hm-inline-no-patient { color: var(--mc-text-secondary, #4B5563) !important; }
body.light-mode .hm-inline-no-patient strong { color: var(--mc-accent, #10B981) !important; }
body.light-mode .hm-inline-close {
background: var(--mc-bg-surface2, #E5E7EB) !important;
border-color: var(--mc-border, #D1D5DB) !important;
color: var(--mc-text-secondary, #4B5563) !important;
}
/* Dark mode: contrastes específicos — usando tokens */
body:not(.light-mode) .hm-drug-class { color: var(--mc-text-muted, #9CA3AF); }
body:not(.light-mode) .hm-pill-lbl { color: var(--mc-text-muted, #9CA3AF); }
body:not(.light-mode) .hm-card--drugs .hm-card-subtitle { color: var(--mc-text-muted, #9CA3AF); }
body:not(.light-mode) .hm-version-footer { color: rgba(156,163,175,0.35); }
body:not(.light-mode) .hm-drug-sep { color: rgba(16,185,129,0.55); }
body:not(.light-mode) .hm-inline-patient-bar { color: var(--mc-text-secondary, #D1D5DB); }
body:not(.light-mode) .hm-inline-no-patient { color: var(--mc-text-secondary, #D1D5DB); }
body:not(.light-mode) .hm-inline-no-patient strong { color: var(--mc-accent, #10B981); }
/* Dark: pills/tags universais */
body:not(.light-mode) .fd-tag, body:not(.light-mode) .fd-badge,
body:not(.light-mode) .fd-adverse-tag, body:not(.light-mode) .fd-cat-tag,
body:not(.light-mode) .safety-pill, body:not(.light-mode) .adverse-pill { color: #FFFFFF !important; }
body.light-mode .fd-tag, body.light-mode .fd-badge,
body.light-mode .fd-adverse-tag, body.light-mode .fd-cat-tag,
body.light-mode .safety-pill, body.light-mode .adverse-pill {
color: #1E293B !important; background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.10) !important;
}
body:not(.light-mode) [class*="pill"]:not(.hm-pill):not(.fd-renal-pill),
body:not(.light-mode) [class*="badge"]:not(.hm-badge):not(.fd-renal-badge):not(.hm-renal-badge) { color: #FFFFFF; }
/* fd-modal dark/light — acento verde, sem azul ciano */
body:not(.light-mode) .fd-section { border-top: var(--mc-border-width, 0.8px) solid rgba(16,185,129,0.12); }
body:not(.light-mode) .fd-section[data-tab="doses"] { border-left: 2px solid var(--mc-accent, #10B981); }
body:not(.light-mode) .fd-section[data-tab="adverse"] { border-left: 2px solid #F87171; }
body:not(.light-mode) .fd-section[data-tab="presentations"]{ border-left: 2px solid #A78BFA; }
body:not(.light-mode) .fd-section[data-tab="monitoring"] { border-left: 2px solid #34D399; }
body:not(.light-mode) .fd-section[data-tab="pregnancy"] { border-left: 2px solid #F472B6; }
body.light-mode .fd-section[data-tab="doses"] { border-left: 2px solid var(--mc-accent, #10B981) !important; }
body.light-mode .fd-section[data-tab="adverse"] { border-left: 2px solid #DC2626 !important; }
body.light-mode .fd-section[data-tab="presentations"]{ border-left: 2px solid #7C3AED !important; }
body.light-mode .fd-section[data-tab="monitoring"] { border-left: 2px solid #15803D !important; }
body.light-mode .fd-section[data-tab="pregnancy"] { border-left: 2px solid #BE123C !important; }
body.light-mode #fd-modal { color: var(--mc-text-primary, #111827) !important; }
body.light-mode #fd-modal .fd-section-text { color: var(--mc-text-secondary, #4B5563) !important; }
body.light-mode #fd-modal .fd-section-label { color: var(--mc-text-muted, #6B7280) !important; background: var(--mc-bg-surface2, #E5E7EB) !important; }
body.light-mode .fd-renal-header-icon { color: var(--mc-accent, #10B981) !important; }
body.light-mode .fd-renal-pill-val { color: var(--mc-text-primary, #111827) !important; }
/* fd-tab-btn — acento verde, sem azul */
body:not(.light-mode) .fd-tab-btn {
color: var(--mc-text-muted, #9CA3AF);
background: rgba(255,255,255,0.04);
border: var(--mc-border-width, 0.8px) solid rgba(255,255,255,0.07);
border-radius: var(--mc-radius-sm, 8px); padding: 6px 12px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.18s;
}
body:not(.light-mode) .fd-tab-btn.active, body:not(.light-mode) .fd-tab-btn:hover {
background: rgba(16,185,129,0.10);
border-color: rgba(16,185,129,0.28);
color: var(--mc-accent, #10B981);
}
body.light-mode .fd-tab-btn {
color: var(--mc-text-secondary, #4B5563);
background: var(--mc-bg-surface2, #E5E7EB);
border: var(--mc-border-width, 0.8px) solid var(--mc-border, #D1D5DB);
border-radius: var(--mc-radius-sm, 8px); padding: 6px 12px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.18s;
}
body.light-mode .fd-tab-btn.active, body.light-mode .fd-tab-btn:hover {
background: rgba(16,185,129,0.10) !important;
border-color: rgba(16,185,129,0.28) !important;
color: var(--mc-accent, #10B981) !important;
}
/* Renal badges */
body:not(.light-mode) .fd-renal-pill-val { color: #E2E8F0; }
body:not(.light-mode) .fd-renal-pill-lbl { color: rgba(148,163,184,0.65); }
body:not(.light-mode) .hm-renal-badge--ok { background: rgba(34,197,94,0.16); color: #4ADE80; border: 1px solid rgba(34,197,94,0.30); }
body:not(.light-mode) .hm-renal-badge--alert { background: rgba(251,191,36,0.16); color: #FCD34D; border: 1px solid rgba(251,191,36,0.30); }
body:not(.light-mode) .hm-renal-badge--hd { background: rgba(248,113,113,0.16); color: #FCA5A5; border: 1px solid rgba(248,113,113,0.30); }
body.light-mode .hm-renal-badge--ok { background: rgba(21,128,61,0.10) !important; color: #15803D !important; border: 1px solid rgba(21,128,61,0.25) !important; }
body.light-mode .hm-renal-badge--alert { background: rgba(146,64,14,0.10) !important; color: #92400E !important; border: 1px solid rgba(146,64,14,0.22) !important; }
body.light-mode .hm-renal-badge--hd { background: rgba(185,28,28,0.09) !important; color: #B91C1C !important; border: 1px solid rgba(185,28,28,0.20) !important; }
body.light-mode .hm-renal-dose { color: #334155 !important; }
/* Patient card profile variants (light) — flat, sem gradiente */
body.light-mode #hm-patient-card.hm-profile-pedia {
background: rgba(251,191,36,0.08) !important;
border-color: rgba(251,191,36,0.30) !important;
box-shadow: none !important;
}
body.light-mode #hm-patient-card.hm-profile-pedia .hm-card-title { color: #92400E !important; }
body.light-mode #hm-patient-card.hm-profile-female {
background: rgba(244,63,94,0.06) !important;
border-color: rgba(244,63,94,0.25) !important;
box-shadow: none !important;
}
body.light-mode #hm-patient-card.hm-profile-female .hm-card-title { color: #9D174D !important; }
body.light-mode #hm-patient-card.hm-profile-male {
border-color: rgba(16,185,129,0.25) !important;
background: rgba(16,185,129,0.05) !important;
box-shadow: none !important;
}
body.light-mode #hm-patient-card.hm-profile-male .hm-card-title { color: var(--mc-accent, #10B981) !important; }
body.light-mode #hm-patient-card .hm-card-title { color: var(--mc-text-primary, #111827) !important; }
body.light-mode #hm-patient-card .hm-label { color: var(--mc-text-secondary, #4B5563) !important; }
body.light-mode #hm-patient-card .hm-label-unit { color: var(--mc-text-muted, #6B7280) !important; }
/* ================================================================
§6 — FORMULÁRIO PACIENTE & LIVE DASHBOARD CLCR
================================================================ */
/* Inline result animation */
#hm-drug-result > .hm-inline-result { animation: inlineSlideIn 0.28s cubic-bezier(0.22,1,0.36,1); }
@keyframes inlineSlideIn { from { opacity:0; transform:translateY(-6px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
/* Live Dashboard ClCr — grid 2×2 — flat, fundo superfície */
.clcr-live-dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas: "clcr imc" "peso bsa";
gap: 8px;
padding: 10px 12px 14px;
background: var(--mc-bg-surface, #252930);
border: var(--mc-border-width, 0.8px) solid var(--mc-border, #374151);
border-radius: var(--mc-radius-lg, 16px);
box-sizing: border-box;
width: 100%;
}
#clcr-live-q-clcr { grid-area: clcr; }
#clcr-live-q-imc { grid-area: imc; }
#clcr-live-q-peso { grid-area: peso; }
#clcr-live-q-bsa { grid-area: bsa; }
.clcr-live-quad {
min-width: 0; overflow: hidden;
background: rgba(var(--mc-accent-rgb, 16,185,129), 0.07);
border: var(--mc-border-width, 0.8px) solid rgba(var(--mc-accent-rgb, 16,185,129), 0.20);
border-radius: var(--mc-radius-sm, 10px); padding: 10px 6px 9px; text-align: center;
box-sizing: border-box; transition: border-color 0.3s ease, background 0.3s ease;
}
.clcr-live-quad-val {
display: block; font-size: 20px; font-weight: 800;
color: var(--mc-accent, #10B981);
line-height: 1; letter-spacing: -0.4px; white-space: nowrap; transition: color 0.3s ease;
}
.clcr-live-quad-val.is-empty { color: var(--mc-text-muted, #9CA3AF); font-weight: 700; }
.clcr-live-quad-lbl {
display: block; font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
text-transform: uppercase; color: var(--mc-text-muted, #9CA3AF); margin-top: 4px; white-space: nowrap;
}
body.light-mode .clcr-live-dashboard {
background: var(--mc-bg-surface, #FFFFFF);
border-color: var(--mc-border, #D1D5DB);
}
body.light-mode .clcr-live-quad-val.is-empty { color: rgba(0,0,0,0.25); }
body.light-mode .clcr-live-quad-lbl { color: var(--mc-text-muted, #6B7280); }
@media (min-width: 600px) { .clcr-live-quad-val { font-size: 22px; } }
/* Grid Card ClCr estático — flat com acento verde */
.grid-card-clcr {
display: flex; flex-direction: column; align-items: center; justify-content: center;
background: rgba(16,185,129,0.06);
border: var(--mc-border-width, 0.8px) solid rgba(16,185,129,0.18);
border-radius: var(--mc-radius-sm, 10px); padding: 10px 8px; min-width: 0; box-sizing: border-box; text-align: center;
}
.grid-card-title {
display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
color: var(--mc-text-muted, #9CA3AF); text-transform: uppercase; margin-bottom: 4px; line-height: 1.2;
}
.grid-card-value {
display: block; font-size: 22px; font-weight: 800;
color: var(--mc-accent, #10B981);
line-height: 1.1; letter-spacing: -0.01em;
}
/* ================================================================
§7 — MÓDULO FÁRMACOS: SNAP, COPY-RX, MODAL
================================================================ */
/* Snap formulation */
.hm-snap-formulation { display: flex; flex-direction: column; gap: 5px; padding: 8px 14px 4px; animation: snapIn 0.22s ease; }
@keyframes snapIn { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
.hm-snap-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 10px; background: rgba(52,211,153,0.12); border: 1.5px solid rgba(52,211,153,0.30); color: #34D399; font-size: 16px; font-weight: 800; letter-spacing: -0.3px; width: fit-content; }
.hm-snap-badge i { font-size: 11px; color: #34D399; }
.hm-snap-badge .hm-snap-via { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: rgba(52,211,153,0.20); color: #34D399; border: 1px solid rgba(52,211,153,0.35); letter-spacing: 0.5px; text-transform: uppercase; vertical-align: middle; }
.hm-snap-info { font-size: 10.5px; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 5px; line-height: 1.4; }
.hm-snap-info i { font-size: 9px; color: rgba(52,211,153,0.60); flex-shrink: 0; }
.hm-snap-info strong { color: rgba(255,255,255,0.70); }
.hm-snap-exact .hm-snap-badge { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.22); color: var(--mc-accent, #10B981); }
.hm-snap-exact .hm-snap-badge i { color: var(--mc-accent, #10B981); }
body.light-mode .hm-snap-badge { background: rgba(21,128,61,0.09) !important; border-color: rgba(21,128,61,0.25) !important; color: #15803D !important; }
body.light-mode .hm-snap-badge i { color: #15803D !important; }
body.light-mode .hm-snap-badge .hm-snap-via { background: rgba(21,128,61,0.12) !important; color: #15803D !important; border-color: rgba(21,128,61,0.25) !important; }
body.light-mode .hm-snap-info { color: rgba(0,0,0,0.50) !important; }
body.light-mode .hm-snap-info i { color: rgba(21,128,61,0.55) !important; }
body.light-mode .hm-snap-info strong { color: rgba(0,0,0,0.70) !important; }
body.light-mode .hm-snap-exact .hm-snap-badge { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.22) !important; color: var(--mc-accent, #10B981) !important; }
body.light-mode .hm-snap-exact .hm-snap-badge i { color: var(--mc-accent, #10B981) !important; }
/* Copy-Rx button */
.hm-copy-rx-wrap { padding: 0 14px 12px; display: flex; gap: 8px; align-items: center; }
.hm-copy-rx-btn { flex: 1; padding: 10px 14px; border-radius: 11px; border: 1.5px solid rgba(52,211,153,0.30); background: rgba(52,211,153,0.09); color: #34D399; font-family: 'Inter',sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; letter-spacing: 0.1px; }
.hm-copy-rx-btn:hover { background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.45); }
.hm-copy-rx-btn:active { transform: scale(0.965); background: rgba(52,211,153,0.20); }
.hm-copy-rx-btn i { font-size: 12px; }
.hm-copy-rx-btn.is-copied { background: rgba(52,211,153,0.22) !important; border-color: rgba(52,211,153,0.55) !important; color: #34D399 !important; }
body.light-mode .hm-copy-rx-btn { background: rgba(21,128,61,0.07) !important; border-color: rgba(21,128,61,0.25) !important; color: #15803D !important; }
body.light-mode .hm-copy-rx-btn:hover { background: rgba(21,128,61,0.12) !important; border-color: rgba(21,128,61,0.40) !important; }
body.light-mode .hm-copy-rx-btn.is-copied{ background: rgba(21,128,61,0.18) !important; border-color: rgba(21,128,61,0.55) !important; color: #15803D !important; }
/* calc-hub-card-v2 */
.calc-hub-grid-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 16px; }
@media (min-width: 768px) { .calc-hub-grid-v2 { grid-template-columns: 1fr 1fr 1fr; gap: 12px; } }
@media (min-width: 1024px){ .calc-hub-grid-v2 { grid-template-columns: repeat(4,1fr); gap: 14px; } }
/* calc-hub-card-v2 — flat premium: fundo sólido escuro + borda acento */
.calc-hub-card-v2 {
display: flex; align-items: center; gap: 10px; padding: 14px 12px;
border-radius: var(--mc-radius-lg, 14px); cursor: pointer; position: relative; overflow: hidden;
transition: transform 0.15s ease, opacity 0.15s ease;
-webkit-tap-highlight-color: transparent;
border: var(--mc-border-width, 0.8px) solid rgba(255,255,255,0.10);
box-shadow: none;
}
.calc-hub-card-v2:active { transform: scale(0.96); opacity: 0.88; }
.calc-hub-card-v2 .chc-icon-wrap {
width: 38px; height: 38px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 17px; flex-shrink: 0; background: rgba(255,255,255,0.14);
}
.calc-hub-card-v2 .chc-info { flex: 1; min-width: 0; }
.calc-hub-card-v2 .chc-title { font-size: 13px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calc-hub-card-v2 .chc-desc { font-size: 10px; opacity: 0.72; margin-top: 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chc-count-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: rgba(255,255,255,0.16); white-space: nowrap; flex-shrink: 0; }
.chc-arrow-right { margin-left: auto; font-size: 13px; opacity: 0.50; flex-shrink: 0; }
.chc-fluids--fullwidth { grid-column: 1 / -1; }
/* Cores sólidas por categoria — SEM gradiente */
.calc-hub-card-v2.chc-ped { background: #1E3A8A; color:#fff; border-color: rgba(59,130,246,0.25); }
.calc-hub-card-v2.chc-ob { background: #831843; color:#fff; border-color: rgba(244,63,94,0.25); }
.calc-hub-card-v2.chc-infusion { background: #92400E; color:#fff; border-color: rgba(251,146,60,0.25); }
.calc-hub-card-v2.chc-elec { background: #4C1D95; color:#fff; border-color: rgba(139,92,246,0.25); }
.calc-hub-card-v2.chc-atb { background: #78350F; color:#fff; border-color: rgba(251,191,36,0.20); }
.calc-hub-card-v2.chc-farmacos { background: #164E63; color:#fff; border-color: rgba(34,211,238,0.22); }
.calc-hub-card-v2.chc-hemo { background: #7F1D1D; color:#fff; border-color: rgba(248,113,113,0.25); }
.calc-hub-card-v2.chc-scores { background: #1F2937; color:#fff; border-color: rgba(148,163,184,0.22); }
/* Fluidos: Verde MedCases — destaque primário */
.calc-hub-card-v2.chc-fluids {
background: #065F46; color:#fff;
border-color: rgba(16,185,129,0.35);
border-width: 1px;
padding: 16px 14px;
}
.calc-hub-card-v2.chc-fluids .chc-icon-wrap { width:44px; height:44px; font-size:20px; color:#A7F3D0; background: rgba(16,185,129,0.20); }
.calc-hub-card-v2.chc-fluids .chc-title { font-size: 15px; }
/* ================================================================
§8 — CALCULATOR FULLSCREEN OVERLAY
================================================================ */
#calculator-overlay-container {
position: fixed; top: 0; left: 0; width: 100vw;
height: 100vh; height: 100dvh;
z-index: 9999; overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
background: var(--mc-bg-body, #1A1D23);
display: flex; flex-direction: column;
transform: translateY(100%); visibility: hidden; pointer-events: none;
transition: transform 0.30s cubic-bezier(0.22,1,0.36,1), visibility 0.30s step-end;
}
#calculator-overlay-container.is-active {
transform: translateY(0); visibility: visible; pointer-events: auto;
transition: transform 0.30s cubic-bezier(0.22,1,0.36,1), visibility 0s;
}
/* Flat: sem radial-gradient decorativo */
body:not(.light-mode) #calculator-overlay-container { background: var(--mc-bg-body, #1A1D23); }
body.light-mode #calculator-overlay-container { background: var(--mc-bg-body, #F3F4F6); }
#calculator-overlay-header {
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; padding-top: max(10px,env(safe-area-inset-top,0px)); padding-right: 58px;
background: var(--mc-bg-surface, #252930);
border-bottom: var(--mc-border-width, 0.8px) solid var(--mc-border, #374151);
box-shadow: none; flex-shrink: 0;
}
body.light-mode #calculator-overlay-header {
background: var(--mc-bg-surface, #FFFFFF);
border-bottom-color: var(--mc-border, #D1D5DB);
}
#calculator-overlay-close {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
border: 1px solid rgba(248,113,113,0.30); background: rgba(248,113,113,0.12);
color: #F87171; font-size: 13px; display: flex; align-items: center; justify-content: center;
cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: transform 0.15s ease, background 0.15s ease; z-index: 3;
}
#calculator-overlay-close:active { transform: translateY(-50%) scale(0.90); background: rgba(248,113,113,0.22); }
#calculator-overlay-title {
flex: 1; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
color: var(--text-primary,#E2E8F0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.light-mode #calculator-overlay-title { color: #1e293b; }
#calculator-overlay-header .calc-overlay-spacer { width: 0; flex-shrink: 0; display: none; }
#calculator-overlay-body { flex: 1; min-height: 0; padding: 14px 13px 32px; }
#calculator-overlay-body .hub-card-inner { padding: 0; animation: none !important; }
@media (min-width: 768px) {
#calculator-overlay-body { padding: 18px 22px 36px; max-width: 720px; margin: 0 auto; width: 100%; }
}
/* ================================================================
§9 — CATEGORY PILLS (busca de fármacos — build244)
================================================================ */
.hm-category-pills-wrap {
padding: 8px 12px 6px; overflow-x: auto; white-space: nowrap;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hm-category-pills-wrap::-webkit-scrollbar { display: none; }
.hm-category-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; margin-right: 6px; border-radius: 20px;
font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
border: 1.5px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.65); transition: all 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.hm-category-pill:active { transform: scale(0.94); }
.hm-category-pill.is-active {
border-color: var(--theme-accent,#38BDF8); background: rgba(var(--theme-accent-rgb,56,189,248),0.12);
color: var(--theme-accent,#38BDF8);
}
.hm-category-pill i { font-size: 10px; }
body.light-mode .hm-category-pill {
border-color: var(--mc-border, #D1D5DB);
background: var(--mc-bg-surface2, #E5E7EB);
color: var(--mc-text-secondary, #4B5563);
}
body.light-mode .hm-category-pill.is-active {
background: rgba(16,185,129,0.10);
border-color: rgba(16,185,129,0.30);
color: var(--mc-accent, #10B981);
}
/* ================================================================
§10 — UNIVERSAL DESIGN SYSTEM (.univ-*, .theme-*)
================================================================ */
/* univ-input-group — flat, sem glow */
.univ-input-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.univ-input-group .univ-label { font-size: 11.5px; font-weight: 700; color: var(--mc-text-muted, #9CA3AF); text-transform: uppercase; letter-spacing: 0.4px; }
.univ-input-group .univ-input-wrap { position: relative; display: flex; align-items: center; }
.univ-input-group .univ-input {
width: 100%; background: var(--mc-bg-input, #171B22);
border: var(--mc-border-width, 0.8px) solid var(--mc-border, #374151);
border-radius: var(--mc-radius-md, 12px); padding: 12px 56px 12px 14px;
font-size: 15px; font-weight: 700; color: var(--mc-text-primary, #FFFFFF);
font-family: 'Inter',sans-serif; transition: border-color 0.2s ease;
}
.univ-input-group .univ-input::placeholder { color: rgba(255,255,255,0.25); font-weight: 500; }
.univ-input-group .univ-input:focus {
outline: none;
border-color: var(--mc-accent, #10B981);
box-shadow: none;
}
.univ-input-group .univ-input-unit {
position: absolute; right: 14px; font-size: 11.5px; font-weight: 800;
color: var(--mc-accent, #10B981); pointer-events: none; letter-spacing: 0.3px;
text-transform: uppercase; background: rgba(0,0,0,0.18); padding: 3px 7px; border-radius: 7px;
}
body.light-mode .univ-input-group .univ-input {
background: var(--mc-bg-input, #F9FAFB);
color: var(--mc-text-primary, #111827);
border-color: var(--mc-border, #D1D5DB);
}
body.light-mode .univ-input-group .univ-input-unit { background: var(--mc-bg-surface2, #E5E7EB); color: var(--mc-accent, #10B981); }
/* univ-toggle-btn — flat premium */
.univ-toggle-btn {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
background: var(--mc-bg-surface2, #2D3340);
border: var(--mc-border-width, 0.8px) solid var(--mc-border, #374151);
border-radius: var(--mc-radius-md, 12px); padding: 10px 14px; margin-bottom: 6px;
font-family: inherit; font-size: 13px; font-weight: 500;
color: var(--mc-text-secondary, #D1D5DB);
cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, transform 0.1s ease;
text-align: left; -webkit-tap-highlight-color: transparent;
}
.univ-toggle-btn:active { transform: scale(0.98); }
.univ-toggle-btn .univ-toggle-label { flex: 1; }
.univ-toggle-btn .univ-toggle-label strong { display: block; color: var(--mc-text-primary, #FFFFFF); font-weight: 700; font-size: 13.5px; }
.univ-toggle-btn .univ-toggle-pts { font-size: 12px; font-weight: 800; color: var(--mc-text-muted, #9CA3AF); flex-shrink: 0; padding: 3px 9px; border-radius: 20px; background: rgba(255,255,255,0.05); }
.univ-toggle-btn.is-active {
border-color: var(--mc-accent, #10B981);
background: rgba(var(--mc-accent-rgb, 16,185,129), 0.09);
color: var(--mc-text-primary, #FFFFFF);
box-shadow: none;
}
.univ-toggle-btn.is-active .univ-toggle-pts { background: var(--mc-accent, #10B981); color: #0B0F17; }
/* univ-score-section / stepper (build273) */
.univ-score-section { margin-bottom: 16px; }
.univ-score-group-title { font-size: 11px; font-weight: 700; color: var(--text-muted,#475569); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.univ-score-group-title::before { content:''; width: 3px; height: 14px; border-radius: 2px; background: var(--theme-accent); }
.univ-toggle-btn--stepper { cursor: default; }
.univ-toggle-btn--stepper:active { transform: none; }
.univ-stepper { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.univ-stepper-btn { width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.22); color: var(--text-secondary,#94A3B8); font-size: 15px; font-weight: 700; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'Inter',sans-serif; transition: all 0.15s ease; }
.univ-stepper-btn:active { background: var(--theme-bg); color: var(--theme-accent); }
.univ-stepper-val { min-width: 32px; text-align: center; font-size: 14px; font-weight: 800; color: var(--text-primary,#E2E8F0); padding: 0 6px; }
body.light-mode .univ-stepper-btn { background: rgba(0,0,0,0.05); }
/* univ-result-card — flat premium, sem glow, sem gradiente */
.univ-result-card { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transform: translateY(-8px); transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease, transform 0.35s ease, margin-top 0.35s ease; }
.univ-result-card.is-visible { max-height: 900px; opacity: 1; margin-top: 14px; transform: translateY(0); }
.univ-result-card-inner {
background: var(--mc-bg-surface, #252930);
border: var(--mc-border-width, 0.8px) solid rgba(var(--mc-accent-rgb, 16,185,129), 0.30);
border-radius: var(--mc-radius-xl, 18px); padding: 18px 16px 16px; text-align: center;
box-shadow: none;
}
.univ-result-header {
font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
color: var(--mc-text-muted, #9CA3AF); margin-bottom: 6px;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.univ-result-number {
font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -1.5px;
color: var(--mc-accent, #10B981);
text-shadow: none;
}
.univ-result-sub { font-size: 12.5px; font-weight: 700; color: var(--mc-text-secondary, #D1D5DB); margin-top: 8px; }
.univ-result-conduct {
margin-top: 14px;
background: rgba(var(--mc-accent-rgb, 16,185,129), 0.05);
border: var(--mc-border-width, 0.8px) solid rgba(var(--mc-accent-rgb, 16,185,129), 0.20);
border-radius: var(--mc-radius-md, 12px); padding: 10px 12px; font-size: 12px; line-height: 1.55;
color: var(--mc-text-primary, #FFFFFF); text-align: left;
}
.univ-result-conduct strong { color: var(--mc-accent, #10B981); }
body.light-mode .univ-result-card-inner {
background: var(--mc-bg-surface, #FFFFFF);
border-color: rgba(16,185,129,0.25);
}
body.light-mode .univ-result-sub { color: var(--mc-text-primary, #111827); }
body.light-mode .univ-result-conduct {
color: var(--mc-text-secondary, #4B5563);
background: rgba(16,185,129,0.04);
}
/* Pontes de compatibilidade (score legado) */
.score-row.selected { border-color: var(--theme-accent,var(--border-green)) !important; background: var(--theme-bg,rgba(14,90,58,0.12)) !important; }
.score-check:checked { background: var(--theme-accent,linear-gradient(135deg,var(--green-mid),var(--green-bright))) !important; }
.stepper-btn:active { color: var(--theme-accent,var(--green-glow)) !important; }
.score-result-box.theme-hemo, .score-result-box.theme-scores,
.score-result-box.theme-renal, .score-result-box.theme-eletro {
background: linear-gradient(160deg,rgba(var(--theme-accent-rgb),0.18) 0%,#0A0E17 65%) !important;
border-color: rgba(var(--theme-accent-rgb),0.35) !important;
}
.score-result-box.theme-hemo .score-result-number,
.score-result-box.theme-scores .score-result-number,
.score-result-box.theme-renal .score-result-number,
.score-result-box.theme-eletro .score-result-number { color: var(--theme-accent) !important; text-shadow: 0 0 20px rgba(var(--theme-accent-rgb),0.35) !important; }
.hm-input:focus, .input-field:focus, #fluid-temp:focus { border-color: var(--mc-accent, #10B981) !important; box-shadow: none !important; }
/* Fade genérico containers resultado legados */
#fluid-result, #hub-clcr-result-area > *, .score-result-box { transition: opacity 0.32s ease, transform 0.32s ease; }
#fluid-result:empty { opacity: 0; }
#fluid-result:not(:empty) { animation: univFadeIn 0.38s ease; }
@keyframes univFadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
/* ================================================================
§11 — MÓDULOS ESPECÍFICOS
================================================================ */
/* §11 overrides — flat, sem gradiente. Triggers herdam de §3. */
/* Hemodinâmica: borda lateral rosa para identidade extra */
#hub-card-hemodinamica { border-left-width: 2px !important; border-left-color: rgba(251,113,133,0.35) !important; }
/* Fluidos: borda lateral verde para identidade */
#hub-card-fluidos { border-left-width: 2px !important; border-left-color: rgba(34,197,94,0.35) !important; }
/* Eletrólitos: borda lateral violeta */
#hub-card-eletrolitos { border-left-width: 2px !important; border-left-color: rgba(129,140,248,0.35) !important; }
/* ── HOTFIX 3.1: Grid interno do card Dados do Paciente ──────── */
/* .hm-input-grid é o container dos 4 campos (Peso/Idade/Altura/Creat).
Definição base: 2 colunas mobile → 4 colunas tablet/desktop.
min-width:0 nos itens impede que o min-width intrínseco do
vaze a coluna do grid (bug de 90% de largura no Peso). */
.hm-input-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important; /* mobile: 2 colunas */
gap: 10px !important;
margin-bottom: 12px !important;
}
.hm-input-grid > * {
min-width: 0 !important; /* FIX: impede overflow do item de grid */
}
@media (min-width: 768px) {
.hm-input-grid {
grid-template-columns: repeat(4, 1fr) !important; /* desktop: 4 campos numa linha */
gap: 12px !important;
}
.hm-sex-wrap { grid-column: 1 / -1 !important; } /* sexo ocupa linha inteira */
}
/* Botão Calcular ClCr ocupa linha inteira no grid do paciente */
#hub-card-patient .hm-btn--primary,
#hub-card-clcr .hm-btn--primary {
grid-column: 1 / -1 !important;
}
/* Módulo fármacos inline no modal fd */
body.light-mode #hm-patient-card .hm-card-title { color: #0F172A !important; }
body.light-mode #hm-patient-card .hm-label { color: #475569 !important; }
body.light-mode #hm-patient-card .hm-label-unit { color: #94A3B8 !important; }
/* ================================================================
§12 — ANIMAÇÕES & UTILITÁRIOS FINAIS
================================================================ */
/* Toast */
.toast-notification, #toast-message { transition: opacity 0.2s ease, transform 0.2s ease !important; }
/* Acessibilidade: foco visível */
:focus-visible { outline: 2px solid var(--mc-accent, #10B981); outline-offset: 2px; }
/* ================================================================
§13 — BUILD 486 — COLOR PURGE: Sex Toggle + Interações
Eliminação dos últimos resíduos de azul/ciano herdados de
inline