:root { --bg: #0a0a0b; --bg-raised: #131315; --bg-panel: #17181a; --bg-deep: #050506; --bg-elevated: #1e1f22; --ink: #e8e9eb; --ink-dim: #8b8d93; --ink-faint: #5a5c62; --ink-ghost: #2d2e32; --accent: #5b8def; --accent-bright: #7ba6ff; --accent-dim: #2c4a85; --accent-glow: rgba(91, 141, 239, 0.15); --accent-b: #f59e0b; --accent-b-dim: #78350f; --success: #22c55e; --warn: #f59e0b; --danger: #ef4444; --line: #26272b; --line-bright: #35363a; --split-line: #ffffff; /* Viewer (canvas background + chips flotantes sobre el scan) */ --viewer-bg: #000000; --chip-bg: rgba(10, 10, 11, 0.85); --chip-bg-solid: rgba(10, 10, 11, 0.9); } /* ============ LIGHT THEME ============ Activá con: (o sin atributo = dark por default). Solo re-mapea superficies y tinta; los accents/semánticos se mantienen. */ [data-theme="light"] { --bg: #f5f6f8; --bg-raised: #eceef2; --bg-panel: #ffffff; --bg-deep: #fafbfc; --bg-elevated: #e2e5ea; --ink: #1a1b1f; --ink-dim: #5a5c62; --ink-faint: #8b8d93; --ink-ghost: #d0d2d7; --accent-dim: #b3c5ed; --accent-glow: rgba(91, 141, 239, 0.12); --line: #d8dade; --line-bright: #b8babe; --split-line: #1a1b1f; --viewer-bg: #2a2d33; --chip-bg: rgba(255, 255, 255, 0.88); --chip-bg-solid: rgba(255, 255, 255, 0.94); } body, .topbar, .sidebar-left, .sidebar-right, .statusbar, .panel, .bottom-bar, .load-strip { transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } /* Toggle de tema en sidebar-left top-actions */ .theme-toggle { background: transparent; border: 1px solid var(--line-bright); color: var(--ink-dim); padding: 6px 8px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; transition: background 0.12s, border-color 0.12s, color 0.12s; font-size: 0; } .theme-toggle::before { content: '🌙'; font-size: 14px; } [data-theme="light"] .theme-toggle::before { content: '☀'; } .theme-toggle:hover { background: var(--bg-raised); border-color: var(--ink-faint); color: var(--ink); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; line-height: 1.45; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; user-select: none; } .mono { font-family: 'JetBrains Mono', monospace; } .app { display: grid; grid-template-rows: 52px 1fr 28px; height: 100vh; } /* ============ TOP BAR ============ */ .topbar { background: var(--bg-deep); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 24px; gap: 16px; font-size: 13px; min-height: 52px; flex-wrap: nowrap; } .topbar > .brand { flex-shrink: 0; } .topbar > .nav-main { flex: 1 1 auto; justify-content: center; min-width: 0; overflow: hidden; } .topbar > .topbar-actions { flex-shrink: 0; margin-left: auto; } .topbar > button.user-area { flex-shrink: 0; margin-left: 8px; } .brand { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 28px; height: 28px; background: var(--accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .brand-logo::before { content: ''; width: 12px; height: 12px; background: var(--bg-deep); border-radius: 50%; } .brand-logo::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--accent-bright); } .brand-name { font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .brand-name .sub { color: var(--ink-dim); font-weight: 400; margin-left: 4px; } .nav-main { display: flex; gap: 2px; } .nav-main button { background: transparent; border: none; color: var(--ink-dim); font-family: inherit; font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: all 0.15s; } .nav-main button:hover { color: var(--ink); background: var(--bg-raised); } .nav-main button.active { color: var(--ink); background: var(--bg-elevated); } .user-area { display: flex; align-items: center; gap: 14px; color: var(--ink-dim); font-size: 12px; } .tenant-chip { padding: 4px 10px; border: 1px solid var(--line-bright); border-radius: 6px; color: var(--ink); font-size: 11px; font-weight: 500; background: var(--bg-raised); } .user-avatar { width: 30px; height: 30px; background: linear-gradient(135deg, var(--accent), #7ba6ff); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; border-radius: 50%; } /* ============ MAIN LAYOUT ============ */ .main { display: grid; grid-template-columns: var(--sidebar-l-w, 300px) 1fr var(--sidebar-r-w, 320px); overflow: hidden; transition: grid-template-columns 0.22s ease; } /* Modo inmersivo: colapsa ambos sidebars a 0 para que el viewer ocupe todo el ancho. Activable desde botón en top-actions o tecla F. */ body[data-immersive="true"] .main { --sidebar-l-w: 0px; --sidebar-r-w: 0px; } /* ============ LEFT SIDEBAR - CONTROLS ============ */ .sidebar-left { background: var(--bg-deep); border-right: 1px solid var(--line); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; transition: opacity 0.16s ease; } body[data-immersive="true"] .sidebar-left, body[data-immersive="true"] .sidebar-right { opacity: 0; pointer-events: none; } /* Botón flotante para salir del modo inmersivo. Sin esto quedás atrapado porque el botón que toggleaba vivía en el sidebar izquierdo (oculto). */ .immersive-exit { display: none; position: fixed; top: 14px; right: 14px; z-index: 1000; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(22, 22, 26, 0.82); color: rgba(255, 255, 255, 0.92); font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); transition: background 120ms ease, transform 120ms ease; } .immersive-exit:hover { background: rgba(40, 40, 46, 0.92); transform: translateY(-1px); } .immersive-exit svg { opacity: 0.9; } .panel { border-bottom: 1px solid var(--line); } .panel-header { padding: 10px 16px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; } .panel-header::after { content: '▾'; font-size: 10px; transition: transform 0.15s; color: var(--ink-faint); } .panel.collapsed .panel-header::after { transform: rotate(-90deg); } .panel-body { padding: 0 16px 16px; } .panel.collapsed .panel-body { display: none; } .top-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .top-actions button { padding: 6px 4px; background: var(--bg-raised); border: 1px solid var(--line-bright); border-radius: 5px; color: var(--ink); font-family: inherit; font-size: 10px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .top-actions button:hover { background: var(--bg-panel); border-color: var(--accent); color: var(--accent); } /* LIGHT GIZMO */ .light-row { display: grid; grid-template-columns: 1fr 96px; gap: 14px; align-items: center; margin-bottom: 12px; } .light-inputs .label { font-size: 11px; font-weight: 500; color: var(--ink-dim); margin-bottom: 6px; } .xy-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .xy-row label { font-weight: 600; font-size: 10px; color: var(--ink-dim); width: 14px; font-family: 'JetBrains Mono', monospace; } .xy-row input { flex: 1; padding: 4px 8px; background: var(--bg-raised); border: 1px solid var(--line-bright); border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink); text-align: center; } .xy-row input:focus { outline: 1px solid var(--accent); border-color: var(--accent); } /* El gizmo - diseño dark modern */ .gizmo-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; } .gizmo { width: 90px; height: 90px; position: relative; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.08) 0%, transparent 50%), radial-gradient(circle at center, var(--bg-elevated) 0%, var(--bg-panel) 100%); border: 1.5px solid var(--line-bright); border-radius: 50%; cursor: crosshair; touch-action: none; box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 0 0 3px rgba(91, 141, 239, 0.05); } /* Ecuador (línea horizontal azul) */ .gizmo::before { content: ''; position: absolute; top: 50%; left: 6px; right: 6px; height: 1px; background: var(--accent); opacity: 0.5; transform: translateY(-0.5px); } /* Meridiano (línea vertical ámbar/roja) */ .gizmo::after { content: ''; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 1px; background: var(--accent-b); opacity: 0.55; transform: translateX(-0.5px); } /* Arco superior */ .gizmo-arc { position: absolute; top: 6px; left: 6px; right: 6px; height: 50%; border: 1px solid var(--accent); border-bottom: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: 0.35; } /* Setpoints */ .gizmo-setpoint { position: absolute; width: 6px; height: 6px; background: var(--ink-faint); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; } .gizmo-handle { position: absolute; width: 12px; height: 12px; background: var(--ink); border: 2px solid var(--accent); border-radius: 50%; transform: translate(-50%, -50%); z-index: 3; cursor: grab; box-shadow: 0 0 12px rgba(91, 141, 239, 0.6); transition: transform 0.05s; } .gizmo-handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); } .gizmo-hint { font-size: 9px; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } /* Checkbox rows */ .check-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 10px; } .check { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 0; font-size: 11px; color: var(--ink); } .check input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; margin: 0; } /* Sliders */ .slider-row { display: grid; grid-template-columns: 75px 1fr 45px; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 11px; } .slider-row label { color: var(--ink-dim); font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 6px; } .slider-row label input[type="checkbox"] { width: 12px; height: 12px; accent-color: var(--accent); } .slider-row input[type="range"] { width: 100%; accent-color: var(--accent); height: 4px; cursor: pointer; } .slider-row button { padding: 3px 6px; background: var(--bg-raised); border: 1px solid var(--line-bright); border-radius: 4px; color: var(--ink-dim); font-family: inherit; font-size: 10px; cursor: pointer; } .slider-row button:hover { border-color: var(--accent); color: var(--accent); } /* Select */ .select-row { display: grid; grid-template-columns: 75px 1fr; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 11px; } .select-row label { color: var(--ink-dim); font-size: 11px; font-weight: 500; } .select-row select { padding: 5px 8px; background: var(--bg-raised); border: 1px solid var(--line-bright); border-radius: 4px; color: var(--ink); font-family: inherit; font-size: 11px; cursor: pointer; } .select-row select:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .select-full { grid-template-columns: 1fr; } /* Sync scope toggle */ .sync-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--bg-raised); border-radius: 6px; border: 1px solid var(--line); margin-top: 8px; } .sync-scope button { padding: 6px 8px; background: transparent; border: none; color: var(--ink-dim); font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; border-radius: 4px; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 4px; } .sync-scope button.active { background: var(--accent); color: #fff; } .sync-scope button .dot { width: 6px; height: 6px; border-radius: 50%; } /* Scan Information */ .scan-info { font-size: 11px; font-family: 'JetBrains Mono', monospace; line-height: 1.5; } .scan-info .legacy-warn { color: var(--warn); font-weight: 700; font-family: 'Inter', sans-serif; padding: 6px 10px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 4px; margin-bottom: 10px; font-size: 11px; display: flex; align-items: center; gap: 6px; } .scan-info-row { display: grid; grid-template-columns: 115px 1fr; padding: 2px 0; font-size: 11px; } .scan-info-row .key { color: var(--ink-dim); font-size: 10px; } .scan-info-row .val { color: var(--ink); font-size: 10px; word-break: break-word; } .scan-info-row .val.warn { color: #e9b949; } .scan-info-row.wide { grid-template-columns: 1fr; gap: 2px; } .scan-info-row.wide .val { white-space: pre-wrap; font-size: 10.5px; } /* ============ CENTER VIEWER ============ */ .viewers { background: var(--bg); display: grid; grid-template-rows: 48px 1fr 40px; overflow: hidden; } .viewers-toolbar { background: var(--bg-deep); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 14px; gap: 8px; } .mode-toggle { display: flex; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .mode-btn { padding: 8px 14px; background: transparent; border: none; color: var(--ink-dim); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px; border-right: 1px solid var(--line); } .mode-btn:last-child { border-right: none; } .mode-btn:hover { color: var(--ink); } .mode-btn.active { color: #fff; background: var(--accent); } .mode-btn svg { width: 14px; height: 14px; } .tool-group { display: flex; gap: 2px; padding: 3px; background: var(--bg-raised); border-radius: 8px; border: 1px solid var(--line); } .tool { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink-dim); cursor: pointer; border-radius: 5px; background: transparent; border: none; transition: all 0.15s; } .tool:hover { color: var(--ink); background: var(--bg-elevated); } .tool.active { color: #fff; background: var(--accent); } .tool svg { width: 15px; height: 15px; } /* Indicador flotante del ángulo durante la rotación libre (estilo iPhone Photos). Aparece centrado sobre el scan mientras el drag está activo. */ .rotate-angle-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); z-index: 10; display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 50%; background: var(--chip-bg-solid); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-bright); color: var(--ink); pointer-events: none; opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease; } .rotate-angle-indicator.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } .rotate-angle-indicator .ring-arc { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); transform: rotate(var(--ring-rot, 0deg)); transition: transform 0.06s linear; } .rotate-angle-indicator .ring-value { font: 600 18px/1 'JetBrains Mono', monospace; color: var(--ink); letter-spacing: -0.02em; position: relative; z-index: 1; } /* Segmented control para aplicar zoom/rotación a ambos scans o solo uno. Ligado a state.toolTarget — se sincroniza con el select del panel Ajustes de imagen pero queda visible en la toolbar. */ .target-toggle { display: inline-flex; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; padding: 3px; gap: 2px; } .target-toggle button { padding: 6px 12px; background: transparent; border: none; color: var(--ink-dim); font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: 5px; cursor: pointer; transition: color 0.12s, background 0.12s; min-width: 36px; } .target-toggle button:hover { color: var(--ink); background: var(--bg-elevated); } .target-toggle button.active { color: #fff; background: var(--accent); } .sync-indicator { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-dim); font-size: 11px; font-weight: 500; background: var(--bg-raised); cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; user-select: none; } .sync-indicator:hover { color: var(--ink); border-color: var(--line-bright); } .sync-indicator .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; } .sync-indicator.off { opacity: 0.72; } .sync-indicator.off .dot { background: var(--ink-faint); } /* ======================================================================== VIEWER AREA — full-width, layers A/B stacked + septum ======================================================================== */ .viewer-area { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-deep); flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: stretch; padding: 0; } /* Contenedor del cotejo: ocupa toda el área disponible del viewer */ .scan-canvas { position: relative; flex: 1 1 auto; width: 100%; height: 100%; background: var(--viewer-bg); overflow: hidden; } /* Layers A/B: ambas ocupan 100% del contenedor y se superponen. - Layer A: z-index 1 (fondo, siempre visible) - Layer B: z-index 2 (encima; en split mode se recorta con clip-path según el septum, que se setea vía --septum-x). */ .scan-layer { position: absolute; inset: 0; overflow: hidden; } .scan-layer.layer-a { z-index: 1; } .scan-layer.layer-b { z-index: 2; } /* SPLIT (comparison microscope tradicional): ambos scans renderizan su imagen completa en TODO el viewer, ambos centrados. Layer A se clipea a la mitad izquierda, layer B a la derecha, con el septum como frontera. Así el centro de A y el centro de B coinciden en el centro del viewer, permitiendo al perito alinear las striaciones que cruzan la frontera. */ .viewer-area.mode-split .scan-layer.layer-a { inset: 0; width: auto; clip-path: inset(0 calc(100% - var(--septum-x, 50%)) 0 0); } .viewer-area.mode-split .scan-layer.layer-b { inset: 0; width: auto; clip-path: inset(0 0 0 var(--septum-x, 50%)); } /* SIDE-BY-SIDE: A en cuadrante izquierdo, B en derecho (sin clip) */ .viewer-area.mode-sidebyside .scan-canvas { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .viewer-area.mode-sidebyside .scan-layer { position: relative; inset: auto; } .viewer-area.mode-sidebyside .scan-layer.layer-b { clip-path: none; } /* OVERLAY: ambos layers superpuestos con blend, sin clip */ .viewer-area.mode-overlay .scan-layer.layer-b { clip-path: none; opacity: 0.55; mix-blend-mode: screen; } /* ======================================================================== SEPTUM — línea + handle draggable + botón auto-centrar ======================================================================== */ .septum-line, .septum-handle, .septum-center-btn { display: none; } .viewer-area.mode-split .septum-line { display: block; position: absolute; top: 0; bottom: 0; left: var(--septum-x, 50%); width: 1px; background: rgba(255, 255, 255, 0.55); transform: translateX(-0.5px); pointer-events: none; z-index: 5; box-shadow: 0 0 4px rgba(0, 0, 0, 0.35); } /* Handle del septum: discreto, gris neutro, ubicado en la parte inferior para no obstruir la zona central donde está la evidencia forense. */ .viewer-area.mode-split .septum-handle { display: flex; align-items: center; justify-content: center; position: absolute; top: auto; bottom: 14px; left: var(--septum-x, 50%); width: 28px; height: 28px; border-radius: 50%; background: rgba(30, 30, 34, 0.78); color: rgba(255, 255, 255, 0.82); transform: translateX(-50%); cursor: ew-resize; z-index: 6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35); user-select: none; touch-action: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 11px; transition: background 120ms ease, transform 120ms ease; } .viewer-area.mode-split .septum-handle:hover { background: rgba(50, 50, 55, 0.92); transform: translateX(-50%) scale(1.08); } .viewer-area.mode-split .septum-handle:active { cursor: grabbing; } /* Botón "↔ 50/50" — arriba a la izquierda del swap, fuera del camino del septum-handle (centro vertical) y del load-strip (debajo del viewer). */ .viewer-area.mode-split .septum-center-btn { display: inline-flex; align-items: center; gap: 4px; position: absolute; top: 16px; left: 50%; transform: translateX(calc(-50% - 120px)); /* a la izquierda del swap-btn */ background: var(--chip-bg-solid); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line-bright); color: var(--ink); font-family: inherit; font-size: 11px; padding: 6px 14px; border-radius: 20px; cursor: pointer; z-index: 7; } .viewer-area.mode-split .septum-center-btn:hover { border-color: var(--accent); color: var(--accent); } /* ======================================================================== LABELS A / B (esquinas) ======================================================================== */ .scan-label { position: absolute; top: 16px; z-index: 7; padding: 6px 12px; background: var(--chip-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line-bright); border-radius: 6px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--ink); pointer-events: none; } .scan-label.label-a { left: 16px; } .scan-label.label-b { right: 16px; } .scan-label .dot-indicator { width: 8px; height: 8px; border-radius: 50%; } .viewer-area.mode-overlay .scan-label.label-b { display: none; } /* Swap button */ .swap-btn { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 7; background: var(--chip-bg-solid); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line-bright); border-radius: 20px; padding: 6px 14px; color: var(--ink); font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; } .swap-btn:hover { border-color: var(--accent); color: var(--accent); } .swap-btn svg { width: 12px; height: 12px; } .viewer-area.mode-overlay .swap-btn { display: none; } /* Swap button */ .swap-btn { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 7; background: var(--chip-bg-solid); backdrop-filter: blur(8px); border: 1px solid var(--line-bright); border-radius: 20px; padding: 6px 14px; color: var(--ink); font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; } .swap-btn:hover { border-color: var(--accent); color: var(--accent); } .swap-btn svg { width: 12px; height: 12px; } /* Info bar */ .viewer-info-bar { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 7; display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--chip-bg); backdrop-filter: blur(8px); border: 1px solid var(--line-bright); border-radius: 6px; font-size: 11px; color: var(--ink-dim); } /* El atributo HTML `hidden` es override-able por `display: flex`; forzamos el ocultamiento con specificity alta para que la barra no se cuele. */ .viewer-info-bar[hidden] { display: none !important; } .viewer-info-item { display: flex; gap: 6px; align-items: center; } .viewer-info-item .k { color: var(--ink-faint); font-size: 10px; } .viewer-info-item .v { color: var(--ink); font-weight: 500; font-size: 11px; } /* Ruler */ .ruler-wrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(92%, calc(100vh - 260px)); padding-top: 8px; display: flex; align-items: center; gap: 16px; font-size: 10px; color: var(--ink-dim); z-index: 1; } .ruler { flex: 1; position: relative; height: 14px; } .ruler-scale { width: 100%; height: 6px; border-bottom: 1px solid var(--ink-dim); position: relative; } .ruler-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-faint); } .ruler-tick.major { top: -3px; background: var(--ink-dim); } .ruler-label { position: absolute; top: -14px; transform: translateX(-50%); font-size: 9px; color: var(--ink-dim); font-family: 'JetBrains Mono', monospace; } /* BOTTOM CONTROLS */ .bottom-bar { background: var(--bg-deep); border-top: 1px solid var(--line); padding: 0 16px; display: flex; align-items: center; gap: 24px; font-size: 11px; } .bottom-item { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); } .bottom-item .v { color: var(--ink); font-weight: 500; font-family: 'JetBrains Mono', monospace; } .bottom-item .accent { color: var(--accent); } /* ============ RIGHT SIDEBAR ============ */ .sidebar-right { background: var(--bg-deep); border-left: 1px solid var(--line); overflow-y: auto; } .side-assign { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; background: var(--bg-raised); border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--line); } .side-assign button { padding: 6px 8px; background: transparent; border: none; color: var(--ink-dim); font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; border-radius: 5px; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; } .side-assign button.active { background: var(--bg-elevated); color: var(--ink); } .side-assign button .dot { width: 7px; height: 7px; border-radius: 50%; } .metadata-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 11px; align-items: center; } .metadata-row:last-child { border-bottom: none; } .metadata-row .key { color: var(--ink-dim); font-size: 10px; } .metadata-row .val { color: var(--ink); font-weight: 500; font-size: 11px; } .metadata-row .val.match { color: var(--success); display: flex; align-items: center; gap: 4px; } .metadata-row .val.warn { color: var(--warn); } .metadata-row .val.mono { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); } .annotation-item { padding: 10px 12px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.15s; position: relative; } .annotation-item::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--accent); border-radius: 0 2px 2px 0; } .annotation-item:hover { background: var(--bg-panel); } .annotation-item .anno-label { font-size: 11px; color: var(--ink); margin-bottom: 3px; font-weight: 600; } .annotation-item .anno-text { font-size: 10px; color: var(--ink-dim); line-height: 1.4; } .annotation-item .anno-coords { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-faint); margin-top: 4px; } .action-button { width: 100%; padding: 10px 14px; background: var(--bg-raised); border: 1px solid var(--line-bright); color: var(--ink); font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s; margin-bottom: 6px; text-align: left; display: flex; justify-content: space-between; align-items: center; border-radius: 8px; } .action-button:hover { background: var(--bg-panel); } .action-button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .action-button.primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); } .action-button .arrow { font-size: 13px; } /* STATUS BAR */ .statusbar { background: var(--bg-deep); border-top: 1px solid var(--line); padding: 0 18px; display: flex; align-items: center; gap: 18px; font-size: 10px; color: var(--ink-dim); } .status-item { display: flex; align-items: center; gap: 6px; } .status-dot { width: 6px; height: 6px; border-radius: 50%; } .status-dot.live { background: var(--success); box-shadow: 0 0 6px var(--success); } .status-dot.warn { background: var(--warn); } .statusbar .right-group { margin-left: auto; display: flex; gap: 18px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } /* ===================================================================== UPLOAD / NRBTD / TOASTS — added for X3P + NRBTD integration ===================================================================== */ .topbar-actions { display: flex; gap: 8px; margin-left: 14px; } .topbar-btn { background: var(--bg-elevated); border: 1px solid var(--line); color: var(--ink); font-family: inherit; font-size: 11px; font-weight: 500; padding: 6px 12px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s; } .topbar-btn:hover { background: var(--bg-panel); border-color: var(--ink-faint); } .topbar-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .topbar-btn.primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); } .topbar-btn-icon { font-size: 13px; line-height: 1; } /* ======================================================================== Canvas + img fill each layer completamente (object-fit maintiene la relación cuadrada del scan dentro del contenedor rectangular). ======================================================================== */ .scan-surface { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; object-fit: contain; /* no distorsiona scans cuadrados */ } /* Máscara radial con fade suave — el JPG demo trae fondo blanco rectangular alrededor del cartucho circular; el gradient lo desvanece hacia el viewer-bg sin recorte duro. No aplicamos al