/* ============================================================================ Radiologia Informe - hoja de estilos unica. TODO el color vive en los tokens de :root (tema claro) y [data-theme="dark"] (tema oscuro). Las reglas de abajo NUNCA usan hex directos: siempre var(). El tema lo fija un data-theme en antes del primer render (rdx.js). ========================================================================== */ :root { color-scheme: light; /* Fondos */ --bg-app: #edf1f4; /* fondo general de la app */ --bg-surface: #ffffff; /* paneles, inputs, modales */ --bg-soft: #f8fafb; /* filas de lista, drop zones */ --bg-soft-2: #eef2f5; /* hover, chips neutros, code */ --bg-paper-frame: #e9edf1; /* marco del visor de documentos (.rdx) */ /* Texto */ --text: #17212b; --text-2: #455461; /* etiquetas de formulario, chips */ --text-muted: #5c6874; /* secundario, hints, metadatos */ /* Bordes */ --border: #d6dde2; /* divisores y cajas suaves */ --border-strong: #c7d4dc; /* inputs y botones secundarios */ /* Acento (teal de la marca) */ --accent: #006c84; /* relleno con texto blanco */ --accent-text: #006c84; /* enlaces y botones ghost */ --accent-strong: #0a5566; /* texto acento sobre fondo suave */ --accent-soft: #e1f0f4; /* fondo suave acento */ --accent-soft-2: #f2f8fa; /* fondo aun mas suave (chips frase) */ --accent-bright: #4fc3dd; /* barra activa del sidebar */ --accent-contrast: #ffffff; /* texto sobre --accent */ --focus-ring: rgba(0, 108, 132, 0.14); /* Estados */ --ok-text: #0d4f36; --ok-bg: #dff4ea; --ok-bg-soft: #f0faf5; --ok-border: #b9e4ce; --warn-text: #6b4d09; --warn-strong: #8c640a; /* relleno/texto ambar fuerte */ --warn-bg: #fdf3d6; --warn-bg-soft: #fdf8ef; /* chips de diagnostico */ --warn-border: #f0dca0; --warn-border-soft: #e3d4b4; --danger-text: #7b1d1d; --danger: #a3271c; --danger-bg: #f8dddd; --danger-bg-soft: #fdecea; --danger-border: #e3b4ae; /* Sidebar (oscuro en ambos temas) */ --sidebar-bg: #23313a; --sidebar-top: #1a252c; --sidebar-text: #d9e2e7; --sidebar-muted: #8da3af; --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-line: rgba(255, 255, 255, 0.12); /* Sombras y popovers */ --shadow-sm: 0 1px 2px rgba(20, 36, 48, 0.04); --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.14); --shadow-modal: 0 18px 50px rgba(0, 0, 0, 0.35); --backdrop: rgba(15, 23, 32, 0.45); --pop-bg: #1d2b33; /* popover de preview de frases */ --pop-text: #e8eef2; } [data-theme="dark"] { color-scheme: dark; --bg-app: #10181d; --bg-surface: #1a242c; --bg-soft: #202c35; --bg-soft-2: #273642; --bg-paper-frame: #0c1216; --text: #e2e9ee; --text-2: #c0ccd4; --text-muted: #93a5b1; --border: #2e3d48; --border-strong: #3d4f5c; --accent: #11859f; --accent-text: #56c5dd; --accent-strong: #8ad7e8; --accent-soft: #14333d; --accent-soft-2: #15292f; --accent-bright: #4fc3dd; --accent-contrast: #ffffff; --focus-ring: rgba(86, 197, 221, 0.25); --ok-text: #93dcb9; --ok-bg: #143a2a; --ok-bg-soft: #11301f; --ok-border: #1f5740; --warn-text: #eed598; --warn-strong: #d9b35a; --warn-bg: #3a2f12; --warn-bg-soft: #332b16; --warn-border: #59481c; --warn-border-soft: #4d3f1d; --danger-text: #f3a9a0; --danger: #e8867a; --danger-bg: #41201c; --danger-bg-soft: #381d19; --danger-border: #5e2d27; --sidebar-bg: #141d23; --sidebar-top: #0e161b; --sidebar-text: #cfdae0; --sidebar-muted: #7d919d; --sidebar-hover: rgba(255, 255, 255, 0.08); --sidebar-line: rgba(255, 255, 255, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-modal: 0 18px 50px rgba(0, 0, 0, 0.6); --backdrop: rgba(2, 6, 10, 0.62); --pop-bg: #0d1419; --pop-text: #dde6ec; } /* ---------------------------------------------------------------- base --- */ * { box-sizing: border-box; } html, body { margin: 0; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--text); background: var(--bg-app); } a { color: var(--accent-text); } button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.7; } input, select, textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); background: var(--bg-surface); padding: 0.62rem 0.7rem; outline: none; } textarea { resize: vertical; min-height: 7rem; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } h1, h2, p { margin: 0; } /* ------------------------------------------------------- layout general --- */ .page { position: relative; display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; min-width: 0; } .content { min-height: 100vh; background: var(--bg-app); } .work-surface { width: min(1500px, 100%); margin: 0 auto; padding: 24px; } .app-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .app-header h1 { font-size: 1.65rem; line-height: 1.15; letter-spacing: 0; } .eyebrow { margin-bottom: 0.25rem; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0; } .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 18px; align-items: start; } .stack, .side-stack { display: grid; gap: 18px; } .panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px; box-shadow: var(--shadow-sm); } .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .panel-title h2 { font-size: 1rem; line-height: 1.2; letter-spacing: 0; } /* -------------------------------------------------------------- sidebar --- */ .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); } .top-row { display: flex; align-items: center; height: 3.5rem; padding-left: 1rem; background-color: var(--sidebar-top); border-bottom: 1px solid var(--sidebar-line); } .navbar-brand { color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-decoration: none; } .navbar-toggler { appearance: none; cursor: pointer; width: 3.5rem; height: 2.5rem; color: white; position: absolute; top: 0.5rem; right: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1); } .navbar-toggler::before { content: ""; display: block; width: 1.55rem; height: 0.9rem; margin: 0.75rem auto; border-top: 2px solid rgba(255, 255, 255, 0.75); border-bottom: 2px solid rgba(255, 255, 255, 0.75); } .navbar-toggler::after { content: ""; position: absolute; left: 0.96rem; right: 0.96rem; top: 1.18rem; border-top: 2px solid rgba(255, 255, 255, 0.75); } .navbar-toggler:checked { background-color: rgba(255, 255, 255, 0.24); } .bi { display: inline-block; position: relative; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; top: -1px; background-size: cover; } .bi-file-plus-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z'/%3E%3C/svg%3E"); } .bi-list-check-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h1.5v1.5H2zM5 3.25h9v1H5zM2 7h1.5v1.5H2zM5 7.25h9v1H5zM2 11h1.5v1.5H2zM5 11.25h9v1H5z'/%3E%3C/svg%3E"); } .bi-journal-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1.5h8a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M5 4.5h6v1H5zM5 7h6v1H5zM5 9.5h4v1H5z'/%3E%3C/svg%3E"); } .bi-palette-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12.433 10.07C14.133 10.585 16 11.15 16 8a8 8 0 1 0-8 8c1.996 0 1.826-1.504 1.649-3.08-.124-1.101-.252-2.237.351-2.92.465-.527 1.42-.237 2.433.07M4.5 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m3-4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m4.5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E"); } .bi-people-fill-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E"); } .bi-gear-fill-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E"); } .bi-vcard-fill-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm3.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M2 13s-1 0-1-1 1-4 4-4 4 3 4 4-1 1-1 1zm7.5-9a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z'/%3E%3C/svg%3E"); } .bi-images-fill-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3'/%3E%3Cpath d='M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2zM1 11.586V13a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-1.414l-3.293-3.293a1 1 0 0 0-1.414 0L6 10.586 4.707 9.293a1 1 0 0 0-1.414 0z'/%3E%3Cpath d='M4.5 1a.5.5 0 0 1 .5-.5h9a1.5 1.5 0 0 1 1.5 1.5v8a.5.5 0 0 1-1 0V2A.5.5 0 0 0 14 1.5H5a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E"); } .bi-logout-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E%3C/svg%3E"); } .bi-moon-nav-menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6 0a6 6 0 0 0 0 12 6.97 6.97 0 0 1-1.5-4A7 7 0 0 1 11 1.07 5.97 5.97 0 0 0 6 0m8.5 3.5a.5.5 0 0 1 .5.5 2 2 0 0 0 2 2 .5.5 0 0 1 0 1 2 2 0 0 0-2 2 .5.5 0 0 1-1 0 2 2 0 0 0-2-2 .5.5 0 0 1 0-1 2 2 0 0 0 2-2 .5.5 0 0 1 .5-.5'/%3E%3C/svg%3E"); } .nav-logout, .nav-tema { cursor: pointer; text-align: left; font: inherit; } .nav-item { font-size: 0.9rem; padding: 0 1rem 0.5rem; } .nav-group-label { margin: 14px 1.1rem 5px; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sidebar-muted); } .nav-footer { border-top: 1px solid var(--sidebar-line); margin-top: 14px; padding-top: 8px; padding-bottom: 1rem; } .nav-item .nav-logout:hover { background-color: rgba(214, 89, 76, 0.22); color: #ffd9d4; } .nav-item .nav-link { color: var(--sidebar-text); background: none; border: none; border-radius: 6px; height: 2.75rem; display: flex; align-items: center; line-height: 2.75rem; width: 100%; padding: 0 1rem; text-decoration: none; } /* Pagina activa: acento teal de la app con barra lateral, claramente distinto del hover. */ .nav-item a.active { background-color: rgba(0, 108, 132, 0.55); color: white; box-shadow: inset 3px 0 0 var(--accent-bright); } .nav-item .nav-link:hover { background-color: var(--sidebar-hover); color: white; } .nav-scrollable { display: none; } .navbar-toggler:checked ~ .nav-scrollable { display: block; } /* -------------------------------------------------------------- botones --- */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; border: 1px solid transparent; border-radius: 6px; padding: 0.58rem 0.9rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; } .button.primary { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); } .button.secondary { color: var(--text); background: var(--bg-surface); border-color: var(--border-strong); } .button.ghost { color: var(--accent-text); background: transparent; border-color: transparent; padding-inline: 0.25rem; } .button.danger { color: var(--danger); background: var(--bg-surface); border-color: var(--danger-border); } .button.danger:hover { background: var(--danger-bg-soft); } /* -------------------------------------------------------------- avisos --- */ .notice { border-radius: 6px; padding: 0.8rem 0.95rem; margin-bottom: 16px; font-weight: 650; } .notice.success { color: var(--ok-text); background: var(--ok-bg); border: 1px solid var(--ok-border); } .notice.error { color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-border); } .notice.warning { color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-border); } .inline-notice { margin: 14px 0 0; } /* Banner de aviso persistente (borrador pendiente, informe corregido). */ .banner-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--warn-bg); color: var(--warn-text); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.88rem; } .banner-aviso.danger { background: var(--danger-bg-soft); color: var(--danger); } .banner-aviso .acciones { margin-left: auto; display: flex; gap: 8px; } /* ---------------------------------------------------- badges y etiquetas --- */ /* Badge unificado (componente Badge.razor): pill compacta semantica. */ .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.18rem 0.6rem; font-size: 0.76rem; font-weight: 700; white-space: nowrap; } .badge.info { background: var(--accent-soft); color: var(--accent-strong); } .badge.ok { background: var(--ok-bg); color: var(--ok-text); } .badge.warn { background: var(--warn-bg); color: var(--warn-strong); } .badge.danger { background: var(--danger-bg-soft); color: var(--danger); } .badge.neutral { background: var(--bg-soft-2); color: var(--text-2); font-weight: 600; } /* Variante "tag" cuadrada (tipo de plantilla en el editor). */ .badge.tag { border-radius: 6px; border: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; } /* Etiqueta de grupo de chips/controles. */ .chips-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 4px; } .hint { color: var(--text-muted); font-weight: 600; } .hint code { background: var(--bg-soft-2); border-radius: 4px; padding: 1px 5px; } /* ---------------------------------------------------------------- chips --- */ /* Chip unificado (componente Chip.razor): toggle de seleccion. */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: 999px; padding: 0.32rem 0.7rem; font-size: 0.82rem; color: var(--text-2); cursor: pointer; } .chip:hover { background: var(--bg-soft-2); } .chip.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .chip.off { opacity: 0.55; } /* Variante diagnostico (ambar): plantillas de contenido. */ .chip.dx { background: var(--warn-bg-soft); border-color: var(--warn-border-soft); color: var(--warn-text); } .chip.dx:hover { background: var(--warn-bg); } .chip.dx.on { background: var(--warn-strong); border-color: var(--warn-strong); color: var(--accent-contrast); } /* Boton mini (acciones secundarias compactas en listas/edicion). */ .mini-btn { border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: 6px; cursor: pointer; padding: 0.15rem 0.5rem; font-size: 0.8rem; color: var(--text-2); } .mini-btn:hover { background: var(--bg-soft-2); } .mini-btn.danger { color: var(--danger); border-color: var(--danger-border); } .mini-btn.danger:hover { background: var(--danger-bg-soft); } /* ------------------------------------------------------------ formularios --- */ .form-grid { display: grid; gap: 14px; } .form-grid.one { grid-template-columns: 1fr; } .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } label { display: grid; gap: 6px; color: var(--text-2); font-size: 0.84rem; font-weight: 700; } .search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 12px; } /* Autocompletar (medico solicitante). */ .rdx-ac { position: relative; } .rdx-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 8px; margin-top: 2px; box-shadow: var(--shadow-pop); max-height: 220px; overflow: auto; } .rdx-suggest button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 0.5rem 0.7rem; cursor: pointer; color: var(--text); } .rdx-suggest button:hover { background: var(--bg-soft-2); } .rdx-suggest small { color: var(--text-muted); } /* --------------------------------------------------------------- stepper --- */ .stepper { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; counter-reset: step; } .stepper .step { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 120px; color: var(--text-muted); font-size: 0.82rem; font-weight: 700; } .stepper .step span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-soft-2); color: var(--text-muted); font-size: 0.78rem; } .stepper .step.active { color: var(--accent-text); } .stepper .step.active span { background: var(--accent); color: var(--accent-contrast); } .stepper .step.done span { background: var(--ok-border); color: var(--ok-text); } .wizard-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; } .done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } /* ------------------------------------------------------- listas y tablas --- */ .data-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; } .data-list dt { color: var(--text-muted); font-size: 0.82rem; font-weight: 700; } .data-list dd { margin: 0; color: var(--text); text-align: right; } .data-list.review { grid-template-columns: 140px 1fr; } .data-list.review dd { text-align: left; } .selected-patient { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--ok-border); border-radius: 8px; background: var(--ok-bg-soft); padding: 0.7rem 0.9rem; } .selected-patient strong { display: block; color: var(--text); } .selected-patient small { color: var(--text-muted); } .compact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 16px; } .compact-list button { display: grid; gap: 3px; min-height: 3.35rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft); padding: 0.55rem 0.7rem; text-align: left; } .compact-list span, .compact-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compact-list span { color: var(--text); font-weight: 700; } .compact-list small { color: var(--text-muted); } .empty-state { color: var(--text-muted); font-size: 0.9rem; } .recent-list { display: grid; gap: 8px; } .recent-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 3.25rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft); padding: 0.6rem 0.72rem; } .recent-meta { display: grid; gap: 3px; min-width: 0; } .recent-list strong, .recent-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-list strong { color: var(--text); } .recent-list span { color: var(--text-muted); font-size: 0.82rem; } .recent-list a { font-weight: 800; text-decoration: none; } .recent-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .recent-actions a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 30px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-surface); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .data-table th { text-align: left; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); } .data-table td { padding: 0.6rem; border-bottom: 1px solid var(--bg-soft-2); color: var(--text); } .data-table tr.clickable { cursor: pointer; } .data-table tr.clickable:hover td { background: var(--bg-soft); } .data-table tr.editando td { background: var(--accent-soft-2); } .data-table .row-actions { display: flex; gap: 10px; justify-content: flex-end; white-space: nowrap; } .data-table .row-actions a { font-weight: 700; text-decoration: none; } .data-table .row-actions a.danger-link { color: var(--danger); } /* Paginador unificado (componente Pager.razor). */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--text-muted); font-size: 0.85rem; } .pager-actions { display: flex; gap: 8px; } .dup-list { margin: 8px 0; padding-left: 1.1rem; } .dup-list li { margin-bottom: 4px; } .dup-list small { color: var(--text-muted); margin-left: 6px; } /* ------------------------------------------------------ imagenes y zonas --- */ .drop-zone { position: relative; display: grid; place-items: center; min-height: 8.5rem; border: 1.5px dashed var(--border-strong); border-radius: 8px; background: var(--bg-soft); text-align: center; overflow: hidden; } .drop-zone.dragging { border-color: var(--accent); background: var(--accent-soft); } .drop-zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .drop-zone strong { display: block; color: var(--text); font-size: 0.96rem; } .drop-zone span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 0.8rem; } .logo-preview { display: grid; place-items: center; min-height: 8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); padding: 12px; } .logo-preview img { max-width: 100%; max-height: 9rem; object-fit: contain; } .image-count { margin: 12px 0 8px; color: var(--text-muted); font-size: 0.84rem; font-weight: 700; } .image-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .image-preview { display: grid; grid-template-rows: 92px auto; min-width: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg-surface); } .image-preview img { width: 100%; height: 92px; object-fit: cover; background: var(--bg-soft-2); } .image-preview div { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 4px; padding: 5px; } .image-preview span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--accent-contrast); background: var(--accent); font-size: 0.74rem; font-weight: 800; } .image-preview button { min-width: 0; border: 0; border-radius: 4px; color: var(--danger-text); background: var(--danger-bg-soft); padding: 0.32rem; font-size: 0.74rem; font-weight: 700; } .quick-workspace { grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); } .quick-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .compact-drop-zone { min-height: 7rem; } .quick-empty { margin-top: 12px; } .quick-image-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .quick-image-grid .image-preview { grid-template-rows: 104px auto; } .quick-image-grid .image-preview img { height: 104px; } .quick-image-grid .image-preview div { grid-template-columns: 24px repeat(3, minmax(0, 1fr)); } .quick-image-grid .image-preview button { color: var(--text-2); background: var(--bg-soft-2); } .quick-image-grid .image-preview button:last-child { color: var(--danger-text); background: var(--danger-bg-soft); } .quick-review { margin-bottom: 16px; } .sheet-preview-list { display: grid; gap: 14px; } .pdf-sheet-preview { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); padding: 12px; } .pdf-sheet-preview header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .pdf-sheet-preview header strong { color: var(--text); } .pdf-sheet-preview header span { color: var(--text-muted); font-size: 0.82rem; font-weight: 700; } .sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; aspect-ratio: 8.5 / 10.2; } .sheet-grid figure { display: grid; place-items: center; min-width: 0; min-height: 0; margin: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-surface); overflow: hidden; } .sheet-grid img { width: 100%; height: 100%; object-fit: contain; background: #111820; } .sheet-grid .blank-cell { background: repeating-linear-gradient(135deg, var(--bg-soft-2), var(--bg-soft-2) 8px, var(--bg-soft) 8px, var(--bg-soft) 16px); } /* ---------------------------------------------------------------- modal --- */ /* Modal unificado (componente Modal.razor / ConfirmHost). */ .modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-box { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; width: min(440px, 92vw); box-shadow: var(--shadow-modal); } .modal-box h3 { margin: 0 0 8px; font-size: 1.05rem; } .modal-box p { margin: 0 0 10px; color: var(--text-muted); font-size: 0.88rem; line-height: 1.4; } .modal-box .acciones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } /* ------------------------------------------- captura de informes (Home) --- */ .rdx-frase-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; } .rdx-frase-wrap { position: relative; display: inline-block; } .rdx-frase-chips button { border: 1px solid var(--accent-soft); background: var(--accent-soft-2); color: var(--accent-strong); border-radius: 6px; padding: 0.24rem 0.6rem; font-size: 0.78rem; cursor: pointer; } .rdx-frase-chips button:hover { background: var(--accent-soft); } .rdx-frase-chips button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .rdx-frase-pop { display: none; position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); width: 340px; max-width: 70vw; max-height: 160px; overflow: auto; background: var(--pop-bg); color: var(--pop-text); border-radius: 8px; padding: 8px 10px; font-size: 0.76rem; line-height: 1.45; box-shadow: var(--shadow-pop); white-space: pre-line; } .rdx-frase-wrap:hover .rdx-frase-pop, .rdx-frase-wrap:focus-within .rdx-frase-pop { display: block; } .rdx-frase-buscar { max-width: 180px; min-height: 1.9rem; padding: 0.2rem 0.55rem; font-size: 0.78rem; border: 1px solid var(--accent-soft); border-radius: 6px; } .rdx-frase-vacio { font-size: 0.78rem; color: var(--text-muted); } .rdx-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .rdx-save-frase { border: 1px dashed var(--border-strong); background: transparent; color: var(--text-muted); border-radius: 6px; padding: 0.05rem 0.5rem; font-size: 0.72rem; cursor: pointer; } .rdx-save-frase:hover { background: var(--bg-soft-2); color: var(--accent-strong); } .captura-acciones { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: var(--bg-app); border-top: 1px solid var(--border); padding: 10px 4px; margin-top: 4px; } .captura-acciones .autosave { margin-right: auto; font-size: 0.78rem; color: var(--text-muted); } .captura-acciones .autosave.err { color: var(--danger); } .panel-colapsable-toggle { background: none; border: none; cursor: pointer; font: inherit; color: var(--accent-text); font-size: 0.85rem; padding: 0; } .pdf-en-proceso { color: var(--warn-strong); font-size: 0.8rem; } /* ------------------------------------------------- worklist (/estudios) --- */ .wl-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; } .wl-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-muted); margin: 0; } .wl-filtros input, .wl-filtros select { min-height: 2.2rem; } .wl-filtros .texto { flex: 1; min-width: 220px; } .wl-check { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); padding-bottom: 0.55rem; } .wl-check-box { width: auto; } /* ------------------------------------------------ plantillas (/plantillas) --- */ .pl-sec { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg-soft); } .pl-sec-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pl-sec-head input[type="text"] { flex: 1; min-width: 160px; } .pl-sec-head .num { width: 70px; } .pl-sec-head label.inline { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; margin: 0; } .pl-sec textarea { width: 100%; margin-top: 8px; } .pl-filtro { max-width: 320px; } .pl-divisor { margin: 14px 0; border: none; border-top: 1px solid var(--border); } /* Checkbox-label alineado con el resto de la fila de formulario. */ .check-inline-top { display: flex; align-items: center; gap: 8px; margin-top: 22px; } /* ------------------------------------------------------ medicos (/medicos) --- */ .med-roles .med-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 4px 0; cursor: pointer; } .med-roles .med-check input { width: auto; } .med-check-sub { margin-left: 18px; } .med-roles-label { margin: 14px 0 6px; } .med-especialidad { display: block; color: var(--text-muted); } /* --------------------------------------- editor de formatos (/formato) --- */ .rdx-surface { width: 100%; max-width: 100%; padding: 16px 20px; display: flex; flex-direction: column; min-height: calc(100vh - 16px); } .rdx-surface .app-header { margin-bottom: 14px; } .rdx-shell { display: grid; gap: 16px; flex: 1; min-height: 0; } .rdx-shell.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .rdx-shell.code, .rdx-shell.doc { grid-template-columns: 1fr; } .rdx-shell.code .rdx-pane-doc { display: none; } .rdx-shell.doc .rdx-pane-code { display: none; } .rdx-pane { display: flex; flex-direction: column; min-height: 0; padding: 14px; } .rdx-pane .panel-title { margin-bottom: 10px; } /* Barra de gestion de plantillas. */ .rdx-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .rdx-tpl select { min-height: 2.1rem; min-width: 190px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 0.3rem 0.5rem; font-size: 0.86rem; } .rdx-tpl .button { min-height: 2.1rem; padding: 0.42rem 0.8rem; font-size: 0.83rem; } /* Editor Monaco (siempre oscuro: es codigo). */ .rdx-editor-host { position: relative; flex: 1; min-height: 300px; border: 1px solid #2b3a52; border-radius: 8px; overflow: hidden; background: #0f172a; } #rdx-editor { position: absolute; inset: 0; } /* El documento renderizado es PAPEL: el marco se tematiza, la hoja no. */ .rdx-preview-wrap { flex: 1; min-height: 320px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; background: var(--bg-paper-frame); } .rdx-preview { width: 100%; height: 100%; border: 0; display: block; } .rdx-hint { font-size: 11px; color: var(--text-muted); margin: 8px 0 0; } .rdx-hint code { background: var(--bg-soft-2); border-radius: 4px; padding: 1px 5px; } /* Hint del visor de informe (mas chico, sin margen superior). */ .rdx-hint-doc { font-size: 11px; color: var(--text-muted); margin: 0 0 8px; } .rdx-hint-btn { margin-left: 6px; min-height: 1.6rem; padding: 0.1rem 0.55rem; font-size: 0.78rem; } .rdx-editor-cargando { color: #94a3b8; padding: 14px; font-size: 13px; } .panel-compacto { padding: 10px; } /* Icono dentro de un boton (PDF, etc.). */ .icono-btn { margin-right: 6px; vertical-align: -2px; } .rdx-segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; background: var(--bg-surface); } .rdx-segmented button { appearance: none; border: 0; background: transparent; padding: 0.5rem 0.85rem; font-weight: 700; font-size: 0.85rem; color: var(--text-2); cursor: pointer; border-left: 1px solid var(--border); } .rdx-segmented button:first-child { border-left: 0; } .rdx-segmented button.active { background: var(--accent); color: var(--accent-contrast); box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.6); } /* Visor del informe con formato (/informes/{id}/formato). */ .rdx-doc-surface { width: 100%; max-width: 1100px; } .rdx-doc-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: auto; background: var(--bg-paper-frame); height: calc(100vh - 210px); min-height: 460px; } .rdx-doc-frame { width: 100%; height: 100%; border: 0; display: block; } /* ----------------------------------------------- visor de imagenes (canvas) --- */ /* El area de trabajo del visor es oscura en AMBOS temas (estandar radiologico). */ .visor { display: flex; flex-direction: column; gap: 8px; min-height: 0; height: calc(100vh - 150px); outline: none; background: #0c1014; border: 1px solid var(--border); border-radius: 10px; padding: 8px; } .visor:fullscreen { height: 100vh; border: 0; border-radius: 0; } .visor-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .visor-grupo { display: flex; align-items: center; gap: 4px; } .visor-btn { border: 1px solid #2c3a45; background: #18212a; color: #c7d4dd; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .visor-btn:hover { background: #22303b; } .visor-btn.activa { background: var(--accent); border-color: var(--accent); color: #fff; } .visor-btn.primario { background: var(--accent); border-color: var(--accent); color: #fff; } .visor-btn.peligro { color: #ff9d93; border-color: #5e2d27; } .visor-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; padding: 0; } .visor-color.activa { border-color: #fff; box-shadow: 0 0 0 2px #0c1014, 0 0 0 4px rgba(255, 255, 255, 0.35); } .visor-deslizador { display: flex; align-items: center; gap: 6px; color: #8da0ad; font-size: 0.72rem; font-weight: 600; margin: 0; } .visor-deslizador input[type="range"] { width: 90px; padding: 0; border: 0; background: transparent; accent-color: #4fc3dd; } .visor-estado { margin-left: auto; color: #8da0ad; font-size: 0.78rem; white-space: nowrap; } .visor-lienzo { position: relative; flex: 1; min-height: 220px; border-radius: 8px; overflow: hidden; touch-action: none; } .visor-lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .visor-input-flotante { position: absolute; z-index: 5; width: 210px; background: #18212a; color: #e7eef3; border: 1px solid var(--accent); border-radius: 6px; padding: 0.35rem 0.55rem; font-size: 0.85rem; } .visor-miniaturas { display: flex; gap: 6px; overflow-x: auto; padding: 2px; } .visor-mini { position: relative; flex: 0 0 auto; width: 76px; height: 58px; border: 2px solid #2c3a45; border-radius: 6px; background: #000; padding: 0; overflow: hidden; } .visor-mini img { width: 100%; height: 100%; object-fit: cover; display: block; } .visor-mini span { position: absolute; left: 3px; bottom: 2px; color: #fff; font-size: 0.68rem; font-weight: 700; text-shadow: 0 1px 2px #000; } .visor-mini.activa { border-color: #4fc3dd; } .visor-mini.sucia::after { content: ""; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #ffd24a; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55); } /* Encabezado compacto de la vista compartida (sin sidebar). */ .compartido-encabezado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 12px; } .compartido-encabezado h1 { font-size: 1.2rem; } .compartido-encabezado .meta { color: var(--text-muted); font-size: 0.86rem; } .compartido-encabezado .header-actions { margin-left: auto; } /* ----------------------------------------------------------- error de UI --- */ .blazor-error-boundary { background: #b32121; color: #fff; padding: 1rem; } .blazor-error-boundary::after { content: "Ha ocurrido un error."; } #blazor-error-ui { display: none; position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 1000; max-width: 720px; margin: 0 auto; border: 1px solid var(--danger-border); border-radius: 8px; background: var(--danger-bg); color: var(--danger-text); box-shadow: var(--shadow-pop); padding: 0.8rem 3rem 0.8rem 1rem; font-weight: 700; } #blazor-error-ui .reload { color: var(--danger-text); margin-left: 0.4rem; } #blazor-error-ui .dismiss { position: absolute; top: 0.55rem; right: 0.8rem; color: var(--danger-text); cursor: pointer; text-decoration: none; } /* ------------------------------------------------------------ utilidades --- */ .u-mt-6 { margin-top: 6px; } .u-mt-10 { margin-top: 10px; } .u-mt-12 { margin-top: 12px; } .u-mt-14 { margin-top: 14px; } .u-mt-18 { margin-top: 18px; } .u-mb-10 { margin-bottom: 10px; } .u-mb-12 { margin-bottom: 12px; } .u-mb-14 { margin-bottom: 14px; } .u-mt-8 { margin-top: 8px; } .u-flex-gap { display: flex; gap: 10px; align-items: center; } /* Checkbox-label en linea (sin el margen superior de check-inline-top). */ .check-inline { display: flex; align-items: center; gap: 8px; } /* Fila de busqueda/alta con campos que envuelven. */ .cfg-fila { gap: 8px; flex-wrap: wrap; } /* Texto de recordatorio en ambar. */ .texto-aviso { color: var(--warn-strong); } /* -------------------------------------------------------------- responsivo --- */ @media (max-width: 1180px) { .workspace-grid { grid-template-columns: 1fr; } .side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } @media (max-width: 900px) { .rdx-shell.split { grid-template-columns: 1fr; } } @media (max-width: 760px) { .work-surface { padding: 16px; } .app-header { display: grid; } .header-actions { justify-content: stretch; } .header-actions .button { flex: 1; } .form-grid.two, .form-grid.three, .side-stack, .quick-upload-grid { grid-template-columns: 1fr; } .span-2, .span-3 { grid-column: auto; } .image-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quick-image-grid { grid-template-columns: 1fr; } .pdf-sheet-preview header { display: grid; } } @media (min-width: 641px) { .page { flex-direction: row; } .sidebar { width: 230px; height: 100vh; position: sticky; top: 0; } .navbar-toggler { display: none; } .nav-scrollable { display: flex; flex-direction: column; height: calc(100vh - 3.5rem); overflow-y: auto; } /* Salir anclado al fondo del sidebar en escritorio. */ .nav-scrollable nav { display: flex; flex-direction: column; flex: 1; } .nav-footer { margin-top: auto; } }