/* Biblioteca de componentes (Figma «03 · Componentes de confiança»). Medidas de docs/redesign/componentes.md.
   Só tokens de tokens.css; foco visível = anel --state-focus de 3 px; alvos de ação ≥ 44 px. */

/* Foco comum */
.lf-action:focus-visible, .lf-info:focus-visible, .lf-suggest:focus-visible, .lf-link:focus-visible,
.lf-company-switch:focus-visible, .lf-conv:focus-visible, .lf-row a:focus-visible, .lf-bubble a:focus-visible,
.lf-field input:focus-visible, .lf-field textarea:focus-visible, .lf-toast button:focus-visible,
.lf-state a:focus-visible, .lf-reason a:focus-visible, .lf-bubble-prova a:focus-visible, .lf-incident a:focus-visible, .lf-health a:focus-visible, .ajuda-btn:focus-visible,
.navbtn:focus-visible, .conta:focus-visible, .tema-par:focus-visible {
  outline: 3px solid var(--state-focus); outline-offset: 2px;
}

/* Button / Action */
.lf-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 10px var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-control); font: var(--type-button-weight) var(--type-button-size)/var(--type-button-line) var(--font-family); cursor: pointer; text-decoration: none; background: var(--bg-surface); color: var(--text-default); }
.lf-action svg { width: 18px; height: 18px; flex: none; }
.lf-action--primary { background: var(--action-primary); border-color: var(--action-primary); color: var(--action-on-primary); }
.lf-action--secondary { background: var(--bg-surface); color: var(--text-default); border-color: var(--border-default); }
.lf-action--danger { background: var(--status-error); border-color: var(--status-error); color: var(--action-on-primary); }
.lf-action--icon { width: 44px; padding: 0; }
.lf-action:hover:not(:disabled) { filter: brightness(.94); }
.lf-action:disabled, .lf-action[aria-disabled="true"] { background: var(--bg-subtle); border-color: var(--border-default); color: var(--text-secondary); cursor: not-allowed; filter: none; }
.lf-action.is-focused { outline: 3px solid var(--state-focus); outline-offset: 2px; }
.lf-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lf-gira .8s linear infinite; }
@keyframes lf-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lf-spinner { animation-duration: 2.4s; } }

/* Field / Annotated */
.lf-field { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); max-width: 480px; }
.lf-field-top { display: flex; align-items: center; gap: var(--space-2); }
.lf-field label { font-size: 13px; font-weight: 600; color: var(--text-default); }
.lf-req { color: var(--status-error); }
.lf-field input, .lf-field textarea { width: 100%; min-height: 44px; padding: 10px var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--bg-surface); color: var(--text-default); font: 400 16px/24px var(--font-family); }
.lf-field textarea { resize: vertical; }
.lf-field input::placeholder, .lf-field textarea::placeholder { color: var(--text-secondary); }
.lf-hint { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.lf-error { display: flex; align-items: center; gap: var(--space-1); font-size: 12px; color: var(--status-error); }
.lf-error svg { width: 14px; height: 14px; flex: none; }
.lf-field.has-error { border-color: var(--status-error); }
.lf-info { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: help; }
.lf-info svg { width: 16px; height: 16px; }
.lf-suggest { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-control); background: var(--status-ai-surface); color: var(--status-ai); font: 600 12px/18px var(--font-family); cursor: pointer; }
.lf-suggest svg { width: 14px; height: 14px; }

/* Field / Annotated · variante plain (dentro de um cartão: sem caixa dentro de caixa) */
.lf-field--plain { border: 0; padding: 0; background: transparent; max-width: none; }

/* Company / Context selector */
.lf-company { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); max-width: 310px; }
.lf-company-swatch { flex: none; width: 34px; height: 34px; border-radius: var(--radius-control); background: var(--empresa-cor, var(--tenant-casaecia)); }
.lf-company-txt { display: grid; min-width: 0; flex: 1; }
.lf-company-txt strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--text-secondary); text-transform: uppercase; }
.lf-company-switch { min-height: 44px; padding: 0 var(--space-2); border: 0; background: none; color: var(--action-primary); font: 600 12px/18px var(--font-family); cursor: pointer; border-radius: var(--radius-control); }

/* AI / State badge */
.lf-badge { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--bg-subtle); color: var(--text-default); white-space: nowrap; }
.lf-badge-ia { font-size: 11px; font-weight: 600; color: var(--status-ai); }
.lf-badge--ativa { background: var(--status-ai-surface); color: var(--status-ai); }
.lf-badge--aguardando { color: var(--status-warning); background: var(--surface-attention); }
.lf-badge--aguardando .lf-badge-ia { color: var(--status-warning); }
.lf-badge--pausada .lf-badge-ia, .lf-badge--humano .lf-badge-ia { color: var(--text-secondary); }

/* Conversation / Message bubble */
.lf-bubble { display: grid; gap: 7px; max-width: 520px; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-bubble header { display: flex; align-items: baseline; gap: var(--space-2); }
.lf-bubble header strong { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.lf-bubble time { font-size: 11px; color: var(--text-secondary); }
.lf-bubble p { margin: 0; font-size: 13px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lf-bubble footer a { font-size: 11px; font-weight: 500; color: var(--status-ai); }
.lf-bubble--ia { background: var(--status-ai-surface); border-color: var(--status-ai); }
.lf-bubble--ia header strong { color: var(--status-ai); }
.lf-bubble--nota { background: var(--bg-subtle); border-style: dashed; }
.lf-bubble-aviso { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--status-warning); }
.lf-bubble-prova { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font-size: 11px; color: var(--text-secondary); }
.lf-bubble-prova a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--status-ai); text-decoration: none; }

/* AI / Source evidence */
.lf-evidence { display: grid; gap: var(--space-2); max-width: 340px; padding: 14px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-evidence-top { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.lf-evidence-top strong { font-size: 13px; font-weight: 600; }
.lf-seal { font-size: 11px; font-weight: 600; color: var(--text-success); }
.lf-evidence--review .lf-seal { color: var(--status-warning); }
.lf-evidence--review { border-color: var(--status-warning); }
.lf-evidence p { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.lf-evidence .lf-evidence-foot { font-weight: 500; color: var(--status-ai); }

/* Inbox / Conversation item */
.lf-conv { display: grid; gap: 5px; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); color: var(--text-default); text-decoration: none; max-width: 400px; min-height: 44px; }
.lf-conv-top { display: flex; align-items: baseline; gap: var(--space-2); }
.lf-conv-top strong { font-size: 13px; font-weight: 600; }
.lf-conv-top time { margin-left: auto; font-size: 11px; color: var(--text-secondary); }
.lf-conv-ai { font-size: 11px; font-weight: 600; color: var(--text-success); }
.lf-conv-state { font-size: 11px; font-weight: 600; color: var(--status-warning); }
.lf-conv-prev { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-conv-meta { font-size: 11px; color: var(--text-secondary); }
.lf-conv--urgente { border-color: var(--status-error); box-shadow: inset 3px 0 0 var(--status-error); }
.lf-conv--urgente .lf-conv-state { color: var(--status-error); }

/* Analytics / KPI with definition */
.lf-kpi { display: grid; gap: var(--space-2); max-width: 280px; padding: 14px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-kpi-top { display: flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.lf-kpi-valor { font-size: 28px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lf-kpi small { font-size: 11px; color: var(--text-secondary); }
.lf-kpi--empty .lf-kpi-valor { color: var(--text-secondary); }

/* Connection / Health */
.lf-health { display: grid; gap: 6px; max-width: 288px; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-health-top { display: flex; align-items: baseline; gap: var(--space-2); }
.lf-health-top strong { font-size: 13px; font-weight: 600; }
.lf-health-estado { font-size: 11px; font-weight: 600; color: var(--text-success); }
.lf-health--instavel .lf-health-estado { color: var(--status-warning); }
.lf-health--desconectada .lf-health-estado { color: var(--status-error); }
.lf-health--nao_configurada .lf-health-estado { color: var(--text-secondary); }
.lf-health small { font-size: 11px; color: var(--text-secondary); }

/* System / Incident banner */
.lf-incident { display: grid; gap: 9px; max-width: 440px; padding: 14px; border: 1px solid var(--status-warning); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-incident strong { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; color: var(--status-warning); }
.lf-incident strong svg { width: 18px; height: 18px; flex: none; }
.lf-incident p { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-default); }
.lf-incident a { font-size: 12px; font-weight: 600; color: var(--action-primary); text-decoration: none; min-height: 24px; }
.lf-incident--erro { border-color: var(--status-error); }
.lf-incident--erro strong { color: var(--status-error); }

/* Data / Table row */
.lf-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) repeat(auto-fit, minmax(90px, 1fr)); align-items: center; gap: var(--space-1) var(--space-3); padding: 10px var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); font-size: 12px; min-height: 44px; }
.lf-row-nome { font-size: 13px; font-weight: 600; }
.lf-row.is-selected { background: var(--bg-subtle); border-color: var(--action-primary); }
.lf-row-acao { font-weight: 600; color: var(--action-primary); text-decoration: none; }

/* Help / Screen modal */
.lf-help-modal { display: grid; gap: 13px; padding: var(--space-5, 20px); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); box-shadow: var(--elevation-popover); max-width: 480px; }
.lf-help-modal--mobile { max-width: 344px; }
.lf-help-modal h3 { font-size: 18px; font-weight: 600; margin: 0; }
.lf-help-modal p { margin: 0; font-size: 13px; line-height: 20px; }
.lf-help-modal .lf-note { font-size: 12px; color: var(--text-secondary); }
.lf-link { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--action-primary); font: 600 13px/20px var(--font-family); cursor: pointer; }

/* Safety / Destructive confirmation */
.lf-confirm { display: grid; gap: var(--space-3); max-width: 440px; padding: 20px; border: 1px solid var(--status-error); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-confirm h3 { font-size: 18px; font-weight: 600; margin: 0; }
.lf-confirm p { margin: 0; font-size: 13px; line-height: 20px; }
.lf-confirm .lf-field { border: 0; padding: 0; }
.lf-confirm-acoes { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

/* Feedback / Toast */
.lf-toast { display: flex; align-items: center; gap: 10px; max-width: 380px; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); box-shadow: var(--elevation-popover); font-size: 12px; font-weight: 500; }
.lf-toast button { margin-left: auto; min-height: 44px; padding: 0 var(--space-2); border: 0; background: none; color: var(--action-primary); font: 600 12px/18px var(--font-family); cursor: pointer; }

/* Audit / Timeline event */
.lf-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lf-event { display: grid; gap: 5px; max-width: 330px; padding: 10px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-event strong { font-size: 12px; font-weight: 600; }
.lf-event small { font-size: 11px; color: var(--text-secondary); }
.lf-event--ia strong { color: var(--status-ai); }
.lf-event-ator { justify-self: start; padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--bg-subtle); color: var(--text-secondary); font-size: 10px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.lf-event--ia .lf-event-ator { background: var(--status-ai-surface); color: var(--status-ai); }
.lf-event--lgpd .lf-event-ator { background: var(--surface-information); color: var(--signal-information); }
.lf-event--pagamento .lf-event-ator { background: var(--surface-positive); color: var(--text-success); }
.lf-event--campanha .lf-event-ator { background: var(--surface-attention); color: var(--status-warning); }

/* System / Empty and access states */
.lf-state { display: grid; gap: 10px; max-width: 310px; padding: 18px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-state h3 { margin: 0; font-size: 16px; font-weight: 600; }
.lf-state p { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.lf-state a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 600; color: var(--action-primary); text-decoration: none; }
.lf-state a.lf-action { font-size: 14px; }
.lf-state--forbidden h3 { color: var(--text-default); }
.lf-state--error { border-color: var(--status-error); }
.lf-state--partial { border-color: var(--status-warning); }
.lf-skeleton { display: grid; gap: var(--space-2); }
.lf-skeleton i { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--bg-subtle); animation: lf-pulsa 1.4s ease-in-out infinite; }
.lf-skeleton i:nth-child(2) { width: 80%; } .lf-skeleton i:nth-child(3) { width: 55%; }
@keyframes lf-pulsa { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .lf-skeleton i { animation: none; } }

/* Feedback / Action tooltip: balão real (#lf-tooltip) e pré-visualização */
.tooltip, .lf-tooltip-balao { padding: 9px 10px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-surface); color: var(--text-default); font-size: 11px; line-height: 16px; font-weight: 400; box-shadow: var(--elevation-popover); }
.tooltip::after { background: var(--bg-surface); border: 1px solid var(--border-default); border-width: 0 1px 1px 0; }
.tooltip[data-pos="baixo"]::after { border-width: 1px 0 0 1px; }
.lf-tooltip-demo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.lf-tooltip-balao { max-width: 280px; }

/* Troca de empresa (modal de confirmação) */
.confirm-dialog { border: 1px solid var(--border-default); border-radius: var(--radius-large); padding: 0; max-width: 420px; width: calc(100% - 32px); background: var(--bg-surface); color: var(--text-default); box-shadow: var(--elevation-popover); }
.confirm-dialog::backdrop { background: rgba(10, 20, 41, .55); }
.confirm-card { display: grid; gap: var(--space-4); padding: var(--space-6); }
.confirm-card h2 { font-size: 18px; }
.confirm-card p { margin: 0; color: var(--text-secondary); }
.company-confirm { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); }
.company-confirm span { width: 24px; height: 24px; border-radius: var(--radius-control); background: var(--tenant-casaecia); flex: none; }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.confirm-actions .btn { min-height: 44px; }

/* Página /app/_componentes */
.lib-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.lib-fam { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-canvas); }
.lib-fam > h2 { font-size: 14px; font-weight: 600; }
.lib-uso { margin: 0; font-size: 12px; color: var(--text-secondary); }
.lib-var { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.lib-var > * { min-width: 0; }
.lib-rot { display: block; width: 100%; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
@media (max-width: 959px) {
  .lf-field, .lf-conv, .lf-kpi, .lf-health, .lf-incident, .lf-evidence, .lf-event, .lf-state, .lf-toast, .lf-confirm, .lf-bubble, .lf-reason, .lf-next { max-width: none; width: 100%; }
}

/* Amostra da biblioteca nos dois temas lado a lado: reavalia os aliases semânticos dentro do invólucro. */
.lib-tema { --bg-canvas: var(--surface-canvas); --bg-surface: var(--surface-card); --text-default: var(--text-primary); --text-muted: var(--text-secondary); --sem-border-default: var(--border-default); --action-primary: var(--brand-600); --status-success: var(--signal-positive); --status-warning: var(--signal-attention); --status-error: var(--signal-urgent); --on-status: var(--action-on-primary); background: var(--surface-canvas); color: var(--text-primary); border-radius: var(--radius-surface); padding: var(--space-4); display: grid; gap: var(--space-3); }
.lib-tema > h3 { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin: 0; }
.lf-health a { color: var(--action-primary); font-weight: 600; }

/* Onboarding / Readiness check e Stepper */
.lf-checklist { list-style: none; margin: 0; padding: 0; display: grid; }
.lf-check { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-default); }
.lf-check:first-child { border-top: 0; }
.lf-check-marca { font-size: 15px; font-weight: 600; line-height: 22px; text-align: center; color: var(--text-success); }
.lf-check--pendente .lf-check-marca { color: var(--status-warning); }
.lf-check--bloqueado .lf-check-marca { color: var(--status-error); }
.lf-check-txt { display: grid; gap: 2px; min-width: 0; }
.lf-check-txt strong { font-size: 13px; font-weight: 600; }
.lf-check-txt small { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.lf-check-estado { font-size: 11px; font-weight: 600; line-height: 22px; color: var(--text-success); white-space: nowrap; }
.lf-check--pendente .lf-check-estado { color: var(--status-warning); }
.lf-check--bloqueado .lf-check-estado { color: var(--status-error); }
.lf-check-acao { grid-column: 2 / -1; display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 600; color: var(--action-primary); text-decoration: none; }
.lf-check-acao:focus-visible { outline: 3px solid var(--state-focus); outline-offset: 2px; }
.lf-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); counter-reset: none; }
.lf-step { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-secondary); }
.lf-step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-default); font-size: 11px; font-weight: 600; flex: none; }
.lf-step.is-done .lf-step-n { background: var(--status-success, var(--text-success)); border-color: transparent; color: var(--action-on-primary); }
.lf-step.is-current { color: var(--action-primary); font-weight: 600; }
.lf-step.is-current .lf-step-n { border-color: var(--action-primary); color: var(--action-primary); }
@media (max-width: 959px) { .lf-stepper { grid-template-columns: repeat(3, 1fr); } }
/* Human control bar: controle humano sempre visível (Figma 01 · Inbox) */
.lf-humanbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-humanbar-txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; }
.lf-humanbar-txt strong { font-size: 13px; font-weight: 600; }
.lf-humanbar-txt span { font-size: 12px; color: var(--text-secondary); }
.lf-humanbar-acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lf-humanbar--aguardando { border-color: var(--status-warning); background: var(--surface-attention); }
.lf-humanbar--aguardando .lf-humanbar-txt strong { color: var(--status-warning); }
.lf-humanbar--humano { border-color: var(--action-primary); }
.lf-humanbar--pausada { border-color: var(--status-warning); }
.lf-humanbar--optout { border-color: var(--status-error); }

/* Consent strip: LGPD visível */
.lf-consent { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--surface-positive); color: var(--text-default); font-size: 12px; line-height: 18px; }
.lf-consent svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--status-success); }
.lf-consent small { color: var(--text-secondary); font-size: 12px; }
.lf-consent--alerta { background: var(--surface-urgent); }
.lf-consent--alerta svg { color: var(--status-error); }

/* AI reason panel: fonte, regra e certeza */
.lf-reason { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--status-ai); border-radius: var(--radius-surface); background: var(--status-ai-surface); }
.lf-reason h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--status-ai); text-transform: none; letter-spacing: 0; }
.lf-reason dl { margin: 0; display: grid; gap: 2px; }
.lf-reason dt { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-top: var(--space-2); }
.lf-reason dd { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-default); overflow-wrap: anywhere; }
.lf-reason dd small { display: block; font-size: 11px; color: var(--text-secondary); }
.lf-reason p { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.lf-reason--vazio { border-style: dashed; border-color: var(--border-default); background: var(--bg-subtle); }
.lf-reason--vazio h3 { color: var(--text-default); }
.lf-reason-certeza--alta { color: var(--text-success); font-weight: 600; }
.lf-reason-certeza--media { color: var(--status-warning); font-weight: 600; }
.lf-reason-certeza--baixa { color: var(--status-error); font-weight: 600; }

/* Next best action */
.lf-next { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--action-primary); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-next h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
.lf-next strong { font-size: 16px; line-height: 24px; font-weight: 600; }
.lf-next p { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-secondary); }
.lf-next .lf-action { justify-self: start; }
@media (max-width: 959px) { .lf-next .lf-action { justify-self: stretch; } }

/* Fatia 4: o (i) e o «Sugerir com IA» também são alvos de toque de 44 px; a margem negativa mantém a linha do rótulo compacta. */
.lf-info { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: -8px; }
.lf-suggest { min-height: 44px; margin-top: -6px; margin-bottom: -6px; }
/* ---- Fatia 6a (operação): tabs, status, tabela responsiva, medidor e painel de detalhe ---- */
.lf-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-4); }
.lf-tab { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 44px; min-width: 44px; padding: 0 var(--space-1); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 13px; font-weight: 500; color: var(--text-secondary); text-decoration: none; }
.lf-tab.is-current { color: var(--action-primary); border-bottom-color: var(--action-primary); font-weight: 600; }
.lf-tab:focus-visible { outline: 3px solid var(--state-focus); outline-offset: 2px; border-radius: var(--radius-control); }
.lf-tab-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--surface-attention); color: var(--status-warning); font-size: 11px; font-weight: 600; text-align: center; }

.lf-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; line-height: 16px; font-weight: 600; background: var(--bg-subtle); color: var(--text-secondary); white-space: nowrap; }
.lf-status--ok { background: var(--surface-positive); color: var(--text-success); }
.lf-status--atencao { background: var(--surface-attention); color: var(--status-warning); }
.lf-status--erro { background: var(--surface-urgent); color: var(--status-error); }
.lf-status--info { background: var(--surface-information); color: var(--action-primary); }

.lf-table-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); overflow: hidden; }
.lf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lf-table th { padding: 10px var(--space-3); text-align: left; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); }
.lf-table td { padding: 10px var(--space-3); border-bottom: 1px solid var(--border-default); vertical-align: middle; overflow-wrap: anywhere; }
.lf-table tbody tr:last-child td { border-bottom: 0; }
.lf-tcell-nome { font-weight: 600; }
.lf-trow.is-selected { background: var(--bg-subtle); box-shadow: inset 3px 0 0 var(--action-primary); }
.lf-trow-acao { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 600; color: var(--action-primary); text-decoration: none; white-space: nowrap; }
.lf-trow-acao:focus-visible { outline: 3px solid var(--state-focus); outline-offset: 2px; border-radius: var(--radius-control); }
.lf-tcell-acao { text-align: right; }

.lf-meter { display: grid; gap: var(--space-1); }
.lf-meter-top { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 13px; }
.lf-meter-top b { font-variant-numeric: tabular-nums; }
.lf-meter-barra { width: 100%; height: 8px; border: 0; border-radius: var(--radius-pill); background: var(--bg-subtle); accent-color: var(--action-primary); }
.lf-meter-barra::-webkit-progress-bar { background: var(--bg-subtle); border-radius: var(--radius-pill); }
.lf-meter-barra::-webkit-progress-value { background: var(--action-primary); border-radius: var(--radius-pill); }
.lf-meter-barra::-moz-progress-bar { background: var(--action-primary); border-radius: var(--radius-pill); }
.lf-meter--atencao .lf-meter-barra::-webkit-progress-value { background: var(--status-warning); }
.lf-meter--atencao .lf-meter-barra::-moz-progress-bar { background: var(--status-warning); }
.lf-meter--excedido .lf-meter-barra::-webkit-progress-value { background: var(--status-error); }
.lf-meter--excedido .lf-meter-barra::-moz-progress-bar { background: var(--status-error); }
.lf-meter small { font-size: 12px; color: var(--text-secondary); }
.lf-meter small a { display: inline-flex; align-items: center; min-height: 44px; color: var(--action-primary); font-weight: 600; text-decoration: none; }

.lf-detail { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); }
.lf-detail header { display: grid; gap: var(--space-1); justify-items: start; }
.lf-detail h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-default); }
.lf-detail p { margin: 0; font-size: 13px; line-height: 20px; }
.lf-facts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px; }
.lf-facts small { color: var(--text-secondary); font-size: 12px; }

@media (max-width: 959px) {
  .lf-table-wrap { border: 0; background: transparent; overflow: visible; }
  .lf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lf-table, .lf-table tbody, .lf-table tr, .lf-table td { display: block; width: 100%; }
  .lf-trow { margin: 0; padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--border-default); border-radius: 0; background: transparent; }
  .lf-trow.is-selected { padding-left: var(--space-3); }
  .lf-table--par td:nth-child(1), .lf-table--par td:nth-child(2) { display: inline-block; width: auto; font-size: 14px; font-weight: 600; color: var(--text-default); }
  .lf-table--par td:nth-child(1)::after { content: '\00a0·\00a0'; font-weight: 400; color: var(--text-secondary); }
  .lf-table td { padding: 2px 0; border: 0; font-size: 12px; color: var(--text-secondary); }
  .lf-table td.lf-tcell-nome { font-size: 14px; color: var(--text-default); }
  .lf-tcell-acao { text-align: left; }
  .lf-detail, .lf-tab-n { max-width: none; }
}

/* KPI de métrica: valor antes do rótulo no DOM (testes legados), rótulo visualmente primeiro */
.lf-kpi--metrica { position: relative; display: flex; flex-direction: column; gap: var(--space-1); max-width: none; padding: 14px; padding-right: 52px; }
.lf-kpi--metrica .l { order: -1; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.lf-kpi--metrica .l::first-letter { text-transform: uppercase; }
.lf-kpi--metrica .v { font-size: 28px; line-height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lf-kpi-nota { font-size: 12px; font-weight: 500; }
.lf-kpi-meta { display: grid; gap: 2px; font-size: 11px; color: var(--text-secondary); }
.lf-kpi-info { position: absolute; top: 0; right: 0; width: 44px; height: 44px; }
/* Operation: identidade da empresa, item de atenção e linha de empresa (telas 03 e 04) */
.lf-company-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lf-company-chip > span { display: grid; min-width: 0; }
.lf-company-chip strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.lf-company-chip small { font-size: 11px; color: var(--text-secondary); }
.lf-company-dot { flex: none; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--empresa-cor, var(--text-secondary)); }
.lf-attention { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 2fr) 170px; align-items: center; gap: var(--space-1) var(--space-4); min-height: 44px; padding: var(--space-3) 0; border-top: 1px solid var(--border-default); list-style: none; }
.lf-attention-txt { font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.lf-attention-acao { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; font-size: 12px; font-weight: 600; color: var(--action-primary); text-decoration: none; }
.lf-attention-acao:focus-visible, .lf-company-row a:focus-visible { outline: 3px solid var(--state-focus); outline-offset: 2px; }
.lf-company-row { grid-template-columns: minmax(160px, 1.4fr) repeat(auto-fit, minmax(96px, 1fr)); min-height: 52px; }
.lf-company-row .lf-row-acao { display: inline-flex; align-items: center; min-height: 44px; }
.lf-company-rotulo { display: none; font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-right: var(--space-1); }
.lf-company-val--ok { color: var(--text-success); }
.lf-company-val--atencao { color: var(--status-warning); font-weight: 600; }
.lf-company-val--erro { color: var(--status-error); font-weight: 600; }
@media (max-width: 959px) {
  .lf-attention { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .lf-attention-acao { justify-content: flex-start; }
  .lf-company-row { grid-template-columns: minmax(0, 1fr); }
  .lf-company-rotulo { display: inline; }
}
/* ===== Fatia 6b: abas, tabela, tag, segredo mascarado, link de texto, painel, confirmação no lugar ===== */
.lf-tabs-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); margin-bottom: var(--space-4); }
.lf-tabs { display: flex; gap: var(--space-1); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lf-tabs-bar .lf-tabs { border-bottom: 0; margin-bottom: 0; }
.lf-tab { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-control); font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.lf-tab.is-current { color: var(--action-primary); font-weight: 600; background: var(--surface-information); }
.lf-tab-n { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--bg-subtle); color: var(--text-secondary); }
.lf-tab:focus-visible, .lf-textlink:focus-visible, .lf-confirm-inline summary:focus-visible { outline: 3px solid var(--state-focus); outline-offset: 2px; }
.lf-tabs-acao { flex: none; }
@media (max-width: 959px) {
  .lf-tabs-bar { flex-direction: column; align-items: stretch; padding: var(--space-2); }
  .lf-tabs-acao { width: 100%; }
}

.lf-table-wrap.lf-table-wrap--s { border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); overflow: hidden; }
.lf-table.lf-table--s { width: 100%; border-collapse: collapse; font-size: 14px; }
.lf-table.lf-table--s th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: var(--space-3) var(--space-4); background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); }
.lf-table.lf-table--s td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); vertical-align: middle; overflow-wrap: anywhere; }
.lf-table.lf-table--s tr:last-child td { border-bottom: 0; }
.lf-table.lf-table--s .lf-cell-nome { font-weight: 600; }
.lf-table.lf-table--s small { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
@media (max-width: 959px) {
  .lf-table.lf-table--s, .lf-table.lf-table--s tbody, .lf-table.lf-table--s tr, .lf-table.lf-table--s td { display: block; }
  .lf-table.lf-table--s thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lf-table.lf-table--s tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); display: grid; gap: var(--space-1); }
  .lf-table.lf-table--s tr:last-child { border-bottom: 0; }
  .lf-table.lf-table--s td { padding: 0; border: 0; font-size: 13px; color: var(--text-secondary); }
  .lf-table.lf-table--s td[data-label]::before { content: attr(data-label) ": "; color: var(--text-secondary); font-size: 12px; }
  .lf-table.lf-table--s td.lf-cell-nome { font-size: 15px; color: var(--text-default); }
  .lf-table.lf-table--s td.lf-cell-nome::before { content: none; }
  .lf-table.lf-table--s td.lf-cell-acao::before { content: none; }
  .lf-table.lf-table--s tr > td { min-width: 0; overflow-wrap: anywhere; }
  .lf-table.lf-table--s td small { white-space: normal; overflow-wrap: anywhere; }
}

.lf-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--bg-subtle); color: var(--text-default); white-space: nowrap; }
.lf-tag--ok { background: var(--surface-positive); color: var(--text-success); }
.lf-tag--atencao { background: var(--surface-attention); color: var(--status-warning); }
.lf-tag--erro { background: var(--surface-urgent); color: var(--status-error); }

.lf-mask { font: 600 13px/20px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; overflow-wrap: anywhere; }

.lf-textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--action-primary); text-decoration: none; border-radius: var(--radius-control); }
.lf-textlink:hover { text-decoration: underline; }

.lf-lead { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-1) var(--space-4); }
.lf-lead strong { font-size: 14px; line-height: 22px; font-weight: 600; }
.lf-lead p { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-secondary); }

.lf-panel { padding: var(--space-4) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-surface); margin-top: var(--space-4); }
.lf-panel h2 { margin: 0 0 var(--space-3); font-size: 16px; line-height: 24px; font-weight: 600; }
.lf-panel ol, .lf-panel ul { margin: 0; padding: 0; list-style: none; }
.lf-panel p { margin: 0; font-size: 13px; line-height: 20px; }
.lf-panel .lf-note { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); font-size: 12px; color: var(--status-warning); }

.lf-confirm-inline { display: inline-block; }
.lf-confirm-inline > summary { list-style: none; cursor: pointer; }
.lf-confirm-inline > summary::-webkit-details-marker { display: none; }
.lf-confirm-inline[open] > summary { border-color: var(--status-error); }
.lf-confirm--inline { margin-top: var(--space-2); max-width: 420px; }

/* Audit / Timeline event · variante «lista» (linhas planas dentro de um painel, sem cartão por evento) */
.lf-timeline--lista { display: grid; }
.lf-timeline--lista .lf-event { max-width: none; padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--border-default); border-radius: 0; background: transparent; }
.lf-timeline--lista .lf-event:last-child { border-bottom: 0; }
.lf-timeline--lista .lf-event strong { font-size: 14px; font-weight: 500; }

/* Página de erro (403/404/500) na casca e pública: o estado ocupa a coluna, com o código discreto */
.erro-estado .lf-state, .auth-card .lf-state { max-width: none; }
.erro-estado .lf-state p, .auth-card .lf-state p { font-size: 14px; line-height: 22px; }
.erro-codigo { margin: var(--space-2) 0 0; font-size: 12px; color: var(--text-secondary); }

/* Celular: todo alvo tocável tem 44 px de altura (WCAG 2.5.8 / regra de implementação do README do redesign). */
@media (max-width: 959px) {
  .btn, .lf-action, .subnav a, .pill-link { min-height: 44px; }
  .subnav a { display: inline-flex; align-items: center; }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea { min-height: 44px; font-size: 16px; }
  details > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
  .lf-health a, .lf-textlink, .lf-incident a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Foco visível em todo campo (teclado), com o mesmo anel do restante da biblioteca. */
input:focus, input:focus-within, select:focus, textarea:focus { outline: 3px solid var(--state-focus); outline-offset: 2px; }
@media (max-width: 959px) { .chip { display: inline-flex; align-items: center; min-height: 44px; } }
.sm-fluxo .lf-state { max-width: none; margin: var(--space-2) 0; }

/* ---- Info (i) com popover (macro info): ao lado do rótulo; o popover é fixo e fica sempre dentro da tela ---- */
.field-rot { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.lf-info2 { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.lf-info2-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg2); cursor: help; }
.lf-info2-btn svg { width: 16px; height: 16px; }
.lf-info2-btn:hover, .lf-info2-btn[aria-expanded="true"] { color: var(--accent, var(--fg)); }
.lf-info2-btn:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; }
.lf-info2-pop { position: fixed; z-index: 60; box-sizing: border-box; width: 320px; max-width: calc(100vw - 24px); display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 13px; line-height: 1.45; font-weight: 400; text-align: left; white-space: normal; }
.lf-info2-pop[hidden] { display: none; }
.lf-info2-pop strong { font-size: 13.5px; }
@media (max-width: 640px) {
  .lf-info2-btn { width: 32px; height: 32px; margin: -4px 0; }
  .tela-cliente-form .field label, .tela-cliente-form .field .rot { font-size: 13px; }
  .tela-cliente-form .field input, .tela-cliente-form .field textarea, .tela-cliente-form .field select { font-size: 16px; }
  .tela-cliente-form .field .hint { font-size: 12px; }
  .tela-cliente-form .q.qedit { border: 0; padding: 0; background: transparent; }
}
.tela-cliente-form .rg-sugestoes { display: grid; gap: 6px; margin-top: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tela-cliente-form .rg-sugestoes p { margin: 0; font-size: 12px; color: var(--fg2); }
.tela-cliente-form .rg-sugestoes button { min-height: 44px; text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--muted); color: var(--fg); font-size: 16px; cursor: pointer; white-space: pre-wrap; }
.tela-cliente-form .field-rot .lf-suggest { margin-left: auto; }
.tela-cliente-form .slug-previa code { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.tela-cliente-form .qfields { gap: 8px; }

/* «Sugerir com IA»: carregando, aviso de modelos prontos e botão ao lado da pergunta de qualificação */
.lf-suggest .lf-spinner { width: 14px; height: 14px; border-width: 2px; }
.lf-suggest:disabled { opacity: .75; cursor: progress; }
.qpergunta-top { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.qpergunta-top .lf-suggest { margin-left: auto; }
.rg-sugestoes .rg-sug-nota { font-size: 12px; color: var(--fg2, var(--text-secondary)); font-style: italic; }