/* ══════════════════════════════════════════════════════ CRITICAL CSS & INLINE STYLES Estilos esenciales para render rápido (sin bloqueo) Se inyectan inline en antes de otros CSS ══════════════════════════════════════════════════════ */ /* 🔥 FORZAR IBM PLEX SANS EN TODO */ html, body, #viewer, #dicomPanel, #platformOverlay, .loading, .container, .viewport, .sidebar, button, .btn, input, textarea, select, a, div, span, p, h1, h2, h3, h4, h5, h6, label, ul, ol, li, table, th, td, article, section, nav, header, footer, main, aside, figure, figcaption { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important; } /* PESOS ESPECÍFICOS */ h1, h2, h3, h4, h5, h6 { font-weight: 600 !important; } button, .btn { font-weight: 500 !important; } strong, b { font-weight: 600 !important; } small, .small, .text-sm { font-weight: 300 !important; } label { font-weight: 500 !important; } /* CÓDIGO Y MONOESPACIADO (OPCIONAL) */ code, pre, .mono, .code { font-family: 'IBM Plex Mono', 'Courier New', monospace !important; } /* ── FIN FUENTES ── */ body { margin: 0; padding: 0; background: #0f1419; color: #e0e0e0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #viewer, #dicomPanel, #platformOverlay { display: block; width: 100%; height: 100%; margin: 0; padding: 0; } /* Critical loading state */ .loading { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%); } .loading::after { content: ''; width: 40px; height: 40px; border: 3px solid rgba(60, 150, 255, 0.3); border-top-color: #3c96ff; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Critical buttons */ button, .btn { cursor: pointer; transition: all 0.2s ease; border: none; border-radius: 4px; padding: 8px 16px; font-size: 14px; } button:hover:not(:disabled) { transform: translateY(-1px); } button:active:not(:disabled) { transform: translateY(0); } button:disabled { opacity: 0.5; cursor: not-allowed; } /* Critical input states */ input, textarea, select { font-size: inherit; color: inherit; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 8px 12px; transition: all 0.2s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: #3c96ff; background: rgba(60, 150, 255, 0.05); } /* Critical layout */ .container { width: 100%; height: 100%; display: flex; flex-direction: row; } .viewport { flex: 1; display: flex; overflow: hidden; } .sidebar { width: 350px; height: 100%; background: rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.1); overflow-y: auto; display: flex; flex-direction: column; } /* Mobile critical */ @media (max-width: 768px) { .sidebar { position: fixed; width: 100%; height: auto; max-height: 50vh; bottom: 0; left: 0; right: 0; border-right: none; border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 1000; } .viewport { width: 100; height: 100%; } body { max-height: 100vh; overflow: hidden; } } /* Performance optimization: prefer GPU rendering */ .will-gpu-accelerate { will-change: transform; transform: translateZ(0); backface-visibility: hidden; perspective: 1000px; } .smooth-animation { animation-iteration-count: infinite; animation-fill-mode: both; } /* Reduce font rendering cost */ .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Improve text rendering */ body, button, input, textarea, select { text-rendering: optimizeLegibility; font-kerning: auto; } /* Canvas optimization */ canvas { display: block; default-action: none; /* iOS */ } /* Prevent layout thrashing */ .layout-stable { contain: layout style paint; } /* Reduce repaints */ .repaint-cheap { will-change: opacity; } /* Hidden by default */ .hidden { display: none !important; } /* Avoid flashing */ img, picture, video, canvas, svg { display: block; width: auto; height: auto; } /* Link optimization */ a { color: #3c96ff; text-decoration: none; cursor: pointer; transition: color 0.2s ease; } a:hover { color: #06b6d4; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } ::-webkit-scrollbar-thumb { background: rgba(60, 150, 255, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(60, 150, 255, 0.5); }