/* Spec 027-UI — Matriz de Acessos (enterprise preview) */ #access-matrix-content { --am-surface: #fffdf9; --am-surface-2: #f8f4ee; --am-border: #ddd4c8; --am-ink: #2a2520; --am-muted: #6b6560; --am-accent: #5c2e2e; --am-accent-soft: #f3e8e8; --am-desk: #5c2e2e; --am-desk-bg: #f8eded; --am-vm112: #1a6b5c; --am-vm112-bg: #e8f5f1; --am-vm123: #2a5298; --am-vm123-bg: #eaf0fa; --am-infra: #9a6b1a; --am-infra-bg: #faf3e3; --am-agent: #5a3d8a; --am-agent-bg: #f2ebfa; --am-full: #1a6648; --am-full-bg: #dff0e8; --am-read: #a05a18; --am-read-bg: #faecd8; --am-link: #2563b8; --am-link-bg: #e3edfb; --am-api: #5b3a9e; --am-api-bg: #ede6fa; --am-sys: #0f766e; --am-sys-bg: #ddf5f2; --am-none: #9a9590; --am-none-bg: #f0ece6; font-family: 'DM Sans', system-ui, sans-serif; } #access-matrix-content .am-wrap { display: flex; flex-direction: column; gap: 1.25rem; } #access-matrix-content .am-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--am-border); } #access-matrix-content .am-header--toolbar { justify-content: flex-end; padding: 0; border-bottom: none; min-height: 0; } #access-matrix-content .am-page-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--am-ink); letter-spacing: -0.02em; } #access-matrix-content .am-page-sub { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--am-muted); } #access-matrix-content .am-preview-tag { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--am-accent); border: 1px solid #d4a8a8; padding: 0.35rem 0.65rem; border-radius: 4px; background: var(--am-accent-soft); white-space: nowrap; } #access-matrix-content .am-subnav { display: flex; gap: 0; border: 1px solid var(--am-border); border-radius: 8px; overflow: hidden; background: var(--am-surface-2); width: fit-content; max-width: 100%; flex-wrap: wrap; } #access-matrix-content .am-tab { border: none; border-right: 1px solid var(--am-border); background: transparent; padding: 0.55rem 1rem; font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; color: var(--am-muted); transition: background 0.15s, color 0.15s; } #access-matrix-content .am-tab:last-child { border-right: none; } #access-matrix-content .am-tab:hover { background: rgba(92, 46, 46, 0.04); color: var(--am-ink); } #access-matrix-content .am-tab.active { background: var(--am-accent-soft); color: var(--am-accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--am-accent); } #access-matrix-content .am-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; align-items: start; } #access-matrix-content .am-role-list { position: sticky; top: 0.5rem; max-height: calc(100vh - 200px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: auto; padding: 0.85rem; background: linear-gradient(180deg, #fffdf9 0%, #faf6f0 100%); border: 1px solid var(--am-border); border-radius: 8px; box-shadow: 0 1px 4px rgba(92, 46, 46, 0.04); } #access-matrix-content .am-role-group { margin-bottom: 1rem; } #access-matrix-content .am-role-group h4 { margin: 0 0 0.4rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--am-muted); font-weight: 600; } #access-matrix-content .am-role-code, .context-nav .am-role-code { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 2.15rem; height: 1.35rem; padding: 0 0.35rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em; color: var(--am-accent); background: var(--am-accent-soft); border-radius: 4px; line-height: 1; } #access-matrix-content .am-role-label, .context-nav .am-role-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; } #access-matrix-content .am-role-btn, .context-nav .am-role-btn { display: flex; align-items: center; gap: 0.45rem; min-width: 0; overflow: hidden; } #access-matrix-content .am-role-btn { display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; border: none; border-left: 2px solid transparent; background: transparent; border-radius: 0 4px 4px 0; padding: 0.45rem 0.5rem 0.45rem 0.55rem; font: inherit; font-size: 0.82rem; cursor: pointer; color: var(--am-ink); } #access-matrix-content .am-role-btn:hover { background: var(--am-surface-2); } #access-matrix-content .am-role-btn.active { background: #f3e8e8; border-left-color: var(--am-accent); font-weight: 600; color: var(--am-accent); } #access-matrix-content .am-panel { background: var(--am-surface); border: 1px solid var(--am-border); border-radius: 8px; overflow: hidden; } #access-matrix-content .am-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--am-border); background: linear-gradient(135deg, #faf6f0 0%, #f3ebe3 100%); } #access-matrix-content .am-panel-kicker { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--am-muted); font-weight: 600; margin-bottom: 0.2rem; } #access-matrix-content .am-panel-head h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--am-ink); } #access-matrix-content .am-panel-desc { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--am-muted); line-height: 1.45; } #access-matrix-content .am-tab-hint { margin: 0.45rem 0 0; font-size: 0.75rem; color: var(--am-accent); font-weight: 500; } #access-matrix-content .am-panel-body { padding: 1.15rem 1.25rem 1.25rem; } #access-matrix-content .am-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.85rem; font-size: 0.72rem; color: var(--am-muted); justify-content: flex-end; } #access-matrix-content .am-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; } #access-matrix-content .am-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: 0.2rem 0.45rem; border-radius: 3px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; font-family: ui-monospace, 'SF Mono', monospace; border: 1px solid transparent; } #access-matrix-content .am-badge--compact { min-width: auto; padding: 0.12rem 0.35rem; font-size: 0.6rem; } #access-matrix-content .am-badge--full { background: var(--am-full-bg); color: var(--am-full); border-color: #b8d4c4; } #access-matrix-content .am-badge--read { background: var(--am-read-bg); color: var(--am-read); border-color: #e0c9a8; } #access-matrix-content .am-badge--link { background: var(--am-link-bg); color: var(--am-link); border-color: #b8cce8; } #access-matrix-content .am-badge--api { background: var(--am-api-bg); color: var(--am-api); border-color: #c8b8e0; } #access-matrix-content .am-badge--system { background: var(--am-sys-bg); color: var(--am-sys); border-color: #a8d4d0; } #access-matrix-content .am-badge--none { background: var(--am-none-bg); color: var(--am-none); border-color: #ddd8d0; } #access-matrix-content .am-section-lead { margin: 0 0 1rem; font-size: 0.82rem; color: var(--am-muted); line-height: 1.5; } #access-matrix-content .am-block { margin-bottom: 1.5rem; } #access-matrix-content .am-block:last-child { margin-bottom: 0; } #access-matrix-content .am-block-title { margin: 0 0 0.65rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--am-accent); padding-left: 0.55rem; border-left: 3px solid var(--am-accent); } #access-matrix-content .am-empty { margin: 0; font-size: 0.82rem; color: var(--am-muted); font-style: italic; } #access-matrix-content .am-scope-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; margin-bottom: 1.25rem; } #access-matrix-content .am-scope-item { padding: 0.65rem 0.75rem; border: 1px solid var(--am-border); border-radius: 6px; border-left-width: 3px; } #access-matrix-content .am-scope-item:nth-child(1) { background: var(--am-desk-bg); border-left-color: var(--am-desk); } #access-matrix-content .am-scope-item:nth-child(2) { background: var(--am-vm112-bg); border-left-color: var(--am-vm112); } #access-matrix-content .am-scope-item:nth-child(3) { background: var(--am-vm123-bg); border-left-color: var(--am-vm123); } #access-matrix-content .am-scope-item:nth-child(4) { background: var(--am-infra-bg); border-left-color: var(--am-infra); } #access-matrix-content .am-scope-item:nth-child(1) .am-scope-host { color: var(--am-desk); } #access-matrix-content .am-scope-item:nth-child(2) .am-scope-host { color: var(--am-vm112); } #access-matrix-content .am-scope-item:nth-child(3) .am-scope-host { color: var(--am-vm123); } #access-matrix-content .am-scope-item:nth-child(4) .am-scope-host { color: var(--am-infra); } #access-matrix-content .am-scope-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--am-ink); } #access-matrix-content .am-scope-host { display: block; font-size: 0.68rem; font-family: ui-monospace, monospace; margin-top: 0.15rem; } #access-matrix-content .am-scope-desc { display: block; font-size: 0.68rem; color: var(--am-muted); margin-top: 0.2rem; } #access-matrix-content .am-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; margin-bottom: 1.25rem; } #access-matrix-content .am-stat { padding: 0.75rem; border: 1px solid var(--am-border); border-radius: 6px; text-align: center; background: var(--am-surface); border-top: 3px solid var(--am-border); } #access-matrix-content .am-stat:nth-child(1) { border-top-color: var(--am-desk); background: var(--am-desk-bg); } #access-matrix-content .am-stat:nth-child(2) { border-top-color: var(--am-vm112); background: var(--am-vm112-bg); } #access-matrix-content .am-stat:nth-child(3) { border-top-color: var(--am-vm123); background: var(--am-vm123-bg); } #access-matrix-content .am-stat:nth-child(4) { border-top-color: var(--am-agent); background: var(--am-agent-bg); } #access-matrix-content .am-stat:nth-child(1) .am-stat-n { color: var(--am-desk); } #access-matrix-content .am-stat:nth-child(2) .am-stat-n { color: var(--am-vm112); } #access-matrix-content .am-stat:nth-child(4) .am-stat-n { color: var(--am-agent); } #access-matrix-content .am-stat-n { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1; } #access-matrix-content .am-stat-l { display: block; font-size: 0.68rem; color: var(--am-muted); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; } #access-matrix-content .am-desk-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } #access-matrix-content .am-desk-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.55rem; border: 1px solid #dcc8c8; border-radius: 4px; font-size: 0.78rem; background: var(--am-desk-bg); color: var(--am-ink); } #access-matrix-content .am-sw-grid, #access-matrix-content .am-api-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.65rem; } #access-matrix-content .am-sw-card { border: 1px solid var(--am-border); border-radius: 6px; padding: 0.75rem 0.85rem; background: var(--am-surface); border-left: 3px solid var(--am-vm112); transition: box-shadow 0.15s; } #access-matrix-content .am-api-card { border: 1px solid var(--am-border); border-radius: 6px; padding: 0.75rem 0.85rem; background: var(--am-surface); border-left: 3px solid var(--am-vm123); transition: box-shadow 0.15s; } #access-matrix-content .am-api-card.am-svc-desk { border-left-color: var(--am-desk); background: linear-gradient(90deg, var(--am-desk-bg) 0%, var(--am-surface) 40%); } #access-matrix-content .am-api-card.am-svc-vm112 { border-left-color: var(--am-vm112); background: linear-gradient(90deg, var(--am-vm112-bg) 0%, var(--am-surface) 40%); } #access-matrix-content .am-api-card.am-svc-vm123_foss, #access-matrix-content .am-api-card.am-svc-vm123_odoo, #access-matrix-content .am-api-card.am-svc-vm123_openpanel { border-left-color: var(--am-vm123); background: linear-gradient(90deg, var(--am-vm123-bg) 0%, var(--am-surface) 40%); } #access-matrix-content .am-api-card.am-svc-infra { border-left-color: var(--am-infra); background: linear-gradient(90deg, var(--am-infra-bg) 0%, var(--am-surface) 40%); } #access-matrix-content .am-api-card.am-svc-vm104 { border-left-color: var(--am-agent); background: linear-gradient(90deg, var(--am-agent-bg) 0%, var(--am-surface) 40%); } #access-matrix-content .am-sw-card:hover, #access-matrix-content .am-api-card:hover { box-shadow: 0 2px 8px rgba(42, 37, 32, 0.06); } #access-matrix-content .am-sw-card-head, #access-matrix-content .am-api-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.35rem; } #access-matrix-content .am-sw-card-head strong { display: block; font-size: 0.85rem; color: var(--am-ink); } #access-matrix-content .am-sw-product { display: block; font-size: 0.68rem; color: var(--am-muted); margin-top: 0.1rem; } #access-matrix-content .am-sw-group { margin: 0; font-size: 0.72rem; color: var(--am-muted); } #access-matrix-content .am-sw-host { display: block; margin-top: 0.35rem; font-size: 0.68rem; color: var(--am-accent); } #access-matrix-content .am-api-service { font-size: 0.82rem; font-weight: 600; color: var(--am-ink); } #access-matrix-content .am-api-type { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--am-muted); margin-bottom: 0.35rem; } #access-matrix-content .am-api-value { display: block; font-size: 0.72rem; word-break: break-all; color: var(--am-ink); background: var(--am-surface-2); padding: 0.35rem 0.45rem; border-radius: 4px; border: 1px solid var(--am-border); } #access-matrix-content .am-api-foot { display: block; margin-top: 0.4rem; font-size: 0.65rem; font-family: ui-monospace, monospace; color: var(--am-muted); } #access-matrix-content .am-filter-bar { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1rem 0 0.85rem; } #access-matrix-content .am-filter { border: 1px solid var(--am-border); background: var(--am-surface); border-radius: 4px; padding: 0.35rem 0.7rem; font: inherit; font-size: 0.75rem; cursor: pointer; color: var(--am-muted); } #access-matrix-content .am-filter.active { background: var(--am-accent); border-color: var(--am-accent); color: #fff; font-weight: 600; } #access-matrix-content .am-sw-section { margin-bottom: 1.5rem; } #access-matrix-content .am-sw-section-head h4 { margin: 0; font-size: 0.9rem; font-weight: 600; } #access-matrix-content .am-sw-meta { font-size: 0.72rem; color: var(--am-muted); font-family: ui-monospace, monospace; } #access-matrix-content .am-table-wrap { overflow: auto; max-height: calc(100vh - 320px); border: 1px solid var(--am-border); border-radius: 6px; margin-top: 0.5rem; } #access-matrix-content .am-matrix-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; } #access-matrix-content .am-matrix-table th, #access-matrix-content .am-matrix-table td { border-bottom: 1px solid var(--am-border); padding: 0.45rem 0.4rem; text-align: center; vertical-align: middle; } #access-matrix-content .am-matrix-table th { background: var(--am-surface-2); font-weight: 600; font-size: 0.68rem; white-space: nowrap; color: var(--am-muted); text-transform: uppercase; letter-spacing: 0.04em; } #access-matrix-content .am-matrix-table th.am-col-active { background: var(--am-accent-soft); color: var(--am-accent); } #access-matrix-content .am-matrix-table td.am-row-highlight { background: rgba(92, 46, 46, 0.08); } #access-matrix-content .am-matrix-table th.am-sticky, #access-matrix-content .am-matrix-table td.am-sticky { position: sticky; left: 0; z-index: 1; background: var(--am-surface); text-align: left; min-width: 180px; } #access-matrix-content .am-matrix-table th.am-sticky { z-index: 2; background: var(--am-surface-2); } #access-matrix-content .am-row-title { display: block; font-weight: 500; color: var(--am-ink); font-size: 0.8rem; } #access-matrix-content .am-row-code, #access-matrix-content .am-row-sub { display: block; font-size: 0.65rem; color: var(--am-muted); margin-top: 0.15rem; } #access-matrix-content .am-row-code { font-family: ui-monospace, monospace; } #access-matrix-content .am-agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.65rem; } #access-matrix-content .am-agent-card { padding: 0.85rem 1rem; border: 1px solid var(--am-border); border-radius: 6px; background: var(--am-surface); border-top: 3px solid #c8b8e0; } #access-matrix-content .am-agent-card--hit { border-color: var(--am-agent); border-top-color: var(--am-agent); background: var(--am-agent-bg); } #access-matrix-content .am-agent-top { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; } #access-matrix-content .am-agent-id { font-size: 0.68rem; font-weight: 700; font-family: ui-monospace, monospace; color: var(--am-agent); } #access-matrix-content .am-agent-top strong { font-size: 0.88rem; } #access-matrix-content .am-agent-role { margin: 0; font-size: 0.8rem; color: var(--am-muted); line-height: 1.4; } #access-matrix-content .am-agent-approval { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid var(--am-border); } #access-matrix-content .am-agent-approval span { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--am-muted); margin-bottom: 0.2rem; } #access-matrix-content .am-agent-approval code { font-size: 0.72rem; color: var(--am-ink); } #access-matrix-content .am-agent-codename { display: block; font-size: 0.65rem; color: var(--am-muted); font-family: ui-monospace, monospace; } #access-matrix-content .am-agent-section { margin-top: 0.55rem; } #access-matrix-content .am-agent-lbl { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--am-muted); margin-bottom: 0.25rem; } #access-matrix-content .am-agent-meta { font-size: 0.72rem; color: var(--am-muted); line-height: 1.4; } #access-matrix-content .am-role-chip { display: inline-block; font-size: 0.68rem; padding: 0.15rem 0.4rem; margin: 0 0.2rem 0.2rem 0; border-radius: 3px; border: 1px solid var(--am-border); background: var(--am-surface-2); color: var(--am-ink); } #access-matrix-content .am-role-chip--sel { background: var(--am-accent-soft); border-color: var(--am-accent); color: var(--am-accent); font-weight: 600; } #access-matrix-content .am-rel { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.12rem 0.35rem; border-radius: 3px; margin: 0.1rem; text-transform: uppercase; } #access-matrix-content .am-rel--approve { background: #fce8e8; color: #8b2e2e; border: 1px solid #e8b8b8; } #access-matrix-content .am-rel--focus { background: var(--am-vm123-bg); color: var(--am-vm123); border: 1px solid #b8cce8; } #access-matrix-content .am-rel--ui { background: var(--am-vm112-bg); color: var(--am-vm112); border: 1px solid #a8d4c8; } #access-matrix-content .am-rel--none { background: var(--am-none-bg); color: var(--am-none); border: 1px solid var(--am-border); } #access-matrix-content .am-rel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; margin: 0.45rem 0; } #access-matrix-content .am-rel-row--you .am-you { font-size: 0.62rem; color: var(--am-accent); font-weight: 600; margin-left: 0.25rem; } #access-matrix-content .am-cap-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; } #access-matrix-content .am-cap-chip { font-size: 0.72rem; padding: 0.3rem 0.55rem; border-radius: 4px; background: var(--am-agent-bg); border: 1px solid #c8b8e0; color: var(--am-agent); } #access-matrix-content .am-agent-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.65rem; font-size: 0.72rem; color: var(--am-muted); } #access-matrix-content .am-agent-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; } #access-matrix-content .am-agent-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; } #access-matrix-content .am-agent-mini { padding: 0.55rem 0.65rem; border: 1px solid var(--am-border); border-radius: 6px; background: var(--am-surface); border-left: 3px solid #c8b8e0; } #access-matrix-content .am-agent-mini--approve { border-left-color: var(--am-accent); background: #faf6f6; } #access-matrix-content .am-agent-mini header { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.2rem; } #access-matrix-content .am-agent-mini strong { font-size: 0.82rem; } #access-matrix-content .am-cell-toggles { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; padding: 0.35rem 0.25rem !important; } #access-matrix-content .am-toggle { display: block; width: 2.1rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.18rem 0; border-radius: 3px; border: 1px solid var(--am-border); background: var(--am-none-bg); color: var(--am-muted); cursor: pointer; font-family: ui-monospace, monospace; } #access-matrix-content .am-toggle.on { background: var(--am-vm112-bg); border-color: var(--am-vm112); color: var(--am-vm112); } #access-matrix-content .am-toggle.approve.on { background: #fce8e8; border-color: var(--am-accent); color: var(--am-accent); } #access-matrix-content .am-toggle.locked { opacity: 0.55; cursor: not-allowed; } #access-matrix-content .am-cap-toggles { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.65rem; } #access-matrix-content .am-cap-toggle { font-size: 0.72rem; padding: 0.35rem 0.6rem; border-radius: 4px; border: 1px solid var(--am-border); background: var(--am-surface); color: var(--am-muted); cursor: pointer; font: inherit; } #access-matrix-content .am-cap-toggle.on { background: var(--am-agent-bg); border-color: var(--am-agent); color: var(--am-agent); font-weight: 600; } #access-matrix-content .am-cap-toggle.locked { opacity: 0.55; cursor: not-allowed; } #access-matrix-content .am-save-error { margin: 0 0 0.75rem; padding: 0.5rem 0.65rem; border-radius: 4px; background: #fce8e8; border: 1px solid #e8b8b8; color: #8b2e2e; font-size: 0.8rem; } @media (max-width: 1100px) { #access-matrix-content .am-scope-bar, #access-matrix-content .am-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 960px) { #access-matrix-content .am-layout { grid-template-columns: 1fr; } #access-matrix-content .am-role-list { position: static; max-height: none; } #access-matrix-content .am-subnav { width: 100%; } #access-matrix-content .am-tab { flex: 1 1 auto; text-align: center; font-size: 0.72rem; padding: 0.5rem 0.4rem; } } @media (max-width: 560px) { #access-matrix-content .am-scope-bar, #access-matrix-content .am-stats { grid-template-columns: 1fr; } } /* Aba Controle de acesso — separada após Agentes IA */ #access-matrix-content .am-tab-sep { width: 1px; align-self: stretch; background: var(--am-border); margin: 0 0.35rem; } #access-matrix-content .am-tab--access-control { font-weight: 600; border-left: 3px solid var(--am-accent); } #access-matrix-content .am-tab--access-control.active { background: #e8f0fa; color: #2b6cb0; box-shadow: inset 0 -2px 0 #2b6cb0; } #access-matrix-content .am-panel--access-control { border: none; box-shadow: none; background: transparent; padding: 0; overflow: visible; } #access-matrix-content .am-role-code { margin-right: 0; } #access-matrix-content .am-role-btn { gap: 0.45rem; } /* Spec 039 — Quem faz o quê (mockup Roger) */ #access-matrix-content .am-panel--executive { border: none; box-shadow: none; background: transparent; padding: 0; overflow: visible; } #access-matrix-content .am-executive-map-host { overflow: visible; contain: layout style; } body.qfx-scroll-lock { overflow: hidden; overscroll-behavior: none; } #access-matrix-content .qfx-layout { position: relative; min-height: 420px; overflow: visible; } #access-matrix-content .qfx-layout--panel { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 36%); gap: 1rem; align-items: start; } @media (max-width: 1100px) { #access-matrix-content .qfx-layout--panel { grid-template-columns: 1fr; } #access-matrix-content .qfx-side-panel { order: 2; } } #access-matrix-content .qfx-main { min-width: 0; } #access-matrix-content .qfx-side-panel { align-self: start; min-width: 0; } #access-matrix-content .qfx-side-card { display: flex; flex-direction: column; max-height: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); overflow: hidden; } #access-matrix-content .qfx-side-card .qfx-modal-body { flex: 1; overflow: visible; overscroll-behavior: contain; } #access-matrix-content .qfx-level-badge { display: inline-block; padding: 0.35rem 0.75rem; border-radius: 8px; font-size: 0.82rem; font-weight: 600; border: 1px solid transparent; } #access-matrix-content .qfx-readonly-field { margin: 0; padding: 0.45rem 0.65rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; font-size: 0.84rem; color: #374151; } #access-matrix-content .qfx-readonly-hint { font-size: 0.82rem; } #access-matrix-content .qfx-btn-edit--full { width: 100%; justify-content: center; } #access-matrix-content .qfx-hint { margin: 0 0 0.5rem; font-size: 0.75rem; color: #9ca3af; } #access-matrix-content .qfx-edit-subtitle { margin: 0.35rem 0 0; font-size: 0.82rem; color: #6b7280; font-weight: 400; } #access-matrix-content .qfx-edit-modal-root { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } #access-matrix-content .qfx-edit-modal-root .qfx-backdrop { z-index: 1399; } #access-matrix-content .qfx-modal-card--edit { z-index: 1401; } #access-matrix-content .qfx-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } #access-matrix-content .qfx-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #2d3748; } #access-matrix-content .qfx-subtitle { margin: 0.25rem 0 0; font-size: 0.82rem; color: #718096; } #access-matrix-content .qfx-badge-edit, #access-matrix-content .qfx-badge-read { font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; } #access-matrix-content .qfx-badge-edit { background: #f0fff4; color: #276749; border: 1px solid #9ae6b4; } #access-matrix-content .qfx-badge-read { background: #edf2f7; color: #4a5568; } #access-matrix-content .qfx-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 1rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; } #access-matrix-content .qfx-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: #718096; } #access-matrix-content .qfx-field--search { flex: 1; min-width: 200px; } #access-matrix-content .qfx-select, #access-matrix-content .qfx-search { padding: 0.45rem 0.65rem; border: 1px solid #cbd5e0; border-radius: 8px; font-size: 0.85rem; background: #fff; } #access-matrix-content .qfx-select--full { width: 100%; } #access-matrix-content .qfx-btn-ghost { padding: 0.45rem 0.85rem; border: 1px solid #cbd5e0; border-radius: 8px; background: #fff; font-size: 0.82rem; cursor: pointer; color: #4a5568; } #access-matrix-content .qfx-layout--modal .qfx-main { filter: none; } #access-matrix-content .qfx-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; } @media (max-width: 1100px) { #access-matrix-content .qfx-kpi-grid { grid-template-columns: 1fr; } } #access-matrix-content .qfx-kpi { position: relative; padding: 1.15rem 1.25rem; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); min-height: 118px; } #access-matrix-content .qfx-kpi-body { padding-right: 3.25rem; } #access-matrix-content .qfx-kpi-icon-ring { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; } #access-matrix-content .qfx-kpi--action .qfx-kpi-icon-ring { background: #dcfce7; color: #16a34a; } #access-matrix-content .qfx-kpi--who .qfx-kpi-icon-ring { background: #dbeafe; color: #2563eb; } #access-matrix-content .qfx-kpi--why .qfx-kpi-icon-ring { background: #ede9fe; color: #7c3aed; } #access-matrix-content .qfx-kpi-label { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; color: #374151; } #access-matrix-content .qfx-kpi-subtitle { margin: 0.2rem 0 0.85rem; font-size: 0.78rem; color: #9ca3af; line-height: 1.35; } #access-matrix-content .qfx-kpi-val { display: block; font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } #access-matrix-content .qfx-kpi--action .qfx-kpi-val { color: #16a34a; } #access-matrix-content .qfx-kpi--who .qfx-kpi-val { color: #2563eb; } #access-matrix-content .qfx-kpi--why .qfx-kpi-val { color: #7c3aed; } #access-matrix-content .qfx-kpi-foot { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: #9ca3af; } #access-matrix-content .qfx-table-block { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; } #access-matrix-content .qfx-table-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid #e2e8f0; background: #f7fafc; } #access-matrix-content .qfx-table-head h4 { margin: 0; font-size: 0.95rem; } #access-matrix-content .qfx-table-count { font-size: 0.78rem; color: #718096; } #access-matrix-content .qfx-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: auto; scrollbar-gutter: stable; } #access-matrix-content .qfx-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } #access-matrix-content .qfx-table th { text-align: left; padding: 0.65rem 0.85rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: #718096; background: #fafafa; border-bottom: 1px solid #e2e8f0; } #access-matrix-content .qfx-table td { padding: 0.75rem 0.85rem; border-bottom: 1px solid #edf2f7; vertical-align: middle; } #access-matrix-content .qfx-row { cursor: pointer; transition: background 0.12s; } #access-matrix-content .qfx-row:hover { background: #f7fafc; } #access-matrix-content .qfx-row--open { background: #ebf8ff; } #access-matrix-content .qfx-row--custom { box-shadow: inset 3px 0 0 #d69e2e; } #access-matrix-content .qfx-action-title { display: block; font-size: 0.88rem; color: #2d3748; margin-bottom: 0.2rem; } #access-matrix-content .qfx-action-id { font-size: 0.68rem; color: #a0aec0; font-family: ui-monospace, monospace; } #access-matrix-content .qfx-col-who { max-width: 260px; } #access-matrix-content .qfx-split-tag { display: inline-flex; align-items: stretch; margin: 0.12rem 0.2rem 0.12rem 0; padding: 0; border: 1px solid #e5e7eb; border-radius: 999px; overflow: hidden; background: #fff; font: inherit; vertical-align: middle; cursor: default; } #access-matrix-content button.qfx-split-tag { cursor: pointer; } #access-matrix-content button.qfx-split-tag:hover { border-color: #cbd5e1; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } #access-matrix-content .qfx-split-tag.off { opacity: 0.42; } #access-matrix-content .qfx-split-tag__code { display: inline-flex; align-items: center; padding: 0.18rem 0.42rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; color: var(--tag-fg, #475569); background: var(--tag-bg, #f1f5f9); } #access-matrix-content .qfx-split-tag__name { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem 0.18rem 0.35rem; font-size: 0.68rem; font-weight: 500; color: #374151; background: #fff; white-space: nowrap; } #access-matrix-content .qfx-split-tag--compact .qfx-split-tag__code { padding: 0.12rem 0.35rem; font-size: 0.62rem; } #access-matrix-content .qfx-split-tag--compact .qfx-split-tag__name { display: none; } #access-matrix-content .qfx-split-tag-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; } #access-matrix-content .qfx-col-why { color: #4a5568; max-width: 220px; line-height: 1.35; } #access-matrix-content .qfx-level-select { min-width: 7.5rem; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid #cbd5e0; font-size: 0.78rem; font-weight: 600; } #access-matrix-content .qfx-level--full { background: #f0fff4; color: #276749; border-color: #9ae6b4; } #access-matrix-content .qfx-level--read { background: #ebf8ff; color: #2b6cb0; border-color: #90cdf4; } #access-matrix-content .qfx-level--none { background: #fff5f5; color: #c53030; border-color: #feb2b2; } #access-matrix-content .qfx-icon-btn { border: none; background: transparent; cursor: pointer; padding: 0.25rem 0.35rem; font-size: 1rem; opacity: 0.65; } #access-matrix-content .qfx-icon-btn:hover { opacity: 1; } #access-matrix-content .qfx-muted { color: #cbd5e0; } #access-matrix-content .qfx-empty { text-align: center; color: #718096; padding: 2rem !important; } #access-matrix-content .qfx-modal-root { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } #access-matrix-content .qfx-backdrop { position: fixed; inset: 0; z-index: 1299; background: rgba(15, 23, 42, 0.42); } #access-matrix-content .qfx-modal-card { position: relative; z-index: 1301; width: min(440px, 100%); max-height: min(90vh, 720px); display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18); overflow: hidden; } #access-matrix-content .qfx-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.25rem 1.35rem 0.85rem; } #access-matrix-content .qfx-modal-head-text h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 700; color: #111827; } #access-matrix-content .qfx-tag-pill { display: inline-block; margin-top: 0.55rem; padding: 0.22rem 0.65rem; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 0.72rem; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } #access-matrix-content .qfx-modal-close { border: none; background: transparent; width: 2rem; height: 2rem; border-radius: 8px; font-size: 1.35rem; line-height: 1; cursor: pointer; color: #6b7280; } #access-matrix-content .qfx-modal-close:hover { background: #f3f4f6; color: #111827; } #access-matrix-content .qfx-modal-body { flex: 1; overflow-y: auto; padding: 0 1.35rem 1rem; } #access-matrix-content .qfx-modal-block { margin-bottom: 1.1rem; } #access-matrix-content .qfx-modal-block h4 { margin: 0 0 0.4rem; font-size: 0.88rem; font-weight: 700; color: #111827; } #access-matrix-content .qfx-modal-block p { margin: 0; font-size: 0.84rem; line-height: 1.45; color: #6b7280; } #access-matrix-content .qfx-finalidade-main { color: #374151 !important; font-weight: 500; } #access-matrix-content .qfx-finalidade-sub { margin-top: 0.25rem !important; font-size: 0.78rem !important; color: #9ca3af !important; } #access-matrix-content .qfx-level-field { margin-top: 0.15rem; } #access-matrix-content .qfx-level-select--modal { width: 100%; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; } #access-matrix-content .qfx-select--modal { width: 100%; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; } #access-matrix-content .qfx-modal-foot { display: flex; justify-content: flex-end; gap: 0.65rem; padding: 1rem 1.35rem 1.15rem; border-top: 1px solid #e5e7eb; } #access-matrix-content .qfx-btn-cancel { padding: 0.55rem 1rem; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; font-size: 0.85rem; font-weight: 600; cursor: pointer; } #access-matrix-content .qfx-btn-cancel:hover { background: #f9fafb; } #access-matrix-content .qfx-btn-edit { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border: none; border-radius: 8px; background: #4a152c; color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; } #access-matrix-content .qfx-btn-edit:hover:not(:disabled) { background: #3d1124; } #access-matrix-content .qfx-btn-edit:disabled { opacity: 0.5; cursor: not-allowed; } #access-matrix-content .qfx-error { color: #c53030; font-size: 0.82rem; margin: 0.5rem 0; } #access-matrix-content .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Modal editar permissão — portal no body (z-index acima de tudo) */ #qfx-edit-modal-portal .qfx-edit-modal-root { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 1.25rem; overscroll-behavior: none; } #qfx-edit-modal-portal .qfx-backdrop { position: fixed; inset: 0; z-index: 1499; background: rgba(15, 23, 42, 0.42); } #qfx-edit-modal-portal .qfx-modal-card { position: relative; z-index: 1501; width: min(440px, 100%); max-height: min(90vh, 720px); display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18); overflow: hidden; } #qfx-edit-modal-portal .qfx-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.25rem 1.35rem 0.85rem; } #qfx-edit-modal-portal .qfx-modal-head-text h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 700; color: #111827; } #qfx-edit-modal-portal .qfx-tag-pill { display: inline-block; margin-top: 0.55rem; padding: 0.22rem 0.65rem; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 0.72rem; font-weight: 600; font-family: ui-monospace, Menlo, monospace; } #qfx-edit-modal-portal .qfx-edit-subtitle { margin: 0.35rem 0 0; font-size: 0.82rem; color: #6b7280; } #qfx-edit-modal-portal .qfx-modal-close { border: none; background: transparent; width: 2rem; height: 2rem; border-radius: 8px; font-size: 1.35rem; cursor: pointer; color: #6b7280; } #qfx-edit-modal-portal .qfx-modal-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.35rem 1rem; } #qfx-edit-modal-portal .qfx-modal-block { margin-bottom: 1.1rem; } #qfx-edit-modal-portal .qfx-modal-block h4 { margin: 0 0 0.4rem; font-size: 0.88rem; font-weight: 700; color: #111827; } #qfx-edit-modal-portal .qfx-hint { margin: 0 0 0.5rem; font-size: 0.75rem; color: #9ca3af; } #qfx-edit-modal-portal .qfx-split-tag-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; } #qfx-edit-modal-portal .qfx-split-tag { display: inline-flex; align-items: stretch; border: 1px solid #e5e7eb; border-radius: 999px; overflow: hidden; background: #fff; font: inherit; cursor: pointer; } #qfx-edit-modal-portal .qfx-split-tag.off { opacity: 0.42; } #qfx-edit-modal-portal .qfx-split-tag__code { display: inline-flex; align-items: center; padding: 0.18rem 0.42rem; font-size: 0.68rem; font-weight: 700; color: var(--tag-fg, #475569); background: var(--tag-bg, #f1f5f9); } #qfx-edit-modal-portal .qfx-split-tag__name { display: inline-flex; align-items: center; padding: 0.18rem 0.55rem 0.18rem 0.35rem; font-size: 0.68rem; color: #374151; background: #fff; white-space: nowrap; } #qfx-edit-modal-portal .qfx-level-select { width: 100%; padding: 0.45rem 0.65rem; border-radius: 8px; border: 1px solid #cbd5e0; font-size: 0.85rem; font-weight: 600; } #qfx-edit-modal-portal .qfx-level-select--modal { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; } #qfx-edit-modal-portal .qfx-level--full { background: #f0fff4; color: #276749; border-color: #9ae6b4; } #qfx-edit-modal-portal .qfx-level--read { background: #ebf8ff; color: #2b6cb0; border-color: #90cdf4; } #qfx-edit-modal-portal .qfx-level--none { background: #fff5f5; color: #c53030; border-color: #feb2b2; } #qfx-edit-modal-portal .qfx-select { width: 100%; padding: 0.45rem 0.65rem; border: 1px solid #cbd5e0; border-radius: 8px; font-size: 0.85rem; background: #fff; } #qfx-edit-modal-portal .qfx-modal-foot { display: flex; justify-content: flex-end; gap: 0.65rem; padding: 1rem 1.35rem 1.15rem; border-top: 1px solid #e5e7eb; } #qfx-edit-modal-portal .qfx-btn-cancel { padding: 0.55rem 1rem; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; font-size: 0.85rem; font-weight: 600; cursor: pointer; } #qfx-edit-modal-portal .qfx-btn-edit { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border: none; border-radius: 8px; background: #4a152c; color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; } #qfx-edit-modal-portal .qfx-btn-edit:disabled { opacity: 0.5; cursor: not-allowed; } #qfx-edit-modal-portal .qfx-error { color: #c53030; font-size: 0.82rem; margin: 0.5rem 0; } .acs-partial { font-style: normal; font-size: 0.75rem; color: #b7791f; } .acs-goto-exec { color: var(--am-accent, #2b6cb0); }