:root { --bg: #f5f6f8; --panel: #ffffff; --panel-2: #f9fafb; --ink: #202030; --muted: #667085; --muted-2: #98a2b3; --line: #e4e7ec; --line-strong: #d0d5dd; --brand: #1f6feb; --brand-2: #0b4fba; --accent: #148eff; --focus: #4d65ff; --dark: #202030; --dark-2: #171727; --changed: #c2410c; --success: #0f766e; --shadow: 0 20px 50px rgba(16, 24, 40, 0.10); --radius: 8px; --sidebar: 300px; --sidebar-collapsed: 72px; --panel-width: 380px; --row-label-width: 180px; --column-width: 260px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, select, textarea { font: inherit; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable="true"]:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; } /* Largura corrente do menu. Fonte única, trocada só por classe no . IMPORTANTE: nada de largura inline via JS aqui. Estilo inline vence media query, e era exatamente isso que impedia o recolhimento automático abaixo de 1100px de funcionar — a sidebar ficava com 300px vazios em vez de virar rail. */ :root { --sidebar-w: var(--sidebar); } /* Rail: recolhimento manual (tela larga) ou automático (tela estreita). */ body.sidebar-collapsed, /* Em tela estreita a coluna fica sempre no rail, mesmo com o overlay aberto — o overlay flutua por cima e não deve reflow-ar o mapa. */ body.sidebar-narrow { --sidebar-w: var(--sidebar-collapsed); } .app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-width); height: 100vh; overflow: hidden; } /* Colunas fixas por elemento. Sem isto, quando a sidebar vira position:fixed (overlay) ela sai do fluxo e o mapa escorrega para a coluna do rail, ficando com 72px de largura. */ .app-shell > .sidebar { grid-column: 1; } .app-shell > .workspace { grid-column: 2; } .app-shell > .detail-panel { grid-column: 3; } body.detail-closed .app-shell, .app-shell.detail-closed { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 0px; } .sidebar { border-right: 1px solid var(--line); background: #ffffff; color: #111; padding: 16px 14px; display: flex; flex-direction: column; gap: 0; width: var(--sidebar-w); min-width: var(--sidebar-w); max-width: var(--sidebar-w); overflow: hidden; position: relative; } body.sidebar-collapsed .sidebar, .app-shell.sidebar-collapsed .sidebar { padding: 16px 10px; align-items: center; } /* Overlay: em tela estreita, o › abre o menu por cima do conteúdo em vez de empurrá-lo — a 768px empurrar deixaria o mapa matricial inutilizável. */ /* z-index: precisa ficar ACIMA da .topbar (40, elevada por causa do backdrop-filter) e abaixo de modal (80) e drawer (90). */ body.sidebar-overlay .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar); min-width: var(--sidebar); max-width: var(--sidebar); z-index: 50; box-shadow: var(--shadow); } .sidebar-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(17, 17, 17, 0.28); } .sidebar-backdrop[hidden] { display: none; } /* Cabeçalho: nome do Workspace (rótulo estático, sem clique) + toggle recolher. A borda inferior é o divisor entre cabeçalho e lista de personas. */ .sidebar-header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .workspace-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: #111; } .sidebar-toggle, .sidebar-expand { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #666; width: 28px; height: 28px; cursor: pointer; display: grid; place-items: center; font-size: 16px; line-height: 1; } .sidebar-toggle:hover, .sidebar-expand:hover { background: #f5f5f7; } .sidebar-expand { margin-top: auto; width: 36px; height: 36px; font-size: 20px; } body:not(.sidebar-collapsed) .sidebar-expand { display: none; } /* Marca no pé do menu. O `margin-top: auto` é o mesmo empurrão que o .sidebar-expand usa, e os dois NUNCA coexistem: o › só existe no rail (regra acima) e a marca é escondida no rail (regra do bloco seguinte). Nenhum estado tem os dois disputando o canto. Divisor igual ao do .sidebar-header, porque com lista longa a .persona-browser encosta aqui e sem a linha os dois se colam. */ .sidebar-brand { margin-top: auto; flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); } /* Uma linha cada, com reticências — mesma trava do .workspace-name. Garante que o slogan não quebre em três linhas nem estoure os 300px. */ .sidebar-brand-name, .sidebar-brand-tagline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-brand-name { font-size: 12px; font-weight: 600; color: var(--brand); } .sidebar-brand-tagline { font-size: 11px; color: var(--muted-2); } body.sidebar-collapsed .sidebar-header, .app-shell.sidebar-collapsed .sidebar-header { justify-content: center; border-bottom: 0; padding-bottom: 0; } /* No rail escondemos só o que não cabe em 72px. A .persona-browser CONTINUA visível: some apenas o rótulo/busca, os nomes e os dependentes, sobrando a coluna de avatares — que segue clicável e navega para a Persona. (Esconder a .persona-browser inteira aqui era o bug da sidebar vazia.) */ body.sidebar-collapsed .workspace-name, body.sidebar-collapsed .sidebar-toggle, body.sidebar-collapsed .sidebar-brand, body.sidebar-collapsed .persona-browser-head, body.sidebar-collapsed .persona-children, body.sidebar-collapsed .persona-row-name, body.sidebar-collapsed .persona-chevron { display: none; } body.sidebar-collapsed .persona-browser { padding-top: 10px; gap: 0; } body.sidebar-collapsed .persona-nav { gap: 4px; padding-right: 0; justify-items: center; } body.sidebar-collapsed .persona-row { justify-content: center; gap: 0; padding: 7px 0; } /* Seção Personas: cabeçalho (label + busca) fixo; a lista rola sozinha. */ .persona-browser { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: 14px; overflow: hidden; } .persona-browser-head { display: grid; gap: 10px; } .persona-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #a0a0a0; font-weight: 700; } .persona-search input { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #111; padding: 0 10px; font-size: 12.5px; } .persona-search input::placeholder { color: #a0a0a0; } .persona-search input:focus { outline: none; border-color: var(--line-strong); } /* Lista de personas: rolagem independente — não trava cabeçalho/busca. */ .persona-nav { min-height: 0; flex: 1; overflow-y: auto; display: grid; /* Prende os itens à largura do menu para o nome truncar com reticências em vez de estourar a sidebar e empurrar o chevron para fora. */ grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; padding-right: 2px; } .persona-block { border-radius: 8px; min-width: 0; } .persona-block.is-active { background: #f7f7fa; } .persona-row { width: 100%; border: 0; background: transparent; color: #111; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; text-align: left; } .persona-row:hover { background: #f5f5f7; } .persona-block.is-active .persona-row:hover { background: transparent; } .persona-avatar-mini { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: #eeedfe; color: #3c3489; font-size: 11px; font-weight: 700; } .persona-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: #111; } .persona-chevron { flex: 0 0 auto; color: #8a8a8a; font-size: 14px; line-height: 1; transform: rotate(0deg); transition: transform 0.15s ease; } .persona-block.is-expanded .persona-chevron { transform: rotate(90deg); } /* Aninhados: recuo alinhado ao texto do nome da persona (avatar 23 + gap 10). */ .persona-children { display: grid; /* Mesma proteção para títulos longos de dependentes (Jornada/Blueprint). */ grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 2px 0 6px 33px; } .persona-child { width: 100%; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-align: left; } .persona-child:hover { background: #f5f5f7; } .persona-child.is-active { background: #f7f7fa; } .persona-child-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 400; color: #444; } .persona-child-count { flex: 0 0 auto; color: #8a8a8a; font-size: 12px; font-weight: 500; } .persona-children-empty, .persona-nav-empty { padding: 6px 8px; color: #a0a0a0; font-size: 12px; line-height: 1.4; } .workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; } .topbar { /* position + z-index elevam a barra (e o menu "+" que vive nela) acima do mapa. Sem isso, o backdrop-filter abaixo cria um contexto de empilhamento que prende o menu, e o mapa passa a interceptar os cliques. Fica abaixo de drawer (90) e modal (80). Ver docs/18-backlog-bugs.md. */ position: relative; z-index: 40; min-height: 92px; padding: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); } .eyebrow { margin: 0 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; } /* Truncamento do cabecalho: nome longo vira reticencias em vez de quebrar linha e engordar o topbar. min-width:0 no item flex esquerdo permite que ele encolha abaixo do conteudo (sem isso o flex nao trunca). Escopado em .topbar para nao afetar outros .eyebrow (painel, modais). */ .topbar > div:first-child { min-width: 0; } .topbar .eyebrow, .topbar #artifactTitle { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Breadcrumb no eyebrow: flex de segmentos. Sobrepoe o ellipsis-no-eyebrow do PR #50 (que cortaria o FIM) — aqui o corte e por segmento, preservando o ULTIMO (o tipo do artefato) e truncando os anteriores. O eyebrow deixou de ser rotulo e virou caminho de navegacao: caixa mista (text-transform:none) para ler nomes proprios; letter-spacing normal (o 0.08em existia para caixa alta) e 12px para nao ficar apagado ao lado do H1. Escopado em .topbar — os demais .eyebrow (painel, modais) seguem em maiuscula. */ .topbar .eyebrow { display: flex; align-items: baseline; gap: 6px; text-overflow: clip; text-transform: none; letter-spacing: normal; font-size: 12px; /* overflow visivel para o dropdown de granularidade (4o segmento) nao ser cortado; o truncamento continua por-crumb (overflow nos .crumb abaixo). */ overflow: visible; } .topbar .eyebrow .crumb { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .topbar .eyebrow .crumb-sep, .topbar .eyebrow .crumb-last { flex: 0 0 auto; } /* 4o segmento: dropdown de granularidade (so em matriz). Reusa .action-menu/.action-menu-popover; o gatilho e um botao inline no breadcrumb. Especificidade .topbar .eyebrow ... para vencer o overflow:hidden do .crumb. */ .topbar .eyebrow .crumb-granularity { display: inline-flex; align-items: baseline; overflow: visible; } .crumb-granularity-trigger { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; cursor: pointer; } .crumb-granularity-trigger:hover { color: var(--ink); } .crumb-caret { font-size: 9px; } /* o componente base abre a direita (right:0); no breadcrumb, a esquerda. white-space:normal e OBRIGATORIO: o popover esta dentro de .crumb-granularity (que e .crumb, com white-space:nowrap herdavel) — sem este reset, os botoes inline-block das opcoes nao quebram linha e ficam HORIZONTAIS, escapando da caixa. Alinha o comportamento com o popover do menu ☰ (fora de contexto nowrap). */ .crumb-granularity .action-menu-popover { left: 0; right: auto; min-width: 140px; white-space: normal; } .crumb-granularity-option.active { color: var(--ink); font-weight: 800; } /* Colapso no scroll da matriz. Anima so a altura/opacidade do H1 e reduz o min-height/padding do topbar. position:relative + z-index:40 + backdrop-filter (regra .topbar acima) permanecem — os menus (+/acoes) seguem acima do mapa. So o H1 sai; o .eyebrow continua visivel. */ .topbar { transition: min-height 0.18s ease, padding 0.18s ease; } .topbar #artifactTitle { max-height: 40px; transition: max-height 0.18s ease, opacity 0.18s ease, margin 0.18s ease; } body.header-collapsed .topbar { min-height: 0; padding-top: 10px; padding-bottom: 10px; } body.header-collapsed #artifactTitle { max-height: 0; margin: 0; opacity: 0; pointer-events: none; } h1, h2 { margin: 0; letter-spacing: 0; } h1 { font-size: 21px; } h2 { font-size: 17px; } .actions { display: flex; gap: 8px; align-items: center; } .save-status { color: var(--muted); font-size: 12px; white-space: nowrap; } .save-status.is-error { max-width: 360px; color: #b42318; font-weight: 700; line-height: 1.3; white-space: normal; } .button, .segment, .icon-button { border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; } .button { min-height: 38px; padding: 0 13px; font-weight: 650; } .add-node-button { min-width: 42px; font-size: 20px; line-height: 1; } .button.primary { border-color: var(--brand); background: var(--brand); color: #fff; } .button.primary:hover { border-color: var(--brand-2); background: var(--brand-2); } .button.danger { border-color: #b42318; background: #b42318; color: #fff; } .button.danger:hover:not(:disabled) { border-color: #912018; background: #912018; } .action-menu { position: relative; } .icon-menu-button { width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; font-size: 18px; font-weight: 800; line-height: 1; } .icon-menu-button:hover { border-color: #b8c1d1; } .icon-menu-button.has-active-search { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; } .action-menu-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 18px 38px rgba(16, 24, 40, 0.16); } .action-menu-popover button { width: 100%; border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; padding: 9px 10px; cursor: pointer; font-weight: 650; font-size: 13px; line-height: 1.35; white-space: normal; } .action-menu-popover button:hover { background: #f8fafc; } .action-menu-popover button:disabled { color: var(--muted-2); cursor: not-allowed; background: transparent; } .menu-hint { max-width: none; padding: 8px 10px 9px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; } .add-node-menu .action-menu-popover { left: 0; right: auto; width: min(280px, calc(100vw - 32px)); min-width: 0; } .button.secondary:hover, .segment:hover { border-color: #b8c1d1; } .button:disabled { opacity: 0.45; cursor: not-allowed; } .artifact-context { display: flex; align-items: center; gap: 10px; padding: 10px 26px; border-bottom: 1px solid var(--line); background: #fbfcfe; } .context-item { min-height: 40px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 7px 10px; white-space: nowrap; } .context-item span { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 800; } .context-item strong { color: var(--ink); font-size: 12px; } .context-related { min-width: 0; flex: 1; justify-content: flex-start; } .context-chips { display: flex; gap: 6px; min-width: 0; overflow: hidden; } .context-chip { display: inline-flex; align-items: center; min-height: 22px; border-radius: 999px; background: #eef4ff; color: #1849a9; padding: 3px 8px; font-size: 11px; font-weight: 750; white-space: nowrap; } .segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); } .segment { border: 0; background: transparent; padding: 7px 11px; font-size: 13px; color: var(--muted); /* rotulo de controle nunca quebra (ex.: "As Is" virava "As"/"Is" em telas estreitas); a mesma classe recebe rotulos maiores no futuro. */ white-space: nowrap; } .segment.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10); } /* Variante compacta do segmented As Is/To Be movido para o topbar (PR C1a): fonte e padding menores para caber ao lado dos icones de acao. */ .segmented--topbar { padding: 2px; } .segmented--topbar .segment { padding: 4px 9px; font-size: 12px; } .tag-filter-control { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; } /* O JS marca [hidden] onde o filtro de tags nao se aplica (ex.: Jornada). Sem esta regra, o display:flex acima vence o [hidden] padrao e o campo continua visivel. Ver docs/18-backlog-bugs.md. */ .tag-filter-control[hidden] { display: none; } /* Filtro de tags agora vive no menu de acoes (☰), em destaque no topo, visivel so em blueprint (o gate [hidden] continua no renderHeader). */ .menu-tag-filter { padding: 4px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .menu-tag-filter > span { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 800; } .tag-filter-control select { width: 100%; height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 0 10px; color: var(--ink); } .map-shell { position: relative; min-height: 0; flex: 1; padding: 14px 26px 26px; display: flex; flex-direction: column; overflow: hidden; } .undo-history-button { font-size: 22px; } .emotion-shell { margin: 16px 26px 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(16, 24, 40, 0.07); overflow: hidden; } .emotion-shell.artifact-no-emotion { display: none; } body.emotion-collapsed .emotion-shell { margin-top: 12px; } .emotion-header { min-height: 48px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); } .emotion-header strong { display: block; font-size: 14px; } .emotion-header span { display: inline-block; color: var(--muted); font-size: 12px; margin-top: 2px; } .emotion-legend { display: flex; gap: 16px; align-items: center; white-space: nowrap; } .mini-button { height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--muted); padding: 0 10px; cursor: pointer; font-weight: 650; font-size: 12px; } .mini-button:hover { color: var(--ink); border-color: #b8c1d1; } .emotion-legend .line { display: inline-block; width: 24px; height: 3px; border-radius: 999px; margin-right: 6px; vertical-align: middle; } .emotion-legend .line.actual { background: var(--accent); } .emotion-legend .line.ideal { background: repeating-linear-gradient( to right, var(--success) 0, var(--success) 5px, transparent 5px, transparent 9px ); } .emotion-chart { height: 156px; overflow-x: auto; overflow-y: hidden; padding: 10px 12px 4px; } body.emotion-collapsed .emotion-chart, body.emotion-collapsed .emotion-scale { display: none; } body.emotion-collapsed .emotion-header { min-height: 46px; } .emotion-chart svg { display: block; min-width: 100%; height: 138px; } .empty-chart { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 13px; } .emotion-axis { stroke: #e4e7ec; stroke-width: 1; } .emotion-grid-line { stroke: #eef2f6; stroke-width: 1; } .emotion-line-actual { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .emotion-line-ideal { fill: none; stroke: var(--success); stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linecap: round; stroke-linejoin: round; } .emotion-point-actual { fill: #fff; stroke: var(--accent); stroke-width: 2; } .emotion-point-ideal { fill: #fff; stroke: var(--success); stroke-width: 2; } .emotion-label { fill: #667085; font-size: 10px; font-weight: 650; } .emotion-y-label { fill: #98a2b3; font-size: 10px; } .emotion-scale { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: #f8fafc; } .emotion-scale div { padding: 8px 10px; border-right: 1px solid var(--line); min-width: 0; } .emotion-scale div:last-child { border-right: 0; } .emotion-scale strong { display: inline-block; margin-right: 6px; font-size: 12px; } .emotion-scale span { color: var(--muted); font-size: 11px; } .map-meta { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 10px; } .map-meta[hidden] { display: none; } .map-meta strong { display: block; font-size: 14px; } .map-meta span { display: inline-block; color: var(--muted); font-size: 12px; } /* .dot (base) permanece: a persona-view usa `.persona-view .dot`, que herda display/margin desta regra. A legenda do mapa (.legend + .dot.changed/.filled) foi removida — o indicador "mudou" por célula e o rastreamento em localStorage (xperienz:last-seen-to-be) continuam intactos para um redesenho acessível. */ .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; } .map-viewport { min-height: 0; flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); } body.context-hidden .emotion-shell { margin-top: 12px; } body.artifact-document .artifact-context, body.artifact-document .emotion-shell, body.artifact-document .segmented--topbar { display: none; } body.artifact-document .map-shell { padding-top: 14px; } body.artifact-document .map-viewport { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .map-grid { display: grid; grid-template-columns: var(--row-label-width) repeat(var(--col-count), var(--column-width)); width: max-content; min-width: 100%; padding-bottom: 16px; /* faixa reservada para a barra de rolagem horizontal overlay */ } .empty-artifact { min-height: 360px; display: grid; place-items: center; padding: 40px; color: var(--muted); text-align: center; font-size: 14px; } .persona-document-shell { background: #f9fafb; } /* A faixa fica fixada no topo do contêiner rolável (sempre visível), e sua altura real é medida em JS e exposta como --persona-validation-bar-height, para que o menu sticky de grupos desconte exatamente esse espaço e nunca volte a depender de scroll condicionado (regressão do PR #29). */ .persona-validation-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 22px; border-bottom: 1px solid #e5e7eb; background: #fff; } .persona-validation-label { color: #4b5563; font-size: 12px; font-weight: 700; } .persona-validation-toggle { display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; } .persona-validation-option { min-height: 30px; border: 0; border-right: 1px solid #d1d5db; background: #fff; color: #6b7280; padding: 0 10px; font: 650 12px/1 inherit; cursor: pointer; } .persona-validation-option:last-child { border-right: 0; } .persona-validation-option:hover:not(:disabled), .persona-validation-option:focus-visible { background: #f3f4ff; color: #2e3ae0; outline: 0; } .persona-validation-option.is-active { background: #2e3ae0; color: #fff; } .persona-validation-option:disabled { cursor: not-allowed; opacity: 0.72; } .persona-validation-notice { color: #92400e; font-size: 12px; font-weight: 600; } .persona-view { --coral: #e8715a; --coral-light: #f5c4bb; --teal: #2d9cdb; --teal-light: #bde3f5; --navy: #1b2a4a; --green: #27ae60; --green-light: #c3ebd3; --purple: #7b61ff; --purple-light: #d9d3ff; --yellow: #f2c94c; --yellow-light: #fdf3cc; --orange: #f2994a; --orange-light: #fddfc3; --gray-bg: #f7f8fa; --gray-mid: #e4e7ee; --gray-text: #6b7280; --persona-coral: #e8715a; --persona-coral-light: #f5c4bb; --persona-teal: #2d9cdb; --persona-teal-light: #bde3f5; --persona-navy: #1b2a4a; --persona-green: #27ae60; --persona-green-light: #c3ebd3; --persona-purple: #7b61ff; --persona-purple-light: #d9d3ff; --persona-yellow: #f2c94c; --persona-yellow-light: #fdf3cc; --persona-orange: #f2994a; --persona-orange-light: #fddfc3; color: var(--ink); padding: 0 0 28px; } .document-block-view { --document-coral: #c75b48; --document-teal: #1f718f; --document-navy: #314569; --document-green: #2b7a4b; --document-purple: #7459a7; --document-yellow: #a36e12; --document-orange: #ad5d1e; display: grid; gap: 18px; padding: 0 0 28px; } .import-review-notice { display: flex; align-items: baseline; gap: 9px; border-left: 3px solid #ad5d1e; background: #fff8e9; color: #6a4a16; padding: 11px 13px; font-size: 13px; } .import-review-notice span { color: #795b29; } .document-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 24px; background: #202030; color: #fff; } .document-hero h2 { margin: 5px 0 0; color: #fff; font-size: 26px; } .document-tagline, .document-context { margin: 7px 0 0; color: #d7deea; font-size: 14px; line-height: 1.45; } .document-context { color: #aeb9ca; font-size: 12px; } .document-block-list { display: grid; gap: 20px; } .document-block { display: grid; gap: 12px; } .document-block-heading { display: flex; align-items: center; gap: 8px; border-left: 3px solid var(--document-navy); padding-left: 10px; } .document-block-heading > span { font-size: 17px; } .document-block-title { min-width: 0; flex: 1; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--ink); padding: 3px 0; font: 700 16px/1.35 inherit; } .document-block-title:focus { outline: 0; border-bottom-color: var(--document-navy); } .document-editor-toolbar { display: flex; justify-content: flex-end; align-items: end; gap: 10px; border: 1px solid var(--line); padding: 10px 12px; background: #f8fafc; } .document-editor-toolbar label, .document-edit-card label, .document-score-editor label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 750; } .document-editor-toolbar select, .document-edit-list input, .document-edit-list textarea { width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); padding: 7px 8px; font: inherit; font-size: 13px; } .document-edit-list textarea { min-height: 68px; resize: vertical; } .document-block-actions, .document-edit-row, .document-score-editor, .document-chip-editor { display: flex; gap: 7px; align-items: center; } .document-block-actions { margin-left: auto; } .document-icon-button { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; } .document-icon-button:hover:not(:disabled) { border-color: var(--document-navy); color: var(--document-navy); } .document-icon-button:disabled { cursor: not-allowed; opacity: .42; } .document-icon-button.danger:hover:not(:disabled) { border-color: #b42318; color: #b42318; } .document-edit-card, .document-score-editor, .document-chip-editor { position: relative; } .document-edit-card { display: grid; gap: 8px; } .document-score-editor { border: 1px solid var(--line); padding: 9px; background: #fff; } .document-chip-editor { border: 1px solid #d7dfec; border-radius: 999px; background: #edf2f8; padding: 3px 4px 3px 9px; } .document-chip-editor input { min-width: 120px; border: 0; background: transparent; padding: 2px 0; } .document-chip-editor .document-icon-button { width: 24px; height: 24px; flex-basis: 24px; border: 0; background: transparent; } .document-add-item { justify-self: start; border: 0; background: transparent; color: var(--document-navy); padding: 3px 0; font: 700 12px/1.4 inherit; cursor: pointer; } .document-add-item:hover { text-decoration: underline; } .document-text-block p { max-width: 920px; margin: 0; color: #344054; font-size: 14px; line-height: 1.6; } .document-key-value-grid, .document-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; } .document-key-value-grid > div, .document-mini-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px; } .document-key-value-grid dt, .document-mini-card strong { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .document-key-value-grid dd, .document-mini-card p { margin: 5px 0 0; color: var(--ink); font-size: 13px; line-height: 1.45; } .document-dot-list, .document-score-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .document-dot-list li { display: flex; gap: 9px; align-items: flex-start; color: #344054; font-size: 14px; line-height: 1.5; } .document-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 6px; border-radius: 999px; background: var(--document-navy); } /* ============================================================ Persona (documento importado) — redesenho visual Smaply. Fonte: docs/20-especificacao-visual-smaply-persona.md. Índigo = ação/interação; roxo = destaque/identidade (quote, avatar). Nunca as duas na mesma função. ============================================================ */ .document-block-view.persona-doc { --persona-indigo: #2E3AE0; --persona-purple: #7C3AED; --persona-ink: #111827; --persona-muted: #6B7280; --persona-page: #F9FAFB; --persona-card: #FFFFFF; --persona-line: #F0F1F3; --persona-toolbar: #1F2126; display: block; background: var(--persona-page); padding: 22px; } .persona-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 22px; align-items: start; } /* Coluna estreita — identidade */ .persona-identity { position: sticky; top: calc(16px + var(--persona-validation-bar-height, 56px)); max-height: calc(100vh - 148px - var(--persona-validation-bar-height, 56px)); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; overflow: hidden; background: var(--persona-card); border: 1px solid var(--persona-line); border-radius: 16px; padding: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } /* O resumo pode rolar quando a viewport é baixa, mas a navegação fica fora desse overflow para manter os cinco grupos sempre acessíveis. */ .persona-identity-summary { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 8px; padding-right: 2px; } .persona-avatar { width: 117px; height: 117px; margin: 0 0 6px; border: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #efe9ff, #e6e9ff); color: var(--persona-purple); cursor: not-allowed; } .persona-avatar-initial { font-size: 48px; font-weight: 700; line-height: 1; } .persona-eyebrow { margin: 0; color: var(--persona-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; } .persona-name { margin: 0; color: var(--persona-ink); font-size: 28px; font-weight: 700; line-height: 1.15; } .persona-tagline { margin: 0; color: var(--persona-muted); font-size: 16px; } .persona-context { margin: 2px 0 0; color: var(--persona-muted); font-size: 13px; line-height: 1.45; } .persona-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .persona-tag { border: 1px solid var(--persona-line); border-radius: 999px; background: #fff; color: var(--persona-muted); padding: 4px 10px; font-size: 12px; } .persona-group-nav { display: grid; gap: 3px; padding-top: 14px; border-top: 1px solid var(--persona-line); } .persona-group-nav-label { margin-bottom: 4px; color: var(--persona-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .persona-group-nav-link { width: 100%; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--persona-muted); padding: 7px 8px; text-align: left; font: 600 13px/1.3 inherit; cursor: pointer; } .persona-group-nav-link:hover, .persona-group-nav-link:focus-visible, .persona-group-nav-link.is-active { border-left-color: var(--persona-indigo); background: #f3f4ff; color: var(--persona-indigo); outline: 0; } /* Coluna larga — conteúdo */ .persona-content { display: grid; gap: 16px; min-width: 0; width: 100%; } .persona-content .document-editor-toolbar { border: 1px solid var(--persona-line); border-radius: 12px; background: var(--persona-card); } .persona-content .document-editor-toolbar .button.secondary { border-color: var(--persona-indigo); background: var(--persona-indigo); color: #fff; } .persona-sections { display: grid; gap: 26px; min-width: 0; width: 100%; } .persona-category-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; box-sizing: border-box; min-width: 0; scroll-margin-top: calc(16px + var(--persona-validation-bar-height, 56px)); } .persona-category-group-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; min-width: 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid var(--persona-line); padding: 2px 0 10px; } .persona-category-group-head h3 { margin: 0; color: var(--persona-ink); font-size: 17px; font-weight: 700; line-height: 1.3; } .persona-category-group-create { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; } .persona-category-group-create select { min-width: 150px; border: 1px solid var(--persona-line); border-radius: 5px; background: var(--persona-card); color: var(--persona-ink); padding: 7px 8px; font: inherit; font-size: 12px; } .persona-category-group-create .button.secondary { border-color: var(--persona-indigo); background: var(--persona-indigo); color: #fff; min-height: 32px; padding: 0 10px; font-size: 12px; font-weight: 650; } .persona-category-group-sections { display: grid; gap: 16px; } .persona-category-group-empty { margin: 0; color: var(--persona-muted); font-size: 13px; } /* Card de seção */ .persona-section { position: relative; z-index: 1; background: var(--persona-card); border: 1px solid var(--persona-line); border-radius: 15px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); padding: 20px 22px; } /* Ao passar o mouse, a seção sobe acima das vizinhas para a toolbar flutuante nunca ser coberta pelo card seguinte (mesmo empilhamento do menu "+"). */ .persona-section:hover, .persona-section:focus-within { z-index: 5; } .persona-section-head { display: flex; align-items: center; gap: 10px; cursor: pointer; } /* Quote não é recolhível: o cabeçalho não sugere clique para expandir. */ .persona-section--quote .persona-section-head { cursor: default; } /* Sistema de ícone 1: outline cinza no título da seção */ .persona-section-icon { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--persona-muted); } .persona-section-title { min-width: 0; flex: 1; border: 0; background: transparent; color: var(--persona-muted); padding: 2px 0; font: 600 13px/1.3 inherit; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } /* Só entra em modo de edição via duplo-clique (remove readonly). */ .persona-section-title:not([readonly]) { cursor: text; } .persona-section-title:focus { outline: 0; } .persona-section-title:not([readonly]):focus { color: var(--persona-ink); box-shadow: 0 1px 0 var(--persona-indigo); } .persona-section-body { margin-top: 14px; } .persona-section:not(.is-open):not(.persona-section--quote) .persona-section-body { display: none; } .element-toolbar { position: fixed; z-index: 40; display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: 8px; background: var(--persona-toolbar, #1f2126); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.18); } .element-toolbar[hidden] { display: none; } .element-toolbar-button { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: #f8fafc; font-size: 17px; font-weight: 750; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); line-height: 1; cursor: pointer; } .element-toolbar-button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); color: #fff; } .element-toolbar-button:focus-visible { outline: 2px solid #a5b4fc; outline-offset: -1px; background: rgba(165, 180, 252, 0.22); color: #fff; } .element-toolbar-button:disabled { color: #cbd5e1; opacity: 0.7; cursor: not-allowed; } .element-toolbar-button.is-danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.85); } /* Quote (spec §2/§4): card roxo, texto grande, itálico, centralizado, branco */ .persona-section--quote { background: var(--persona-purple); border-color: var(--persona-purple); } .persona-section--quote .persona-section-icon, .persona-section--quote .persona-section-title { color: rgba(255, 255, 255, 0.85); } .persona-quote { margin: 0; } .persona-quote-input { width: 100%; border: 0; background: transparent; color: #fff; font: italic 400 21px/1.5 inherit; text-align: center; resize: none; padding: 4px 6px; } .persona-quote-input:focus { outline: 0; background: rgba(255, 255, 255, 0.08); border-radius: 8px; } .persona-quote .document-add-item { display: block; text-align: center; color: rgba(255, 255, 255, 0.85); } /* Campos de conteúdo dentro das seções: sem borda até o foco (índigo) */ .persona-section .document-edit-list input, .persona-section .document-edit-list textarea { border-color: transparent; background: transparent; font-size: 15px; } .persona-section .document-edit-list input:hover, .persona-section .document-edit-list textarea:hover { background: #fafafb; } .persona-section .document-edit-list input:focus, .persona-section .document-edit-list textarea:focus { outline: 0; border-color: var(--persona-indigo); background: #fff; box-shadow: 0 0 0 3px rgba(46, 58, 224, 0.12); } .persona-section .document-add-item { color: var(--persona-indigo); } /* Marcador de lista quadrado (spec §2), não bolinha */ .persona-section .document-dot { border-radius: 3px; /* Centraliza o marcador na primeira linha, considerando o padding e a line-height do textarea que edita o item. */ margin-top: 14px; } .persona-section .document-dot-editor { align-items: flex-start; } .persona-section .document-dot-editor textarea { line-height: 1.5; } /* card_grid: o conteudo e o proprio formulario; rotulos redundantes foram removidos. Apenas o titulo usa enfase visual. */ .persona-section .document-mini-card { gap: 4px; /* O card é esticado pelo grid de 2 colunas para a altura do irmão mais alto. Sem isto, as linhas/itens internos (grid) esticam junto e a sobra vai para o vão entre título e corpo — que passa a variar de card para card. Com align-content/align-items start, título e corpo ficam colados no topo com gap fixo (4px), e a sobra do card fica embaixo do corpo. Assim títulos de mesmo nº de linhas têm a mesma altura e o vão título→corpo é idêntico. */ align-content: start; align-items: start; } .persona-section .document-mini-card .document-card-title { font-weight: 700; line-height: 1.4; } .persona-section .document-mini-card .document-card-body { font-weight: 400; line-height: 1.5; } /* key_value_grid: sem meta-rótulos "Nome"/"Valor". O nome do campo já é o label (cinza pequeno) e o valor vem logo abaixo (normal/bold). */ .persona-kv-card { gap: 3px; } .persona-section .document-edit-list input.persona-kv-name { color: var(--persona-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .persona-section .document-edit-list textarea.persona-kv-value { min-height: 0; overflow: hidden; resize: none; color: var(--persona-ink); font-size: 15px; font-weight: 600; line-height: 1.45; } /* Parágrafos dos blocos text: crescem para caber todo o conteúdo (via autoSizeTextarea), sem alça de resize manual e sem corte com a seção aberta. */ .persona-section .document-edit-list textarea[data-document-collection="paragraphs"] { min-height: 0; overflow: hidden; resize: none; line-height: 1.6; } /* Quote (também é bloco text): sem barra de rolagem, cresce ao conteúdo. */ .persona-quote-input { overflow: hidden; min-height: 0; } /* Todo textarea de seção cresce ao conteúdo (via autoSizeTextarea), inclusive as descrições do card_grid — sem alça de resize manual. */ .persona-section textarea { min-height: 0; overflow: hidden; resize: none; } /* Chips crescem em largura para caber a etiqueta inteira (via autoSizeInput); a lista quebra em linhas quando não cabem. Sem truncar. */ .persona-section .document-chip-editor { max-width: 100%; } .persona-section .document-chip-editor input { min-width: 24px; max-width: 100%; } @media (max-width: 900px) { .persona-layout { grid-template-columns: minmax(0, 1fr); } .persona-identity { position: static; max-height: none; overflow: visible; grid-template-rows: none; } .persona-identity-summary { overflow: visible; } .persona-category-group-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; } .persona-category-group-create { justify-content: flex-start; } } @media (max-width: 560px) { .document-block-view.persona-doc { padding: 14px; } .persona-category-group-create { display: grid; grid-template-columns: minmax(0, 1fr); } .persona-category-group-create select { width: 100%; min-width: 0; } .persona-category-group-create .button.secondary { width: 100%; white-space: nowrap; } } .document-score-row { display: grid; grid-template-columns: minmax(150px, 210px) minmax(180px, 1fr) minmax(96px, 140px) auto; gap: 12px; align-items: center; } .document-score-row input { min-width: 0; border-color: transparent; background: transparent; color: var(--ink); font-size: 12px; font-weight: 750; } .document-score-row input:hover { background: #fafafb; } .document-score-row input:focus { outline: 0; border-color: var(--persona-indigo); background: #fff; box-shadow: 0 0 0 3px rgba(46, 58, 224, 0.12); } .document-score-value, .document-score-label { text-align: right; } .document-score-name { overflow: hidden; text-overflow: ellipsis; } .document-score-track { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 10px; align-items: center; } .document-score-label { color: var(--muted); } .document-score-bar { height: 11px; overflow: hidden; border-radius: 999px; background: #e4e9f2; } .document-score-bar i { display: block; height: 100%; background: var(--document-navy); } .document-chip-list { display: flex; flex-wrap: wrap; gap: 7px; } .document-chip { display: inline-flex; align-items: center; border: 1px solid #d7dfec; border-radius: 999px; background: #edf2f8; color: var(--document-navy); padding: 5px 9px; font-size: 11px; font-weight: 750; line-height: 1.25; } .document-raw-block { border: 1px solid #efcf9f; background: #fffaf0; padding: 14px; } .document-raw-block p { margin: 0; color: #7a4f15; font-size: 13px; } .document-raw-block pre { overflow: auto; margin: 0; padding: 10px; background: #fff; color: #344054; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; } .document-import-footer { border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 13px; } @media (max-width: 720px) { .document-editor-toolbar, .document-score-editor { align-items: stretch; grid-template-columns: 1fr; } .document-editor-toolbar { display: grid; } .document-block-heading { flex-wrap: wrap; } .document-block-actions { width: 100%; margin-left: 0; justify-content: flex-end; } } .document-accent-coral { border-color: var(--document-coral); } .document-accent-teal { border-color: var(--document-teal); } .document-accent-navy { border-color: var(--document-navy); } .document-accent-green { border-color: var(--document-green); } .document-accent-purple { border-color: var(--document-purple); } .document-accent-yellow { border-color: var(--document-yellow); } .document-accent-orange { border-color: var(--document-orange); } .document-dot.document-accent-coral, .document-score-row i.document-accent-coral { background: var(--document-coral); } .document-dot.document-accent-teal, .document-score-row i.document-accent-teal { background: var(--document-teal); } .document-dot.document-accent-navy, .document-score-row i.document-accent-navy { background: var(--document-navy); } .document-dot.document-accent-green, .document-score-row i.document-accent-green { background: var(--document-green); } .document-dot.document-accent-purple, .document-score-row i.document-accent-purple { background: var(--document-purple); } .document-dot.document-accent-yellow, .document-score-row i.document-accent-yellow { background: var(--document-yellow); } .document-dot.document-accent-orange, .document-score-row i.document-accent-orange { background: var(--document-orange); } .document-chip.document-accent-coral { background: #f9e0db; color: #8a392b; } .document-chip.document-accent-teal { background: #d9eef5; color: #15536a; } .document-chip.document-accent-green { background: #deefe2; color: #215e37; } .document-chip.document-accent-purple { background: #eee8f7; color: #5c468a; } .document-chip.document-accent-yellow { background: #fff1cf; color: #825b0d; } .document-chip.document-accent-orange { background: #fbe5d1; color: #82451b; } .import-report-modal { width: min(620px, 100%); } .import-report-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .import-report-summary > div { display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; } .import-report-summary strong { color: var(--ink); font-size: 22px; } .import-report-summary span, .import-report-status, .import-report-review li { color: var(--muted); font-size: 12px; line-height: 1.45; } .import-report-status { margin: 16px 0 0; } .import-report-review { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .import-report-review h3 { margin: 0 0 8px; color: var(--ink); font-size: 14px; } .import-report-review ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; } .persona-view .header { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #202030; color: #fff; padding: 22px 24px; } .persona-view .header-top { display: flex; align-items: center; gap: 14px; } .persona-view .header-avatar { width: 54px; height: 54px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--dark); font-size: 24px; } .persona-view .header-eyebrow, .persona-view .card-title, .persona-view .section-label, .persona-view .job-label, .persona-view .ruptura-num, .persona-view .need-title { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 850; } .persona-view .header-eyebrow { color: #b7c0cf; } .persona-view h1 { margin-top: 5px; color: #fff; font-size: 26px; } .persona-view .header-tags, .persona-view .chip-group { display: flex; gap: 7px; flex-wrap: wrap; } .persona-view .header-tags { margin-top: 14px; } .persona-view .header-tag, .persona-view .chip, .persona-view .group-name { border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 800; line-height: 1.2; } .persona-view .header-tag { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: #fff; } .persona-view .canvas-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px; } .persona-view .span-2 { grid-column: span 2; } .persona-view .span-3 { grid-column: 1 / -1; } .persona-view .card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 16px; box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06); } .persona-view .card-accent-coral { border-top: 3px solid var(--persona-coral); } .persona-view .card-accent-teal { border-top: 3px solid var(--persona-teal); } .persona-view .card-accent-green { border-top: 3px solid var(--persona-green); } .persona-view .card-accent-purple { border-top: 3px solid var(--persona-purple); } .persona-view .card-accent-yellow { border-top: 3px solid var(--persona-yellow); } .persona-view .card-accent-orange { border-top: 3px solid var(--persona-orange); } .persona-view .card-accent-navy { border-top: 3px solid var(--persona-navy); } .persona-view .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; } .persona-view .card-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; } .persona-view .icon-coral { background: var(--persona-coral-light); } .persona-view .icon-teal { background: var(--persona-teal-light); } .persona-view .icon-green { background: var(--persona-green-light); } .persona-view .icon-purple { background: var(--persona-purple-light); } .persona-view .icon-yellow { background: var(--persona-yellow-light); } .persona-view .icon-orange { background: var(--persona-orange-light); } .persona-view .icon-navy { background: #dde3f0; } .persona-view .card-body, .persona-view .dot-item, .persona-view .job-note { color: #344054; font-size: 13px; line-height: 1.55; } .persona-view .quote-block { margin-top: 12px; border-left: 3px solid var(--persona-purple); border-radius: 0 8px 8px 0; background: #f8fafc; padding: 12px 14px; color: var(--ink); font-size: 13px; font-style: italic; } .persona-view .profile-block, .persona-view .needs-grid, .persona-view .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .persona-view .profile-item, .persona-view .dot-item, .persona-view .need-item, .persona-view .job-card, .persona-view .ruptura-item { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 10px; } .persona-view .profile-item .label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 800; } .persona-view .profile-item .value { margin-top: 3px; color: var(--ink); font-size: 13px; font-weight: 750; } .persona-view .section-label { margin: 14px 0 7px; } .persona-view .chip-coral { background: var(--persona-coral-light); color: #8b2b1f; } .persona-view .chip-teal { background: var(--persona-teal-light); color: #1a5f7a; } .persona-view .chip-green { background: var(--persona-green-light); color: #145228; } .persona-view .chip-purple { background: var(--persona-purple-light); color: #3d2ba0; } .persona-view .chip-yellow { background: var(--persona-yellow-light); color: #7a5c00; } .persona-view .chip-orange { background: var(--persona-orange-light); color: #7a3b00; } .persona-view .chip-navy { background: #dde3f0; color: var(--persona-navy); } .persona-view .group-item { padding: 13px 0; border-bottom: 1px solid var(--line); } .persona-view .group-item:last-child { border-bottom: 0; padding-bottom: 0; } .persona-view .group-name { display: inline-flex; margin-bottom: 8px; } .persona-view .dot-grid { display: grid; gap: 8px; } .persona-view .dot-item { display: flex; gap: 8px; align-items: flex-start; font-weight: 650; } .persona-view .dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; margin-top: 6px; } .persona-view .score-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 44px; gap: 9px; align-items: center; margin-top: 9px; } .persona-view .score-name, .persona-view .score-val { color: var(--ink); font-size: 12px; font-weight: 750; } .persona-view .score-val { color: var(--muted); text-align: right; } .persona-view .score-bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; } .persona-view .score-fill { height: 100%; border-radius: inherit; } .persona-view .job-card { margin-bottom: 10px; } .persona-view .job-card:last-child, .persona-view .ruptura-item:last-child { margin-bottom: 0; } .persona-view .job-note { margin-top: 8px; color: var(--muted); } .persona-view .ruptura-item { margin-bottom: 10px; border-left: 3px solid var(--persona-coral); } .persona-view .ruptura-title { margin: 4px 0 6px; color: var(--ink); font-size: 14px; font-weight: 800; } .persona-view .footer { margin-top: 16px; border-radius: 8px; background: #202030; color: #cbd5e1; padding: 16px; text-align: center; font-size: 12px; } .persona-view .footer strong { color: #fff; } .moment-architecture-view { padding-bottom: 28px; } .ma-hero { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: #202030; color: #fff; padding: 22px 24px; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; } .ma-hero h2 { color: #fff; font-size: 24px; margin-bottom: 7px; } .ma-hero p:not(.eyebrow) { max-width: 780px; margin: 0; color: #cbd5e1; font-size: 13px; line-height: 1.5; } .ma-summary { min-width: 132px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.08); padding: 12px; text-align: right; } .ma-summary strong { display: block; color: #fff; font-size: 28px; line-height: 1; } .ma-summary span { display: block; margin-top: 4px; color: #cbd5e1; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; } .ma-filters { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; } .ma-filter { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; font-weight: 750; } .ma-filter.active, .ma-filter:hover { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; } .ma-filter strong { min-width: 20px; height: 20px; border-radius: 999px; background: #eef2ff; color: inherit; display: grid; place-items: center; font-size: 10px; } .ma-type-guide { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 14px; } .ma-guide-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .ma-guide-title span { color: var(--ink); font-size: 14px; font-weight: 850; } .ma-guide-title strong { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 850; } .ma-type-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .ma-type-item { border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: 8px; background: #f8fafc; padding: 9px; } .ma-type-pico { border-top-color: #16a34a; } .ma-type-vale { border-top-color: #dc2626; } .ma-type-transicao { border-top-color: #2563eb; } .ma-type-marco { border-top-color: #7c3aed; } .ma-type-neutro { border-top-color: #94a3b8; } .ma-type-item strong { display: block; color: var(--ink); font-size: 12px; } .ma-type-item span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; } .ma-grid { display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: 14px; } .ma-card { border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 14px; box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06); } .ma-pico { border-top-color: #16a34a; } .ma-vale { border-top-color: #dc2626; } .ma-transicao { border-top-color: #2563eb; } .ma-marco { border-top-color: #7c3aed; } .ma-neutro { border-top-color: #94a3b8; } .ma-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .ma-card h3 { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.25; } .ma-card-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 650; } .ma-badge { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #f8fafc; font-size: 16px; } .ma-intensity { margin-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; } .ma-intensity span, .ma-intensity strong { color: var(--muted); font-size: 11px; font-weight: 800; } .ma-intensity div { height: 7px; border-radius: 999px; background: #e4e7ec; overflow: hidden; } .ma-intensity i { display: block; height: 100%; border-radius: inherit; background: var(--brand); } .ma-dimensions { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ma-dimension { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 8px; position: relative; cursor: help; } .ma-dimension span { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; font-weight: 850; } .ma-dimension small { position: absolute; left: 8px; bottom: calc(100% + 8px); z-index: 12; width: max-content; max-width: 220px; border: 1px solid rgba(16, 24, 40, 0.10); border-radius: 8px; background: #202030; color: #fff; padding: 8px 9px; box-shadow: 0 14px 32px rgba(16, 24, 40, 0.20); text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 650; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease; } .ma-dimension small::after { content: ""; position: absolute; left: 12px; top: 100%; border: 6px solid transparent; border-top-color: #202030; } .ma-dimension:hover small, .ma-dimension:focus-visible small { opacity: 1; transform: translateY(0); } .ma-dimension div { margin-top: 6px; display: flex; gap: 4px; } .ma-dimension i { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); } .ma-dimension i.empty { background: #d0d5dd; } .ma-analysis { margin-top: 12px; display: grid; gap: 8px; } .ma-analysis section { border-left: 2px solid var(--line-strong); padding-left: 9px; } .ma-analysis strong { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 850; } .ma-analysis p { margin: 4px 0 0; color: #344054; font-size: 12px; line-height: 1.45; } .ma-footer { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 16px; } .ma-footer strong { color: var(--ink); font-size: 14px; } .ma-footer p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; } @media (max-width: 1200px) { .persona-view .canvas-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); } .ma-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } .ma-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .persona-view .span-3 { grid-column: span 2; } } @media (max-width: 820px) { .document-hero { display: grid; } .document-key-value-grid, .document-card-grid, .import-report-summary { grid-template-columns: 1fr; } .document-score-row { grid-template-columns: 1fr; gap: 5px; } .persona-view .canvas-grid, .persona-view .profile-block, .persona-view .needs-grid, .persona-view .two-col { grid-template-columns: 1fr; } .persona-view .span-2, .persona-view .span-3 { grid-column: auto; } .ma-hero, .ma-grid, .ma-type-grid { grid-template-columns: 1fr; } .ma-hero { display: grid; } .ma-summary { text-align: left; } } .corner, .column-header, .row-header, .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .corner { position: sticky; left: 0; top: 0; z-index: 5; background: #f8fafc; min-height: 86px; padding: 16px; font-size: 12px; color: var(--muted); font-weight: 700; } .column-header { position: sticky; top: 0; z-index: 4; min-height: 86px; padding: 14px; background: #f8fafc; border-top: 0; border-left: 0; border-radius: 0; text-align: left; cursor: default; } .column-header.is-expandable { cursor: pointer; } .column-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .node-actions { display: inline-flex; gap: 4px; } .node-delete, .node-rename, .node-move { width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(255, 255, 255, 0.78); color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1; /* Invisivel em repouso, igual ao eixo das raias (.row-hide). Antes eram 0.58 aqui e 0 la: dois eixos com a mesma funcao e duas gramaticas diferentes. */ opacity: 0; transition: opacity 0.14s ease, border-color 0.14s ease, color 0.14s ease, background 0.14s ease; } .column-header:hover .node-delete, .column-header:hover .node-rename, .column-header:hover .node-move, .column-header:focus-within .node-delete, .column-header:focus-within .node-rename, .column-header:focus-within .node-move, .node-delete:focus-visible, .node-rename:focus-visible, .node-move:focus-visible { opacity: 1; } .node-move:hover:not(:disabled) { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; } /* A seta desabilitada (ponta da fila) continua apagada, mas SO depois que a barra e revelada. Enquanto a opacidade de repouso era 0.58, bastava um `opacity: 0.18` aqui; com a base em 0 essa regra vencia por especificidade (0,2,0 contra 0,1,0) e as setas desabilitadas seriam a unica coisa visivel no cabecalho em repouso. Por isso o apagado passa a viver no estado revelado, que vence a regra de revelacao por especificidade (0,4,0). */ .node-move:disabled { cursor: not-allowed; } .column-header:hover .node-move:disabled, .column-header:focus-within .node-move:disabled { opacity: 0.18; } .node-rename:hover { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; } .node-delete:hover { border-color: #fecaca; background: #fff1f2; color: #b42318; } .node-phase { background: #f8fafc; } .node-stage { background: #f3f7ff; } .node-moment { background: #eef6ff; } .column-kicker { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 750; } .column-title { margin-top: 6px; font-weight: 750; font-size: 14px; } .column-desc { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.35; } .row-header { position: sticky; left: 0; z-index: 3; background: #fcfcfd; padding: 14px 16px; /* Sem min-height: a coluna de rotulo nunca determina a altura da raia. Ela dimensiona pelo proprio conteudo (titulo + descricao, que permanecem) e acompanha por stretch quando as celulas forem mais altas. */ } /* Eixo das raias, espelhando .node-actions do eixo das colunas: o comando mora na barra de rotulo do proprio elemento e so aparece no hover/foco. */ .row-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .row-actions { display: inline-flex; gap: 4px; flex: none; } .row-hide { width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(255, 255, 255, 0.78); color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: 13px; font-weight: 800; line-height: 1; opacity: 0; transition: opacity 0.14s ease, border-color 0.14s ease, color 0.14s ease, background 0.14s ease; } /* Diferenca deliberada em relacao a .node-actions: la o repouso e opacity 0.58, aqui e 0. Esconder nao e uma acao que se ofereca o tempo todo — quatro botoes por coluna ja povoam bastante o cabecalho, e um quinto controle sempre visivel em cada uma das nove raias competiria com o conteudo. */ .row-header:hover .row-hide, .row-header:focus-within .row-hide, .row-hide:focus-visible { opacity: 1; } .row-hide:hover { color: var(--ink); border-color: #b8c1d1; background: #fff; } .row-hide:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } /* Ponto de retorno, na celula de canto: UMA linha fechada, etiquetas so dentro do balao. position: absolute e a garantia — nao a estimativa — de que a altura da celula de canto com N raias escondidas e IDENTICA a altura com zero: fora do fluxo, o indicador nao contribui altura nenhuma, com uma raia ou com seis. A versao anterior empilhava as etiquetas no fluxo e crescia a celula ate empurrar o mapa para baixo. A ancora e a .corner, que ja e sticky (elemento posicionado) e portanto serve de bloco container sem precisar de um position: relative novo. right: 16px espelha o padding da celula e mantem a linha dentro dela; o balao, esse sim, tem largura propria e pode transbordar para a direita. */ .corner-hidden { position: absolute; left: 16px; right: 16px; bottom: 10px; } .corner-hidden-trigger { max-width: 100%; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--muted-2); padding: 2px 9px; font: 700 11px/1.35 inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .corner-hidden-trigger:hover { color: var(--ink); border-color: #b8c1d1; } .corner-hidden-trigger:focus-visible, .corner-hidden-row:focus-visible, .corner-hidden-all:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } /* Flutua SOBRE o conteudo: abrir o balao nao pode mexer na altura do grid, que e a mesma razao de o gatilho estar fora do fluxo. position: fixed, com left/top escritos pelo Floating UI (script.js, positionHiddenRowsPopover). Um absolute aqui seria recortado pelo overflow: auto da .map-viewport — o porque esta comentado la. z-index 60 fica acima do grid e da topbar (40) e abaixo dos modais (80/90). */ .corner-hidden-popover { position: fixed; top: 0; left: 0; z-index: 60; display: grid; gap: 7px; min-width: 190px; max-width: 260px; padding: 10px; overflow: auto; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); } /* display: grid acima venceria o display: none que o atributo hidden aplica pela folha do navegador. Sem esta linha o balao nasceria aberto. */ .corner-hidden-popover[hidden] { display: none; } .corner-hidden-hint { margin: 0; color: var(--muted-2); font-size: 11px; font-weight: 600; line-height: 1.35; } .corner-hidden-list { display: flex; flex-wrap: wrap; gap: 4px; } .corner-hidden-row, .corner-hidden-all { max-width: 100%; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--muted); padding: 2px 8px; font: 700 11px/1.4 inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .corner-hidden-row:hover, .corner-hidden-all:hover { color: var(--ink); border-color: #b8c1d1; } .corner-hidden-all { justify-self: start; border-style: dashed; } .row-title { font-size: 13px; font-weight: 760; } .row-desc { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.35; } .cell { /* Sem min-height fixo: a raia acompanha a celula mais alta. O piso natural (padding 10+10 + .cell-card min-height 52px) ja garante ~72px numa celula vazia, mantendo o alvo de clique sem travar a altura. */ padding: 10px; background: #fff; transition: background 0.15s ease, outline 0.15s ease; } .cell:hover { background: #fbfdff; } .cell.selected { outline: 2px solid var(--focus); outline-offset: -2px; background: #f8fbff; } .cell.dimmed { opacity: 0.24; } .cell-card { min-height: 52px; border: 1px solid var(--line); border-radius: 8px; padding: 9px; background: #fff; cursor: text; } .cell-epistemic-meta { display: flex; justify-content: flex-end; min-height: 20px; margin-bottom: 5px; } /* Célula sem status definido não reserva espaço: renderEpistemicBadge devolve "" para status nulo, deixando o contêiner vazio. Sem isto, o min-height acima deixaria um vão de ~25px no topo de quase toda célula. */ .cell-epistemic-meta:empty { display: none; } .epistemic-badge { display: inline-flex; align-items: center; min-height: 18px; border: 1px solid transparent; border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 800; line-height: 1.4; white-space: nowrap; } .epistemic-campo { border-color: #b8dac1; background: #edf8f0; color: #276749; } .epistemic-hipotese { border-color: #f3d6a2; background: #fff8e8; color: #9a5a0a; } .epistemic-ideia { border-color: #d6cdea; background: #f6f3fc; color: #58469b; } .epistemic-proposta { border-color: #b9d1e3; background: #edf6fb; color: #285f84; } .epistemic-unclassified { border-color: #d7dce3; background: #f5f7f9; color: #596579; } .cell-card:focus { outline: 2px solid rgba(77, 101, 255, 0.28); border-color: var(--focus); } .cell-card p { margin: 0; color: #273043; font-size: 12px; line-height: 1.42; } .cell-list { display: grid; gap: 7px; } .cell-list-item { color: #273043; font-size: 12px; line-height: 1.42; padding-left: 10px; border-left: 2px solid var(--line-strong); } .wall-meta { display: none; } /* Score no card (Dor/Oportunidade) — só apresentação, read-only. Irmão do `.cell-card` (fora do contenteditable). Bolinha vazia = contorno cinza claro (contraste por luminosidade); cheia = cor sólida saturada do tipo. */ .cell-score { margin-top: 6px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); display: flex; flex-direction: column; gap: 6px; } .cell-score-rows { display: flex; flex-direction: column; gap: 4px; } .cell-score-row { display: flex; align-items: center; gap: 8px; } .cell-score-label { flex: 0 0 76px; font-size: 11px; line-height: 1.2; color: var(--muted); } .cell-score-dots { display: inline-flex; gap: 4px; } .score-dot { width: 9px; height: 9px; border-radius: 999px; background: transparent; border: 1.5px solid var(--line-strong); box-sizing: border-box; } .cell-score--opportunity .score-dot.is-filled { background: #1a6fd4; border-color: #1a6fd4; } .cell-score--pain .score-dot.is-filled { background: #d64541; border-color: #d64541; } .cell-score-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); } .cell-score-foot-left { display: inline-flex; align-items: center; gap: 6px; } .cell-score-type { display: block; flex: 0 0 auto; width: 15px; height: 15px; } .cell-score-stage { font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 8px; } .cell-score-priority { font-size: 11px; color: var(--muted); white-space: nowrap; } .tag-chip { display: inline-flex; align-items: center; min-height: 18px; border-radius: 999px; padding: 1px 7px; margin: 0 3px 3px 0; font-size: 10px; font-weight: 800; line-height: 1.4; vertical-align: baseline; white-space: nowrap; } .tag-critical { background: #171717; color: #fff; } .tag-severe { background: #fee2e2; color: #b42318; } .tag-light { background: #fef3c7; color: #92400e; } /* Atores agora são configuráveis por projeto (type arbitrário), então usam uma única classe genérica em vez de uma classe por ator. */ .tag-actor { background: #e0e7ff; color: #3730a3; } .row-fail .cell-list-item, .row-dores .cell-list-item { border-left-color: #fca5a5; } .row-kpi_op .cell-list-item, .row-kpi_perc .cell-list-item, .row-oportunidades .cell-list-item { border-left-color: #86efac; } .row-dores { background: #fffafa; } .row-oportunidades { background: #f7fffb; } .row-sentindo { background: #fffdf3; } .row-storyboard .cell-card p, .row-pensando .cell-card p { font-style: italic; } .compare-stack { display: grid; gap: 8px; } .state-block { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; } .state-label { display: block; padding: 5px 8px; background: #f8fafc; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 800; } .state-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; background: #f8fafc; } .state-header .state-label { padding: 0; } .state-body { padding: 8px; color: #273043; font-size: 12px; line-height: 1.42; } .detail-panel { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-width: 0; width: var(--panel-width); max-width: var(--panel-width); overflow: hidden; } .detail-panel:not(.open) { display: none; } body.detail-closed .detail-panel, .app-shell.detail-closed .detail-panel { width: 0; max-width: 0; border-left: 0; } .panel-header { min-height: 92px; padding: 20px; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); } .icon-button { width: 32px; height: 32px; } .empty-panel { margin: 20px; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; } .panel-content { min-height: 0; flex: 1; overflow-y: auto; padding: 16px 20px 24px; display: grid; grid-auto-rows: max-content; align-content: start; gap: 16px; } .panel-accordion { border: 1px solid var(--line); border-radius: 8px; /* overflow visible (nao hidden) para o tooltip do "i" nos titulos poder escapar acima do acordeao sem ser recortado. O clip nao era necessario para os cantos: nenhum filho tem fundo invadindo o raio. Ver docs/18-backlog-bugs.md. */ overflow: visible; } .panel-accordion-toggle { position: relative; width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: #fff; color: var(--ink); padding: 10px 12px; font: inherit; font-size: 13px; font-weight: 750; text-align: left; cursor: pointer; } .panel-accordion-toggle:hover { background: #f8fafc; } .panel-accordion-label { display: inline-flex; align-items: center; gap: 6px; } .panel-label-help { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1; } .panel-accordion-toggle[data-tooltip]::after { position: absolute; z-index: 12; /* Abre para BAIXO (nao para cima): o primeiro acordeao fica colado no topo da area que rola (.panel-content, overflow:auto), entao um tooltip para cima era cortado por essa borda. Para baixo ha espaco no corpo aberto. Depende do overflow:visible do .panel-accordion para escapar em acordeoes fechados. Ver docs/18-backlog-bugs.md. A LARGURA vem do cabecalho, nao da bolinha: ancorado no "i" com largura fixa, o balao comecava onde o titulo terminasse e passava da borda do painel nos titulos longos — recortado de um lado e criando barra horizontal do outro. Preso as duas margens do cabecalho ele nao tem como estourar, seja qual for o comprimento do titulo. */ top: calc(100% + 8px); left: 12px; right: 12px; width: auto; padding: 8px 9px; border-radius: 6px; background: #1d2939; color: #fff; content: attr(data-tooltip); font-size: 12px; font-weight: 500; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity 140ms ease, transform 140ms ease; } .panel-accordion-toggle[data-tooltip]:hover::after { opacity: 1; transform: translateY(0); } .panel-accordion-indicator { color: var(--muted); font-size: 18px; line-height: 1; transition: transform 160ms ease; } .panel-accordion.is-open .panel-accordion-indicator { transform: rotate(180deg); } .panel-accordion-body { display: none; gap: 14px; border-top: 1px solid var(--line); padding: 14px 12px; } .panel-accordion.is-open .panel-accordion-body { display: grid; } .hidden { display: none; } .access-state { display: none; min-height: 100vh; place-items: center; padding: 32px; background: var(--canvas); } .access-state > div { width: min(440px, 100%); padding: 24px; border-left: 4px solid var(--accent); } .access-state h1 { margin: 8px 0; font-size: 24px; } .access-state p:last-child { margin: 0; color: var(--muted); line-height: 1.5; } body.access-pending .app-shell, body.access-denied .app-shell { display: none; } body.access-pending .access-state, body.access-denied .access-state { display: grid; } .panel-content label { display: grid; gap: 7px; } .panel-content label span { color: var(--muted); font-size: 12px; font-weight: 700; } .panel-content textarea { min-height: 118px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 8px; padding: 11px; color: var(--ink); line-height: 1.45; } .panel-content textarea:focus { outline: 2px solid rgba(77, 101, 255, 0.25); border-color: var(--focus); } .panel-hint { border-radius: 8px; background: #f8fafc; border: 1px solid var(--line); padding: 12px; color: var(--muted); font-size: 13px; line-height: 1.45; } .panel-section-label { display: block; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 7px; } .panel-tag-list { display: flex; flex-wrap: wrap; } .panel-link-list { display: grid; gap: 6px; } .panel-link-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } .entity-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 10px; font-weight: 800; white-space: nowrap; } .panel-entity-actions { display: flex; flex-wrap: wrap; gap: 8px; } .panel-entity-actions .button { flex: 1 1 150px; } .panel-tracking { min-width: 0; } .tracking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .panel-epistemic-status { display: grid; gap: 8px; } .epistemic-control { display: grid; gap: 5px; } .epistemic-control > span, .epistemic-note, .epistemic-readonly > span { color: var(--muted); font-size: 12px; line-height: 1.4; } .epistemic-control select { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 9px 10px; color: var(--ink); background: var(--panel); font: inherit; } .epistemic-control select:focus { outline: 2px solid rgba(77, 101, 255, 0.25); border-color: var(--focus); } .epistemic-readonly { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; } .epistemic-note { margin: 0; } .tracking-grid label { min-width: 0; } .tracking-grid input, .tracking-grid select, .tracking-grid textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 9px 10px; color: var(--ink); background: var(--panel); font: inherit; } .tracking-grid textarea { min-height: 84px; } .tracking-grid input:focus, .tracking-grid select:focus, .tracking-grid textarea:focus { outline: 2px solid rgba(77, 101, 255, 0.25); border-color: var(--focus); } .tracking-decision, .tracking-priority-note { grid-column: 1 / -1; } .tracking-evidence { display: flex; align-items: center; justify-content: space-between; min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; color: var(--muted); font-size: 12px; } .tracking-evidence strong { color: var(--ink); font-size: 14px; } .tracking-priority-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; } .text-button { border: 0; padding: 0; color: var(--focus); background: transparent; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; } .score-editor { display: grid; grid-column: 1 / -1; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; } .score-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .score-editor-heading .panel-section-label { margin: 0; } .score-editor-heading strong { color: var(--ink); font-size: 13px; } .score-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 10px; } .score-field > div:first-child { display: grid; gap: 3px; } .score-field strong { font-size: 13px; } .score-field span, .score-field small, .score-formula-note { color: var(--muted); font-size: 11px; line-height: 1.35; } .star-score { display: flex; gap: 2px; } .star-score-button { width: 28px; height: 28px; border: 0; padding: 0; color: #cbd5e1; background: transparent; font-size: 19px; line-height: 1; cursor: pointer; } .star-score-button.selected, .star-score-button:hover, .star-score-button:focus-visible { color: #d97706; } /* Cor das estrelas por tipo de entidade (simbologia do card): azul p/ oportunidade, vermelho p/ dor. Vencem a regra laranja acima por especificidade. Mesmos hexes das bolinhas do card (.cell-score--*). */ .score-editor--opportunity .star-score-button.selected, .score-editor--opportunity .star-score-button:hover, .score-editor--opportunity .star-score-button:focus-visible { color: #1a6fd4; } .score-editor--pain .star-score-button.selected, .score-editor--pain .star-score-button:hover, .score-editor--pain .star-score-button:focus-visible { color: #d64541; } .star-score-button:focus-visible, .text-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .score-formula-note { margin: 0; } .score-weight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 2px; } .score-weight-grid > span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-weight: 700; } .score-weight-grid label { display: grid; gap: 4px; } .score-weight-grid label span { color: var(--muted); font-size: 11px; } .score-weight-grid input { min-width: 0; padding: 7px; } @media (max-width: 520px) { .tracking-grid { grid-template-columns: 1fr; } .score-field { grid-template-columns: 1fr; } .score-weight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .drawer-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; background: rgba(23, 23, 39, 0.42); } .drawer-backdrop.hidden { display: none; } .entity-link-drawer { width: min(440px, 100vw); height: 100%; display: flex; flex-direction: column; background: var(--panel); box-shadow: -16px 0 36px rgba(16, 24, 40, 0.18); } .drawer-body { flex: 1; overflow: auto; display: grid; align-content: start; gap: 14px; padding: 20px; } .drawer-body label { display: grid; gap: 7px; } .drawer-body label span { color: var(--muted); font-size: 12px; font-weight: 700; } .drawer-body input[type="search"] { min-height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; } .entity-link-results { display: grid; gap: 8px; } .entity-link-result { width: 100%; display: grid; gap: 5px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px; color: var(--ink); cursor: pointer; } .entity-link-result:hover, .entity-link-result.selected { border-color: var(--focus); background: #f7f8ff; } .entity-link-result strong { font-size: 14px; } .entity-link-result small { color: var(--muted); line-height: 1.35; } .entity-link-preview { border-top: 1px solid var(--line); padding-top: 14px; color: var(--ink); line-height: 1.45; } .entity-link-preview.hidden { display: none; } .drawer-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--line); } .modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(23, 23, 39, 0.58); backdrop-filter: blur(6px); padding: 24px; } .modal-backdrop.hidden { display: none; } .modal-card { width: min(520px, 100%); border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 30px 70px rgba(16, 24, 40, 0.28); overflow: hidden; } .activity-history-modal { width: min(640px, 100%); } .map-search-modal { width: min(440px, 100%); } .map-search-field { display: grid; gap: 7px; } .map-search-field span { color: var(--muted); font-size: 12px; font-weight: 700; } .map-search-field input { height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 11px; color: var(--ink); } .activity-history-list { max-height: min(62vh, 620px); overflow-y: auto; padding: 8px 20px 20px; } .activity-history-empty { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; } .activity-history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .activity-history-item:last-child { border-bottom: 0; } .activity-history-item p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.4; } .activity-history-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; } .activity-history-item .button { white-space: nowrap; } @media (max-width: 720px) { .activity-history-item { grid-template-columns: 1fr; } } .modal-header { display: flex; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); } .modal-body { display: grid; gap: 14px; padding: 20px; } .delete-summary { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.45; } .delete-impact { display: grid; gap: 6px; border: 1px solid #fecaca; border-radius: 8px; background: #fff7f7; padding: 12px; color: #7a271a; font-size: 13px; line-height: 1.4; } .delete-confirm-field { display: grid; gap: 7px; } .delete-confirm-field span { color: var(--muted); font-size: 12px; font-weight: 700; } .delete-confirm-field input { height: 38px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; color: var(--ink); } .rename-field { display: grid; gap: 7px; } .rename-field span { color: var(--muted); font-size: 12px; font-weight: 700; } .rename-field input { height: 38px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 10px; color: var(--ink); } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: #f8fafc; } /* Abaixo de 1100px o menu vira rail automaticamente. O estado é aplicado por classe no (ver applySidebarState em script.js, que espelha esta media query via matchMedia) — aqui fica só o fallback de largura, para o caso de a media query casar antes de o JS rodar. Nada de `display:none` em container de conteúdo: era isso que esvaziava o menu em vez de recolhê-lo. */ @media (max-width: 1100px) { body:not(.sidebar-overlay) { --sidebar-w: var(--sidebar-collapsed); } .detail-panel.open { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 92vw); z-index: 20; box-shadow: var(--shadow); } } @media (max-height: 820px) { .emotion-scale { display: none; } .emotion-chart { height: 120px; } .emotion-chart svg { height: 104px; } }