:root { /* ── Marca corporativa MedicalCamera (sobreviven en ambos modos) ── */ --okdicom-primary: #2C98E0; --okdicom-primary-hover: #2589CC; --okdicom-primary-dark: #1F75AD; --okdicom-primary-soft: #E8F4FC; /* fondo suave para acentos */ --okdicom-on-primary: #FFFFFF; --okdicom-success: #7BC142; --okdicom-danger: #EE5953; /* ── Superficies, texto y bordes (cambian en dark) ── */ --okdicom-bg: #F4F6F8; /* fondo de página */ --okdicom-surface: #FFFFFF; /* cards, paneles */ --okdicom-surface-2: #E9ECEF; /* header de grid, zebra alt, hover sutil */ --okdicom-surface-3: #F8F9FA; /* inputs disabled, drop zones */ --okdicom-text: #202124; --okdicom-text-strong: #212529; /* texto extra-fuerte (header de grid) */ --okdicom-muted: #5F6368; --okdicom-muted-2: #495057; /* muted con un toque más oscuro */ --okdicom-border: #DEE2E6; /* bordes 1px */ --okdicom-border-2: #E1E4E8; /* alias antiguo, igual al border en light */ --okdicom-frame: #4A4A4A; /* gris oscuro del wordmark / headlines */ /* Estados con fondo y texto */ --okdicom-danger-bg: #FDECEB; --okdicom-danger-text: #B91C1C; --okdicom-warning: #F59E0B; /* amber-500: borde de warning */ --okdicom-warning-bg: #FFF1E0; --okdicom-warning-text: #92400E; --okdicom-success-bg: #E5F7EE; --okdicom-success-text: #15803D; --okdicom-info-bg: #E0F2FE; --okdicom-info-text: #075985; /* Acento del aro azul muy suave para hovers / selecciones */ --okdicom-hover-soft: var(--okdicom-primary-soft); /* Sombras (cambian en dark para no quemar) */ --okdicom-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --okdicom-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.10); --okdicom-shadow-primary: 0 4px 16px rgba(44, 152, 224, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); /* Responsive sizing tokens. Estrategia mobile-first: defaults para móvil; los breakpoints sm/md/lg sobreescriben para pantallas mayores. */ --tap-min: 44px; /* tap target accesible (iOS HIG / Material) */ --content-pad-x: 1rem; /* padding lateral del main */ --content-pad-y: 1rem; --section-gap: 1rem; } /* sm: tablet portrait */ @media (min-width: 640px) { :root { --tap-min: 40px; --content-pad-x: 1.25rem; --content-pad-y: 1.25rem; --section-gap: 1.25rem; } } /* md: tablet landscape / laptop */ @media (min-width: 900px) { :root { --tap-min: 36px; --content-pad-x: 1.5rem; --content-pad-y: 2rem; --section-gap: 1.5rem; } } /* ────────────────────────────────────────────────────────────────────────── MODO OSCURO El servidor pone data-theme="dark" en según cookie mc_theme. Solo redefinimos los tokens de superficie/texto/borde/sombras: los colores corporativos (primary, success, danger) se mantienen para no perder identidad de marca. ────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --okdicom-primary-soft: #1A3548; /* azul oscuro saturado para hovers */ --okdicom-on-primary: #FFFFFF; --okdicom-warning: #FBBF24; /* amber-400 más luminoso para dark */ --okdicom-bg: #0F172A; /* slate-900 */ --okdicom-surface: #1E293B; /* slate-800 */ --okdicom-surface-2: #334155; /* slate-700 — header de grid, zebra */ --okdicom-surface-3: #0B1220; /* inputs disabled más hundidos que el bg */ --okdicom-text: #E2E8F0; /* slate-200 */ --okdicom-text-strong: #F1F5F9; --okdicom-muted: #94A3B8; /* slate-400 */ --okdicom-muted-2: #CBD5E1; --okdicom-border: #334155; /* slate-700 */ --okdicom-border-2: #334155; --okdicom-frame: #CBD5E1; /* wordmark gris claro contra fondo dark */ --okdicom-danger-bg: #3B1818; --okdicom-danger-text: #FCA5A5; --okdicom-warning-bg: #3B2C0F; --okdicom-warning-text: #FCD34D; --okdicom-success-bg: #14321F; --okdicom-success-text: #86EFAC; --okdicom-info-bg: #0F2837; --okdicom-info-text: #7DD3FC; --okdicom-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --okdicom-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --okdicom-shadow-primary: 0 4px 16px rgba(44, 152, 224, 0.18), 0 1px 2px rgba(0, 0, 0, 0.35); } /* Hint al navegador para que renderice form controls / scrollbars en dark. */ [data-theme="dark"] { color-scheme: dark; } /* ── Chip colors (acentos categoria por categoria) en dark ─────────────── */ [data-theme="dark"] .home-action-icon--worklist { background: #0F2837; color: #7DD3FC; } [data-theme="dark"] .home-action-icon--patient { background: #2E1F0A; color: #FBBF24; } [data-theme="dark"] .home-action-icon--new { background: #14321F; color: #86EFAC; } [data-theme="dark"] .home-action-icon--viewer { background: #2A1F4D; color: #C4B5FD; } [data-theme="dark"] .home-action-icon--pending { background: #1F2937; color: #CBD5E1; } [data-theme="dark"] .home-stat--accent-blue { --stat-accent: #7DD3FC; --stat-bg: #0F2837; } [data-theme="dark"] .home-stat--accent-green { --stat-accent: #86EFAC; --stat-bg: #14321F; } [data-theme="dark"] .home-stat--accent-purple { --stat-accent: #C4B5FD; --stat-bg: #2A1F4D; } [data-theme="dark"] .home-stat--accent-orange { --stat-accent: #FBBF24; --stat-bg: #2E1F0A; } /* ── Pending status pills en dark ──────────────────────────────────────── */ [data-theme="dark"] .pending-status--pending { background: #0F2837; color: #7DD3FC; } [data-theme="dark"] .pending-status--inprogress { background: #3B2C0F; color: #FCD34D; } [data-theme="dark"] .pending-status--done { background: #14321F; color: #86EFAC; } [data-theme="dark"] .pending-status--failed { background: var(--okdicom-danger-bg); color: var(--okdicom-danger-text); } [data-theme="dark"] .pending-status--needsreauth { background: #3B2C0F; color: #FCD34D; } /* Estudio enviado OK pill (success suave). */ [data-theme="dark"] .study-ok { background: var(--okdicom-success-bg); color: var(--okdicom-success-text); border-color: var(--okdicom-success); } html, body { margin: 0; padding: 0; background-color: var(--okdicom-bg); color: var(--okdicom-text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; height: 100%; } .app { min-height: 100vh; display: flex; flex-direction: column; } .app-header { background-color: var(--okdicom-surface); color: var(--okdicom-frame); padding: 0 1.25rem; height: 56px; display: flex; align-items: center; border-bottom: 1px solid var(--okdicom-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } /* Window Controls Overlay (PWA instalada en Windows desktop). La barra de título nativa desaparece y el navegador deja un "draggable area" entre el inicio del documento y los controles min/max/close. Le pedimos al header que ocupe ese espacio respetando los CSS env vars que el navegador inyecta: env(titlebar-area-x), env(titlebar-area-y), env(titlebar-area-width), env(titlebar-area-height) Los elementos interactivos (logo, nav) se marcan no-drag para que sigan siendo clicables; el resto del header queda como zona de arrastre. */ @media (display-mode: window-controls-overlay) { .app-header { position: fixed; top: env(titlebar-area-y, 0); left: env(titlebar-area-x, 0); width: env(titlebar-area-width, 100%); height: env(titlebar-area-height, 40px); padding: 0 0.75rem; z-index: 1000; -webkit-app-region: drag; app-region: drag; } .brand, .app-nav, .app-nav-toggle, .app-nav > * { -webkit-app-region: no-drag; app-region: no-drag; } /* Empuja el contenido principal por debajo del header fijo. */ .app-main { padding-top: calc(env(titlebar-area-height, 40px) + var(--content-pad-y)); } } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; font-size: 1.1rem; letter-spacing: 0.2px; line-height: 1; } .brand:hover { opacity: 0.85; } .brand:focus-visible { outline: 2px solid var(--okdicom-primary); outline-offset: 4px; border-radius: 4px; } .brand-mark { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; display: block; } /* Wordmark "MedicalCamera": el marco de la cámara es gris (#4A4A4A) y la cámara en sí es azul corporativo. Reproducimos esa lectura con dos pesos: ligero gris ("Medical") + bold azul ("Camera"). */ .brand-name { font-weight: 300; color: var(--okdicom-frame); white-space: nowrap; } .brand-name-bold { font-weight: 600; color: var(--okdicom-primary); } .app-main { flex: 1; padding: var(--content-pad-y) var(--content-pad-x); } /* Footer corporativo: ancla en el bottom gracias al flex del .app + flex:1 del main. */ .app-footer { border-top: 1px solid var(--okdicom-border); background: var(--okdicom-surface); color: var(--okdicom-muted); padding: 0.75rem 1.25rem; font-size: 0.8rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 0.5rem; text-align: center; } .app-footer-brand { font-weight: 300; color: var(--okdicom-frame); letter-spacing: 0.2px; } .app-footer-brand-bold { font-weight: 600; color: var(--okdicom-primary); } .app-footer-sep { opacity: 0.5; } .app-footer-text a { color: var(--okdicom-primary); text-decoration: none; font-weight: 500; } .app-footer-text a:hover { text-decoration: underline; } /* En móvil: separadores ocultos para apilar legible. */ @media (max-width: 480px) { .app-footer-sep { display: none; } .app-footer { gap: 0.15rem; flex-direction: column; } } .home-card { max-width: 720px; margin: 0 auto; background: var(--okdicom-surface); border: 1px solid var(--okdicom-border); border-radius: 8px; padding: 2rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .home-card h1 { margin: 0 0 0.5rem; color: var(--okdicom-primary); } .home-subtitle { margin: 0 0 1rem; color: var(--okdicom-muted); } .home-status { margin: 0 0 1.5rem; } /* ── Landing renovada (F10) ────────────────────────────────────────────── */ .home { max-width: 1200px; margin: 0 auto; } .home-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .home-header h1 { margin: 0; color: var(--okdicom-primary); font-size: 1.5rem; } .home-logout-form { margin: 0; } .home-section-title { margin: 1.5rem 0 0.75rem; font-size: 1rem; color: var(--okdicom-muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; } .home-actions { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 640px) { .home-actions { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 640px) { .home-actions { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .home-actions { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .home-actions { grid-template-columns: repeat(5, 1fr); } } .home-action { background: var(--okdicom-surface); border: 1px solid var(--okdicom-border); border-radius: 10px; padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: var(--okdicom-text); transition: border-color 120ms ease-out, transform 80ms ease-out, box-shadow 120ms ease-out; min-height: var(--tap-min); position: relative; } .home-action:hover { border-color: var(--okdicom-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(44, 152, 224, 0.10); } .home-action--primary { background: var(--okdicom-primary); color: var(--okdicom-on-primary); border-color: var(--okdicom-primary); } .home-action--primary:hover { border-color: var(--okdicom-primary-dark); box-shadow: 0 4px 14px rgba(44, 152, 224, 0.30); } .home-action--primary .home-action-icon { background: rgba(255, 255, 255, 0.18); color: var(--okdicom-on-primary); } .home-action--alert { border-color: var(--okdicom-danger); background: var(--okdicom-danger-bg); } .home-action--alert .home-action-icon { background: rgba(238, 89, 83, 0.15); color: var(--okdicom-danger); } .home-action--warning { border-color: var(--okdicom-warning); background: var(--okdicom-warning-bg); } .home-action--warning .home-action-icon { background: rgba(245, 158, 11, 0.18); color: var(--okdicom-warning-text); } /* Icono cuadrado redondeado con fondo de marca por categoría. */ .home-action-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--okdicom-primary-soft); color: var(--okdicom-primary); margin-bottom: 0.25rem; } .home-action-icon svg { width: 22px; height: 22px; } .home-action-icon--worklist { background: #E8F4FC; color: var(--okdicom-primary); } .home-action-icon--patient { background: #FFF1E0; color: #D97706; } .home-action-icon--new { background: #E5F7EE; color: #15803D; } .home-action-icon--viewer { background: #EEE9FB; color: #6D28D9; } .home-action-icon--pending { background: #F1F5F9; color: #475569; } .home-action-title { font-weight: 600; font-size: 1.05rem; } .home-action-sub { font-size: 0.85rem; opacity: 0.8; } .home-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; } @media (min-width: 640px) { .home-stats { grid-template-columns: repeat(4, 1fr); } } .home-stat { background: var(--okdicom-surface); border: 1px solid var(--okdicom-border); border-radius: 10px; padding: 1rem; display: flex; align-items: center; gap: 0.85rem; position: relative; overflow: hidden; } .home-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--stat-accent, var(--okdicom-primary)); } .home-stat-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--stat-bg, var(--okdicom-primary-soft)); color: var(--stat-accent, var(--okdicom-primary)); } .home-stat-icon svg { width: 22px; height: 22px; } .home-stat-body { display: flex; flex-direction: column; line-height: 1; min-width: 0; } .home-stat-value { font-size: 1.9rem; font-weight: 700; color: var(--okdicom-text); line-height: 1; } .home-stat-label { margin-top: 0.4rem; font-size: 0.78rem; color: var(--okdicom-muted); text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-stat--accent-blue { --stat-accent: #2C98E0; --stat-bg: #E8F4FC; } .home-stat--accent-green { --stat-accent: #15803D; --stat-bg: #E5F7EE; } .home-stat--accent-purple { --stat-accent: #6D28D9; --stat-bg: #EEE9FB; } .home-stat--accent-orange { --stat-accent: #D97706; --stat-bg: #FFF1E0; } .home-stat--alert { --stat-accent: var(--okdicom-danger-text); --stat-bg: var(--okdicom-danger-bg); border-color: var(--okdicom-danger); background: var(--okdicom-danger-bg); } .home-stat--alert .home-stat-value { color: var(--okdicom-danger-text); } /* Override Syncfusion Fluent primary to OkDicom blue */ .e-btn.e-primary, .e-css.e-btn.e-primary { background-color: var(--okdicom-primary); border-color: var(--okdicom-primary); color: var(--okdicom-on-primary); } .e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover { background-color: var(--okdicom-primary-hover); border-color: var(--okdicom-primary-hover); } .e-btn.e-primary:active, .e-btn.e-primary:focus { background-color: var(--okdicom-primary-dark); border-color: var(--okdicom-primary-dark); } .login-card { max-width: 420px; margin: 4rem auto 0; background: var(--okdicom-surface); border: 1px solid var(--okdicom-border); border-radius: 10px; padding: 2rem; box-shadow: 0 4px 16px rgba(44, 152, 224, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); } .login-card h1 { margin: 0 0 0.25rem; color: var(--okdicom-primary); font-size: 1.5rem; } /* Bloque de marca centrado encima del formulario de login. */ .login-brand { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 0 0 1rem; text-align: center; } .login-brand-mark { width: 96px; height: 96px; object-fit: contain; display: block; } .login-brand-name { margin: 0; font-size: 1.6rem; font-weight: 300; color: var(--okdicom-frame); letter-spacing: 0.3px; line-height: 1.1; } .login-brand-name-bold { font-weight: 600; color: var(--okdicom-primary); } .login-subtitle { margin: 0 0 1.5rem; color: var(--okdicom-muted); text-align: center; } .login-error { background: var(--okdicom-danger-bg); color: var(--okdicom-danger-text); border: 1px solid var(--okdicom-danger-bg); border-radius: 4px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; } .login-field { display: block; margin-bottom: 1rem; } .login-field span { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; color: var(--okdicom-text); } .login-field input { width: 100%; padding: 0.5rem 0.75rem; font-size: 1rem; border: 1px solid var(--okdicom-border); border-radius: 4px; box-sizing: border-box; } .login-field input:focus { outline: 2px solid var(--okdicom-primary); outline-offset: -1px; border-color: var(--okdicom-primary); } /* Toggle de visibilidad del password: botón con icono ojo posicionado dentro del input. Se intercambian dos SVG (ojo abierto / ojo tachado) según el atributo aria-pressed del botón. */ .login-field-wrap { position: relative; } .login-field-wrap input { padding-right: 2.5rem; /* deja sitio al botón */ } .login-field-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: var(--okdicom-muted); cursor: pointer; transition: color 120ms ease-out, background 120ms ease-out; } .login-field-toggle:hover { color: var(--okdicom-primary); background: var(--okdicom-primary-soft); } .login-field-toggle:focus-visible { outline: 2px solid var(--okdicom-primary); outline-offset: 2px; } .login-field-toggle-icon { width: 18px; height: 18px; display: none; } /* aria-pressed="false" (default) → password oculto → mostramos ojo abierto */ .login-field-toggle .login-field-toggle-icon--show { display: block; } .login-field-toggle .login-field-toggle-icon--hide { display: none; } /* aria-pressed="true" → password visible → mostramos ojo tachado */ .login-field-toggle[aria-pressed="true"] .login-field-toggle-icon--show { display: none; } .login-field-toggle[aria-pressed="true"] .login-field-toggle-icon--hide { display: block; } .login-mode { border: 1px solid var(--okdicom-border); border-radius: 4px; padding: 0.5rem 0.75rem; margin-bottom: 1.25rem; } .login-mode legend { padding: 0 0.5rem; font-size: 0.85rem; color: var(--okdicom-muted); } .login-mode label { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 1rem; font-size: 0.95rem; min-height: 32px; /* tap area cómoda */ } .login-mode { display: flex; flex-wrap: wrap; column-gap: 0.5rem; } .login-mode legend { flex-basis: 100%; } .login-submit { width: 100%; padding: 0.6rem; background: var(--okdicom-primary); color: var(--okdicom-on-primary); border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; } .login-submit:hover { background: var(--okdicom-primary-hover); } .login-submit:active { background: var(--okdicom-primary-dark); } .home-logout { margin-top: 1rem; padding: 0.4rem 0.85rem; background: transparent; color: var(--okdicom-primary); border: 1px solid var(--okdicom-primary); border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .home-logout:hover { background: var(--okdicom-primary); color: var(--okdicom-on-primary); } .app-nav { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; } .app-nav-link { color: var(--okdicom-frame); text-decoration: none; padding: 0.4rem 0.75rem; border-radius: 4px; font-size: 0.95rem; opacity: 0.85; } .app-nav-link:hover { opacity: 1; background: var(--okdicom-primary-soft); color: var(--okdicom-primary-dark); } .app-nav-link.active { background: var(--okdicom-primary-soft); color: var(--okdicom-primary-dark); opacity: 1; } /* Bloque de usuario en el nav: avatar (iniciales) + nombre. */ .app-nav-user { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; color: var(--okdicom-frame); font-size: 0.92rem; line-height: 1; user-select: none; } .app-nav-user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--okdicom-primary); color: var(--okdicom-on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.5px; flex-shrink: 0; } .app-nav-user-name { font-weight: 500; white-space: nowrap; } /* Icon-link cuadrado para acciones del nav (Settings = engranaje). */ .app-nav-icon-link { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--okdicom-muted); text-decoration: none; transition: background 120ms ease-out, color 120ms ease-out; flex-shrink: 0; } .app-nav-icon-link svg { width: 20px; height: 20px; } .app-nav-icon-link:hover { background: var(--okdicom-primary-soft); color: var(--okdicom-primary-dark); } .app-nav-icon-link.active { background: var(--okdicom-primary-soft); color: var(--okdicom-primary-dark); } /* Botón "Instalar app" — solo se muestra si el navegador disparó beforeinstallprompt y la app no está ya instalada. Pill verde para diferenciarlo del logout y atraer la atención sin ser intrusivo. */ .mc-install-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: var(--okdicom-success); border: 1px solid var(--okdicom-success); border-radius: 8px; color: var(--okdicom-on-primary); font-size: 0.92rem; font-weight: 500; cursor: pointer; transition: background 120ms ease-out, border-color 120ms ease-out, transform 80ms ease-out; } .mc-install-btn svg { width: 16px; height: 16px; } .mc-install-btn:hover { background: #6BA838; border-color: #6BA838; } .mc-install-btn:active { transform: scale(0.97); } .mc-install-btn:focus-visible { outline: 2px solid var(--okdicom-success); outline-offset: 2px; } @media (max-width: 639px) { .mc-install-btn { width: 100%; justify-content: flex-start; gap: 0.6rem; padding: 1rem 1.25rem; background: var(--okdicom-success); border: 0; border-bottom: 1px solid rgba(255,255,255,0.12); border-radius: 0; font-size: 1.05rem; } .mc-install-btn svg { width: 20px; height: 20px; } } /* Toggle de tema (light/dark/auto): icono cuadrado con sol/luna/pantalla según estado. POSTea a /theme; el server vuelve a renderizar con el tema nuevo y sin FOUC. */ .mc-theme-toggle-form { margin: 0; padding: 0; line-height: 0; } .mc-theme-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 8px; color: var(--okdicom-muted); cursor: pointer; transition: background 120ms ease-out, color 120ms ease-out; flex-shrink: 0; } .mc-theme-toggle:hover { background: var(--okdicom-primary-soft); color: var(--okdicom-primary-dark); } .mc-theme-toggle:focus-visible { outline: 2px solid var(--okdicom-primary); outline-offset: 2px; } /* Mostrar solo el icono correspondiente al estado actual. */ .mc-theme-icon { width: 20px; height: 20px; display: none; } .mc-theme-toggle[data-theme-state="light"] .mc-theme-icon--light { display: block; } .mc-theme-toggle[data-theme-state="dark"] .mc-theme-icon--dark { display: block; } .mc-theme-toggle[data-theme-state="auto"] .mc-theme-icon--auto { display: block; } @media (max-width: 639px) { .mc-theme-toggle-form { width: 100%; } .mc-theme-toggle { width: 100%; height: auto; justify-content: flex-start; gap: 0.6rem; padding: 1rem 1.25rem; border-radius: 0; color: var(--okdicom-on-primary); border-bottom: 1px solid rgba(255,255,255,0.12); } .mc-theme-toggle:hover { background: rgba(255,255,255,0.12); color: var(--okdicom-on-primary); } .mc-theme-toggle::after { font-size: 1.05rem; } .mc-theme-toggle[data-theme-state="light"]::after { content: "Tema: claro"; } .mc-theme-toggle[data-theme-state="dark"]::after { content: "Tema: oscuro"; } .mc-theme-toggle[data-theme-state="auto"]::after { content: "Tema: automático"; } } /* Botón "Cerrar sesión" en el nav. Forma de pill con icono y texto. */ .app-nav-logout-form { margin: 0; padding: 0; line-height: 0; } .app-nav-logout { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; background: transparent; border: 1px solid var(--okdicom-border); border-radius: 8px; color: var(--okdicom-frame); font-size: 0.92rem; cursor: pointer; transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out; } .app-nav-logout svg { width: 16px; height: 16px; } .app-nav-logout:hover { background: var(--okdicom-danger-bg); color: var(--okdicom-danger-text); border-color: var(--okdicom-danger-bg); } .app-nav-logout:focus-visible { outline: 2px solid var(--okdicom-primary); outline-offset: 2px; } /* Hamburguesa: oculta a partir de sm. */ .app-nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .app-nav-toggle-bar { display: block; width: 24px; height: 2px; background: var(--okdicom-frame); border-radius: 2px; } .app-nav-backdrop { display: none; } /* Móvil: oculta nav inline, muestra hamburguesa, panel fullscreen al toggle. */ @media (max-width: 639px) { .app-nav-toggle { display: inline-flex; } .app-nav { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; margin-left: 0; background: var(--okdicom-primary); flex-direction: column; gap: 0; padding: 0.5rem 0; transform: translateX(100%); transition: transform 180ms ease-out; z-index: 100; } .app-nav--open { transform: translateX(0); } .app-nav-link { padding: 1rem 1.25rem; border-radius: 0; font-size: 1.05rem; opacity: 1; border-bottom: 1px solid rgba(255,255,255,0.12); } .app-nav-user, .app-nav-icon-link, .app-nav-logout-form { width: 100%; } .app-nav-user { padding: 1rem 1.25rem; color: var(--okdicom-on-primary); border-bottom: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); } .app-nav-user-avatar { background: var(--okdicom-on-primary); color: var(--okdicom-primary); } .app-nav-icon-link { width: 100%; height: auto; justify-content: flex-start; gap: 0.6rem; padding: 1rem 1.25rem; border-radius: 0; color: var(--okdicom-on-primary); border-bottom: 1px solid rgba(255,255,255,0.12); } .app-nav-icon-link::after { content: "Configuración"; font-size: 1.05rem; } .app-nav-icon-link:hover, .app-nav-icon-link.active { background: rgba(255,255,255,0.12); color: var(--okdicom-on-primary); } .app-nav-logout { width: 100%; justify-content: flex-start; gap: 0.6rem; padding: 1rem 1.25rem; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.12); border-radius: 0; color: var(--okdicom-on-primary); font-size: 1.05rem; } .app-nav-logout svg { width: 20px; height: 20px; } .app-nav-logout:hover { background: rgba(255,255,255,0.12); color: var(--okdicom-on-primary); } .app-nav-backdrop { display: block; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 99; } } .worklist-page { max-width: 1280px; margin: 0 auto; } .worklist-header { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 1rem; } .worklist-header h1 { color: var(--okdicom-primary); margin: 0; } .worklist-profile-label { color: var(--okdicom-muted); font-size: 0.9rem; } .worklist-filters { background: var(--okdicom-surface); padding: 1rem; border: 1px solid var(--okdicom-border); border-radius: 8px; margin-bottom: 1rem; } .worklist-filters-primary, .worklist-filters-secondary { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .worklist-filters-more { margin-top: 0.5rem; } .worklist-filters-more > summary { cursor: pointer; color: var(--okdicom-primary); font-size: 0.9rem; padding: 0.4rem 0; user-select: none; list-style: none; min-height: var(--tap-min); display: inline-flex; align-items: center; } .worklist-filters-more > summary::before { content: "▸ "; margin-right: 0.25rem; transition: transform 120ms ease-out; display: inline-block; } .worklist-filters-more[open] > summary::before { transform: rotate(90deg); } .worklist-filters-secondary { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--okdicom-border); } /* En desktop los inputs flex-wrap respiran con anchos razonables. */ @media (min-width: 640px) { .worklist-filters .e-input-group, .worklist-filters .e-control-wrapper { min-width: 180px; flex: 1 1 200px; max-width: 320px; } } .worklist-search-btn { cursor: pointer; } .worklist-search-btn[disabled] { opacity: 0.6; cursor: not-allowed; } .settings-card { max-width: 640px; margin: 2rem auto 0; background: var(--okdicom-surface); border: 1px solid var(--okdicom-border); border-radius: 8px; padding: 2rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .settings-card h1 { margin: 0 0 0.5rem; color: var(--okdicom-primary); font-size: 1.5rem; } .settings-subtitle { margin: 0 0 1.5rem; color: var(--okdicom-muted); } .settings-row { display: grid; grid-template-columns: 1fr; /* móvil: label arriba, input abajo */ align-items: center; gap: 0.4rem; margin-bottom: 1rem; } @media (min-width: 640px) { .settings-row { grid-template-columns: 200px 1fr; gap: 0.75rem; } /* En desktop el dropdown no necesita estirarse a 100%. */ .settings-row .e-input-group, .settings-row .e-control-wrapper { max-width: 360px; } } .settings-row label { font-size: 0.9rem; color: var(--okdicom-text); font-weight: 500; } .settings-value { font-size: 0.95rem; color: var(--okdicom-text); } .settings-actions { margin-top: 1.5rem; display: flex; justify-content: flex-end; gap: 0.5rem; } .study-page { max-width: 1280px; margin: 0 auto; } .study-header { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .study-header h1 { color: var(--okdicom-primary); margin: 0; } .study-acc, .study-pat { color: var(--okdicom-muted); font-size: 0.95rem; } /* Banner del paciente: nombre destacado + edad + meta (NHC, accession, cita). */ .study-patient-banner { background: linear-gradient(135deg, var(--okdicom-primary-soft) 0%, var(--okdicom-surface) 100%); border: 1px solid var(--okdicom-border); border-left: 4px solid var(--okdicom-primary); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; position: relative; } .study-patient-banner-actions { position: absolute; top: 1rem; right: 1.25rem; } @media (max-width: 640px) { .study-patient-banner-actions { position: static; margin-top: 0.75rem; } } .study-patient-banner-main { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .study-patient-name { margin: 0; font-size: 1.55rem; font-weight: 700; color: var(--okdicom-frame); line-height: 1.2; } .study-patient-age { background: var(--okdicom-primary); color: var(--okdicom-on-primary); padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .study-patient-banner-meta { margin-top: 0.4rem; color: var(--okdicom-muted); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; } .study-patient-banner-meta strong { color: var(--okdicom-text); font-weight: 600; } .study-meta-sep { opacity: 0.5; } @media (max-width: 480px) { .study-meta-sep { display: none; } .study-patient-banner-meta { gap: 0.15rem 0.4rem; flex-direction: column; align-items: flex-start; } } /* Formulario en grid 2 columnas (1 en móvil). */ .study-form-grid { display: grid; grid-template-columns: 1fr; gap: 0.7rem 1rem; } @media (min-width: 640px) { .study-form-grid { grid-template-columns: 1fr 1fr; } } .study-form-field { display: flex; flex-direction: column; gap: 0.2rem; } .study-form-field--full { grid-column: 1 / -1; } .study-form-field label { font-size: 0.78rem; font-weight: 600; color: var(--okdicom-muted); text-transform: uppercase; letter-spacing: 0.3px; } .study-form-field input { width: 100%; padding: 0.45rem 0.6rem; font-size: 0.95rem; border: 1px solid var(--okdicom-border); border-radius: 6px; box-sizing: border-box; background: var(--okdicom-surface); color: var(--okdicom-text); min-height: var(--tap-min); } .study-form-field input:focus { outline: 2px solid var(--okdicom-primary); outline-offset: -1px; border-color: var(--okdicom-primary); } .study-form-field input:disabled { background: var(--okdicom-surface-3); color: var(--okdicom-muted); cursor: not-allowed; } .study-grid { display: grid; grid-template-columns: 1fr; /* móvil: una columna, cámara primero */ gap: 1rem; margin-bottom: 1rem; } @media (min-width: 900px) { .study-grid { grid-template-columns: minmax(280px, 1fr) 2fr; gap: 1.5rem; } } /* En móvil queremos cámara → metadatos. En el HTML el orden es metadatos → cámara, así que reordenamos visualmente con CSS sin tocar el markup. */ @media (max-width: 899px) { .study-grid > .study-camera { order: 1; } .study-grid > .study-form { order: 2; } .study-grid > .study-sops { order: 3; } } .study-form, .study-camera, .study-sops { background: var(--okdicom-surface); border: 1px solid var(--okdicom-border); border-radius: 8px; padding: 1rem; } .study-form h2, .study-camera h2, .study-sops h2 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--okdicom-text); } .study-form .settings-row { grid-template-columns: 1fr; margin-bottom: 0.5rem; } @media (min-width: 640px) { .study-form .settings-row { grid-template-columns: 200px 1fr; } } .study-form input[type="text"] { width: 100%; padding: 0.4rem 0.6rem; font-size: 0.9rem; border: 1px solid var(--okdicom-border); border-radius: 4px; box-sizing: border-box; } .study-camera-controls { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; flex-wrap: wrap; } .study-camera-controls select { padding: 0.4rem 0.6rem; border: 1px solid var(--okdicom-border); border-radius: 4px; flex: 1; min-width: 160px; } .study-video-wrap { position: relative; width: 100%; border-radius: 4px; overflow: hidden; line-height: 0; /* evita gap por baseline del