Spaces:
Running
Running
| @charset "utf-8"; | |
| @font-face { | |
| font-family: 'Inter'; | |
| src: url('../assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype'); | |
| font-weight: 100 900; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'Inter'; | |
| src: url('../assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype'); | |
| font-weight: 100 900; | |
| font-style: italic; | |
| font-display: swap; | |
| } | |
| @font-face { | |
| font-family: 'JetBrains Mono'; | |
| src: url('../assets/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf') format('truetype'); | |
| font-weight: 100 800; | |
| font-style: normal; | |
| font-display: swap; | |
| } | |
| :root { | |
| --surface-page: #E8EEF5; | |
| --surface-1: #FFFFFF; | |
| --surface-header: #0A4F45; | |
| --header-text: #FFFFFF; | |
| --header-text-muted: rgba(255, 255, 255, 0.75); | |
| --color-placeholder: #747474; | |
| --header-text-action: rgba(255, 255, 255, 0.85); | |
| --header-text-hover: #000000; | |
| --header-input-bg: rgba(255, 255, 255, 0.12); | |
| --header-input-border: rgba(255, 255, 255, 0.25); | |
| --header-input-border-focus: rgba(255, 255, 255, 0.6); | |
| --header-focus-ring: rgba(255, 255, 255, 0.1); | |
| --surface-2: #E3EAF2; | |
| --surface-3: #D6E0EB; | |
| --surface-input: #FFFFFF; | |
| --text-1: #0F1923; | |
| --text-2: #2D3E50; | |
| --text-3: #3D5470; | |
| --text-4: #536B7A; | |
| --text-accent: #0B6158; | |
| --text-on-accent: #FFFFFF; | |
| --border-1: #D0DAE4; | |
| --border-2: #B8C6D4; | |
| --border-focus: var(--accent); | |
| --accent: #0F7A6B; | |
| --accent-hover: #0B6158; | |
| --accent-dim: #8DCCBE; | |
| --focus-ring: rgba(15, 122, 107, 0.15); | |
| --alto: #B8372C; | |
| --alto-bg: rgba(184, 55, 44, 0.10); | |
| --alto-border: rgba(184, 55, 44, 0.35); | |
| --alto-strong: #8C271E; | |
| --bajo: #2F6FB5; | |
| --bajo-bg: rgba(47, 111, 181, 0.10); | |
| --bajo-border: rgba(47, 111, 181, 0.35); | |
| --bajo-strong: #21548D; | |
| --urgent: #A21E1E; | |
| --monitor: #B5791A; | |
| --monitor-bg: rgba(181, 121, 26, 0.12); | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --space-1: 4px; | |
| --space-2: 8px; | |
| --space-3: 12px; | |
| --space-4: 16px; | |
| --space-5: 20px; | |
| --space-6: 24px; | |
| --dur-fast: 120ms; | |
| --dur-base: 180ms; | |
| --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; | |
| --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; | |
| --fs-xs: clamp(11px, 10.7px + 0.09vw, 12px); | |
| --fs-sm: clamp(13px, 12.6px + 0.09vw, 14px); | |
| --fs-ui: clamp(14px, 13.6px + 0.18vw, 16px); | |
| --fs-base: clamp(16px, 15.7px + 0.09vw, 17px); | |
| --fs-xl: clamp(22px, 21.3px + 0.18vw, 1.5rem); | |
| --lh-snug: 1.4; | |
| --lh-normal: 1.5; | |
| --tracking-wide: 1px; | |
| --tracking-wider: 0.1em; | |
| --tracking-widest: 4px; | |
| } | |
| :root[data-theme="dark"] { | |
| --surface-page: #0E1011; | |
| --surface-header: var(--surface-1); | |
| --header-text: var(--text-1); | |
| --header-text-muted: var(--text-3); | |
| --header-text-action: var(--text-2); | |
| --header-text-hover: var(--header-text); | |
| --header-input-bg: var(--surface-input); | |
| --header-input-border: var(--border-1); | |
| --header-input-border-focus: var(--border-focus); | |
| --header-focus-ring: var(--focus-ring); | |
| --surface-1: #16191B; | |
| --surface-2: #1E2224; | |
| --surface-3: #262B2E; | |
| --surface-input: #121517; | |
| --text-1: #FFFFFF; | |
| --text-2: #E0E2DF; | |
| --text-3: #C2C6C4; | |
| --text-4: #B0B5B3; | |
| --text-accent: #5ECDB8; | |
| --text-on-accent: #062520; | |
| --border-1: #2A2E31; | |
| --border-2: #363B3E; | |
| --border-focus: #5ECDB8; | |
| --accent: #5ECDB8; | |
| --accent-hover: #7BDAC7; | |
| --accent-dim: #2A5A52; | |
| --focus-ring: rgba(94, 205, 184, 0.15); | |
| --alto: #F08478; | |
| --alto-bg: rgba(240, 132, 120, 0.14); | |
| --alto-border: rgba(240, 132, 120, 0.32); | |
| --alto-strong: #F5A59B; | |
| --bajo: #7EB8F0; | |
| --bajo-bg: rgba(126, 184, 240, 0.14); | |
| --bajo-border: rgba(126, 184, 240, 0.32); | |
| --bajo-strong: #A3CDF5; | |
| --urgent: #F08478; | |
| --monitor: #E5B261; | |
| --monitor-bg: rgba(229, 178, 97, 0.14); | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { | |
| height: 100%; | |
| overflow: hidden; | |
| background: var(--surface-page); | |
| color: var(--text-1); | |
| font-family: var(--font-sans); | |
| font-size: var(--fs-base); | |
| line-height: var(--lh-normal); | |
| transition: background-color var(--dur-base), color var(--dur-base); | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* HEADER */ | |
| header { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4); | |
| background: var(--surface-header); | |
| border-bottom: none; | |
| flex-wrap: wrap; | |
| flex-shrink: 0; | |
| } | |
| header #logo { | |
| color: var(--header-text-muted); | |
| } | |
| header .barra-paciente label { | |
| color: var(--header-text-muted); | |
| } | |
| header .barra-paciente select, | |
| header .barra-paciente input { | |
| background: var(--header-input-bg); | |
| border-color: var(--header-input-border); | |
| color: var(--header-text); | |
| } | |
| header .barra-paciente select:focus, | |
| header .barra-paciente input:focus { | |
| border-color: var(--header-input-border-focus); | |
| box-shadow: 0 0 0 3px var(--header-focus-ring); | |
| } | |
| #pt-especie:has(option[value=""]:checked), | |
| #pt-sexo:has(option[value=""]:checked), | |
| #pt-edad-unidad { | |
| color: var(--header-text-muted); | |
| } | |
| #mob-pt-especie:has(option[value=""]:checked), | |
| #mob-pt-sexo:has(option[value=""]:checked), | |
| #mob-pt-edad-unidad { | |
| color: var(--color-placeholder); | |
| } | |
| select:has(option[value=""]:checked) { | |
| color: var(--color-placeholder); | |
| } | |
| header .barra-paciente select option { | |
| background: var(--surface-1); | |
| color: var(--text-1); | |
| } | |
| header .boton-tema, | |
| header .boton-usuario { | |
| color: var(--header-text-action); | |
| } | |
| header .boton-tema:hover, | |
| header .boton-usuario:hover { | |
| color: var(--header-text-hover); | |
| } | |
| #logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-size: var(--fs-xl); | |
| font-weight: 300; | |
| letter-spacing: var(--tracking-widest); | |
| color: var(--text-1); | |
| margin-right: auto; | |
| text-transform: uppercase; | |
| } | |
| #logo svg { | |
| width: 1.4em; | |
| height: 1.4em; | |
| fill: currentColor; | |
| flex-shrink: 0; | |
| } | |
| .barra-paciente { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .barra-paciente-titulo { | |
| display: none; | |
| } | |
| .barra-paciente label { | |
| color: var(--text-3); | |
| font-size: var(--fs-sm); | |
| font-weight: 500; | |
| } | |
| button { | |
| font-family: inherit; | |
| font-size: inherit; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| input::placeholder, | |
| textarea::placeholder { | |
| color: var(--color-placeholder); | |
| } | |
| .barra-paciente select, | |
| .barra-paciente input { | |
| background: var(--surface-input); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-1); | |
| padding: 5px var(--space-2); | |
| font-size: var(--fs-ui); | |
| font-family: var(--font-sans); | |
| outline: none; | |
| transition: border-color var(--dur-fast), box-shadow var(--dur-fast); | |
| } | |
| .barra-paciente select:focus, | |
| .barra-paciente input:focus { | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--focus-ring); | |
| } | |
| .barra-paciente select option { | |
| color: var(--text-2); | |
| background: var(--surface-input); | |
| } | |
| .barra-paciente select { | |
| min-width: 110px; | |
| cursor: pointer; | |
| } | |
| .barra-paciente input { | |
| width: 7.5rem; | |
| } | |
| /* ACCIONES CABECERA */ | |
| .acciones-cabecera { | |
| display: flex; | |
| gap: var(--space-2); | |
| align-items: center; | |
| flex-shrink: 0; | |
| margin-left: 4rem; | |
| } | |
| /* GRID PRINCIPAL */ | |
| main { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 40rem 30rem; | |
| grid-template-rows: 1fr auto auto auto; | |
| grid-template-areas: | |
| "hema bioquim col3 resultados" | |
| "endo uri col3 resultados" | |
| "coag gas col3 resultados" | |
| "flujo flujo col3 resultados"; | |
| gap: 1px; | |
| background: var(--border-1); | |
| flex: 1; | |
| min-height: 0; | |
| overflow: hidden; | |
| } | |
| #panel-hema { grid-area: hema; } | |
| #panel-bioquim { grid-area: bioquim; } | |
| #panel-endo { grid-area: endo; } | |
| #panel-uri { grid-area: uri; } | |
| #panel-coag { grid-area: coag; } | |
| #panel-gas { grid-area: gas; } | |
| #panel-resultados { grid-area: resultados; } | |
| .panel-flujo { grid-area: flujo; } | |
| .col3-wrapper { | |
| grid-area: col3; | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--border-1); | |
| gap: 1px; | |
| overflow: hidden; | |
| } | |
| #panel-imagenes { | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| #panel-clinico { | |
| flex-shrink: 0; | |
| } | |
| /* HEMA / BIOQUIM — contenido más grande */ | |
| #panel-hema, | |
| #panel-bioquim { | |
| --fs-xs: 12px; | |
| --fs-sm: 0.9rem; | |
| --fs-ui: 15px; | |
| } | |
| #panel-hema .panel-cuerpo, | |
| #panel-bioquim .panel-cuerpo { | |
| padding: 12px 1rem; | |
| } | |
| #panel-hema .fila-campo, | |
| #panel-bioquim .fila-campo { | |
| margin-bottom: 9px; | |
| gap: 0.6rem; | |
| } | |
| #panel-hema .fila-campo label, | |
| #panel-bioquim .fila-campo label { | |
| font-size: var(--fs-ui); | |
| } | |
| #panel-hema .fila-campo input, | |
| #panel-bioquim .fila-campo input { | |
| width: calc(6rem + 2rem); | |
| padding: 6px 0.6rem; | |
| font-size: var(--fs-ui); | |
| } | |
| #panel-hema .fila-campo .unidad, | |
| #panel-bioquim .fila-campo .unidad { | |
| min-width: 4rem; | |
| font-size: var(--fs-ui); | |
| } | |
| .panel { | |
| background: var(--surface-1); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .panel-titulo { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| } | |
| .panel-cabecera { | |
| height: 2.5rem; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 var(--space-4); | |
| font-size: clamp(13px, 12.6px + 0.09vw, 14px); | |
| font-weight: 600; | |
| letter-spacing: var(--tracking-wide); | |
| text-transform: uppercase; | |
| color: var(--text-3); | |
| border-bottom: 1px solid var(--border-1); | |
| background: var(--surface-2); | |
| flex-shrink: 0; | |
| } | |
| .panel-cuerpo { | |
| flex: 1; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| padding: var(--space-3) var(--space-4); | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border-2) transparent; | |
| } | |
| /* ENCABEZADOS DE COLUMNA */ | |
| .cabecera-columnas { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| padding: 0 0 var(--space-1) 0; | |
| margin-bottom: var(--space-3); | |
| border-bottom: 1px solid var(--border-1); | |
| position: sticky; | |
| top: 0; | |
| background: var(--surface-1); | |
| z-index: 1; | |
| } | |
| .cabecera-columnas span { | |
| font-size: var(--fs-xs); | |
| font-weight: 600; | |
| letter-spacing: var(--tracking-wide); | |
| text-transform: uppercase; | |
| color: var(--color-placeholder); | |
| } | |
| .cabecera-columnas span:first-child { | |
| flex: 1; | |
| } | |
| .cabecera-columnas span:nth-child(2) { | |
| width: calc(5rem + 2rem); | |
| text-align: center; | |
| } | |
| .cabecera-columnas span:nth-child(3) { | |
| min-width: 50px; | |
| text-align: right; | |
| } | |
| /* CAMPOS DEL FORMULARIO */ | |
| .grupo-campo { | |
| margin-bottom: 18px; | |
| } | |
| .titulo-grupo { | |
| font-size: var(--fs-xs); | |
| font-weight: 600; | |
| letter-spacing: var(--tracking-wider); | |
| text-transform: uppercase; | |
| color: var(--text-accent); | |
| margin-bottom: 14px; | |
| padding-bottom: var(--space-1); | |
| border-bottom: 1px solid var(--border-1); | |
| } | |
| .fila-campo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 6px; | |
| gap: var(--space-2); | |
| } | |
| .fila-campo label { | |
| font-size: var(--fs-sm); | |
| color: var(--text-3); | |
| flex: 1; | |
| } | |
| .fila-campo .unidad { | |
| font-size: var(--fs-xs); | |
| color: var(--color-placeholder); | |
| white-space: nowrap; | |
| min-width: 50px; | |
| text-align: right; | |
| } | |
| .estado-campo { | |
| font-size: var(--fs-xs); | |
| font-weight: 600; | |
| white-space: nowrap; | |
| flex-shrink: 0; | |
| letter-spacing: 0.16px; | |
| } | |
| .estado-campo--alto { | |
| color: var(--alto); | |
| } | |
| .estado-campo--bajo { | |
| color: var(--bajo); | |
| } | |
| .fila-campo input { | |
| width: calc(5rem + 2rem); | |
| background: var(--surface-input); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-1); | |
| padding: var(--space-1) var(--space-2); | |
| font-size: var(--fs-ui); | |
| font-family: var(--font-mono); | |
| font-variant-numeric: tabular-nums; | |
| text-align: right; | |
| outline: none; | |
| appearance: none; | |
| transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast); | |
| } | |
| .fila-campo input[type="number"]::-webkit-outer-spin-button, | |
| .fila-campo input[type="number"]::-webkit-inner-spin-button { | |
| display: none; | |
| } | |
| .fila-campo input:focus { | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--focus-ring); | |
| } | |
| .fila-campo input.alto, | |
| .fila-campo input.alto:focus { | |
| border-color: var(--alto); | |
| background: var(--alto-bg); | |
| color: var(--alto-strong); | |
| } | |
| .fila-campo input.bajo, | |
| .fila-campo input.bajo:focus { | |
| border-color: var(--bajo); | |
| background: var(--bajo-bg); | |
| color: var(--bajo-strong); | |
| } | |
| .fila-campo input.max-chars, | |
| .fila-campo input.max-chars:focus { | |
| border-color: var(--monitor); | |
| background: var(--monitor-bg); | |
| } | |
| /* PANEL COLUMNA MEDIA (urianálisis + endocrino + imágenes) */ | |
| #panel-uri, | |
| #panel-endo { | |
| --fs-ui: 15px; | |
| --fs-xs: 12px; | |
| --fs-sm: 0.9rem; | |
| } | |
| #panel-imagenes { | |
| --fs-ui: 15px; | |
| --fs-xs: 12px; | |
| --fs-sm: 0.9rem; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border-2) transparent; | |
| flex: 1; | |
| } | |
| #panel-imagenes .panel-cabecera { | |
| position: sticky; | |
| top: 0; | |
| z-index: 2; | |
| border-top: 1px solid var(--border-1); | |
| } | |
| #panel-imagenes .panel-cabecera:first-child { | |
| border-top: none; | |
| } | |
| .col3-wrapper > .panel.subpanel:first-child > .panel-cabecera { | |
| border-top: none; | |
| } | |
| .subpanel-anim { | |
| overflow: hidden; | |
| transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .subpanel-cuerpo { | |
| flex-shrink: 0; | |
| padding: 12px 1rem; | |
| } | |
| /* TOOLTIP GLOBAL */ | |
| #tooltip-global { | |
| position: fixed; | |
| background: var(--surface-0, #1a1a1a); | |
| color: #fff; | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| padding: 3px 8px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.15s; | |
| z-index: 10000; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.18); | |
| } | |
| #tooltip-global.visible { | |
| opacity: 1; | |
| } | |
| /* BOTÓN LIMPIAR PANEL */ | |
| .btn-limpiar-panel { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 1.875rem; | |
| height: 1.875rem; | |
| flex-shrink: 0; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-4); | |
| cursor: pointer; | |
| border-radius: var(--radius-sm); | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .btn-limpiar-panel svg { | |
| width: 17.5px; | |
| height: 17.5px; | |
| fill: currentColor; | |
| } | |
| .btn-limpiar-panel:hover { | |
| background: var(--alto-bg); | |
| color: var(--alto); | |
| } | |
| /* BOTÓN IMPORTAR PDF */ | |
| .btn-importar-pdf { | |
| margin-left: 2px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 1.875rem; | |
| height: 1.875rem; | |
| flex-shrink: 0; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-4); | |
| cursor: pointer; | |
| border-radius: var(--radius-sm); | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .btn-importar-pdf svg { | |
| width: 17.5px; | |
| height: 17.5px; | |
| fill: currentColor; | |
| } | |
| .btn-importar-pdf:hover { | |
| background: var(--border-1); | |
| color: var(--accent); | |
| } | |
| .btn-importar-pdf + .btn-colapsar-subpanel { | |
| margin-left: 2px; | |
| } | |
| /* TOAST NOTIFICACIÓN PDF */ | |
| .pdf-toast { | |
| position: fixed; | |
| bottom: 2rem; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(6px); | |
| background: var(--surface-1); | |
| color: var(--text-1); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-2) var(--space-4); | |
| font-size: var(--fs-sm); | |
| font-weight: 500; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14); | |
| opacity: 0; | |
| transition: opacity 0.2s, transform 0.2s; | |
| pointer-events: none; | |
| z-index: 9999; | |
| white-space: nowrap; | |
| } | |
| .pdf-toast--show { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| .pdf-toast--error { | |
| border-color: var(--alto); | |
| color: var(--alto); | |
| } | |
| /* BOTÓN COLAPSAR SUBPANEL */ | |
| .btn-colapsar-subpanel { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 1.875rem; | |
| height: 1.875rem; | |
| flex-shrink: 0; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-3); | |
| cursor: pointer; | |
| border-radius: var(--radius-sm, 4px); | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .btn-colapsar-subpanel:hover { | |
| background: var(--border-1); | |
| color: var(--text-1); | |
| } | |
| .btn-colapsar-subpanel svg { | |
| width: 16.25px; | |
| height: 16.25px; | |
| fill: currentColor; | |
| } | |
| .btn-colapsar-subpanel .icono-colapsar { | |
| display: none; | |
| } | |
| .subpanel.collapsed .btn-colapsar-subpanel .icono-expandir { | |
| display: none; | |
| } | |
| .subpanel.collapsed .btn-colapsar-subpanel .icono-colapsar { | |
| display: block; | |
| } | |
| .fila-campo select { | |
| width: calc(5rem + 2rem); | |
| background: var(--surface-input); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-1); | |
| padding: var(--space-1) var(--space-2); | |
| font-size: var(--fs-ui); | |
| font-family: var(--font-sans); | |
| outline: none; | |
| cursor: pointer; | |
| transition: border-color var(--dur-fast), background-color var(--dur-fast); | |
| } | |
| .fila-campo select:focus { | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--focus-ring); | |
| } | |
| /* CHAT AREA (signos clínicos en resultados) */ | |
| .chat-area { | |
| padding: 0.5rem var(--space-4); | |
| border-top: 1px solid var(--border-1); | |
| background: var(--surface-2); | |
| flex-shrink: 0; | |
| } | |
| .chat-area textarea { | |
| width: 100%; | |
| box-sizing: border-box; | |
| background: var(--surface-input); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-1); | |
| padding: var(--space-2) var(--space-3); | |
| font-size: var(--fs-ui); | |
| font-family: var(--font-sans); | |
| resize: none; | |
| height: 4rem; | |
| outline: none; | |
| line-height: var(--lh-normal); | |
| transition: border-color var(--dur-fast), box-shadow var(--dur-fast); | |
| } | |
| .chat-area textarea:focus { | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--focus-ring); | |
| } | |
| /* PANEL DE RESULTADOS */ | |
| .seccion-resultado { | |
| margin-bottom: 20px; | |
| } | |
| .titulo-seccion-resultado { | |
| font-size: var(--fs-xs); | |
| font-weight: 600; | |
| letter-spacing: var(--tracking-wider); | |
| text-transform: uppercase; | |
| color: var(--text-accent); | |
| margin-bottom: var(--space-2); | |
| } | |
| .titulo-patrones { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| cursor: pointer; | |
| } | |
| .btn-colapsar-patrones { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--text-4); | |
| padding: 2px; | |
| border-radius: var(--radius-sm); | |
| transition: color var(--dur-fast), transform var(--dur-base); | |
| } | |
| .btn-colapsar-patrones:hover { | |
| color: var(--text-accent); | |
| } | |
| .btn-colapsar-patrones svg { | |
| width: 12px; | |
| height: 12px; | |
| fill: currentColor; | |
| } | |
| .btn-colapsar-patrones .icono-colapsar { | |
| display: none; | |
| } | |
| .btn-colapsar-patrones[aria-expanded="false"] .icono-expandir { | |
| display: none; | |
| } | |
| .btn-colapsar-patrones[aria-expanded="false"] .icono-colapsar { | |
| display: block; | |
| } | |
| .patrones-anim { | |
| overflow: hidden; | |
| transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* PATRONES */ | |
| .elemento-patron { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border-1); | |
| border-left: 3px solid var(--accent); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| padding: var(--space-2) var(--space-3); | |
| margin-bottom: var(--space-2); | |
| } | |
| .elemento-patron .titulo-patron { | |
| font-size: var(--fs-xs); | |
| font-weight: 600; | |
| letter-spacing: var(--tracking-wider); | |
| text-transform: uppercase; | |
| color: var(--text-accent); | |
| margin-bottom: 2px; | |
| } | |
| .elemento-patron .cuerpo-patron { | |
| font-size: var(--fs-sm); | |
| color: var(--text-2); | |
| line-height: var(--lh-normal); | |
| } | |
| .elemento-patron.gravedad-grave { | |
| border-left-color: var(--urgent); | |
| } | |
| .elemento-patron.gravedad-grave .titulo-patron { | |
| color: var(--urgent); | |
| } | |
| .elemento-patron.gravedad-moderado { | |
| border-left-color: var(--monitor); | |
| } | |
| .elemento-patron.gravedad-moderado .titulo-patron { | |
| color: var(--monitor); | |
| } | |
| .sin-hallazgos { | |
| font-size: var(--fs-sm); | |
| color: var(--text-4); | |
| font-style: italic; | |
| } | |
| /* IA OUTPUT */ | |
| #salida-ia { | |
| font-size: var(--fs-ui); | |
| color: var(--text-3); | |
| line-height: 1.7; | |
| white-space: pre-wrap; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-3) var(--space-4); | |
| } | |
| /* FOOTER */ | |
| footer { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| padding: var(--space-2) var(--space-6); | |
| background: var(--surface-1); | |
| border-top: 1px solid var(--border-1); | |
| flex-wrap: wrap; | |
| flex-shrink: 0; | |
| } | |
| #aviso { | |
| flex: 1; | |
| font-size: var(--fs-xs); | |
| color: var(--color-placeholder); | |
| line-height: var(--lh-snug); | |
| } | |
| #aviso strong { | |
| color: var(--color-placeholder); | |
| } | |
| .btn-adjuntar-mob { | |
| display: none; | |
| width: 100%; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| margin-top: var(--space-4); | |
| background: var(--accent); | |
| color: var(--text-on-accent); | |
| border-color: var(--accent); | |
| min-width: 100px; | |
| } | |
| .btn-adjuntar-mob:hover { | |
| background: var(--accent-hover); | |
| border-color: var(--accent-hover); | |
| } | |
| .btn-adjuntar-mob svg { | |
| width: 18px; | |
| height: 18px; | |
| fill: currentColor; | |
| } | |
| #aviso-mob { | |
| display: none; | |
| font-size: var(--fs-xs); | |
| color: var(--color-placeholder); | |
| line-height: var(--lh-snug); | |
| padding: var(--space-3) 0 var(--space-1); | |
| margin-top: 3rem; | |
| } | |
| #aviso-mob strong { | |
| color: var(--color-placeholder); | |
| } | |
| #creditos-mob { | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-1); | |
| font-size: var(--fs-xs); | |
| color: var(--color-placeholder); | |
| white-space: nowrap; | |
| padding: var(--space-3) 0; | |
| margin-top: var(--space-2); | |
| border-top: 1px solid var(--border-1); | |
| } | |
| #creditos-mob svg { | |
| width: 14px; | |
| height: 14px; | |
| fill: currentColor; | |
| flex-shrink: 0; | |
| } | |
| #creditos-mob a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| #creditos-mob a:hover { | |
| color: var(--text-accent); | |
| } | |
| #creditos { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| font-size: var(--fs-xs); | |
| color: var(--color-placeholder); | |
| white-space: nowrap; | |
| } | |
| #creditos svg { | |
| width: 14px; | |
| height: 14px; | |
| fill: currentColor; | |
| flex-shrink: 0; | |
| } | |
| #creditos a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| #creditos a:hover { | |
| color: var(--text-accent); | |
| } | |
| .acciones-pie { | |
| display: flex; | |
| gap: var(--space-2); | |
| flex-shrink: 0; | |
| } | |
| /* BOTONES */ | |
| .boton { | |
| padding: 7px 16px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid transparent; | |
| font-size: var(--fs-ui); | |
| font-weight: 500; | |
| font-family: var(--font-sans); | |
| cursor: pointer; | |
| transition: | |
| background-color var(--dur-fast), | |
| color var(--dur-fast), | |
| border-color var(--dur-fast), | |
| opacity var(--dur-fast); | |
| white-space: nowrap; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| } | |
| .boton:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .boton-analizar { | |
| background: var(--accent); | |
| color: var(--text-on-accent); | |
| border-color: var(--accent); | |
| min-width: 100px; | |
| } | |
| .boton-analizar:hover:not(:disabled) { | |
| background: var(--accent-hover); | |
| border-color: var(--accent-hover); | |
| } | |
| #salida-ia.cargando { | |
| color: var(--text-4); | |
| font-style: italic; | |
| } | |
| /* IA BACKEND CONFIG */ | |
| .ia-backend-config { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: var(--space-2) var(--space-3); | |
| margin-top: var(--space-3); | |
| padding-top: var(--space-3); | |
| border-top: 1px solid var(--border-1); | |
| } | |
| .ia-backend-label { | |
| font-size: var(--fs-xs); | |
| color: var(--text-4); | |
| font-weight: 500; | |
| white-space: nowrap; | |
| } | |
| .ia-backend-opt { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| font-size: var(--fs-xs); | |
| color: var(--text-3); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| } | |
| .ia-backend-opt input[type="radio"] { | |
| accent-color: var(--accent); | |
| cursor: pointer; | |
| } | |
| .ia-ollama-fields { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: var(--space-2); | |
| width: 100%; | |
| } | |
| .ia-text-input { | |
| flex: 1; | |
| min-width: 140px; | |
| padding: 4px 8px; | |
| font-size: var(--fs-xs); | |
| font-family: var(--font-mono, monospace); | |
| background: var(--surface-1); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-2); | |
| } | |
| .ia-text-input:focus { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 1px; | |
| } | |
| #ia-ollama-url, | |
| #ia-ollama-model { | |
| color: var(--color-placeholder); | |
| } | |
| .ia-model-input { | |
| max-width: 130px; | |
| flex: 0 0 auto; | |
| } | |
| .ia-hf-fields { | |
| width: 100%; | |
| } | |
| .ia-select { | |
| width: 100%; | |
| padding: 4px 8px; | |
| font-size: var(--fs-xs); | |
| font-family: var(--font-sans); | |
| background: var(--surface-1); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-2); | |
| cursor: pointer; | |
| } | |
| .ia-select:focus { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 1px; | |
| } | |
| /* ZONAS DE IMAGEN */ | |
| #subpanel-citologia { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| #subpanel-citologia .subpanel-anim { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| #cuerpo-citologia { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| #cuerpo-citologia .zonas-imagen { | |
| flex-shrink: 0; | |
| } | |
| .zonas-imagen { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-3); | |
| } | |
| .zona-imagen { | |
| position: relative; | |
| height: 110px; | |
| border: 1.5px dashed var(--border-2); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: border-color var(--dur-fast); | |
| } | |
| .zona-imagen:hover { | |
| border-color: var(--accent); | |
| } | |
| .zona-imagen.con-imagen { | |
| border-style: solid; | |
| border-color: var(--border-1); | |
| } | |
| .zona-vacia svg { | |
| width: 22px; | |
| height: 22px; | |
| fill: currentColor; | |
| } | |
| .zona-vacia { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--space-2); | |
| color: var(--color-placeholder); | |
| pointer-events: none; | |
| font-size: var(--fs-xs); | |
| } | |
| /* ZONA MICROSCOPIO */ | |
| .zona-microscopio { | |
| position: relative; | |
| flex: 1; | |
| width: 100%; | |
| min-height: 150px; | |
| margin-top: var(--space-3); | |
| border: 1.5px dashed var(--border-2); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: border-color var(--dur-fast); | |
| background: var(--surface-1); | |
| } | |
| .zona-microscopio:hover { | |
| border-color: var(--accent); | |
| } | |
| .micro-vacia { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--space-2); | |
| color: var(--color-placeholder); | |
| font-size: var(--fs-xs); | |
| pointer-events: none; | |
| } | |
| .micro-video { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| /* control bar */ | |
| .micro-controles { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: var(--space-2) var(--space-3); | |
| background: var(--surface-2); | |
| border-top: 1px solid var(--border-1); | |
| gap: var(--space-2); | |
| } | |
| .micro-vacia svg { | |
| width: 22px; | |
| height: 22px; | |
| fill: currentColor; | |
| } | |
| .micro-btn svg { | |
| width: 16px; | |
| height: 16px; | |
| fill: currentColor; | |
| } | |
| .micro-btn-capturar svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .micro-btn { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 2.25rem; | |
| height: 2.25rem; | |
| border-radius: 50%; | |
| color: var(--text-3); | |
| background: var(--surface-3); | |
| border: 1px solid var(--border-1); | |
| flex-shrink: 0; | |
| transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); | |
| } | |
| .micro-btn:hover { | |
| background: var(--border-1); | |
| border-color: var(--border-2); | |
| color: var(--text-1); | |
| } | |
| .micro-btn-capturar { | |
| width: 3rem; | |
| height: 3rem; | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: var(--text-on-accent); | |
| } | |
| .micro-btn-capturar:hover { | |
| background: var(--accent-hover); | |
| border-color: var(--accent-hover); | |
| } | |
| .micro-btn-capturar:disabled { | |
| opacity: 0.35; | |
| cursor: not-allowed; | |
| } | |
| .micro-badge { | |
| position: absolute; | |
| top: -4px; | |
| right: -4px; | |
| min-width: 16px; | |
| height: 16px; | |
| padding: 0 3px; | |
| border-radius: 8px; | |
| background: var(--accent); | |
| color: var(--text-on-accent); | |
| font-size: 10px; | |
| font-weight: 700; | |
| font-family: var(--font-sans); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1.5px solid var(--surface-1); | |
| } | |
| /* panel-galeria */ | |
| .micro-galeria { | |
| position: absolute; | |
| bottom: 3.5rem; | |
| left: 0; | |
| right: 0; | |
| background: var(--surface-1); | |
| border-top: 1px solid var(--border-1); | |
| padding: var(--space-2) var(--space-3); | |
| display: flex; | |
| gap: var(--space-2); | |
| align-items: center; | |
| } | |
| .micro-galeria-vacia { | |
| font-size: var(--fs-xs); | |
| color: var(--text-4); | |
| font-style: italic; | |
| } | |
| .micro-thumb { | |
| position: relative; | |
| width: 52px; | |
| height: 52px; | |
| border-radius: var(--radius-sm); | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| border: 1px solid var(--border-1); | |
| background: var(--surface-2); | |
| } | |
| .micro-thumb img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .micro-thumb-quitar { | |
| position: absolute; | |
| top: 2px; | |
| right: 2px; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: rgba(0, 0, 0, 0.55); | |
| color: #fff; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background var(--dur-fast); | |
| } | |
| .micro-thumb-quitar:hover { | |
| background: rgba(0, 0, 0, 0.82); | |
| } | |
| .zona-img-preview { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .btn-quitar-zona svg { | |
| width: 16px; | |
| height: 16px; | |
| fill: currentColor; | |
| } | |
| .btn-quitar-zona { | |
| position: absolute; | |
| top: var(--space-1); | |
| right: var(--space-1); | |
| width: 20px; | |
| height: 20px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-1); | |
| background: var(--surface-2); | |
| color: var(--text-3); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0; | |
| transition: background var(--dur-fast), color var(--dur-fast); | |
| } | |
| .btn-quitar-zona:hover { | |
| background: var(--surface-3); | |
| color: var(--text-1); | |
| border-color: var(--border-2); | |
| } | |
| /* PANEL PIE DE ACCIONES */ | |
| .panel-pie-acciones { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| height: 2.5rem; | |
| padding: 0 var(--space-4); | |
| padding-bottom: 1rem; | |
| background: var(--surface-2); | |
| flex-shrink: 0; | |
| justify-content: flex-end; | |
| } | |
| .panel-pie-acciones .boton { | |
| padding: 7px 19px; | |
| } | |
| .panel-pie-acciones .boton-analizar { | |
| min-width: 7.5rem; | |
| } | |
| .boton-papers { | |
| background: var(--surface-1); | |
| color: var(--text-accent); | |
| border-color: var(--accent); | |
| } | |
| .boton-papers:hover:not(:disabled) { | |
| background: var(--surface-2); | |
| } | |
| /* THEME TOGGLE */ | |
| .boton-tema { | |
| background: transparent; | |
| color: var(--text-2); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| padding: 5px 12px; | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 32px; | |
| } | |
| .boton-tema:hover { | |
| background: var(--surface-2); | |
| color: var(--text-1); | |
| border-color: var(--border-2); | |
| } | |
| .icono-sol { | |
| display: none; | |
| width: 14px; | |
| height: 14px; | |
| fill: currentColor; | |
| } | |
| .icono-luna { | |
| display: block; | |
| width: 14px; | |
| height: 14px; | |
| fill: currentColor; | |
| } | |
| [data-theme="dark"] .icono-sol { | |
| display: block; | |
| } | |
| [data-theme="dark"] .icono-luna { | |
| display: none; | |
| } | |
| /* BOTÓN COLAPSAR FLUJO */ | |
| .btn-colapsar-flujo { | |
| margin-left: auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 1.875rem; | |
| height: 1.875rem; | |
| flex-shrink: 0; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-3); | |
| cursor: pointer; | |
| border-radius: var(--radius-sm, 4px); | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .btn-colapsar-flujo:hover { | |
| background: var(--border-1); | |
| color: var(--text-1); | |
| } | |
| .btn-colapsar-flujo svg { | |
| width: 16.25px; | |
| height: 16.25px; | |
| fill: currentColor; | |
| } | |
| .btn-colapsar-flujo .icono-colapsar { | |
| display: none; | |
| } | |
| .panel-flujo.collapsed .btn-colapsar-flujo .icono-expandir { | |
| display: none; | |
| } | |
| .panel-flujo.collapsed .btn-colapsar-flujo .icono-colapsar { | |
| display: block; | |
| } | |
| main { | |
| transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| #panel-flujo::after { | |
| content: ''; | |
| display: block; | |
| height: 0.5rem; | |
| flex-shrink: 0; | |
| } | |
| /* PANEL FLUJO DE TRABAJO */ | |
| .cuerpo-flujo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-top: 1.5rem; | |
| padding: 0.3rem 20px; | |
| overflow: hidden; | |
| } | |
| .pasos-flujo { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: row; | |
| width: 100%; | |
| } | |
| .pasos-flujo li { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: flex-start; | |
| justify-content: flex-start; | |
| text-align: left; | |
| gap: 10px; | |
| padding: 0 12px; | |
| position: relative; | |
| } | |
| .pasos-flujo li + li::before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 1px; | |
| height: 70%; | |
| background: var(--border-1); | |
| } | |
| .num-paso { | |
| width: 28px; | |
| height: 28px; | |
| fill: var(--accent); | |
| flex-shrink: 0; | |
| margin-top: 0.1rem; | |
| } | |
| .pasos-flujo strong { | |
| display: block; | |
| font-size: var(--fs-xs); | |
| color: var(--text-2); | |
| font-weight: 600; | |
| } | |
| .pasos-flujo p { | |
| font-size: var(--fs-xs); | |
| color: var(--text-3); | |
| line-height: var(--lh-snug); | |
| } | |
| /* NAV INFERIOR */ | |
| .nav-inferior { | |
| display: none; | |
| background: var(--surface-1); | |
| border-top: 1px solid var(--border-1); | |
| flex-shrink: 0; | |
| } | |
| .tab-nav { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.2rem; | |
| color: var(--text-4); | |
| font-size: 0.6rem; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| transition: color var(--dur-fast); | |
| padding: 0.4rem 4px 0.3rem; | |
| border-top: 2px solid transparent; | |
| } | |
| .tab-nav:hover { | |
| color: var(--text-2); | |
| } | |
| .tab-nav.activo { | |
| color: var(--accent); | |
| border-top-color: var(--accent); | |
| } | |
| .tab-nav svg { | |
| width: 20px; | |
| height: 20px; | |
| flex-shrink: 0; | |
| fill: currentColor; | |
| } | |
| /* PANEL PACIENTE */ | |
| .panel-cuerpo--paciente { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-4); | |
| } | |
| .fila-paciente { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-1); | |
| } | |
| .fila-paciente label { | |
| font-size: var(--fs-sm); | |
| font-weight: 500; | |
| color: var(--text-3); | |
| letter-spacing: 0.3px; | |
| } | |
| .fila-paciente select, | |
| .fila-paciente input[type="text"], | |
| .fila-paciente input[type="number"] { | |
| height: 36px; | |
| padding: 0 var(--space-3); | |
| background: var(--surface-input); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-1); | |
| font-size: var(--fs-ui); | |
| font-family: var(--font-sans); | |
| outline: none; | |
| width: 100%; | |
| transition: border-color var(--dur-fast), box-shadow var(--dur-fast); | |
| } | |
| .fila-paciente select:focus, | |
| .fila-paciente input:focus { | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--focus-ring); | |
| } | |
| #pt-raza::placeholder, | |
| #pt-edad::placeholder { | |
| color: var(--header-text-muted); | |
| } | |
| #mob-pt-raza::placeholder, | |
| #mob-pt-edad::placeholder { | |
| color: var(--color-placeholder); | |
| } | |
| .fila-paciente-edad { | |
| display: flex; | |
| gap: var(--space-2); | |
| } | |
| .fila-paciente-edad input { | |
| flex: 1; | |
| } | |
| .fila-paciente-edad select { | |
| width: 110px; | |
| flex-shrink: 0; | |
| } | |
| /* EXAMENES SUBTABS BAR */ | |
| #examenes-subtabs-bar { | |
| flex-shrink: 0; | |
| display: flex; | |
| height: 2.5rem; | |
| background: var(--surface-2); | |
| border-bottom: 1px solid var(--border-1); | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .tab-examenes { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0 var(--space-3); | |
| font-size: clamp(13px, 12.6px + 0.09vw, 14px); | |
| font-weight: 600; | |
| letter-spacing: var(--tracking-wide); | |
| text-transform: uppercase; | |
| color: var(--text-4); | |
| border-bottom: 2px solid transparent; | |
| white-space: nowrap; | |
| transition: color var(--dur-fast), border-color var(--dur-fast); | |
| } | |
| .tab-examenes:hover { | |
| color: var(--text-2); | |
| } | |
| .tab-examenes.activo { | |
| color: var(--text-3); | |
| border-bottom-color: var(--accent); | |
| } | |
| /* SOLO DESKTOP */ | |
| @media (min-width: 1101px) { | |
| .cabecera-columnas--mobile-only { | |
| display: none; | |
| } | |
| .cabecera-col-btns { | |
| display: none; | |
| } | |
| #panel-paciente, | |
| #examenes-subtabs-bar { | |
| display: none; | |
| } | |
| .subpanel > .panel-cabecera, | |
| #panel-flujo > .panel-cabecera { | |
| cursor: default; | |
| } | |
| .subpanel > .panel-cabecera button, | |
| #panel-flujo > .panel-cabecera button { | |
| cursor: pointer; | |
| } | |
| #panel-hema .subpanel-anim, | |
| #panel-bioquim .subpanel-anim { | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #panel-hema .panel-cuerpo, | |
| #panel-bioquim .panel-cuerpo { | |
| min-height: 0; | |
| } | |
| } | |
| /* RESPONSIVE */ | |
| /* Full HD 1920×1080 */ | |
| @media (min-width: 1920px) { | |
| main { | |
| grid-template-columns: 1fr 1fr 449px 399px; | |
| } | |
| #panel-hema, | |
| #panel-bioquim, | |
| #panel-imagenes { | |
| --fs-xs: 10.9px; | |
| --fs-sm: 12.5px; | |
| --fs-ui: 13.1px; | |
| --fs-base: 13.6px; | |
| } | |
| #panel-hema .panel-cuerpo, | |
| #panel-bioquim .panel-cuerpo { | |
| padding: 0.4rem 12px; | |
| overflow-y: auto; | |
| } | |
| #panel-hema .cabecera-columnas span:nth-child(2), | |
| #panel-bioquim .cabecera-columnas span:nth-child(2) { | |
| width: calc(4.5rem + 1.5rem); | |
| } | |
| #panel-hema .grupo-campo, | |
| #panel-bioquim .grupo-campo { | |
| margin-bottom: 6px; | |
| } | |
| #panel-hema .titulo-grupo, | |
| #panel-bioquim .titulo-grupo { | |
| margin-bottom: 0.5rem; | |
| padding-bottom: 0.1rem; | |
| } | |
| #panel-hema .fila-campo, | |
| #panel-bioquim .fila-campo { | |
| margin-bottom: 0.2rem; | |
| gap: 0.4rem; | |
| } | |
| #panel-hema .fila-campo input, | |
| #panel-bioquim .fila-campo input, | |
| #panel-uri .fila-campo input, | |
| #panel-endo .fila-campo input { | |
| padding: 3px 0.4rem; | |
| width: 3.5rem; | |
| flex-shrink: 0; | |
| } | |
| #panel-hema .fila-campo .unidad, | |
| #panel-bioquim .fila-campo .unidad, | |
| #panel-uri .fila-campo .unidad, | |
| #panel-endo .fila-campo .unidad { | |
| min-width: 3rem; | |
| } | |
| #panel-hema .fila-campo .estado-campo, | |
| #panel-bioquim .fila-campo .estado-campo, | |
| #panel-uri .fila-campo .estado-campo, | |
| #panel-endo .fila-campo .estado-campo { | |
| width: 5.5rem; | |
| min-width: 5.5rem; | |
| flex-shrink: 0; | |
| text-align: right; | |
| } | |
| #panel-uri .fila-campo, | |
| #panel-endo .fila-campo { | |
| gap: 0.4rem; | |
| } | |
| #panel-bioquim .grupo-campo { | |
| margin-bottom: 0.2rem; | |
| } | |
| #panel-bioquim .fila-campo { | |
| margin-bottom: 2px; | |
| } | |
| #salida-ia { | |
| font-size: var(--fs-sm); | |
| } | |
| .pasos-flujo li { | |
| padding: 0 20px; | |
| } | |
| .cuerpo-flujo { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| padding-top: 0.5rem; | |
| padding-bottom: 0rem; | |
| } | |
| } | |
| @media (max-width: 1100px) { | |
| header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0.5rem 1rem; | |
| } | |
| #logo { | |
| margin-right: 0; | |
| } | |
| .barra-paciente { | |
| display: none; | |
| } | |
| .acciones-cabecera { | |
| margin-left: 0; | |
| align-self: center; | |
| } | |
| .acciones-cabecera .boton { | |
| padding: 6px 12px; | |
| font-size: var(--fs-sm); | |
| } | |
| #examenes-subtabs-bar { | |
| display: flex; | |
| } | |
| #examenes-subtabs-bar[hidden] { | |
| display: none; | |
| } | |
| #panel-hema > .panel-cabecera, | |
| #panel-bioquim > .panel-cabecera, | |
| #panel-uri > .panel-cabecera, | |
| #panel-endo > .panel-cabecera { | |
| display: none; | |
| } | |
| .cabecera-col-label { | |
| display: none; | |
| } | |
| .cabecera-col-btns { | |
| display: flex; | |
| gap: 4px; | |
| margin-left: auto; | |
| } | |
| .cabecera-columnas--mobile-only .btn-limpiar-panel { | |
| margin-left: auto; | |
| } | |
| .cabecera-columnas--mobile-only .btn-importar-pdf { | |
| margin-left: 4px; | |
| } | |
| footer { | |
| padding: 0; | |
| flex-direction: column; | |
| } | |
| #aviso { | |
| display: none; | |
| } | |
| .btn-adjuntar-mob { | |
| display: flex; | |
| } | |
| #aviso-mob { | |
| display: block; | |
| } | |
| #creditos-mob { | |
| display: flex; | |
| } | |
| #creditos { | |
| display: none; | |
| } | |
| .nav-inferior { | |
| display: flex; | |
| height: 3.5rem; | |
| width: 100%; | |
| border-top: none; | |
| order: -1; | |
| } | |
| main { | |
| display: flex; | |
| flex-direction: column; | |
| background: var(--surface-page); | |
| gap: 0; | |
| overflow: hidden; | |
| } | |
| .col3-wrapper { | |
| display: contents; | |
| } | |
| main > .panel, | |
| .col3-wrapper > .panel { | |
| display: none; | |
| } | |
| main > .panel.activo, | |
| .col3-wrapper > .panel.activo { | |
| display: flex; | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| } | |
| main > .panel.activo .subpanel-anim, | |
| .col3-wrapper > .panel.activo .subpanel-anim { | |
| overflow: visible; | |
| } | |
| #panel-resultados { | |
| border-left: none; | |
| border-top: none; | |
| grid-column: unset; | |
| min-height: unset; | |
| } | |
| .cuerpo-flujo { | |
| align-items: flex-start; | |
| overflow-y: auto; | |
| padding: 1rem 20px; | |
| margin-top: 0; | |
| } | |
| .pasos-flujo { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .pasos-flujo li { | |
| flex-direction: row; | |
| text-align: left; | |
| align-items: flex-start; | |
| gap: 14px; | |
| padding: 0; | |
| } | |
| .pasos-flujo li + li::before { | |
| display: none; | |
| } | |
| .num-paso { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| flex-shrink: 0; | |
| margin-top: 0.1rem; | |
| } | |
| .pasos-flujo strong, | |
| .pasos-flujo p { | |
| font-size: var(--fs-sm); | |
| } | |
| .seccion-clinica textarea { | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .cuerpo-clinica { | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .seccion-clinica .cuerpo-clinica { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .btn-colapsar-subpanel, | |
| .btn-colapsar-flujo, | |
| .btn-colapsar-patrones { | |
| display: flex; | |
| } | |
| .pdf-toast { | |
| bottom: 5rem; | |
| } | |
| } | |
| /* Indicador de usuario */ | |
| .boton-usuario { | |
| font-size: var(--fs-sm); | |
| font-weight: 500; | |
| padding: 5px 12px; | |
| min-height: 32px; | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-2); | |
| cursor: pointer; | |
| max-width: 130px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); | |
| } | |
| .boton-usuario:hover { | |
| background: var(--surface-2); | |
| color: var(--text-1); | |
| border-color: var(--border-2); | |
| } | |
| /* Modal overlay */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.45); | |
| z-index: 100; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity var(--dur-base); | |
| } | |
| .modal-auth.visible ~ .modal-overlay, | |
| .modal-overlay:has(+ .modal-auth.visible) { | |
| opacity: 1; | |
| pointer-events: initial; | |
| } | |
| .modal-overlay.activo { | |
| opacity: 1; | |
| pointer-events: initial; | |
| } | |
| /* Modal*/ | |
| .modal-auth { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -44%); | |
| z-index: 101; | |
| width: min(440px, calc(100vw - 2rem)); | |
| background: var(--surface-1); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-md); | |
| box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); | |
| padding: var(--space-6); | |
| opacity: 0; | |
| transition: opacity var(--dur-base), transform var(--dur-base); | |
| } | |
| .modal-auth.visible { | |
| opacity: 1; | |
| transform: translate(-50%, -50%); | |
| } | |
| .modal-cerrar svg { | |
| width: 16px; | |
| height: 16px; | |
| fill: currentColor; | |
| } | |
| .modal-cerrar { | |
| position: absolute; | |
| top: var(--space-3); | |
| right: var(--space-3); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--text-4); | |
| cursor: pointer; | |
| transition: background var(--dur-fast), color var(--dur-fast); | |
| } | |
| .modal-cerrar:hover { | |
| background: var(--surface-2); | |
| color: var(--text-1); | |
| } | |
| .modal-titulo { | |
| font-size: var(--fs-base); | |
| font-weight: 600; | |
| color: var(--text-1); | |
| margin: 0 0 var(--space-4); | |
| } | |
| /*Tabs del modal */ | |
| .modal-tabs { | |
| display: flex; | |
| gap: 2px; | |
| margin-bottom: var(--space-4); | |
| border-bottom: 1px solid var(--border-1); | |
| padding-bottom: 0; | |
| } | |
| .modal-tab { | |
| flex: 1; | |
| padding: var(--space-2) var(--space-3); | |
| font-size: var(--fs-sm); | |
| font-weight: 500; | |
| color: var(--text-4); | |
| background: transparent; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -1px; | |
| cursor: pointer; | |
| transition: color var(--dur-fast), border-color var(--dur-fast); | |
| } | |
| .modal-tab:hover { | |
| color: var(--text-2); | |
| } | |
| .modal-tab.activo { | |
| color: var(--accent); | |
| border-bottom-color: var(--accent); | |
| } | |
| /* Campos del formulario */ | |
| .modal-campo { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| margin-bottom: var(--space-3); | |
| } | |
| .modal-campo label { | |
| font-size: var(--fs-sm); | |
| font-weight: 500; | |
| color: var(--text-2); | |
| } | |
| .modal-campo input { | |
| width: 100%; | |
| box-sizing: border-box; | |
| padding: 8px 10px; | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface-input); | |
| color: var(--text-1); | |
| font-size: var(--fs-sm); | |
| font-family: var(--font-sans); | |
| transition: border-color var(--dur-fast), box-shadow var(--dur-fast); | |
| } | |
| .modal-campo input:focus { | |
| outline: none; | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--focus-ring); | |
| } | |
| .modal-campo input.campo-valido { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--focus-ring); | |
| } | |
| .modal-campo input.campo-invalido { | |
| border-color: var(--alto); | |
| box-shadow: 0 0 0 3px rgba(184, 55, 44, 0.12); | |
| } | |
| .aviso-legal-texto { | |
| font-size: var(--fs-sm); | |
| color: var(--text-3); | |
| line-height: 1.4; | |
| margin: 0; | |
| } | |
| .aviso-legal-aceptar { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: var(--space-2); | |
| } | |
| .aviso-legal-aceptar label { | |
| font-size: var(--fs-sm); | |
| font-weight: 500; | |
| color: var(--text-2); | |
| cursor: pointer; | |
| } | |
| .aviso-legal-aceptar input[type="checkbox"] { | |
| width: 16px; | |
| height: 16px; | |
| min-width: 16px; | |
| flex-shrink: 0; | |
| padding: 0; | |
| border: 1px solid var(--border-1); | |
| border-radius: 3px; | |
| accent-color: var(--accent); | |
| cursor: pointer; | |
| } | |
| .modal-fila-doble { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-3); | |
| } | |
| .modal-error { | |
| font-size: var(--fs-sm); | |
| color: var(--alto); | |
| margin: 0 0 var(--space-3); | |
| min-height: 1.2em; | |
| } | |
| .modal-submit { | |
| width: 100%; | |
| margin-top: var(--space-2); | |
| padding: 10px; | |
| font-size: var(--fs-sm); | |
| font-weight: 600; | |
| justify-content: center; | |
| } | |
| .boton-primario { | |
| background: var(--accent); | |
| color: var(--text-on-accent); | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: background var(--dur-fast); | |
| } | |
| .boton-primario:hover { | |
| background: var(--accent-hover); | |
| } | |
| .boton-primario:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| /* ═══════════════════════════════════════ | |
| MODAL DE PAPERS | |
| ═══════════════════════════════════════ */ | |
| .modal-papers { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -44%); | |
| z-index: 101; | |
| width: min(720px, calc(100vw - 2rem)); | |
| max-height: calc(100vh - 4rem); | |
| background: var(--surface-1); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-md); | |
| box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); | |
| display: flex; | |
| flex-direction: column; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity var(--dur-base), transform var(--dur-base); | |
| } | |
| .modal-papers.visible { | |
| opacity: 1; | |
| pointer-events: initial; | |
| transform: translate(-50%, -50%); | |
| } | |
| .modal-papers-cabecera { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: var(--space-3); | |
| padding: var(--space-5) var(--space-5) var(--space-3); | |
| border-bottom: 1px solid var(--border-1); | |
| flex-shrink: 0; | |
| } | |
| .modal-papers-cabecera .modal-titulo { | |
| margin: 0; | |
| } | |
| .papers-consulta-label { | |
| font-size: 0.78rem; | |
| color: var(--text-3); | |
| margin: 4px 0 0; | |
| } | |
| .papers-consulta-label span { | |
| color: var(--text-accent); | |
| font-style: italic; | |
| } | |
| .papers-busqueda { | |
| display: flex; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-5); | |
| border-bottom: 1px solid var(--border-1); | |
| } | |
| .papers-busqueda-input { | |
| flex: 1; | |
| background: var(--surface-input); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-1); | |
| font-family: var(--font-sans); | |
| font-size: var(--fs-sm); | |
| padding: var(--space-2) var(--space-3); | |
| outline: none; | |
| transition: border-color var(--dur-fast), box-shadow var(--dur-fast); | |
| } | |
| .papers-busqueda-input:focus { | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px var(--focus-ring); | |
| } | |
| .papers-busqueda-btn { | |
| background: var(--accent); | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| color: var(--text-on-accent); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-2) var(--space-3); | |
| transition: background var(--dur-fast); | |
| } | |
| .papers-busqueda-btn:hover { | |
| background: var(--accent-hover); | |
| } | |
| .papers-lista { | |
| overflow-y: auto; | |
| flex: 1; | |
| padding: var(--space-4) var(--space-5); | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-4); | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border-2) transparent; | |
| } | |
| .paper-tarjeta { | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| padding: var(--space-3) var(--space-4); | |
| background: var(--surface-2); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .paper-meta { | |
| display: flex; | |
| gap: var(--space-2); | |
| align-items: center; | |
| } | |
| .paper-anio { | |
| font-size: 0.75rem; | |
| color: var(--text-3); | |
| background: var(--surface-3); | |
| border-radius: 4px; | |
| padding: 1px 6px; | |
| } | |
| .paper-revista { | |
| font-size: 0.75rem; | |
| color: var(--text-accent); | |
| font-style: italic; | |
| } | |
| .paper-pdf-badge { | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| color: var(--on-accent, #fff); | |
| background: var(--accent); | |
| border-radius: 3px; | |
| padding: 1px 5px; | |
| text-decoration: none; | |
| letter-spacing: 0.03em; | |
| } | |
| .paper-titulo { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text-1); | |
| margin: 0; | |
| line-height: 1.4; | |
| } | |
| .paper-titulo a { | |
| color: var(--text-accent); | |
| text-decoration: none; | |
| } | |
| .paper-titulo a:hover { | |
| text-decoration: underline; | |
| } | |
| .paper-autores { | |
| font-size: 0.78rem; | |
| color: var(--text-3); | |
| margin: 0; | |
| } | |
| .paper-resumen { | |
| font-size: 0.8rem; | |
| color: var(--text-2); | |
| margin: 4px 0 0; | |
| line-height: 1.55; | |
| } | |
| .papers-cargando, | |
| .papers-vacio, | |
| .papers-error { | |
| text-align: center; | |
| padding: var(--space-6) 0; | |
| color: var(--text-3); | |
| font-size: 0.9rem; | |
| } | |
| .papers-error { | |
| color: var(--rojo, #e05); | |
| } | |
| .papers-paginacion { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 4px; | |
| padding: var(--space-3) var(--space-5) var(--space-4); | |
| border-top: 1px solid var(--border-1); | |
| flex-shrink: 0; | |
| } | |
| .papers-pag-btn { | |
| min-width: 2rem; | |
| height: 2rem; | |
| padding: 0 var(--space-2); | |
| border: 1px solid var(--border-1); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface-2); | |
| color: var(--text-2); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: background var(--dur-fast), color var(--dur-fast); | |
| } | |
| .papers-pag-btn:hover:not(:disabled):not(.activo) { | |
| background: var(--surface-3); | |
| color: var(--text-1); | |
| } | |
| .papers-pag-btn.activo { | |
| background: var(--accent); | |
| color: var(--on-accent, #fff); | |
| border-color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .papers-pag-btn:disabled { | |
| opacity: 0.35; | |
| cursor: not-allowed; | |
| } | |
| @media (max-width: 700px) { | |
| .modal-papers { | |
| top: var(--space-3); | |
| max-height: calc(100svh - var(--space-6)); | |
| transform: translateX(-50%); | |
| } | |
| .modal-papers.visible { | |
| transform: translateX(-50%); | |
| } | |
| } | |