/* El Rincón del SuperManager — shared chrome for visualization pages. Provides the sticky top bar, the viz-main centering wrapper, and the mobile scaler that shrinks #captureArea to fit narrow viewports. Expects: #captureArea with a fixed natural width (1024px by default; override via ). */ .site-top-bar { background: #fff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 900; font-family: 'Inter', sans-serif; align-self: stretch; /* span full width when body is a flex column */ } .site-top-bar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #2d3748; font-weight: 700; font-size: 15px; min-width: 0; } .site-top-bar-brand img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .site-top-bar-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-top-bar-nav { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .site-top-bar-nav a { text-decoration: none; color: #2c5282; font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 6px; transition: background 0.15s; } .site-top-bar-nav a:hover { background: #edf2f7; } .site-top-bar-nav a.primary { background: #2c5282; color: #fff; } .site-top-bar-nav a.primary:hover { background: #2a4365; } .site-top-bar-capture { background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s; } .site-top-bar-capture:hover { background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%); } .site-top-bar-capture.processing { background: #718096; cursor: not-allowed; pointer-events: none; } .viz-main { display: flex; align-items: center; justify-content: center; padding: 20px; min-height: calc(100vh - 60px); } .viz-scaler { margin: 0 auto; } .capture-label-short { display: none; } @media (max-width: 1060px) { body { overflow-x: hidden; } .viz-main { display: block; padding: 10px 0; min-height: auto; } } @media (max-width: 640px) { .site-top-bar { padding: 10px 14px; } .site-top-bar-brand span { display: none; } .site-top-bar-nav a.primary { display: none; } .capture-label-full { display: none; } .capture-label-short { display: inline; } }