/* Componentes Lead Studio. Paleta exclusivamente por --ls-*. */
* { box-sizing: border-box; }
/* O tokens.css da biblioteca abre em :root { color-scheme: dark }: este :root, carregado depois, vence no empate.
   O fundo mora no body, que veste a pele: sem fundo no html, o do body pinta a tela inteira. */
:root { color-scheme: light; }
body { margin: 0; background: var(--ls-ground); color: var(--ls-text); font: var(--ls-size-ui)/var(--ls-leading-normal) var(--ls-font-ui); }
button,input,textarea,select { font: inherit; color: inherit; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color: transparent; }
button,a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button:disabled { cursor: default; opacity: .5; }
button,input,textarea,select { border-radius: var(--ls-radius-sm); }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--ls-focus-ring); }
::selection { background: var(--ls-surface-2); color: var(--ls-black); }
* { scrollbar-width: thin; scrollbar-color: var(--ls-text-3) var(--ls-ground); }
[hidden] { display: none !important; }
h1,h2,h3,p { margin: 0; }
h1 { font: 600 var(--ls-size-h2)/var(--ls-leading-snug) var(--ls-font-display); letter-spacing: var(--ls-tracking-heading); }
h2 { font-size: var(--ls-size-h3); font-weight: 600; line-height: var(--ls-leading-snug); }
h3,.ls-section-label { font-size: var(--ls-size-small); font-weight: 600; color: var(--ls-text-3); }
svg.ls-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 16px; }
/* Na lateral, o ícone é de 18px (desenho honey, ciclo 2); no resto do app continua 16px. */
.ls-lateral svg.ls-i { width: 18px; height: 18px; flex-basis: 18px; }
.ls-app { display: grid; grid-template-columns: var(--ls-sidebar) minmax(0,1fr); min-height: 100dvh; }
.ls-lateral { position: sticky; top: 0; height: 100dvh; padding: var(--ls-space-lg) var(--ls-space-md); background: var(--ls-side-bg); color: var(--ls-side-text); display: flex; flex-direction: column; }
/* (b) A marca na lateral não tem fundo: com fundo ela disputa com o item ativo. O símbolo é ouro; o nome lê na cor da
   lateral (ouro sobre o papel daria 1,8:1) e o "admin", quando vier, em cinza. */
.ls-brand { display: flex; align-items: center; gap: var(--ls-space-sm); height: var(--ls-control); margin: 0 var(--ls-space-sm) var(--ls-space-3xl); color: var(--ls-side-text); font: 600 16px/1 var(--ls-font-display); letter-spacing: var(--ls-tracking-heading); }
.ls-brand svg { width: 22px; height: 22px; color: var(--ls-brand); }
.ls-brand small { color: var(--ls-side-muted); font: var(--ls-weight-regular) var(--ls-size-label)/1 var(--ls-font-ui); letter-spacing: 0; text-transform: lowercase; }
/* G3 sem fundo: o cartão na tinta da lateral (preto na clara, papel na tinta), o ouro é o currentColor acima. */
.ls-brand .ls-g3-cartao { fill: var(--ls-side-text); }
.ls-lateral nav { display: grid; gap: var(--ls-item-gap); }
.ls-nav-group { display: grid; gap: var(--ls-item-gap); }
.ls-nav-label { height: 24px; display: flex; align-items: center; justify-content: space-between; padding-left: var(--ls-space-sm); margin: 12px 0 0; }
.ls-nav-label h2 { font: 600 var(--ls-size-small)/1 var(--ls-font-ui); color: var(--ls-side-muted); }
.ls-nav-item { display: flex; align-items: center; gap: var(--ls-space-xs); height: 32px; min-height: 32px; font-size: var(--ls-size-ui); padding: 0 var(--ls-space-sm); border-radius: var(--ls-radius-sm); white-space: nowrap; }
.ls-nav-item[aria-current="page"] { position: relative; background: var(--ls-side-active); color: var(--ls-side-selected); text-decoration: none; }
.ls-nav-item[aria-current="page"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ls-brand); border-radius: var(--ls-radius-sm) 0 0 var(--ls-radius-sm); }
.ls-nav-item:hover { background: var(--ls-side-hover); text-decoration: none; }
.ls-nav-item[aria-current="page"] { background: var(--ls-side-active); color: var(--ls-side-selected); font-weight: 600; }
.ls-nav-child { margin-left: var(--ls-space-lg); font-size: var(--ls-size-label); }
.ls-count { font-size: var(--ls-size-small); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ls-side-muted); }
/* Monograma da empresa: a cor dela é o fundo da pastilha (currentColor, que o style do markup já traz ajustada para 4,5:1 contra a lateral)
   e a letra é o chão da lateral (text-fill, sem mexer no color). Assim a letra fica com 4,5:1 nas duas cascas, sem JS. 16px como os ícones. */
.ls-front-glyph { color: var(--ls-front-a); background: currentColor; -webkit-text-fill-color: var(--ls-side-bg); border-radius: var(--ls-radius-xs); flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 16px; block-size: 16px; font-size: var(--ls-size-mini); font-weight: 600; line-height: 1; }
.ls-front-glyph-b { color: var(--ls-front-b); }
/* Monograma da empresa no topo da lateral: o style traz a cor crua da empresa no fundo; a letra é sempre clara (--ls-on-front)
   e o fio --ls-hair separa a pastilha do preto da casca tinta quando a cor da empresa é escura. 30px como o logo. */
.ls-empresa-mono { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 30px; block-size: 30px; border: var(--ls-hairline) solid var(--ls-hair); border-radius: var(--ls-radius-sm); color: var(--ls-on-front); font-family: var(--ls-font-display); font-size: var(--ls-size-body); font-weight: 600; line-height: 1; }
/* Bloco da empresa no topo da lateral (Tarefa 2): pastilha, nome em 600 e o botão discreto de trocar. Cabe na gaveta de 720. */
.ls-empresa { display: flex; align-items: center; gap: 10px; margin: 0 4px 16px; min-height: var(--ls-control); position: relative; }
.ls-empresa strong { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-empresa-logo { flex: none; inline-size: 30px; block-size: 30px; border-radius: var(--ls-radius-sm); object-fit: contain; }
/* Letra escura sobre cor clara (luminância > 0,5): o shell põe a classe. */
.ls-empresa-mono-escuro { color: var(--jb-text); }
.ls-empresa-troca { margin-left: auto; flex-shrink: 0; }
.ls-empresa-troca > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; min-height: var(--ls-control); color: var(--ls-side-text); cursor: pointer; }
.ls-empresa-troca > summary::-webkit-details-marker { display: none; }
.ls-empresa-troca > summary:hover { background: var(--ls-side-hover); }
.ls-empresa-troca > summary:focus-visible { box-shadow: var(--ls-side-focus-ring); }
/* O menu é papel nas duas cascas (flutuante da pele, sombra do material): texto da casa, nunca a tinta da lateral. */
.ls-empresa-menu { position: absolute; inset: 100% 0 auto; z-index: 30; display: grid; gap: var(--ls-item-gap); margin-top: var(--ls-space-xs); padding: var(--ls-space-xs); background: var(--jb-floating); border: var(--ls-hairline) solid var(--ls-hair); border-radius: var(--ls-radius-sm); box-shadow: var(--ls-shadow-floating); }
.ls-empresa-menu form { margin: 0; }
.ls-empresa-opcao { display: flex; align-items: center; gap: var(--ls-space-sm); width: 100%; height: 32px; padding: 0 var(--ls-space-sm); border: 0; background: none; font: inherit; color: var(--ls-text); text-align: left; border-radius: var(--ls-radius-sm); cursor: pointer; }
.ls-empresa-opcao > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-empresa-opcao:hover { background: var(--ls-surface-2); }
.ls-empresa-opcao:focus-visible { box-shadow: var(--ls-focus-ring); }
/* A empresa atual leva o wash de ouro de papel: o menu é papel nas duas cascas, e o --ls-brand-wash da tinta é escuro. */
.ls-empresa-opcao[aria-current="true"] { font-weight: 600; background: var(--ls-brand-wash-paper); }
.ls-empresa-opcao .ls-empresa-mono, .ls-empresa-opcao .ls-empresa-logo { inline-size: 20px; block-size: 20px; font-size: var(--ls-size-label); }
.ls-front-glyph-neutro { color: var(--ls-side-text); }
.ls-lateral-foot { margin-top: auto; padding-top: var(--ls-space-3xl); }
.ls-lateral-foot button { color: var(--ls-side-text); width: 100%; justify-content: flex-start; }
.ls-lateral-foot a { color: var(--ls-side-text); width: 100%; justify-content: flex-start; }
.ls-lateral-foot a:hover,.ls-lateral-foot a:focus-visible { background: var(--ls-side-active); color: var(--ls-side-selected); }
.ls-palco { min-width: 0; }
.ls-topo { background: var(--ls-ground); height: var(--ls-top-height); padding: 0 var(--ls-space-3xl); display: flex; align-items: center; gap: var(--ls-space-md); border-bottom: var(--ls-hairline) solid var(--ls-hair); }
.ls-trilha { display: flex; align-items: center; gap: var(--ls-space-sm); color: var(--ls-text-2); font-size: var(--ls-size-label); min-width: 0; }
.ls-trilha span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-trilha-sep { flex-shrink: 0; color: var(--ls-text-3); }
.ls-trilha [aria-current="page"] { color: var(--ls-text); }
.ls-topo-end { flex-shrink: 0; margin-left: auto; color: var(--ls-text-3); font-size: var(--ls-size-small); }
.ls-mobile-only { display: none !important; }
.ls-abas { display: flex; align-self: stretch; gap: var(--ls-space-xl); margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ls-abas::-webkit-scrollbar { display: none; }
.ls-abas a { flex-shrink: 0; }
.ls-topo:has(.ls-abas) .ls-trilha { max-width: 32%; flex-shrink: 0; }
.ls-abas a { display: flex; align-items: center; height: 100%; min-height: var(--ls-touch); color: var(--ls-text-2); white-space: nowrap; border-bottom: 2px solid transparent; }
.ls-abas a[aria-current="page"] { color: var(--ls-black); border-color: var(--ls-black); font-weight: 600; }
.ls-conteudo { max-width: 1280px; margin: auto; padding: var(--ls-space-3xl); }
.ls-page-head { display: flex; align-items: start; justify-content: space-between; gap: var(--ls-space-lg); margin-bottom: var(--ls-space-2xl); }
.ls-sub { color: var(--ls-text-2); margin-top: var(--ls-space-xs); max-width: var(--ls-prose); }
.ls-muted { color: var(--ls-text-3); }
.ls-num { font-variant-numeric: tabular-nums; font-weight: 400; color: var(--ls-text-2); }
.ls-zero { color: var(--ls-text-3); }
.ls-btn { min-height: var(--ls-control); padding: 0 var(--ls-space-md); border: var(--ls-hairline) solid var(--ls-hair); background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--ls-space-sm); line-height: var(--ls-leading-snug); font-weight: 500; border-radius: var(--ls-radius-sm); white-space: nowrap; transition: background var(--ls-instant) var(--ls-ease); }
.ls-btn:hover { background: var(--ls-surface-2); text-decoration: none; }
.ls-pri { color: var(--ls-on-action); background: var(--ls-action); border-color: transparent; }
.ls-pri:hover { background: var(--ls-action-hover); }
.ls-ghost { border-color: transparent; color: var(--ls-text-2); }
.ls-i-btn { width: var(--ls-control); padding: 0; }
.ls-link { min-height: var(--ls-control); display: inline-flex; align-items: center; color: var(--ls-text-2); text-decoration: underline; text-underline-offset: 3px; border: 0; padding: 0; background: transparent; }
.ls-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ls-space-sm); }
.ls-section + .ls-section,.ls-empty + .ls-section { margin-top: var(--ls-section-gap); }
.ls-section > h3,.ls-section > .ls-section-label { margin-bottom: var(--ls-label-gap); }
.ls-cell { padding: var(--ls-space-xl); border-radius: var(--ls-radius-md); background: var(--ls-cell); }
.ls-stack { display: grid; gap: var(--ls-space-md); }
.ls-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ls-space-md); }
.ls-badge { display: inline-flex; align-items: center; gap: var(--ls-space-xs); font-size: var(--ls-size-small); border-radius: var(--ls-radius-xs); padding: var(--ls-space-3xs) var(--ls-space-xs); color: var(--ls-text-2); background: var(--ls-surface-2); white-space: nowrap; }
.ls-good { color: var(--ls-good); }
.ls-warn { color: var(--ls-warn); }
.ls-bad { color: var(--ls-bad); }
.ls-hot { color: var(--ls-hot); }
.ls-badge.ls-good { background: var(--ls-good-bg); }
.ls-badge.ls-bad { background: var(--ls-bad-bg); }
.ls-dot { width: 6px; height: 6px; border-radius: var(--ls-radius-circle); background: currentColor; display: inline-block; flex: 0 0 6px; }
.ls-status { white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--ls-space-xs); font-size: var(--ls-size-small); }
.ls-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.7fr); align-items: start; gap: var(--ls-space-4xl); margin-bottom: var(--ls-space-3xl); }
.ls-hero h1 { max-width: 520px; font: var(--ls-weight-semibold) var(--ls-size-h1)/var(--ls-leading-snug) var(--ls-font-display); letter-spacing: var(--ls-tracking-heading); }
/* Ouro como texto é o escurecido (4,5:1 no papel); o --ls-brand-data fica para barra, área e traço. */
.ls-hero-number { color: var(--ls-brand-text); }
.ls-hero .ls-actions { margin-top: var(--ls-space-xl); }

.ls-waiting { display: grid; gap: var(--ls-item-gap); }
.ls-waiting > h3 { margin-bottom: var(--ls-space-2xs); }
.ls-waiting a { display: flex; align-items: center; gap: var(--ls-space-md); min-height: var(--ls-control); }
.ls-waiting a > span:last-child { margin-left: auto; color: var(--ls-text-3); font-size: var(--ls-size-small); }
.ls-captures { display: grid; gap: var(--ls-item-gap); }
.ls-capture-head,.ls-cartao { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,.6fr) minmax(0,1fr) minmax(0,.7fr) 16px; align-items: center; gap: var(--ls-space-md); padding: 0 var(--ls-space-lg); }
.ls-capture-head { font-size: var(--ls-size-small); color: var(--ls-text-3); height: var(--ls-control); }
.ls-cartao { height: var(--ls-capture-row); border-radius: var(--ls-radius-sm); background: var(--ls-cell); }
.ls-cartao:hover { background: var(--ls-surface-2); text-decoration: none; }
.ls-cartao strong { display: block; font-size: var(--ls-size-lead); font-weight: 500; line-height: var(--ls-leading-snug); }
.ls-cartao small { color: var(--ls-text-3); font-size: var(--ls-size-small); }
.ls-cartao .ls-num { text-align: center; }
.ls-capture-head > span:nth-child(n+2):nth-child(-n+4) { text-align: center; }
.ls-empty { padding: var(--ls-space-2xl); display: flex; align-items: start; gap: var(--ls-space-md); color: var(--ls-text-2); background: var(--ls-cell); border-radius: var(--ls-radius-md); }
.ls-empty > svg { margin-top: var(--ls-space-2xs); }
.ls-empty .ls-link { display: inline-flex; margin-top: var(--ls-space-sm); }
.ls-footer { margin-top: var(--ls-space-3xl); color: var(--ls-text-3); font-size: var(--ls-size-small); }
.ls-inbox { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: var(--ls-space-3xl); align-items: start; }
.ls-search { position: relative; max-width: 420px; margin-bottom: var(--ls-space-xl); }
.ls-search > .ls-i { position: absolute; left: var(--ls-space-md); top: 50%; transform: translateY(-50%); pointer-events: none; }
.ls-search .ls-field { display: block; }
.ls-search input { width: 100%; padding-left: var(--ls-space-4xl) !important; }
.ls-leads { display: grid; gap: var(--ls-item-gap); }
.ls-lead { width: 100%; text-align: left; height: var(--ls-lead-row); padding: var(--ls-space-md); border: 0; border-radius: var(--ls-radius-sm); background: transparent; display: grid; align-content: center; gap: var(--ls-space-2xs); }
.ls-lead:hover,.ls-lead[aria-pressed="true"] { background: var(--ls-cell); }
.ls-lead strong { font-size: var(--ls-size-body); font-weight: 500; }
.ls-lead small { display: block; color: var(--ls-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-lead .ls-row span { font-size: var(--ls-size-small); color: var(--ls-text-3); }
.ls-ficha { background: var(--ls-cell); border-radius: var(--ls-radius-md); padding: var(--ls-space-xl); min-width: 0; }
.ls-ficha-head { margin-bottom: var(--ls-section-gap); }
.ls-reason { font-size: var(--ls-size-body); margin: var(--ls-space-sm) 0 var(--ls-space-lg); }
.ls-audio { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: var(--ls-space-md); align-items: center; }
.ls-wave { width: 100%; height: 32px; color: var(--ls-text-3); }
.ls-audio-times { grid-column: 2; display: flex; justify-content: space-between; color: var(--ls-text-3); font-size: var(--ls-size-small); }
.ls-transcript { margin-top: var(--ls-space-md); color: var(--ls-text-2); }
.ls-answer { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--ls-space-lg); padding: var(--ls-space-xs) 0; }
.ls-answer dt { color: var(--ls-text-2); }
.ls-answer dd { margin: 0; }
.ls-delivery { margin-bottom: var(--ls-space-lg); }
.ls-delivery p { margin: var(--ls-space-xs) 0; color: var(--ls-text-2); }
.ls-delivery .ls-link { display: inline-flex; }
summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--ls-space-xs); color: var(--ls-text-2); min-height: var(--ls-control); }
summary::-webkit-details-marker { display: none; }
details[open] > summary > .ls-i { transform: rotate(90deg); }
code,pre { font-family: var(--ls-mono); font-size: var(--ls-size-label); }
pre { padding: var(--ls-space-md); background: var(--ls-cell); white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--ls-radius-sm); margin: var(--ls-space-sm) 0; }
.ls-columns { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: var(--ls-space-3xl); align-items: start; }
.ls-field { display: grid; gap: var(--ls-space-xs); max-width: 420px; }
.ls-field > span,.ls-field > label { font-size: var(--ls-size-small); color: var(--ls-text-2); }
input:not([type="checkbox"]):not([type="radio"]),select,textarea { min-height: var(--ls-control); width: 100%; min-width: 0; border: var(--ls-hairline) solid var(--ls-hair); padding: var(--ls-space-2xs) var(--ls-space-sm); background: var(--ls-ground); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select { height: var(--ls-control); padding-top: 0; padding-bottom: 0; }
select { max-width: 420px; }
input::placeholder,textarea::placeholder { color: var(--ls-text-3); opacity: 1; }
textarea { resize: none; min-height: 88px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: var(--ls-size-small); color: var(--ls-text-3); font-weight: 600; margin-bottom: var(--ls-label-gap); }
.ls-form { display: grid; gap: var(--ls-section-gap); }
.ls-form-help { font-size: var(--ls-size-label); color: var(--ls-text-2); margin-top: var(--ls-space-xs); }
.ls-stage-map { display: grid; grid-template-columns: 100px minmax(0,420px); align-items: center; gap: var(--ls-space-xs) var(--ls-space-md); }
.ls-toggle { display: inline-flex; align-items: center; min-height: var(--ls-control); gap: var(--ls-space-sm); cursor: pointer; }
.ls-toggle input { appearance: none; width: 28px; height: 16px; border-radius: var(--ls-radius-pill); background: var(--ls-text-3); margin: 0; position: relative; flex: 0 0 28px; cursor: pointer; }
.ls-toggle input:checked { background: var(--ls-black); }
.ls-toggle input::before { content: ''; position: absolute; width: 12px; height: 12px; border-radius: var(--ls-radius-circle); background: var(--ls-paper); left: 2px; top: 2px; transition: transform var(--ls-state) var(--ls-ease); }
.ls-toggle input:checked::before { transform: translateX(12px); }
.ls-journey { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); margin-bottom: var(--ls-space-3xl); gap: var(--ls-space-lg); }
.ls-journey-step { position: relative; display: grid; gap: var(--ls-space-xs); align-content: start; }
.ls-journey-step::after { content: ''; position: absolute; top: 8px; left: 28px; right: 0; border-top: var(--ls-hairline) solid var(--ls-hair); }
.ls-journey-step:last-child::after { display: none; }
.ls-journey-step > small { color: var(--ls-text-3); }
.ls-quadro { border: var(--ls-hairline) solid var(--ls-hair); border-radius: var(--ls-radius-md); overflow: clip; }
.ls-table-scroll { overflow-x: auto; }
.ls-table { width: 100%; border-collapse: collapse; font-size: var(--ls-size-label); text-align: left; }
.ls-table th { height: 34px; padding: var(--ls-space-sm); font-size: var(--ls-size-mini); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-tracking-caps); background: var(--ls-surface-2); color: var(--ls-text-2); text-align: left; white-space: nowrap; }
.ls-table td { height: var(--ls-control); padding: var(--ls-space-sm); border-top: var(--ls-hairline) solid var(--ls-hair); }
.ls-table td + td,.ls-table th + th { border-left: var(--ls-hairline) solid color-mix(in srgb,var(--ls-hair) 35%,transparent); }
.ls-table tbody tr:nth-child(even) { background: color-mix(in srgb,var(--ls-text) 3%,transparent); }
.ls-table tbody tr:hover { background: var(--ls-cell); }
.ls-table .ls-num { text-align: center; }
.ls-proof { display: grid; gap: var(--ls-space-lg); margin-top: var(--ls-section-gap); }
.ls-proof-block { display: grid; gap: var(--ls-space-xs); }
.ls-proof-block h4 { margin: 0 0 var(--ls-space-2xs); font-size: var(--ls-size-ui); font-weight: 500; }
.ls-proof-block p { color: var(--ls-text-2); }
.ls-proof-block .ls-proof-fail { display: flex; align-items: start; gap: var(--ls-space-sm); color: var(--ls-bad); }
.ls-proof-fail svg { margin-top: var(--ls-space-2xs); }
.ls-savebar { position: sticky; bottom: 0; z-index: 5; background: var(--ls-paper); border-top: var(--ls-hairline) solid var(--ls-hair); padding: var(--ls-space-md) var(--ls-space-3xl); display: flex; justify-content: space-between; align-items: center; gap: var(--ls-space-md); }
.ls-savebar p { color: var(--ls-text-2); font-size: var(--ls-size-label); }
.ls-notice { display: flex; align-items: start; gap: var(--ls-space-sm); padding: var(--ls-space-md); background: var(--ls-warn-bg); color: var(--ls-warn); border-radius: var(--ls-radius-sm); }
.ls-notice svg { margin-top: var(--ls-space-2xs); }
.ls-divider-label { border-top: var(--ls-hairline) solid var(--ls-hair); padding-top: var(--ls-space-2xl); margin-top: var(--ls-space-3xl); }
.ls-wizard-steps { display: flex; flex-wrap: wrap; gap: var(--ls-space-lg); color: var(--ls-text-3); list-style: none; padding: 0; margin: 0 0 var(--ls-space-3xl); font-size: var(--ls-size-label); }
.ls-wizard-steps li[aria-current="step"] { color: var(--ls-text); font-weight: 600; }
.ls-wizard { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--ls-space-5xl); align-items: start; }
.ls-wizard-first { max-width: var(--ls-form-max); }
.ls-wizard-actions { margin-top: var(--ls-space-3xl); display: flex; justify-content: space-between; align-items: center; gap: var(--ls-space-lg); }
.ls-preview { position: sticky; top: var(--ls-space-2xl); }
.ls-preview > h3 { margin-bottom: var(--ls-label-gap); }
/* G7: altura pelo conteúdo; a proporção de celular é a mínima (o aspect-ratio cede quando o conteúdo passa dela), e o botão segue os campos. */
.ls-phone { border: var(--ls-hairline) solid var(--ls-text-3); border-radius: var(--ls-radius-xl); aspect-ratio: 9 / 16; padding: var(--ls-space-3xl) var(--ls-space-xl); background: var(--ls-paper); display: flex; flex-direction: column; gap: var(--ls-space-xl); }
.ls-phone-brand { font: 600 var(--ls-size-body)/var(--ls-leading-snug) var(--ls-font-display); }
/* O título da prévia vale em qualquer nível (h4 na hierarquia da tela), com a tipografia do h2 global de antes. */
.ls-phone :is(h2, h3, h4) { margin: 0; margin-top: var(--ls-space-xl); font-size: var(--ls-size-h3); font-weight: 600; line-height: var(--ls-leading-snug); color: var(--ls-text); }
.ls-phone p { color: var(--ls-text-2); }
.ls-phone .ls-btn { background: var(--ls-phone-cor, var(--ls-black)); color: var(--ls-paper); }
.ls-phone.ls-phone-clara .ls-btn { color: var(--ls-black); }
.ls-preview-note { margin-top: var(--ls-space-sm); color: var(--ls-text-3); font-size: var(--ls-size-small); }
.ls-logo-sample { font: 600 var(--ls-size-h3)/1 var(--ls-font-display); padding: var(--ls-space-xl) 0; }
.ls-colors { display: flex; gap: var(--ls-space-md); align-items: center; }
.ls-swatch { width: 20px; height: 20px; border-radius: var(--ls-radius-xs); background: var(--ls-black); }
.ls-suggestions { display: grid; gap: var(--ls-space-xs); margin-bottom: var(--ls-space-md); }
.ls-suggestion { min-height: var(--ls-control); display: flex; align-items: center; gap: var(--ls-space-sm); }
input[type="checkbox"],input[type="radio"] { accent-color: var(--ls-black); }
.ls-choice { display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; gap: var(--ls-space-md); padding: var(--ls-space-lg); background: var(--ls-cell); border-radius: var(--ls-radius-sm); cursor: pointer; }
.ls-choice input { margin: var(--ls-space-2xs) 0 0; }
.ls-choice strong { font-size: var(--ls-size-body); font-weight: 500; }
.ls-choice small { display: block; color: var(--ls-text-2); margin-top: var(--ls-space-2xs); }
.ls-inline-text { border: 0; background: transparent; text-align: left; padding: var(--ls-space-2xs) 0; width: 100%; display: flex; align-items: center; gap: var(--ls-space-md); min-height: var(--ls-control); }
.ls-inline-text .ls-edit-hint { margin-left: auto; font-size: var(--ls-size-small); color: var(--ls-text-3); }
/* Convite de edição: com ponteiro que paira, só aparece no hover e no foco; sem ele (toque), o lápis fica visível em repouso. */
@media (hover: hover) {
  .ls-inline-text .ls-edit-hint { opacity: 0; transition: opacity var(--ls-instant) var(--ls-ease); }
  .ls-inline-text:hover .ls-edit-hint,.ls-inline-text:focus-visible .ls-edit-hint,.ls-inline-text:focus-within .ls-edit-hint { opacity: 1; }
}
@media (hover: none) {
  .ls-inline-text .ls-edit-hint { opacity: 1; color: var(--ls-text-3); }
}
.ls-inline-editor { display: grid; gap: var(--ls-space-sm); }
.ls-questions { display: grid; gap: var(--ls-space-xs); margin-top: var(--ls-space-sm); }
.ls-question { padding: var(--ls-space-sm) var(--ls-space-md); background: var(--ls-cell); border-radius: var(--ls-radius-sm); }
.ls-option { display: grid; grid-template-columns: 6px minmax(0,1fr) 36px; align-items: center; gap: var(--ls-space-sm); min-height: var(--ls-control); }
.ls-option > span:first-child { width: 3px; height: 3px; background: var(--ls-text-3); border-radius: var(--ls-radius-circle); }
.ls-option .ls-num { text-align: center; }
.ls-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--ls-space-lg); margin-bottom: var(--ls-space-3xl); }
.ls-metric > p { font-size: var(--ls-size-small); color: var(--ls-text-3); margin-bottom: var(--ls-space-xs); }
.ls-metric > strong { font-size: var(--ls-size-h2); font-weight: 400; }
.ls-chart { height: 150px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: var(--ls-space-xl); align-items: end; margin: var(--ls-space-lg) 0; }
.ls-chart-day { height: 100%; display: flex; flex-direction: column; justify-content: end; gap: var(--ls-space-xs); text-align: center; color: var(--ls-text-2); font-size: var(--ls-size-small); }
.ls-chart-bar { height: var(--ls-bar-height); background: var(--ls-text-3); max-width: 42px; width: 100%; margin: 0 auto; }
.ls-bar { height: 4px; width: var(--ls-bar-width); background: var(--ls-text-3); margin-top: var(--ls-space-xs); }
.ls-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: var(--ls-space-sm); }
.ls-copy pre { margin-top: 0; }
.ls-origin { display: flex; align-items: center; justify-content: space-between; gap: var(--ls-space-md); }
.ls-origin span { overflow-wrap: anywhere; }
.ls-live { position: fixed; right: var(--ls-space-xl); bottom: var(--ls-space-xl); background: var(--ls-black); color: var(--ls-paper); padding: var(--ls-space-md) var(--ls-space-lg); border-radius: var(--ls-radius-sm); z-index: 40; max-width: calc(100vw - 40px); }
@media (max-width: 1100px) {
  :root { --ls-sidebar: 204px; }
  .ls-conteudo { padding: var(--ls-space-2xl); }
  .ls-topo { padding-left: var(--ls-space-2xl); padding-right: var(--ls-space-2xl); }
  .ls-topo:has(.ls-abas) .ls-topo-end { display: none; }
  .ls-columns { grid-template-columns: minmax(0,1fr) 220px; gap: var(--ls-space-xl); }
  .ls-wizard { grid-template-columns: minmax(0,1fr) 260px; gap: var(--ls-space-2xl); }
  .ls-capture-head,.ls-cartao { grid-template-columns: minmax(0,1.6fr) minmax(0,.6fr) minmax(0,.65fr) minmax(0,.6fr) minmax(0,.9fr) minmax(0,.7fr) 16px; gap: var(--ls-space-sm); padding: 0 var(--ls-space-md); }
  .ls-cartao strong { font-size: var(--ls-size-body); }
  .ls-cartao .ls-status { font-size: var(--ls-size-mini); }
  .ls-inbox { gap: var(--ls-space-xl); grid-template-columns: minmax(0,.8fr) minmax(0,1fr); }
  .ls-ficha { padding-left: var(--ls-space-xl); }
}
@media (max-width: 800px) and (min-width: 721px) {
  .ls-columns,.ls-wizard { grid-template-columns: minmax(0,1fr); }
  .ls-preview { position: static; max-width: 300px; }
}
@media (max-width: 720px) {
  :root { --ls-control: 44px; }
  .ls-app { display: block; }
  .ls-lateral { display: none; position: fixed; width: min(300px,calc(100vw - 44px)); z-index: 30; }
  html[data-menu="aberto"] .ls-lateral { display: flex; }
  .ls-mobile-only { display: inline-flex !important; }
  .ls-topo { padding: 0 var(--ls-space-lg); }
  .ls-topo-end { display: none; }
  .ls-conteudo { padding: var(--ls-space-2xl) var(--ls-space-lg); }
  .ls-abas { gap: var(--ls-space-lg); }
  .ls-topo:has(.ls-abas) { gap: var(--ls-space-sm); }
  .ls-topo:has(.ls-abas) .ls-trilha { width: 96px; flex-direction: column; align-items: start; gap: 0; font-size: var(--ls-size-mini); }
  .ls-topo:has(.ls-abas) .ls-trilha > span { max-width: 100%; }
  .ls-topo:has(.ls-abas) .ls-trilha > .ls-i { display: none; }
  .ls-abas a { padding-inline: var(--ls-space-2xs); }
  /* Abas no celular: rolagem sem barra, sem máscara; a aba ativa conserva a margem de rolagem. */
  .ls-abas { padding-inline: var(--ls-space-lg); scroll-padding-inline: var(--ls-space-lg); -webkit-mask-image: none; mask-image: none; }
  .ls-abas a[aria-current="page"] { scroll-margin-inline: var(--ls-space-lg); }
  .ls-topo > .ls-i-btn { flex-shrink: 0; }
  .ls-page-head { margin-bottom: var(--ls-space-xl); }
  .ls-page-head .ls-btn { white-space: normal; }
  .ls-hero { grid-template-columns: minmax(0,1fr); gap: var(--ls-section-gap); }

  .ls-capture-head { display: none; }
  .ls-cartao { grid-template-columns: minmax(0,1fr) auto 16px; grid-template-rows: minmax(0,1fr) minmax(0,1fr); height: 80px; gap: 0 var(--ls-space-sm); padding: var(--ls-space-sm) var(--ls-space-md); }
  .ls-capture-name { grid-column: 1 / 3; display: flex; align-items: baseline; gap: var(--ls-space-sm); min-width: 0; }
  .ls-capture-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ls-capture-name small { font-size: var(--ls-size-mini); }
  .ls-cartao > .ls-num { grid-row: 2; font-size: var(--ls-size-small); text-align: left; }
  .ls-cartao > .ls-num:nth-child(2) { grid-column: 1; }
  .ls-cartao > .ls-num:nth-child(3),.ls-cartao > .ls-num:nth-child(4),.ls-cartao > .ls-status:nth-child(5) { display: none; }
  .ls-cartao > .ls-status:nth-child(6) { grid-row: 2; grid-column: 2; }
  .ls-cartao > svg { grid-column: 3; grid-row: 1 / 3; }
  .ls-inbox,.ls-columns,.ls-wizard { grid-template-columns: minmax(0,1fr); gap: var(--ls-space-3xl); }
  .ls-ficha { display: none; padding: var(--ls-space-lg); border: 0; }
  .ls-ficha[data-open="true"] { display: block; position: fixed; inset: 0; overflow-y: auto; background: var(--ls-ground); z-index: 25; }
  .ls-back { margin-bottom: var(--ls-space-lg); }
  .ls-audio { grid-template-columns: 44px minmax(0,1fr); }
  .ls-audio .ls-btn { min-height: 44px; width: 44px; }
  .ls-journey { display: grid; grid-template-columns: minmax(0,1fr); grid-auto-flow: row; gap: 0; }
  .ls-journey-step { grid-template-columns: 16px minmax(0,1fr); gap: var(--ls-space-2xs) var(--ls-space-lg); padding-bottom: var(--ls-space-lg); }
  .ls-journey-step > .ls-i { grid-row: 1 / 3; }
  .ls-journey-step > small { grid-column: 2; }
  .ls-journey-step::after { top: 22px; bottom: 6px; left: 8px; right: auto; border-top: 0; border-left: var(--ls-hairline) solid var(--ls-hair); }
  .ls-stage-map { grid-template-columns: 86px minmax(0,1fr); }
  .ls-savebar { padding: var(--ls-space-md) var(--ls-space-lg); }
  .ls-savebar p { max-width: 180px; }
  .ls-preview { position: static; max-width: 320px; width: 100%; }
  .ls-wizard-steps { gap: var(--ls-space-sm) var(--ls-space-lg); margin-bottom: var(--ls-space-2xl); }
  .ls-wizard-steps a { min-height: 44px; display: inline-flex; align-items: center; }
  .ls-toggle,.ls-suggestion,.ls-link { min-height: 44px; }
  .ls-link { display: inline-flex; align-items: center; }
  .ls-toggle input { margin: 14px 8px; }
  .ls-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ls-space-xl); }
  .ls-chart { gap: var(--ls-space-sm); }
  .ls-answer { grid-template-columns: minmax(0,1fr); gap: var(--ls-space-2xs); }
  .ls-copy { grid-template-columns: minmax(0,1fr); }
  .ls-copy .ls-btn { justify-self: start; }
  .ls-phone .ls-btn { min-height: var(--ls-touch); }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.ls-uploaded-logo { max-width: 180px; max-height: 64px; object-fit: contain; }
.ls-mobile-meta { display: none; }
.ls-bar { --ls-bar-width: 100%; }
.ls-chart-bar { --ls-bar-height: 2px; }
.ls-chart-pair { display: flex; align-items: end; justify-content: center; gap: var(--ls-space-2xs); height: 100px; }
.ls-chart-pair .ls-chart-bar { width: 18px; margin: 0; }
.ls-chart-leads { background: var(--ls-black); }
.ls-legend { display: flex; gap: var(--ls-space-lg); color: var(--ls-text-2); font-size: var(--ls-size-small); }
.ls-legend span { display: flex; align-items: center; gap: var(--ls-space-xs); }
.ls-legend i { width: 8px; height: 8px; background: var(--ls-text-3); }
.ls-legend span:last-child i { background: var(--ls-black); }
.ls-table select { width: 100%; min-width: 140px; }
[aria-invalid="true"] { border-color: var(--ls-bad) !important; }
@media (max-width:720px) {
 .ls-cartao > .ls-num:nth-child(2) { display: none; }
 .ls-mobile-meta { display: block; grid-row: 2; grid-column: 1; color: var(--ls-text-2); font-size: var(--ls-size-mini); white-space: nowrap; font-variant-numeric: tabular-nums; }
 .ls-cartao { grid-template-columns: minmax(0,1fr) auto 16px; }
 .ls-cartao > .ls-status:nth-child(6) { font-size: var(--ls-size-mini); }
 .ls-ficha[data-open="true"] { border-radius: 0; }
}
/* O vão pertence ao contêiner, sem somar margem de seção ao grid. */
.ls-form > .ls-section + .ls-section { margin-top: 0; }
.ls-cfg .ls-section > h3 { margin-bottom: var(--ls-space-sm); }
.ls-cfg .ls-questions { margin-top: 0; }
.ls-ficha dl { margin: 0; }
.ls-delivery p.ls-bad,.ls-form-help.ls-bad { color: var(--ls-bad); }
.ls-form-help.ls-bad { display: flex; align-items: start; gap: var(--ls-space-xs); }

/* Ajustes do ciclo 3. */
.ls-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ls-waiting a > .ls-status { color: var(--ls-text); font-size: var(--ls-size-ui); }
.ls-waiting .ls-hot .ls-dot { color: var(--ls-hot); }
.ls-wizard-steps a { min-height: var(--ls-control); display: inline-flex; align-items: center; }
.ls-topo .ls-trilha { overflow: hidden; }
.ls-nav-item .ls-status { color: inherit; }
.ls-nav-item .ls-status.ls-good > .ls-dot { color: var(--ls-good); }
.ls-nav-item[aria-current="page"] { color: var(--ls-side-selected); font-weight: var(--ls-weight-semibold); }
.ls-page-head > div { min-width: 0; }
.ls-d-tabela td { height: calc(var(--ls-control) + var(--ls-space-lg) + var(--ls-hairline)); }
.ls-d-tabela .ls-field-error { margin-top: var(--ls-space-sm); }
.ls-destinos aside > .ls-notice { margin-top: var(--ls-section-gap); }
.ls-list-filters { display: grid; gap: var(--ls-space-md); padding-top: var(--ls-space-md); }
.ls-distribution { display: grid; gap: var(--ls-item-gap); }
.ls-radio { display: flex; align-items: center; gap: var(--ls-space-sm); min-height: var(--ls-control); cursor: pointer; }
.ls-radio input { flex-shrink: 0; margin: 0; }
.ls-empty + .ls-field,.ls-empty + .ls-stack { margin-top: var(--ls-section-gap); }
.ls-origin-form { align-items: end; }
.ls-table-scroll { max-width: 100%; }
.ls-performance-table { min-width: 580px; }
.ls-performance-table th:first-child { min-width: 200px; }
.ls-scroll-note { display: none; }
.ls-field textarea { overflow-wrap: anywhere; }
.ls-suggestions + .ls-field textarea { min-height: 220px; resize: vertical; }
.ls-inline-text > [data-edit-value] { min-width: 0; overflow-wrap: anywhere; }
.ls-edit-hint { flex-shrink: 0; }
.ls-preview .ls-phone :is(h2, h3, h4) { margin-top: var(--ls-space-md); }
.ls-wizard .ls-preview-note { max-width: var(--ls-narrow); }
@media (max-width:720px) {
  .ls-scroll-note { display: block; margin-top: var(--ls-space-sm); }
  .ls-d-tabela { min-width: 480px; }
  .ls-radio { min-height: var(--ls-touch); }
  .ls-wizard-steps a { min-height: var(--ls-touch); }
  .ls-capture-name { flex-wrap: wrap; column-gap: var(--ls-space-sm); row-gap: 0; }
  .ls-nav-item { min-height: var(--ls-touch); }
  .ls-inline-text .ls-edit-hint { opacity: 1; }
}

.ls-colors { flex-wrap: wrap; }
.ls-topo .ls-trilha > a { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ls-abas { position: relative; }
.ls-topo .ls-trilha > a { display: inline-flex; align-items: center; min-height: var(--ls-control); }
@media (max-width:720px) {
  .ls-topo:has(.ls-abas) .ls-trilha { height: var(--ls-touch); position: relative; justify-content: center; }
  .ls-topo:has(.ls-abas) .ls-trilha > a { min-height: 0; display: block; }
  .ls-topo:has(.ls-abas) .ls-trilha > a::after { content: ''; position: absolute; inset: 0; }
}

.ls-columns > *, .ls-wizard > * { min-width: 0; }
@media (max-width:720px) {
  .ls-abas a,.ls-link,.ls-wizard-steps a { min-width: var(--ls-touch); }
}

.ls-cfg .ls-form-help + .ls-questions { margin-top: var(--ls-label-gap); }

/* Produção: ganchos do HTML real (obra A, Tarefa 1). */
.ls-lateral :focus-visible { outline: 2px solid transparent; box-shadow: var(--ls-side-focus-ring); }
.ls-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ls-lead[aria-current="true"] { background: var(--ls-cell); }
a.ls-lead { color: inherit; }
a.ls-lead:hover { text-decoration: none; }
.ls-cartao { position: relative; }
.ls-cartao-alvo::after { content: ''; position: absolute; inset: 0; }
.ls-cartao .ls-cap-aviso a { position: relative; z-index: 1; }
.ls-cap-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ls-space-xs); font-size: var(--ls-size-small); color: var(--ls-warn); }
.ls-cap-aviso .ls-i { color: var(--ls-warn); }
.ls-answer dd.ls-fone { white-space: nowrap; }
.ls-sem-audio { display: flex; align-items: center; gap: var(--ls-space-xs); color: var(--ls-text-3); font-size: var(--ls-size-small); }
.ls-metrics { align-items: start; }
.ls-metric > p:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-metric > strong { display: block; }
/* Conexões: o estado da frente é frase longa (motivo e data); dentro da célula a linha quebra e o estado encolhe. */
.ls-cell .ls-row { flex-wrap: wrap; }
.ls-cell .ls-row > .ls-status { white-space: normal; flex-shrink: 1; min-width: 0; }
/* Conexões, leva 3: o cartão na medida da prancha; a ordem dos títulos é h1, h2 (rótulo da seção), h3 (a frente, no corpo de título). */
.ls-conn-cartao { max-width: 37.5rem; }
.ls-conn-nome { font-size: var(--ls-size-h3); font-weight: 600; line-height: var(--ls-leading-snug); color: var(--ls-text); }
/* Testar e Trocar lado a lado; aberto, o Trocar desce inteiro para a linha de baixo com o formulário. */
.ls-conn-acoes { display: flex; flex-wrap: wrap; align-items: start; gap: var(--ls-space-sm); }
.ls-conn-acoes > details[open] { flex-basis: 100%; }
.ls-conn-acoes > details[open] > form { margin-top: var(--ls-space-md); }
/* O campo da chave e o Salvar na mesma linha quando cabe. */
.ls-conn-campo { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ls-space-sm); }
.ls-conn-campo > .ls-field { flex: 1 1 16rem; }
/* Desempenho, 30 dias: 30 colunas iguais, barras finas e retas; o rótulo sai a cada cinco dias (o HTML deixa os outros vazios, com a mesma altura). */
.ls-chart.ls-chart-30 { grid-template-columns: repeat(30, minmax(0, 1fr)); gap: var(--ls-space-2xs); }
.ls-chart-30 .ls-chart-pair { gap: 1px; }
.ls-chart-30 .ls-chart-pair .ls-chart-bar { width: auto; flex: 1 1 0; max-width: 8px; }
.ls-chart-30 .ls-chart-day > span { display: block; height: var(--ls-space-lg); line-height: var(--ls-space-lg); font-size: var(--ls-size-mini); white-space: nowrap; }
@media (max-width: 720px) {
  .ls-chart.ls-chart-30 { overflow-x: auto; overscroll-behavior-x: contain; grid-template-columns: repeat(30, minmax(16px, 1fr)); }
}
/* Período ativo (7 ou 30 dias): superfície e tinta, sem acento de marca. */
.ls-actions .ls-btn[aria-current="true"] { background: var(--ls-surface-2); color: var(--ls-text); font-weight: var(--ls-weight-semibold); }
/* Configuração: estados que o config.ts e o app.js põem e tiram. */
@keyframes ls-acende {
  0%, 60% { background: var(--ls-surface-2); }
  100% { background: transparent; }
}
@keyframes ls-acende-parado {
  from { background: var(--ls-surface-2); }
  to { background: transparent; }
}
.ls-acende { animation: ls-acende 2s var(--ls-ease) both; }
@media (prefers-reduced-motion: reduce) {
  .ls-acende { animation: ls-acende-parado 2s step-end forwards !important; }
}
.ls-campo { border-radius: var(--ls-radius-sm); }
.ls-campo[data-caminho] .ls-inline-text { cursor: text; }
.ls-ed textarea { min-height: var(--ls-control); resize: vertical; }
.ls-editando .ls-actions { justify-content: flex-end; align-items: center; gap: var(--ls-space-sm); }
.ls-editando .ls-conta-ch { margin-right: auto; }
.ls-ed kbd,.ls-vend-ed kbd { margin-left: var(--ls-space-2xs); font: inherit; font-size: var(--ls-size-mini); color: var(--ls-text-3); }
.ls-ed textarea:focus-visible,.ls-vend-ed input:focus-visible { outline: 2px solid transparent; box-shadow: var(--ls-focus-ring); border-color: transparent; }
.ls-vend > td { vertical-align: middle; }
.ls-vend a { color: inherit; }
.ls-vend-ed .ls-actions { align-items: end; flex-wrap: wrap; gap: var(--ls-space-sm); }
.ls-vend.ls-pausado > td,.ls-vend.ls-pausado a { color: var(--ls-text-3); text-decoration: none; }
.ls-dot.ls-amostra { width: 14px; height: 14px; flex: 0 0 14px; border-radius: var(--ls-radius-xs); border: var(--ls-hairline) solid var(--ls-hair); vertical-align: middle; }
/* Configuração: o número da pergunta mora fora do .ls-campo (o app.js esvazia o campo ao abrir), na mesma linha. */
.ls-q-cab { display: flex; align-items: first baseline; gap: var(--ls-space-sm); }
.ls-q-n { flex-shrink: 0; min-width: 0; text-align: left; color: var(--ls-text-3); font-variant-numeric: tabular-nums; }
.ls-q-cab > .ls-campo { flex: 1 1 0; min-width: 0; }
.ls-q-cab:has(> .ls-editando) { align-items: start; }
.ls-q-cab:has(> .ls-editando) > .ls-q-n { padding-top: calc(var(--ls-space-2xs) + var(--ls-hairline)); }
/* Configuração, leva 3: o estado junto das ações, à direita do título; no celular, estado, Pausar e Duplicar numa linha só. */
.ls-cfg-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ls-space-md); }
/* G7: acima de 1100px o topo da casca já diz o estado; o do cabeçalho repetiria. Abaixo, o topo o esconde e ele fica aqui. */
@media (min-width: 1101px) {
  .ls-cfg-estado > .ls-status { display: none; }
}
@media (max-width: 720px) {
  .ls-cfg-estado { flex-basis: 100%; justify-content: space-between; }
  .ls-cfg-estado > .ls-actions { flex-wrap: nowrap; }
}
/* Caixa: a faixa do Desfazer (o toast fixo do desenho) com ícone, texto e botão em linha, o botão à direita. */
.ls-live { display: flex; align-items: center; gap: var(--ls-space-sm); }
.ls-live .ls-link { margin-inline-start: auto; color: inherit; text-decoration: underline; }
.ls-live :focus-visible { outline: 2px solid transparent; box-shadow: var(--ls-focus-ring); }
/* Ficha: item que falta na resposta. */
.ls-falta { color: var(--ls-text-3); }
/* Caixa: alternância ativa e as faixas (a intensidade diz a distância: marca, aviso, text-3, anel vazio). */
.ls-btn.ls-ghost[aria-current="true"] { background: var(--ls-surface-2); color: var(--ls-text); font-weight: var(--ls-weight-semibold); }
.ls-ponto { width: 6px; height: 6px; border-radius: var(--ls-radius-circle); background: currentColor; display: inline-block; flex: 0 0 6px; }
.ls-faixa { display: inline-flex; align-items: center; gap: var(--ls-space-xs); }
.ls-warm { color: var(--ls-warn); }
.ls-cold { color: var(--ls-text-3); }
.ls-vazio { color: var(--ls-text-3); }
.ls-vazio .ls-dot,.ls-ponto.ls-vazio { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.ls-faixa:has(> .ls-hot) { color: var(--ls-hot); }
.ls-faixa:has(> .ls-warm) { color: var(--ls-warn); }
.ls-faixa:has(> .ls-cold),.ls-faixa:has(> .ls-vazio) { color: var(--ls-text-3); }
/* Conexões: summary com cara de botão ("Trocar chave") na tinta do botão comum, não no text-2 do summary. */
summary.ls-btn { display: inline-flex; color: var(--ls-text); cursor: pointer; list-style: none; }
summary.ls-btn::-webkit-details-marker { display: none; }
summary.ls-btn:hover { background: var(--ls-surface-2); text-decoration: none; }
/* Desempenho: a escala escrita acima do gráfico; o topo tracejado do gráfico é esse valor. */
.ls-chart-scale { margin-top: var(--ls-space-lg); font-size: var(--ls-size-mini); color: var(--ls-text-3); font-variant-numeric: tabular-nums; text-align: left; }
.ls-chart-scale + .ls-chart { margin-top: var(--ls-space-xs); border-top: var(--ls-hairline) dashed var(--ls-hair); }
/* Tabela: o th de linha (scope="row") com cara de célula, não de cabeçalho. */
.ls-table tbody th { height: var(--ls-control); padding: var(--ls-space-sm); border-top: var(--ls-hairline) solid var(--ls-hair); background: transparent; font-size: inherit; font-weight: var(--ls-weight-regular); text-align: left; text-transform: none; letter-spacing: normal; color: var(--ls-text); white-space: normal; }
.ls-table tbody th + td { border-left: var(--ls-hairline) solid color-mix(in srgb,var(--ls-hair) 35%,transparent); }
/* Ficha: a lista de Entregas e as listas de Destinos sem marcador nem recuo do navegador. */
#entregas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ls-space-md); }
#entregas > .ls-delivery { margin-bottom: 0; }
ul.ls-destination-proof,ol.ls-destination-proof,.ls-destination-proof ul,.ls-destination-proof ol,.ls-destination-fields ul { list-style: none; padding: 0; margin: 0; }
/* Onda do player: o tocado em tinta, o por tocar em text-3 (o corte do app.js mostra o progresso). */
.ls-onda .ls-feito { color: var(--ls-text); fill: var(--ls-text); }
.ls-onda .ls-resto { color: var(--ls-text-3); fill: var(--ls-text-3); }
/* Selo "tenta de novo": tinta e fundo de aviso (enviada e desistiu já têm os deles; na fila é o .ls-badge neutro). */
.ls-badge.ls-warn { background: var(--ls-warn-bg); }
.ls-c-indice { display: flex; flex-wrap: wrap; gap: var(--ls-space-lg); margin-bottom: var(--ls-section-gap); }
.ls-c-indice a { color: var(--ls-text-2); min-height: var(--ls-control); display: inline-flex; align-items: center; }
.ls-c-indice a[aria-current="true"] { color: var(--ls-text); font-weight: var(--ls-weight-semibold); }
.ls-conta-ch { font-size: var(--ls-size-small); color: var(--ls-text-3); font-variant-numeric: tabular-nums; }
.ls-conta-ch.ls-passou { color: var(--ls-bad); }
.ls-c-msg { font-size: var(--ls-size-label); color: var(--ls-text-2); }
.ls-c-msg.ls-erro { display: flex; align-items: start; gap: var(--ls-space-xs); color: var(--ls-bad); }
.ls-tok { font-family: var(--ls-mono); font-size: var(--ls-size-label); }
.ls-preview iframe { display: block; width: 100%; min-height: 560px; border: var(--ls-hairline) solid var(--ls-hair); border-radius: var(--ls-radius-xl); background: var(--ls-paper); }
.ls-entregas-highlight { background: var(--ls-surface-2); transition: background var(--ls-state) var(--ls-ease); }
[data-aceso] { background: var(--ls-surface-2); }
#ls-player.ls-tocando .ls-wave { color: var(--ls-text); }
.ls-veu { display: none; border: 0; padding: 0; appearance: none; -webkit-appearance: none; }
.ls-preview > .ls-link { display: none; }
@media (max-width: 1100px) {
  .ls-preview iframe { display: none; }
  .ls-preview > .ls-link { display: inline-flex; }
}
@media (max-width: 720px) {
  .ls-lateral:target { display: flex; }
  html[data-menu="aberto"] .ls-veu, .ls-lateral:target ~ .ls-veu { display: block; position: fixed; inset: 0; z-index: 29; background: color-mix(in srgb, var(--ls-black) 40%, transparent); }
  body.ls-ficha-aberta { overflow: hidden; }
}

/* Conferência visual do construído (ui-review contra as pranchas). */
.ls-nav-item .ls-status { font-size: inherit; }
.ls-lead small { display: flex; align-items: center; gap: var(--ls-space-2xs); min-width: 0; }
.ls-metric p > span:has(> svg) { display: inline-flex; align-items: baseline; gap: var(--ls-space-2xs); }
.ls-metric p > span > svg { align-self: center; }
.ls-lead small > svg,.ls-metric p > span > svg { flex-shrink: 0; }
.ls-audio-times { align-items: baseline; }
.ls-performance-table tbody tr:nth-child(even) { background: transparent; }
.ls-performance-table td + td,.ls-performance-table th + th,.ls-performance-table tbody th + td { border-left: 0; }
.ls-table thead th { text-transform: none; letter-spacing: normal; }
.ls-cfg-miolo > .ls-form-help + .ls-section { margin-top: var(--ls-section-gap); }
.ls-ed textarea[rows="1"] { resize: none; }
@media (max-width: 720px) {
  .ls-ficha-head > .ls-row { flex-wrap: wrap; }
  .ls-ficha-head > .ls-row > h2 { flex-basis: 100%; }
  .ls-ficha-head .ls-actions { flex-wrap: nowrap; }
  .ls-ficha-head .ls-i-btn { min-width: var(--ls-touch); min-height: var(--ls-touch); }
  .ls-page-head { flex-wrap: wrap; }
  .ls-page-head > .ls-actions { flex-basis: 100%; }
  .ls-c-indice { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ls-c-indice::-webkit-scrollbar { display: none; }
  .ls-c-indice a { flex-shrink: 0; }
}

/* Conferência visual, leva 1: resumo do lead com reticências; o agrupar num segmento, ao lado do Exportar (vão sm do .ls-actions). */
.ls-lead small .ls-resumo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-segmento { display: inline-flex; align-items: center; gap: var(--ls-space-2xs); }
/* Caixa, leva 3: a dobra (Chamados) vem depois do aviso oculto da busca, então o vão de seção não vinha do .ls-section + .ls-section. */
.ls-lista > [data-search-empty] + .ls-section { margin-top: var(--ls-section-gap); }
/* Dobra da Caixa ("Chamados · n"): a seta no meio da linha do rótulo, não na linha de base. */
.ls-section > h3 > a { display: inline-flex; align-items: center; gap: var(--ls-space-2xs); }
/* O aviso e o ponto da faixa ocupam o mesmo espaço fixo: o resumo começa na mesma coluna em toda linha. */
.ls-lead small > .ls-warn,.ls-lead small > .ls-status { flex: 0 0 var(--ls-space-lg); inline-size: var(--ls-space-lg); display: inline-flex; align-items: center; }
/* O nome da ficha recebe foco por script ao abrir (tabindex -1, fora da ordem do Tab): não desenha contorno. Os controles seguem com o anel. */
.ls-ficha [tabindex="-1"]:focus { outline: none; }
/* Desligado: "Ligue em Destinos" é link de verdade, sublinhado como o Reenviar. */
.ls-delivery > p > a { color: inherit; text-decoration: underline; text-underline-offset: var(--ls-space-3xs); }

/* Nova captura e Instalar: o passo atual na linha dos links; a origem nova acende; a confirmação respira do texto. */
.ls-wizard-steps span { min-height: var(--ls-control); display: inline-flex; align-items: center; }
.ls-wizard-steps .ls-passo-nome { min-height: 0; }
/* Uma coluna, uma largura: campos, opções, logo e ações terminam na mesma borda, em todos os passos; a prévia fica à direita. */
.ls-wizard,.ls-wizard-first { --ls-form-max: var(--ls-prose); }
.ls-wizard > .ls-form { max-width: var(--ls-form-max); width: 100%; }
:is(.ls-wizard,.ls-wizard-first) .ls-form :is(.ls-field, select) { max-width: none; }
:is(.ls-wizard,.ls-wizard-first) .ls-form .ls-wizard-actions { margin-top: var(--ls-space-md); }
/* Passo 1: o apoio cola no endereço, "Não tenho página" vem logo abaixo dele (no HTML fica depois do Ler a página, pelo Enter),
   e o nome da frente nova só aparece com "Nova frente" escolhida. */
.ls-passo-1 > .ls-field + .ls-form-help { margin-top: calc(-1 * var(--ls-space-md)); }
.ls-passo-1 > .ls-wizard-actions { order: 1; }
.ls-passo-1 > .ls-sem-pagina { justify-self: start; margin-top: calc(-1 * var(--ls-space-md)); }
.ls-passo-1:has(#n-frente option[value="nova"]:not(:checked)) > label[for="n-frente-nome"] { display: none; }
/* Passo 2: o quadrado da cor dentro do campo, à esquerda. */
.ls-cor-campo { position: relative; display: block; }
.ls-cor-campo .ls-swatch { position: absolute; left: var(--ls-space-sm); top: 50%; translate: 0 -50%; width: var(--ls-space-lg); height: var(--ls-space-lg); box-shadow: inset 0 0 0 var(--ls-hairline) var(--ls-hair); pointer-events: none; }
.ls-cor-campo > input:not([type="checkbox"]):not([type="radio"]) { width: 100%; padding-left: calc(2 * var(--ls-space-sm) + var(--ls-space-lg)); }
/* Prévia sem marca ainda: o esqueleto neutro no lugar do nome. */
.ls-phone-osso { display: block; width: 40%; height: var(--ls-space-md); border-radius: var(--ls-radius-xs); background: var(--ls-cell); }
/* Passo 5: nome e selo na mesma linha; frente e tipo embaixo; o resumo do que será publicado. */
.ls-nova-resumo h2 { font-size: var(--ls-size-h3); }
.ls-nova-resumo > p { margin-top: var(--ls-space-xs); color: var(--ls-text-2); }
.ls-origin[data-aceso] { background: var(--ls-cell); padding: var(--ls-space-xs) var(--ls-space-sm); margin: calc(-1 * var(--ls-space-xs)) calc(-1 * var(--ls-space-sm)); border-radius: var(--ls-radius-sm); transition: background var(--ls-state) var(--ls-ease); }
.ls-notice .ls-actions { margin-top: var(--ls-space-sm); }
/* Instalar: caixas e campo terminam na mesma borda; Copiar, Remover e Adicionar numa coluna fixa, da mesma largura. O trecho
   quebra entre atributos; no meio de um, só quando ele sozinho não cabe na linha. */
.ls-instalar { --ls-copy-col: calc(var(--ls-space-8xl) + var(--ls-space-3xl)); }
.ls-instalar .ls-copy { grid-template-columns: minmax(0,1fr) var(--ls-copy-col); }
.ls-instalar .ls-copy pre { overflow-wrap: break-word; }
.ls-instalar .ls-copy .ls-attr { display: inline-block; max-width: 100%; }
.ls-instalar :is(.ls-copy, .ls-origin, .ls-origin-form) .ls-btn { width: var(--ls-copy-col); justify-content: center; }
.ls-instalar .ls-origin-form { display: grid; grid-template-columns: minmax(0,1fr) var(--ls-copy-col); gap: var(--ls-space-sm); }
.ls-instalar .ls-origin-form .ls-field { max-width: none; }
@media (max-width: 720px) {
  .ls-wizard-steps a,.ls-wizard-steps span { min-height: var(--ls-touch); }
  .ls-instalar .ls-copy { grid-template-columns: minmax(0,1fr); }
  .ls-instalar .ls-copy .ls-btn { width: 100%; }
  /* Trilha numa linha só: os outros passos ficam no número (o nome segue para leitor de tela) e o atual inteiro, sempre à vista. */
  .ls-wizard-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--ls-space-2xs); }
  .ls-wizard-steps::-webkit-scrollbar { display: none; }
  .ls-wizard-steps li { flex-shrink: 0; }
  .ls-wizard-steps li:not([aria-current]) :is(a, span:not(.ls-passo-nome)) { min-width: var(--ls-touch); justify-content: center; }
  /* G7: o número dos outros passos fica centrado em 44px; o atual ganha a mesma folga dos dois lados, e os vãos saem iguais. */
  .ls-wizard-steps li[aria-current] :is(a, span:not(.ls-passo-nome)) { padding-inline: calc((var(--ls-touch) - 1ch) / 2); }
  .ls-wizard-steps li:not([aria-current]) .ls-passo-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-origin[data-aceso] { transition: none; }
}

/* Destinos: o âmbar vence as regras de texto que venceriam o .ls-warn geral; falha em vinho; jornada como link; itens da prova por estado. */
.ls-form-help.ls-warn,.ls-proof-block p.ls-warn,.ls-savebar p.ls-warn { color: var(--ls-warn); }
.ls-notice.ls-bad { background: var(--ls-bad-bg); color: var(--ls-bad); }
a.ls-journey-step,a.ls-journey-step:hover { color: inherit; text-decoration: none; }
a.ls-journey-step:focus-visible { outline: 2px solid transparent; box-shadow: var(--ls-focus-ring); border-radius: var(--ls-radius-xs); }
.ls-destinos .ls-savebar { padding: var(--ls-space-md) 0; }
.ls-proof-block [data-state="ok"] { color: var(--ls-good); }
.ls-proof-block [data-state="failed"] { color: var(--ls-bad); }
.ls-proof-block [data-state="retry"] { color: var(--ls-warn); }
.ls-proof-block [data-state="unchecked"] { color: var(--ls-text-3); }
/* Destinos, leva 3 (forma). A seção fica sobre o palco: o aceso só leva à âncora, sem a lavagem cinza da regra global (que segue valendo nas outras telas). */
.ls-destinos [data-aceso] { background: none; }
/* Cabeçalho do bloco no tamanho do rótulo de seção (menor que o item), com o selo na mesma linha. */
.ls-destinos [data-destino] > header { justify-content: flex-start; gap: var(--ls-space-sm); margin-bottom: var(--ls-label-gap); }
/* Uma borda direita só: campos, lista, etapas, tags, produto e funil, prova e barra de salvar terminam na borda da coluna principal. */
.ls-destinos .ls-d-par,.ls-destinos .ls-d-lista,.ls-destinos .ls-stage-map,.ls-destinos .ls-d-tags,.ls-destinos [data-destino] .ls-field { max-width: none; }
/* G7: em tela larga, duas colunas encostadas (a principal até 560px, a lateral de 300px), sem o vão que sobrava entre elas. */
@media (min-width: 801px) {
  .ls-columns.ls-destinos { grid-template-columns: minmax(0,560px) 300px; gap: var(--ls-section-gap) var(--ls-space-5xl); justify-content: start; }
}
.ls-destinos .ls-d-par { grid-template-columns: repeat(2,minmax(0,1fr)); padding-top: 0; }
.ls-destinos .ls-d-par .ls-field,.ls-destinos .ls-d-lista select,.ls-destinos .ls-stage-map select { max-width: none; }
.ls-destinos .ls-stage-map { grid-template-columns: 100px minmax(0,1fr); }
.ls-destinos .ls-d-lista .ls-list-filters { padding-top: 0; }
.ls-destinos .ls-d-lista { padding: var(--ls-space-lg); }
.ls-destinos .ls-d-captura { margin-bottom: var(--ls-section-gap); }
.ls-destinos .ls-form { grid-template-columns: minmax(0,1fr); }
.ls-destinos [data-destino] > .ls-empty,.ls-destinos [data-destino] > .ls-notice { max-width: none; }
.ls-destinos [data-destino] > .ls-savebar { margin-top: var(--ls-section-gap); }
.ls-destinos .ls-d-captura-form { display: grid; gap: var(--ls-space-md); }
.ls-destinos .ls-d-captura-form .ls-actions { flex-wrap: nowrap; }
.ls-destinos .ls-d-captura-form .ls-actions .ls-form-help { margin-top: 0; }
.ls-destinos .ls-btn.ls-ghost { padding-left: 0; padding-right: 0; }
.ls-destinos .ls-btn.ls-ghost:hover { color: var(--ls-text); background: none; }
.ls-destinos aside > .ls-d-prova-aviso { margin-top: var(--ls-section-gap); }
/* G7: o resumo da última prova abre a lateral; o aviso da recusa vem logo abaixo da contagem e da data. */
.ls-d-prova-resumo > header { justify-content: flex-start; gap: var(--ls-space-sm); margin-bottom: var(--ls-label-gap); }
.ls-d-prova-resumo > .ls-form-help { margin-top: 0; }
.ls-d-prova-resumo time { white-space: nowrap; }
.ls-d-prova-resumo > .ls-d-prova-aviso { margin-top: var(--ls-space-md); }
.ls-d-prova-aviso ul { list-style: none; padding: 0; margin: var(--ls-space-xs) 0 0; display: grid; gap: var(--ls-space-2xs); color: var(--ls-text); }
@media (max-width:720px) {
  .ls-destinos .ls-savebar { flex-wrap: wrap; row-gap: var(--ls-space-sm); }
  .ls-destinos .ls-savebar p { flex-basis: 100%; max-width: none; }
  .ls-destinos .ls-savebar .ls-actions { flex-wrap: nowrap; width: 100%; }
  .ls-destinos .ls-savebar .ls-btn { flex: 1 1 0; min-height: var(--ls-touch); }
  .ls-destinos .ls-d-captura-form .ls-actions { flex-wrap: wrap; }
  .ls-destinos .ls-btn { min-height: var(--ls-touch); }
}

/* Nova captura: foco do input escondido do logo no rótulo; "O que a IA escreveu" em uma linha por item (rótulo, e o antes riscado → o agora). */
.ls-link:focus-within { outline: 2px solid transparent; box-shadow: var(--ls-focus-ring); }
.ls-diff { display: grid; margin: 0; }
.ls-diff-item { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--ls-space-lg); align-items: baseline; padding: var(--ls-space-xs) 0; }
.ls-diff dt { color: var(--ls-text-2); }
.ls-diff dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ls-space-2xs) var(--ls-space-xs); color: var(--ls-text); min-width: 0; }
.ls-diff s { color: var(--ls-text-3); }
.ls-diff dd > svg { align-self: center; flex-shrink: 0; color: var(--ls-text-3); }
.ls-diff dd > .ls-badge { align-self: center; }
.ls-diff-novo { min-width: 0; overflow-wrap: anywhere; }
.ls-diff-sub dt { padding-left: var(--ls-space-lg); }
@media (max-width: 720px) {
  .ls-diff-item { grid-template-columns: minmax(0,1fr); gap: var(--ls-space-2xs); padding: var(--ls-space-md) 0; }
  .ls-diff-item + .ls-diff-item { border-top: var(--ls-hairline) solid var(--ls-hair); }
  .ls-diff-sub { padding-left: var(--ls-space-lg); }
  .ls-diff-sub dt { padding-left: 0; }
}

/* Início, coluna Destinos: a célula leva até dois selos (falha e sem vendedor), alinhados pela linha de base entre si. */
.ls-cap-destinos { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--ls-space-2xs); min-width: 0; }

/* A biblioteca conserva a geometria; foco da pele vence os outlines legados. */
[data-skin="honey"] :is(.jb-quadro, .escolha, .secao) :focus-visible {
  outline: 2px solid transparent; box-shadow: var(--ls-focus-ring);
}
[data-skin="honey"] .jb-quadro .jb-tabela tr:focus-visible {
  outline: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--ls-black);
}
.ls-lateral-foot :is(a,button):hover { background: var(--ls-side-hover); color: var(--ls-side-text); }
.ls-lateral .ls-nav-item[aria-current="page"] :is(.ls-count,.ls-status) { color: inherit; }

/* Botões da lateral seguem a mesma caixa e o mesmo alinhamento dos links. */
.ls-lateral-foot .ls-btn.ls-nav-item { padding: 0 var(--ls-space-sm); border: 0; min-height: 32px; gap: var(--ls-space-xs); font-size: var(--ls-size-ui); }

/* Correção T2-vis (prints-4). O botão de trocar de empresa: (0,2,1) vence o .ls-btn.ls-ghost (0,2,0), que deixava a cor do ghost
   (invisível na tinta); discreto nas duas cascas, a tinta cheia no hover. */
.ls-empresa-troca > summary.ls-btn { color: var(--ls-side-muted); }
.ls-empresa-troca > summary.ls-btn:hover { color: var(--ls-side-text); }
/* Ícones de caixa 18 (Funis, Visão geral): traço 1,8 iguala o peso efetivo dos de caixa 16 desenhados a 18 (1,6 × 18/16). */
.ls-lateral svg.ls-i[viewBox="0 0 18 18"] { stroke-width: 1.8; }

/* ---------- Telas honey (Correção CSS-telas): .shuri/desenho/telas/telas.css, ciclo 2 do Codex, aprovado. Sem .ls-badge e
   .ls-trilha span, que o app.css já tinha (vale a regra de cima). ---------- */
.ls-telas .ls-topo { position:sticky; top:0; z-index:10; background:var(--ls-ground); }
.ls-telas .ls-lateral { overflow-y:auto; }
.ls-telas .ls-lateral-foot { display:grid; gap:var(--ls-item-gap); }
.ls-empresa-bloco { display:flex; align-items:center; gap:10px; min-height:var(--ls-control); margin:0 4px 16px; min-width:0; }
.ls-empresa-bloco strong { font-size:var(--ls-size-label); min-width:0; overflow-wrap:anywhere; }
.ls-empresa-bloco .ls-btn { margin-left:auto; flex-shrink:0; width:26px; color:var(--ls-side-text); }
.ls-monograma { display:grid; place-items:center; flex:0 0 30px; height:30px; background:var(--ls-front-a); color:var(--ls-paper); border-radius:var(--ls-radius-sm); font-weight:600; }
.ls-simbolo { width:22px; height:22px; flex-shrink:0; }
.ls-tela-cab { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.ls-tela-cab h1 { font:600 26px/1.3 var(--ls-font-display); letter-spacing:-.02em; color:var(--ls-text); }
.ls-tela-periodo { margin-left:auto; color:var(--ls-text-2); font-size:var(--ls-size-label); white-space:nowrap; }
.ls-vistas { display:flex; gap:2px; border:1px solid var(--ls-hair); padding:3px; border-radius:var(--ls-radius-sm); background:var(--ls-paper); }
.ls-vistas a { padding:4px 10px; font-size:var(--ls-size-label); border-radius:var(--ls-radius-xs); }
.ls-vistas [aria-current="true"] { background:var(--ls-surface-2); font-weight:600; }
.ls-tela-secao { margin-top:28px; min-width:0; scroll-margin-top:76px; }
.ls-painel { padding:20px; background:var(--ls-paper); border:1px solid var(--ls-hair); border-radius:var(--ls-radius-md); min-width:0; }
.ls-tela-cab h2,.ls-tela-secao > h2,.ls-painel h2 { font:600 20px/1.3 var(--ls-font-display); color:var(--ls-text); }
.ls-painel-cab { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.ls-indicadores { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.ls-indicador { padding:18px 14px 14px; background:var(--ls-paper); border:1px solid var(--ls-hair); border-radius:var(--ls-radius-md); text-align:left; min-width:0; }
.ls-indicador h2 { text-align:left; font:500 var(--ls-size-label)/1.4 var(--ls-font-ui); color:var(--ls-text-2); }
.ls-indicador strong { display:block; margin:14px 0 10px; color:var(--ls-text); font-size:clamp(24px,2.2vw,32px); font-weight:500; line-height:1.2; font-variant-numeric:tabular-nums; }
.ls-indicador p { color:var(--ls-text-3); font-size:var(--ls-size-small); text-align:left; }
.ls-analise { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:20px; }
.ls-legenda { display:flex; flex-wrap:wrap; gap:14px; color:var(--ls-text-2); font-size:var(--ls-size-small); }
.ls-legenda span { display:inline-flex; gap:6px; align-items:center; }
.ls-amostra-pago,.ls-amostra-organico { width:9px; height:9px; display:inline-block; border:1px solid var(--ls-text-2); background:var(--ls-brand-data); }
.ls-amostra-organico { background:var(--ls-text-2); }
.ls-barras { height:188px; display:grid; grid-template-columns:repeat(30,minmax(0,1fr)); align-items:end; gap:5px; border-bottom:1px solid var(--ls-hair); padding:8px 0 0; }
.ls-barra-dia { min-width:0; display:flex; flex-direction:column; justify-content:end; }
.ls-barra-pago { height:var(--ls-altura); background:var(--ls-brand-data); border:1px solid var(--ls-text-2); border-bottom:0; }
.ls-barra-organico { height:var(--ls-altura); background:var(--ls-text-2); }
.ls-eixo { display:flex; justify-content:space-between; margin-top:10px; color:var(--ls-text-3); font-size:var(--ls-size-mini); }
.ls-origem-grupo + .ls-origem-grupo { margin-top:20px; }
.ls-origem-grupo h3 { font-size:var(--ls-size-label); color:var(--ls-text); font-weight:500; margin-bottom:10px; }
.ls-origem-linha { display:grid; grid-template-columns:66px minmax(0,1fr) 40px 32px; gap:10px; align-items:center; margin-top:10px; font-size:var(--ls-size-small); }
.ls-origem-linha b { font-weight:400; }
.ls-origem-linha span { text-align:center; font-variant-numeric:tabular-nums; }
.ls-origem-trilho { height:8px; background:var(--ls-surface-2); border-radius:2px; overflow:hidden; }
.ls-origem-trilho i { display:block; height:100%; width:var(--ls-parte); background:var(--ls-brand-data); border:1px solid var(--ls-text-2); }
.ls-origem-grupo[data-origem="organico"] .ls-origem-trilho i { background:var(--ls-text-2); }
.ls-categorias { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ls-valores { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:22px 0; }
.ls-valores div { min-width:0; display:flex; flex-direction:column-reverse; text-align:left; }
.ls-valores dt { font-size:var(--ls-size-mini); color:var(--ls-text-3); }
.ls-valores dd { margin:0 0 4px; font-size:23px; font-variant-numeric:tabular-nums; color:var(--ls-text); }
.ls-categoria-funis { margin:0; padding:12px 0 0; border-top:1px solid var(--ls-hair); list-style:none; display:grid; gap:10px; }
.ls-categoria-funis li { display:grid; grid-template-columns:minmax(0,1fr) 38px 38px; gap:6px; font-size:var(--ls-size-small); }
.ls-categoria-funis span { text-align:center; font-variant-numeric:tabular-nums; }
.jb-quadro { --tabela-zebra:color-mix(in srgb,var(--jb-text) 3%,var(--jb-surface)); }
/* Zebra das tabelas da casa: a folha da biblioteca pinta o td da tr.ln com --linha-fundo opaco, então a linha par troca a
   variável (especificidade igual à da folha, que o hover e o aberto ainda vencem); a linha sem .ln pinta o td direto. */
:where(.jb-quadro) .jb-tabela tbody tr.ln:where(.par) { --linha-fundo: var(--tabela-zebra); }
:where(.jb-quadro) .jb-tabela tbody tr.par:not(.ln) > td { background: var(--tabela-zebra); }
.ls-tabela-rolagem.jb-quadro { width:100%; max-width:100%; min-width:0; overflow:auto; }
.ls-tabela-rolagem .jb-tabela { min-width:810px; }
.ls-tabela-rolagem .jb-tabela :is(th,td) { border-inline:0; text-align:left; }
.ls-tabela-rolagem .jb-tabela :is(th,td).num { text-align:center; }
.ls-tabela-rolagem .jb-tabela tbody td { border-bottom:0; }
.ls-tabela-rolagem .jb-tabela tbody tr.ln > td { overflow:visible; }
.ls-tabela-rolagem .jb-tabela thead th { box-shadow:none; border-inline:0; }
.ls-tabela-rolagem .jb-tabela col:first-child { width:220px!important; }
.ls-tabela-rolagem .jb-tabela :is(th,td):first-child:not([colspan]) { max-width:220px; }
.ls-tabela-rolagem .jb-tabela tbody tr { cursor:default; }
.ls-tabela-rolagem .jb-tabela .ls-grupo td { background:var(--jb-group-bg); color:var(--ls-text-2); height:36px; font-weight:500; }
.ls-tabela-nome { display:block; font-weight:500; color:var(--ls-text); }
.ls-tabela-meta { display:block; margin-top:3px; font-size:var(--ls-size-mini); color:var(--ls-text-3); }
.ls-tabela-acoes { display:flex; align-items:center; flex-wrap:nowrap; gap:6px; white-space:nowrap; }
.ls-tabela-acoes a { border:0; background:var(--ls-transparent); padding:2px 0; color:var(--ls-text); font-size:var(--ls-size-small); text-decoration:underline; text-underline-offset:3px; }
.ls-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ls-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 10px; min-height:32px; border:1px solid var(--ls-hair); border-radius:var(--ls-radius-sm); background:var(--ls-paper); color:var(--ls-text-2); font-size:var(--ls-size-label); }
.ls-chip[aria-pressed="true"] { background:var(--ls-black); border-color:var(--ls-black); color:var(--ls-paper); }
/* Correção CSS-chips: na tela Leads o chip é link e o ativo vem por aria-current, com a mesma tinta do pressionado. */
.ls-chip[aria-current="true"] { background:var(--ls-black); border-color:var(--ls-black); color:var(--ls-paper); }
.ls-filtros-linha { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:20px; }
.ls-filtros-linha .ls-busca-leads { flex:1 1 270px; max-width:390px; margin-left:auto; }
/* A busca é um <form> em volta do campo: o rótulo fica só para leitor de tela, e o campo cabe na linha dos chips. */
.ls-busca-leads .ls-field { max-width: none; }
.ls-busca-leads .ls-field > span { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.ls-atencao { padding:16px 20px; border:1px solid var(--ls-hair); border-left:3px solid var(--ls-text); border-radius:var(--ls-radius-sm); background:var(--ls-surface-2); margin-bottom:24px; }
.ls-atencao h2 { font-size:var(--ls-size-label); margin-bottom:10px; }
.ls-atencao-linha { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:10px; }
.ls-atencao-linha p { min-width:0; flex:1 1 auto; }
.ls-atencao-linha .ls-btn { flex-shrink:0; white-space:nowrap; }
.ls-atencao p { color:var(--ls-text-2); font-size:var(--ls-size-label); }
.ls-capturas-quadro { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; min-height:0; margin:0; padding:0; overflow:visible; }
.ls-capturas-quadro .quadro-coluna { min-width:0; padding:12px; background:var(--jb-group-bg); border-radius:var(--ls-radius-md); }
.ls-capturas-quadro .quadro-coluna-topo { justify-content:flex-start; }
.ls-capturas-quadro .quadro-coluna-nome { text-transform:none; letter-spacing:normal; color:var(--ls-text); }
.ls-capturas-quadro .quadro-coluna-n { font-weight:400; color:var(--ls-text-3); }
.ls-captura-cartao { padding:16px; border:1px solid var(--ls-hair); background:var(--ls-paper); border-radius:var(--ls-radius-sm); min-width:0; }
.ls-captura-cartao h3 { color:var(--ls-text); font-size:var(--ls-size-label); }
.ls-captura-cartao p { font-size:var(--ls-size-small); color:var(--ls-text-3); margin-top:6px; overflow-wrap:anywhere; }
.ls-captura-cartao .ls-valores { grid-template-columns:repeat(2,minmax(0,1fr)); margin:18px 0 14px; }
.ls-captura-cartao footer { border-top:1px solid var(--ls-hair); padding-top:10px; display:flex; justify-content:space-between; gap:8px; font-size:var(--ls-size-mini); color:var(--ls-text-3); }
.ls-vista-lista { margin-top:44px; padding-top:28px; border-top:1px solid var(--ls-hair); }
.ls-status-texto { white-space:nowrap; }
.ls-status-texto[data-estado="Não entregue"] { color:var(--ls-bad); }
.ls-ajustes-grade { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; gap:32px; }
.ls-form-grade { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.ls-form-grade .ls-field { max-width:none; align-content:start; }
.ls-form-larga { grid-column:1 / -1; }
.ls-telas .campo { background:var(--ls-paper); font-size:var(--ls-size-ui); }
.ls-field > .ls-cor-linha { display:flex; align-items:center; gap:10px; min-height:var(--ls-control); font-size:var(--ls-size-ui); }
.ls-cor-amostra { width:32px; height:32px; flex:0 0 32px; background:var(--ls-front-a); border-radius:var(--ls-radius-sm); }
.ls-marca-previa { background:var(--ls-side-bg); color:var(--ls-side-text); padding:24px 16px; border:1px solid var(--ls-hair); border-radius:var(--ls-radius-md); }
.ls-marca-previa .ls-empresa-bloco { margin-bottom:16px; }
.ls-previa-titulo { font-size:var(--ls-size-label); color:var(--ls-text-2); margin-bottom:12px; }
/* Oito letras (Sem escolha + as sete): 4 colunas, 2 abaixo de 760 px; a amostra encolhe com a coluna e nunca quebra. */
.ls-fontes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:20px; padding:5px; }
.ls-fonte-opcao { position:relative; min-width:0; display:grid; align-content:center; gap:12px; border:1px solid var(--ls-hair); border-radius:var(--ls-radius-sm); padding:18px 8px 14px; background:var(--ls-paper); cursor:pointer; }
.ls-fonte-opcao:has(input:checked) { border:2px solid var(--ls-black); padding:17px 7px 13px; }
.ls-fonte-opcao:focus-within { box-shadow:var(--ls-focus-ring); }
.ls-fonte-opcao input { position:absolute; opacity:0; width:1px; height:1px; }
.ls-fonte-amostra { font-family:var(--ls-fonte),var(--ls-font-ui); font-weight:var(--ls-peso); font-size:clamp(14px,1.5vw,23px); line-height:1.3; white-space:nowrap; letter-spacing:-.04em; }
.ls-fonte-opcao small { font:400 10px/1.4 var(--ls-font-ui); color:var(--ls-text-3); }
.ls-convite-faixa { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; align-items:center; margin-top:24px; background:var(--ls-surface-2); border-radius:var(--ls-radius-md); padding:18px 20px; }
.ls-convite-faixa h3 { color:var(--ls-text); font-size:var(--ls-size-label); margin-bottom:6px; }
.ls-convite-faixa p { font-size:var(--ls-size-small); color:var(--ls-text-2); margin-top:8px; }
.ls-convite-faixa input { background:var(--ls-paper); }
.ls-demo-rodape { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:32px; padding-top:16px; color:var(--ls-text-3); font-size:var(--ls-size-small); }
.ls-demo-rodape nav { display:flex; flex-wrap:wrap; gap:12px; }
.ls-demo-dialog { padding:24px; max-width:min(420px,calc(100vw - 32px)); border:1px solid var(--ls-hair); border-radius:var(--ls-radius-md); background:var(--ls-paper); color:var(--ls-text); }
.ls-demo-dialog::backdrop { background:color-mix(in srgb,var(--ls-black) 35%,var(--ls-transparent)); }
.ls-demo-dialog h2 { margin-bottom:12px; }
.ls-demo-dialog p { margin-bottom:20px; color:var(--ls-text-2); }
.ls-acesso { min-height:100dvh; display:grid; place-items:center; padding:48px 20px 24px; }
.ls-acesso-coluna { width:min(100%,420px); min-width:0; }
.ls-acesso-marca { display:flex; align-items:center; gap:12px; font:500 18px var(--ls-font-display); margin-bottom:36px; }
.ls-acesso-marca .ls-simbolo { width:34px; height:34px; }
.ls-acesso h1 { margin-bottom:28px; }
.ls-acesso .ls-field { max-width:none; }
.ls-acesso .ls-btn,.ls-acesso .campo { min-height:44px; }
.ls-acesso-ajuda { margin-top:24px; color:var(--ls-text-2); font-size:var(--ls-size-label); }
.ls-variantes { margin-top:36px; padding-top:24px; border-top:1px solid var(--ls-hair); display:grid; gap:14px; }
.ls-variantes h2 { font:500 var(--ls-size-label) var(--ls-font-ui); color:var(--ls-text-3); }
.ls-variante small { display:block; margin-bottom:6px; color:var(--ls-text-3); font-size:var(--ls-size-small); }
.ls-erro-acesso { padding:12px 14px; color:var(--ls-bad); background:var(--ls-bad-bg); border-left:2px solid var(--ls-bad); border-radius:var(--ls-radius-xs); font-size:var(--ls-size-label); }
@media (max-width: 1100px) {
 .ls-indicadores { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .ls-analise,.ls-capturas-quadro,.ls-ajustes-grade { grid-template-columns:minmax(0,1fr); }
 .ls-capturas-quadro .quadro-coluna-cartoes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
 .ls-indicadores { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ls-categorias,.ls-form-grade,.ls-capturas-quadro .quadro-coluna-cartoes { grid-template-columns:minmax(0,1fr); }
 .ls-atencao-linha { gap:12px; }
 .ls-painel { padding:16px; }
 .ls-tela-cab { gap:12px; }
 .ls-barras { gap:3px; }
 .ls-tela-periodo { margin-left:0; }
 .ls-filtros-linha .ls-busca-leads { margin-left:0; max-width:none; }
 .ls-convite-faixa { grid-template-columns:minmax(0,1fr); }
 .ls-convite-faixa .ls-btn { justify-self:start; }
 .ls-acesso { padding-top:32px; }
}

/* Larguras de conteúdo: a rolagem permanece dentro do quadro. */
.ls-tabela-rolagem.ls-tabela-larga .jb-tabela { min-width:1100px; }
.ls-tabela-rolagem .jb-tabela td { overflow-wrap:anywhere; }

/* Ajustes do ciclo 2. */
.ls-chip-fechar { width:14px; height:14px; flex:0 0 14px; }
#capturas-contagem { font-size:var(--ls-size-label); line-height:var(--ls-leading-normal); }
.ls-indicador strong:empty { min-height:1.2em; }
.ls-captura-sem-respostas { margin-bottom:12px; }
.ls-logo-linha { display:flex; align-items:center; gap:10px; min-width:0; min-height:var(--ls-control); }
.ls-logo-linha input[type="file"] { width:1px; height:1px; min-height:0; padding:0; border:0; }
.ls-logo-botao { flex-shrink:0; cursor:pointer; font-size:var(--ls-size-ui); }
.ls-logo-linha input:focus-visible + label { box-shadow:var(--ls-focus-ring); }
#logo-arquivo { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--ls-size-ui); }
.ls-marca-salvar { margin-top:28px; }
/* A faixa Salvo. (?salvo=1 e ?fonte=): fixa no canto, fora do fluxo (não empurra nem deixa buraco), some em 3 s. */
.ls-salvo { position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:30; margin:0; padding:10px 16px; background:var(--ls-black); color:var(--ls-paper); border-radius:var(--ls-radius-sm); font-size:var(--ls-size-ui); font-weight:600; pointer-events:none; animation: ls-salvo-some 3s ease-in forwards; }
@keyframes ls-salvo-some {
 0%, 85% { opacity: 1; }
 100% { opacity: 0; visibility: hidden; }
}
/* Movimento reduzido: o * global zera a animação (!important); aqui ela volta sem fade, a faixa sai de uma vez aos 3 s. */
@media (prefers-reduced-motion: reduce) {
 .ls-salvo { animation: ls-salvo-some 3s steps(1, end) forwards !important; }
}
/* As abas do topo pintam por .ls-abas a; a classe dá o reset do link fora dela. */
.ls-aba { text-decoration: none; }
.ls-telas .ls-trilha { flex-wrap:nowrap; overflow:hidden; }
.ls-trilha span[aria-current="page"] { flex-shrink:0; }
.ls-telas select.campo { width:100%; max-width:none; height:var(--ls-control); font-size:var(--ls-size-ui); }
.ls-tabela-membros .jb-tabela col:last-child { width:220px!important; }
.ls-tabela-membros .jb-tabela tbody tr,.ls-tabela-membros .jb-tabela tbody td { height:46px; }
.ls-tabela-membros .jb-tabela tbody td { white-space:nowrap; }
.ls-tabela-membros .ls-tabela-nome { font-weight:500; }
.ls-acesso .campo[aria-invalid="true"] { border-color:var(--jb-bad-ink); }
.ls-convite-empresa { display:flex; align-items:center; gap:10px; margin-bottom:20px; font-size:var(--ls-size-ui); }
@media (max-width: 759px) {
 .ls-tabela-rolagem .ls-col-secundaria,.ls-tabela-rolagem .ls-email-secundario { display:none; }
 .ls-tabela-rolagem .jb-tabela,.ls-tabela-rolagem.ls-tabela-larga .jb-tabela { min-width:660px; }
 .ls-tabela-rolagem .jb-tabela col { width:auto!important; }
 .ls-tabela-rolagem .jb-tabela col:first-child { width:220px!important; }
 .ls-tabela-rolagem.ls-tabela-membros .jb-tabela { min-width:780px; }
 .ls-tabela-membros .jb-tabela col:last-child { width:220px!important; }
 .ls-fontes { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
}

/* ---------- Funis (Tarefa 3): regras .h-* do mockup .shuri/desenho/honey/mockup.html, sem .h-period, .h-spark (sem série real
   antes do Período), .h-view, .h-example e .h-dialog (a tela não usa). E as que a Tarefa 3 pediu. ---------- */
.h-header { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.h-header h1,.h-header h2 { font: 600 26px/1.3 var(--ls-font-display); letter-spacing: -.02em; color: var(--ls-text); }
.h-views { display: flex; gap: 2px; border: 1px solid var(--ls-hair); padding: 3px; border-radius: var(--ls-radius-sm); background: var(--ls-paper); }
.h-views a { padding: 4px 10px; font-size: var(--ls-size-label); border-radius: 4px; color: var(--ls-text-2); }
.h-views [aria-current="true"] { background: var(--ls-surface-2); color: var(--ls-text); font-weight: 600; }
.h-board { --cor: var(--ls-text-2); --cor-x: var(--ls-text-2); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); min-height: 0; margin: 0; padding: 0; overflow: visible; }
.h-board .quadro-coluna { min-width: 0; padding: 12px; background: var(--jb-group-bg); border-radius: var(--ls-radius-md); }
.h-board .quadro-coluna-topo { justify-content: flex-start; }
.h-board .quadro-coluna-nome { text-transform: none; letter-spacing: normal; }
.h-board .quadro-coluna-n { color: var(--ls-text-3); font-weight: 400; }
.h-board .quadro-coluna-cartoes { gap: 14px; }
.h-funnel { padding: 18px 16px 12px; border: 1px solid var(--ls-hair); border-radius: var(--ls-radius-sm); background: var(--ls-paper); }
.h-funnel h3 { color: var(--ls-text); font: 600 13px/1.4 var(--ls-font-ui); letter-spacing: .025em; }
.h-meta { display: block; margin-top: 5px; font-size: var(--ls-size-small); color: var(--ls-text-3); }
.h-funnel .ls-valores { margin:18px 0 14px; }
.h-funnel footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ls-hair); color: var(--ls-text-3); font-size: 10.5px; }
.h-empty { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 74px; padding: 12px 14px; text-align: left; }
.h-empty strong { color: var(--ls-text-2); font-size: var(--ls-size-label); }
.h-empty .ls-link { color: var(--ls-text); font-size: var(--ls-size-small); }
.h-empty span { font-size: var(--ls-size-small); }
.h-table-scroll.jb-quadro { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
.h-table-scroll .jb-tabela { min-width: 710px; }
.h-table-scroll.jb-quadro .jb-tabela :is(th,td) { border-inline: 0; text-align: left; }
.h-table-scroll .jb-tabela tbody td { border-bottom: 0; }
.h-table-scroll .jb-tabela :is(th,td).num { text-align: center; }
.h-nome { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.h-table-name { color: var(--ls-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-table-meta { display: block; margin-top: 3px; color: var(--ls-text-3); font-size: 10.5px; }
.h-funnel h3,.h-empty strong { display: flex; align-items: center; gap: 4px; }
.h-lapis { min-height: 0; color: var(--ls-text-3); opacity: 0; }
.h-funnel:hover .h-lapis,.h-empty:hover .h-lapis,tr:hover .h-lapis,.h-lapis:focus-visible { opacity: 1; }
.h-empty > div { display: grid; gap: 2px; }
.h-sem { margin: 21px 0 16px; }
.h-renomear { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.h-renomear input { flex: 1 1 140px; }
.h-novo { max-width: 420px; margin-bottom: 24px; padding: 16px; border: 1px solid var(--ls-hair); border-radius: var(--ls-radius-md); background: var(--ls-paper); }
.h-novo fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.h-novo legend { color: var(--ls-text-2); margin-bottom: 4px; }
@media (max-width: 1000px) {
  .h-board { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .h-board .quadro-coluna-cartoes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 759px) {
  .h-table-scroll .jb-tabela { min-width: 600px; }
}
@media (max-width: 720px) {
  .h-header { gap: 12px; }
  .h-board .quadro-coluna-cartoes { grid-template-columns: minmax(0,1fr); }
}

/* ---------- Capturas (Tarefa 4): o nome no <strong> da faixa, o nome do cartão e da lista como link, o chip de filtro como link. ---------- */
.ls-atencao p strong { color: var(--ls-text); font-weight: 600; }
.ls-captura-cartao h3 a { color: inherit; }
.ls-tabela-nome a { color: inherit; }
a.ls-chip { text-decoration: none; }
a.ls-chip:hover { border-color: var(--ls-text-3); color: var(--ls-text); text-decoration: none; }
a.ls-chip:focus-visible { outline: 2px solid transparent; box-shadow: var(--ls-focus-ring); }
a.ls-chip[aria-current="true"]:hover { border-color: var(--ls-black); color: var(--ls-paper); }

/* ---------- Rodapé da lateral: quem olha e o Sair (form inline), discreto no padrão do .ls-nav-item. A marcação chega do login. ---------- */
.ls-lateral-quem { display: flex; align-items: center; justify-content: space-between; gap: var(--ls-space-xs); min-width: 0; padding-left: var(--ls-space-sm); color: var(--ls-side-muted); font-size: 12.5px; }
.ls-lateral-quem > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-lateral-quem form { display: inline; margin: 0; flex-shrink: 0; }
.ls-lateral-quem button { height: 32px; min-height: 32px; padding: 0 var(--ls-space-sm); border: 0; border-radius: var(--ls-radius-sm); background: var(--ls-transparent); color: var(--ls-side-muted); font: inherit; font-size: var(--ls-size-ui); cursor: pointer; }
.ls-lateral-quem button:hover { background: var(--ls-side-hover); color: var(--ls-side-text); }
.ls-lateral-quem button:focus-visible { outline: 2px solid transparent; box-shadow: var(--ls-focus-ring); }

/* Funil (passo 4 e Configuração): o seletor na .escolha, a ajuda colada nele (o vão do grid já separa) e o + Novo funil
   em linha: fechado é um link discreto sem o marcador nativo; aberto, nome, categoria e Criar funil numa linha que quebra,
   com o resumo e a frase de erro cada um na linha inteira. */
.ls-funil > .ls-form-help { margin-top: 0; }
.ls-form.ls-funil { gap: var(--ls-space-sm); }
.ls-form.ls-funil .ls-actions { margin-top: var(--ls-space-xs); }
summary.ls-link { width: fit-content; cursor: pointer; list-style: none; }
summary.ls-link::-webkit-details-marker { display: none; }
summary.ls-link:hover { color: var(--ls-text); }
.ls-novo-funil[open] { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ls-space-sm) var(--ls-space-md); }
.ls-novo-funil > summary,.ls-novo-funil > .ls-form-help { flex-basis: 100%; }
.ls-novo-funil > .ls-form-help { margin-top: 0; }
.ls-novo-funil > .ls-field { flex: 1 1 14rem; }
.ls-novo-funil fieldset { display: flex; flex-wrap: wrap; column-gap: var(--ls-space-md); }
.ls-novo-funil fieldset > legend { margin-bottom: 0; }
.ls-novo-funil > .ls-btn { flex: none; }

/* ---------- Correção visual final (prints-final-A e -B, 07/10): um achado aceito por regra, numerados como no relatório. ---------- */
:root { --ls-focus-soft: 0 0 0 4px color-mix(in srgb,var(--ls-ring) 14%,var(--ls-transparent)); }
/* 1. Campo focado: o anel da casa e só ele (a borda some, não dobra). Título que recebe o foco por script (tabindex -1):
   a sombra suave da casa, com raio, nunca a moldura dura de 2px em volta da linha inteira. */
input:focus-visible,select:focus-visible,textarea:focus-visible { border-color: transparent; }
:is(h1,h2,h3)[tabindex="-1"]:focus-visible { outline: 2px solid transparent; box-shadow: var(--ls-focus-soft); border-radius: var(--ls-radius-xs); }
/* 2. Lateral: 8px a menos acima do rótulo de grupo (o vão do nav já dá 6px). */
.ls-nav-label { margin-top: 4px; }
/* 3. Abas encostadas à direita, logo antes de quem olha (só as abas levam a margem automática). A trilha corta com … */
.ls-abas + .ls-topo-end { margin-left: 0; }
.ls-trilha > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-tela-cab > .ls-tela-acao,.h-header > .ls-btn:last-child { margin-left: auto; }
.ls-tela-cab > .ls-tela-periodo + .ls-tela-acao,.h-header > .ls-tela-periodo + .ls-btn:last-child { margin-left: 0; }
/* 4. Contador de coluna: 12px pede 4,5:1; a tinta 3 sobre o fundo do grupo não chega, a 2 passa. */
:is(.ls-capturas-quadro,.h-board) .quadro-coluna-n { color: var(--ls-text-2); }
/* 5. Todo campo com a letra de 13,5px; o select com a altura dos outros, em qualquer tela (passo 4 e Configuração inclusive). */
.campo { font-size: var(--ls-size-ui); }
select.campo { height: var(--ls-control); }
/* 7. Funis, cartão: a linha de capturas a 24px do número (eram 32). */
.h-funnel .ls-valores { margin: 10px 0 14px; }
/* 8. Funis, lista: a linha ímpar transparente, como em Capturas › Lista, e a zebra aparece; passar o mouse ainda acende. */
.h-table-scroll .jb-tabela tbody tr.ln:not(.par):not(:hover):not([data-aberto]) { --linha-fundo: transparent; }
/* 9. Novo funil: Nome e Categoria com o mesmo peso, 16px entre os campos (6 do vão + 10). */
.h-novo > label,.h-novo legend { font-size: var(--ls-size-small); font-weight: 500; color: var(--ls-text-2); }
.h-novo > fieldset { margin-top: 10px; }
/* 10. Cartão de rascunho (e o sem respostas): o mesmo respiro do No ar entre a última linha e o fio do rodapé. */
.ls-captura-cartao > p + footer { margin-top: 16px; }
/* 15. Legenda da letra legível. */
.ls-fonte-opcao small { font-size: 11.5px; }
/* 16. A prévia é o .ls-brand da lateral, sem regra própria além de zerar a margem dentro do cartão. */
.ls-marca-previa .ls-brand { margin: 0; }
/* 17-18. Passo 4: o seletor e o + Novo funil numa linha; a ajuda e o erro embaixo da linha; aberto, o subformulário desce
   para um bloco recuado, com 16px entre os campos e o erro logo abaixo do Nome. */
.ls-funil-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ls-space-sm) var(--ls-space-lg); }
.ls-funil-linha > .escolha { flex: 1 1 16rem; max-width: 420px; order: 1; }
.ls-funil-linha > .ls-novo-funil { order: 2; }
.ls-funil-linha > .ls-form-help { order: 3; flex-basis: 100%; margin-top: 0; }
.ls-funil-linha > .ls-novo-funil[open] { order: 4; flex-basis: 100%; display: block; }
.ls-novo-funil > summary { display: inline-flex; align-items: center; gap: var(--ls-space-2xs); }
.ls-novo-funil > summary .ls-i { width: 14px; height: 14px; stroke-width: 1.6; }
.ls-novo-funil-corpo { display: grid; gap: 16px; max-width: 420px; margin-top: var(--ls-space-sm); padding-left: 16px; border-left: 2px solid var(--ls-hair); }
.ls-novo-funil-corpo > .ls-form-help { margin-top: calc(var(--ls-space-sm) - 16px); }
.ls-novo-funil-corpo > .ls-btn { justify-self: start; }
/* 19. Configuração › Funil: rótulo (o título), campo, ajuda embaixo, Salvar como os outros da tela. */
.ls-form.ls-funil .escolha { max-width: 420px; }
/* 21. Caixa: a vista ativa (Por dia, Por faixa) em preto, como os chips de Leads. */
.ls-segmento > [aria-current="true"] { background: var(--ls-black); border-color: var(--ls-black); color: var(--ls-paper); }
@media (max-width: 759px) {
 /* 8. Funis, lista: a Categoria sai a 720. */
 .h-table-scroll .ls-col-secundaria { display: none; }
 /* 11. Resultados: as colunas que ficam ocupam a largura, o funil é fluido, e o "N visitas" sai. */
 .ls-resultados.ls-tabela-rolagem .jb-tabela { min-width: 0; width: 100%; }
 .ls-resultados.ls-tabela-rolagem .jb-tabela col:first-child { width: auto !important; }
 .ls-resultados .num .ls-tabela-meta { display: none; }
 /* 12. Leads: a tabela não espreme, rola dentro do quadro; a coluna escondida não guarda largura no layout fixo. */
 .ls-tabela-rolagem #leads-tabela { min-width: 860px; }
 .ls-tabela-rolagem .jb-tabela col.ls-col-secundaria { width: 0 !important; visibility: collapse; }
}
@media (max-width: 720px) {
 /* 3. A ação do topo à direita, também quando a linha quebra; a trilha das telas com abas fica em linha e corta. */
 .ls-tela-cab > .ls-tela-acao,.ls-tela-cab > .ls-tela-periodo + .ls-tela-acao,.h-header > .ls-btn:last-child,.h-header > .ls-tela-periodo + .ls-btn:last-child { margin-left: auto; }
 .ls-telas .ls-topo:has(.ls-abas) .ls-trilha { width: auto; flex: 0 1 auto; flex-direction: row; align-items: center; gap: var(--ls-space-2xs); font-size: var(--ls-size-small); }
 /* 6. KPIs em uma coluna. */
 .ls-indicadores { grid-template-columns: minmax(0,1fr); }
 /* 20. Ficha aberta: altura cheia, rolagem própria, e nada da lista por baixo. */
 .ls-ficha[data-open="true"] { height: 100dvh; overscroll-behavior: contain; }
 :has(> .ls-ficha[data-open="true"]) > :not(.ls-ficha) { display: none; }
}
/* ---------- Correção visual C (prints-final-C): membros, trilha, resultados e cabeçalho a 720 ---------- */
/* 3. Membros: layout fixo com larguras medidas; E-mail fica com o resto. A tabela rola no quadro (ls-tabela-rolagem). */
.ls-tabela-membros .jb-tabela { table-layout:fixed; width:100%; min-width:940px; }
.ls-tabela-membros.ls-com-empresa .jb-tabela { min-width:1080px; }
.ls-tabela-membros .jb-tabela col.ls-mb-nome { width:180px!important; }
.ls-tabela-membros .jb-tabela col.ls-mb-email { width:auto!important; }
.ls-tabela-membros .jb-tabela :is(col.ls-mb-papel,col.ls-mb-estado) { width:110px!important; }
.ls-tabela-membros .jb-tabela col.ls-mb-empresa { width:140px!important; }
.ls-tabela-membros .jb-tabela col.ls-mb-acesso { width:140px!important; }
.ls-tabela-membros .jb-tabela col.ls-mb-acoes { width:200px!important; }
.ls-tabela-membros .jb-tabela :is(th,td) { text-overflow:ellipsis; overflow:hidden; }
.ls-tabela-membros .jb-tabela :is(th,td).ls-centro { text-align:center; }
.ls-tabela-membros .jb-tabela td:last-child { padding-inline:8px; overflow:visible; }
.ls-tabela-membros .ls-tabela-acoes { gap:2px; }
.ls-tabela-membros .ls-tabela-acoes .ls-btn { padding-inline:8px; font-size:var(--ls-size-small); }
/* 3. Convidar: 16px do título ao primeiro rótulo; select com a largura do campo de texto. */
.ls-painel > h2 { margin-bottom:16px; }
.ls-form-grade .escolha { display:block; width:100%; max-width:none; }
.ls-form-grade .escolha select.campo { width:100%; max-width:none; }
/* 6. Resultados: o nome do funil quebra entre palavras, nunca no meio de uma. */
.ls-resultados .jb-tabela td:first-child { overflow-wrap:break-word; word-break:normal; }
@media (width <= 759px) {
 .ls-tabela-membros .jb-tabela,.ls-tabela-membros.ls-com-empresa .jb-tabela { min-width:600px; }
 .ls-tabela-membros.ls-com-empresa .jb-tabela { min-width:740px; }
 .ls-tabela-membros .jb-tabela col.ls-col-secundaria { width:0!important; visibility:collapse; }
}
@media (width <= 720px) {
 /* 4. Trilha em linha em todas as telas: os itens não vão a zero; o primeiro corta com reticências, a tela fica inteira. */
 .ls-topo:has(.ls-abas) .ls-trilha { width:auto; max-width:50%; flex:0 1 auto; flex-direction:row; align-items:center; gap:var(--ls-space-2xs); }
 .ls-topo .ls-trilha { flex-wrap:nowrap; min-width:0; }
 .ls-topo .ls-trilha > :is(a,span) { min-width:3ch; flex:0 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .ls-topo .ls-trilha > :is(.ls-i,.ls-trilha-sep) { display:inline-block; flex-shrink:0; }
 .ls-topo .ls-trilha > :last-child { flex-shrink:0; }
 /* 6. Resultados: a tabela ocupa a largura, colunas em porcentagem. */
 .ls-resultados.ls-tabela-rolagem .jb-tabela { min-width:0; width:100%; }
 .ls-resultados.ls-tabela-rolagem .jb-tabela col:first-child { width:34%!important; }
 /* 7. A ação do cabeçalho de toda tela à direita, também quando a linha quebra. */
 .ls-tela-cab > :is(.ls-tela-acao,.ls-actions) { margin-left:auto; }
 /* 8. Ficha: as setas de anterior e próximo a 4px. */
 .ls-ficha-head .ls-actions > .ls-i-btn + .ls-i-btn { margin-left:calc(4px - var(--ls-space-sm)); }
}