/* ==========================================================================
   System Designer V2 — Componentes base
   Espelha as seções #foundation, #forms, #images, #cards, #navigation,
   #overlays e #feedback do protótipo.

   Regras da linguagem: sem gradiente em botão, sem sombra colorida, sem
   elevação/escala no hover, bordas de 0.5px, raios contidos.
   ========================================================================== */

/* ---------- Botões ---------- */
.v2-btn {
  height: var(--control);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px;
  border-radius: var(--r-lg);
  border: .5px solid transparent;
  font-family: inherit; font-size: 12px; font-weight: 650; letter-spacing: -.005em;
  white-space: nowrap; cursor: pointer;
  backdrop-filter: blur(10px) saturate(145%);
  -webkit-backdrop-filter: blur(10px) saturate(145%);
  transition: color 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.v2-btn svg { width: 15px; height: 15px; }
.v2-btn-primary { background-color: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.v2-btn-primary:hover { background-color: var(--brand-hover); border-color: var(--brand-hover); }
.v2-btn-secondary { color: var(--text); background-color: var(--glass-strong); border-color: var(--glass-ring); }
.v2-btn-secondary:hover { background-color: var(--brand-soft); border-color: var(--brand-line); }
.v2-btn-ghost { background: transparent; color: var(--text-2); }
.v2-btn-ghost:hover { color: var(--text); background: var(--brand-soft); }
.v2-btn-danger { background-color: var(--danger); color: #fff; border-color: var(--danger); }
.v2-btn-danger-soft {
  color: var(--danger);
  background-color: color-mix(in srgb, var(--danger) 9%, var(--glass-strong));
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}
.v2-btn-danger-soft:hover { background-color: color-mix(in srgb, var(--danger) 15%, transparent); }
.v2-btn-sm { height: 28px; padding: 0 12px; border-radius: var(--r-md); font-size: 11px; }
.v2-btn:disabled { opacity: .45; cursor: not-allowed; }

/* button_to gera um <form>; sem isto ele quebra a linha da toolbar. */
.v2-btn-form { display: inline-flex; margin: 0; }

/* Árvore auditável da DRE financeira: cada código revela os seus níveis e,
   na folha, os títulos que formam o saldo. */
/* Uma tabela só para a árvore inteira: com um grid por nível (o desenho
   anterior, com <details> aninhado) a indentação empurrava as colunas e os
   meses não batiam entre pai e filho. */
.v2-financial-tree-scroll { overflow-x: auto; }
/* A primeira coluna carrega a árvore E a linha do lançamento (data, título,
   parceiro, situação): 330px truncavam o nome do parceiro cedo demais. */
.v2-financial-tree-table { width: 100%; min-width: calc(520px + (var(--financial-months) * 116px) + 126px); border-collapse: collapse; }
.v2-financial-tree-table > thead th { position: sticky; top: 0; z-index: 1; padding: 0 12px 7px; color: var(--text-3); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; text-align: left; background: var(--surface-1); }
.v2-financial-tree-table > thead th:not(:first-child) { text-align: right; }
.v2-financial-tree-table > thead th:first-child { min-width: 520px; width: 40%; }
.v2-financial-tree-table > tbody > tr > td { padding: 8px 12px; border-top: .5px solid var(--glass-ring); }
/* `.v2-table td` (em crud.css) tem a mesma especificidade e é carregado depois,
   então as faixas por nível precisam de um seletor mais específico para não
   serem apagadas pelo fundo padrão da tabela. */
.v2-financial-row-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; font-weight: 600; padding-left: calc(12px + (var(--level, 0) * 16px)) !important; }
.v2-financial-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-financial-row-month { width: 116px; font-size: 11px; font-weight: 550; }
.v2-financial-row-total { width: 126px; font-size: 12px; font-weight: 600; }
.v2-financial-row-toggle { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: 0; background: none; cursor: pointer; }
.v2-financial-row-toggle.is-empty { cursor: default; }
.v2-financial-node-chevron { width: 15px; height: 15px; color: var(--text-3); transition: transform 150ms var(--ease); }
.v2-financial-row-toggle.is-open .v2-financial-node-chevron { transform: rotate(90deg); }
.v2-financial-tree-table > tbody > tr.v2-financial-row-level-0 > td { background: var(--brand-soft); font-weight: 650; }
.v2-financial-tree-table > tbody > tr.v2-financial-row-level-1 > td { background: var(--surface-2); }
.v2-financial-tree-table > tbody > tr.v2-financial-row > td.v2-financial-row-label { white-space: nowrap; }
/* O lançamento divide as colunas com os grupos, então é a tipografia que o
   distingue: peso menor e data/parceiro em cinza, para o olho continuar
   varrendo os totais dos grupos. */
.v2-financial-tree-table > tbody > tr.v2-financial-row-entry > td { font-weight: 450; }
.v2-financial-entry-date { color: var(--text-3); font-variant-numeric: tabular-nums; }
.v2-financial-entry-reference { font-weight: 600; }
.v2-financial-entry-partner { overflow: hidden; text-overflow: ellipsis; }
.v2-financial-entry-detail { color: var(--text-3); }
.v2-financial-entry-detail::before { content: "·"; margin-right: 6px; }

/* Conciliação: a linha principal traz o veredito. Evidências e ações abrem em
   uma segunda linha inteira, sem esticar nem desalinhá-la. */
.v2-financial-reconciliation-detail-row > td {
  padding: 0 18px 18px;
  background: color-mix(in srgb, var(--brand-soft) 38%, var(--surface));
}
.v2-financial-reconciliation-detail-content { padding-top: 14px; }
.v2-financial-reconciliation-row-chevron { transition: transform 150ms var(--ease); }
.v2-financial-reconciliation-row-toggle.is-open .v2-financial-reconciliation-row-chevron { transform: rotate(90deg); }

/* Relatório de caixa: leitura antes do extrato. A barra de participação vive
   dentro da própria célula do nome, para comparar linhas sem uma coluna extra. */
.v2-cash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.v2-cash-chart { position: relative; height: 320px; }
.v2-cash-bar { display: block; height: 3px; margin-top: 6px; border-radius: 999px; background: var(--glass-ring); position: relative; overflow: hidden; }
.v2-cash-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); background: var(--brand); border-radius: inherit; }
.v2-cash-statement > summary { cursor: pointer; list-style: none; }
.v2-cash-statement > summary::-webkit-details-marker { display: none; }
.v2-cash-statement-chevron { width: 16px; height: 16px; color: var(--text-3); transition: transform 150ms var(--ease); }
.v2-cash-statement[open] > summary .v2-cash-statement-chevron { transform: rotate(180deg); }
.v2-chip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.v2-chip-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.v2-chip-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* Aviso do critério de data na projeção de caixa: informativo, sem competir
   com o título da tela. */
.v2-cash-date-basis { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: var(--text-3); font-size: 11px; line-height: 1.45; }
.v2-cash-date-basis i { flex: 0 0 auto; margin-top: 2px; }
.v2-cash-date-basis strong { color: var(--text-2); font-weight: 650; }

/* Na DRE financeira a escolha do período precede os valores e a árvore. */
.v2-dre-financial > .v2-dre-filters { order: 1; }
.v2-dre-financial > .v2-dre-financial-summary { order: 2; }
.v2-dre-financial > .v2-dre-financial-detail { order: 3; }

/* Ações contextuais de título: mantém as operações frequentes visíveis e
   reúne as demais sem ocupar uma linha inteira em notebooks. */
.v2-invoice-edit-actions { flex-wrap: nowrap; }
.v2-invoice-edit-actions-menu { position: relative; }
.v2-invoice-edit-actions-menu > summary { list-style: none; }
.v2-invoice-edit-actions-menu > summary::-webkit-details-marker { display: none; }
.v2-invoice-edit-actions-popover {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0;
  min-width: 210px; padding: 6px;
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: 0 12px 28px rgba(20, 24, 32, .12);
}
.v2-invoice-edit-actions-menu:not([open]) .v2-invoice-edit-actions-popover { display: none; }
.v2-invoice-edit-menu-item,
.v2-invoice-edit-actions-popover [data-controller="history-modal"] > .v2-btn {
  width: 100%; min-height: 34px; display: flex; align-items: center; gap: 8px;
  padding: 0 9px; border: 0; border-radius: var(--r-md);
  color: var(--text); background: transparent; font: inherit; font-size: 12px;
  font-weight: 550; text-align: left; white-space: nowrap;
}
.v2-invoice-edit-menu-item:hover,
.v2-invoice-edit-actions-popover [data-controller="history-modal"] > .v2-btn:hover { background: var(--brand-soft); }
.v2-invoice-edit-menu-item svg,
.v2-invoice-edit-actions-popover [data-controller="history-modal"] > .v2-btn svg { width: 15px; height: 15px; color: var(--text-2); }
.v2-invoice-edit-actions-popover form { margin: 0; }

/* ---------- Cards ---------- */
.v2-card { border-radius: var(--r-xl); overflow: hidden; }
.v2-card-head, .v2-card-foot {
  min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
}
.v2-card-head { border-bottom: .5px solid var(--glass-ring); }
.v2-card-foot { border-top: .5px solid var(--glass-ring); }
.v2-card-head .v2-grow { flex: 1; min-width: 0; }
.v2-card-head p { color: var(--text-3); font-size: 11px; margin-top: 1px; }
.v2-card-body { padding: var(--s5); }
/* Título de bloco dentro do corpo de um cartão (não é o head). */
.v2-card-title { font-size: 13px; font-weight: 650; }
.v2-card-body.flush { padding: 0; }
.v2-card-icon {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-md); color: var(--brand); background: var(--brand-soft);
}
.v2-card-icon svg { width: 16px; height: 16px; }
.v2-card-icon.success { color: var(--ok); background: var(--ok-bg); }
.v2-card.interactive { transition: border-color 140ms var(--ease), background-color 140ms var(--ease); }
.v2-card.interactive:hover { border-color: var(--brand-line); background-color: var(--glass-strong); }

.v2-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v2-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v2-section-stack { display: flex; flex-direction: column; gap: 16px; }

/* auto-fit em vez de 4 colunas fixas: um dashboard com 5 indicadores não pode
   deixar o quinto sozinho numa linha. */
.v2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.v2-kpi { padding: 15px 16px; }
.v2-kpi-label { display: flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 11px; font-weight: 550; }
.v2-kpi-label svg { width: 13px; height: 13px; }
.v2-kpi-value {
  margin-top: 4px; font-size: 26px; line-height: 1.15; font-weight: 650;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.v2-kpi-foot { color: var(--text-3); font-size: 11px; margin-top: 3px; }
.v2-kpi-limit { color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; }
/* KPI que também funciona como filtro: só cursor e o anel do estado selecionado
   mudam — nada de elevação ou escala no hover. */
.v2-kpi[role="button"] { cursor: pointer; }
.v2-kpi[role="button"].is-active { box-shadow: inset 0 0 0 1px var(--brand); }
.v2-up { color: var(--ok); }
.v2-down { color: var(--danger); }
/* Cor semântica de texto solto (valor positivo/negativo numa linha). */
.v2-ok { color: var(--ok); }
.v2-danger { color: var(--danger); }
.v2-warn { color: var(--warn); }
.v2-info { color: var(--info); }

/* ---------- Formulários ---------- */
.v2-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; }
.v2-col-1 { grid-column: span 1; } .v2-col-2 { grid-column: span 2; }
.v2-col-3 { grid-column: span 3; } .v2-col-4 { grid-column: span 4; }
.v2-col-5 { grid-column: span 5; } .v2-col-6 { grid-column: span 6; }
.v2-col-7 { grid-column: span 7; } .v2-col-8 { grid-column: span 8; }
.v2-col-9 { grid-column: span 9; } .v2-col-10 { grid-column: span 10; }
.v2-col-11 { grid-column: span 11; } .v2-col-12 { grid-column: span 12; }

.v2-field { display: flex; flex-direction: column; gap: 6px; }
/* Label sempre em --text: não muda para a cor primária no foco e "obrigatório"
   não pode parecer erro. */
.v2-field > label { color: var(--text); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
/* Rótulo de campo fora de um `.v2-field` (formulários de relatório). */
.v2-label { display: block; margin-bottom: 6px; color: var(--text); font-size: 11px; font-weight: 600; }
.v2-field:focus-within > label { color: var(--text); }
.v2-req { color: inherit; }
.v2-hint, .v2-field-error { font-size: 11px; }
.v2-hint { color: var(--text-3); }
.v2-field-error { color: var(--danger); }

.v2-input, .v2-select, .v2-textarea {
  width: 100%; height: var(--control); padding: 0 13px;
  color: var(--text); background-color: var(--field-fill);
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  box-shadow: none; outline: 0;
  font-family: inherit; font-size: 13px;
  backdrop-filter: blur(10px) saturate(145%);
  -webkit-backdrop-filter: blur(10px) saturate(145%);
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease), outline-color 150ms var(--ease);
}
.v2-textarea { min-height: 88px; height: auto; resize: vertical; padding-block: 10px; line-height: 1.5; }
/* Campo compacto: painéis laterais estreitos (configuração da loja, filtros
   embutidos) em que a altura de 36px empurraria o conteúdo para fora da vista. */
.v2-input-sm { height: 30px; padding-inline: 9px; font-size: 12px; }
textarea.v2-input-sm { height: auto; min-height: 56px; padding-block: 7px; }
.v2-input::placeholder, .v2-textarea::placeholder { color: var(--text-3); }
.v2-input:hover, .v2-select:hover, .v2-textarea:hover { border-color: var(--line-strong); background-color: var(--glass-strong); }
.v2-input:focus, .v2-select:focus, .v2-textarea:focus {
  border-color: var(--focus); background-color: var(--glass-strong);
  outline: 3px solid var(--focus-soft); outline-offset: 0; box-shadow: none;
}
.v2-input:disabled, .v2-select:disabled, .v2-textarea:disabled { background: var(--surface-2); color: var(--text-3); }
/* Erro só existe quando há validação real do servidor. */
.v2-input.error, .v2-select.error, .v2-textarea.error { border-color: var(--danger); }
.v2-input.error:focus { outline-color: color-mix(in srgb, var(--danger) 15%, transparent); }

.v2-input-wrap { position: relative; }
.v2-input-wrap > svg, .v2-input-wrap > i > svg {
  position: absolute; z-index: 1; width: 15px; height: 15px;
  left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3);
}
.v2-input-wrap .v2-input { padding-left: 36px; }

.v2-select {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23777d87' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
}

/* ---------------------------------------------------------------------------
   Campos de data/hora nativos.

   O indicador do calendário é um glifo do próprio navegador: no Safari (iOS
   incluído) ele simplesmente não existe, e onde existe não segue os tokens —
   o campo ficava sem nenhuma pista de que abre um calendário.

   Então o ícone passa a ser nosso, desenhado no fundo do campo como no
   `.v2-select`, e o indicador nativo vira uma área invisível esticada sobre
   ele: continua sendo o clique que abre o calendário do navegador, sem
   JavaScript e sem trocar o tipo do input.
   --------------------------------------------------------------------------- */
.v2-input[type="date"],
.v2-input[type="datetime-local"],
.v2-input[type="month"],
.v2-input[type="week"],
.v2-input[type="time"] {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777d87' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M8 2.5v4M16 2.5v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 16px;
}
/* `time` não tem calendário: o relógio é a pista certa. */
.v2-input[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777d87' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.v2-input::-webkit-calendar-picker-indicator {
  position: absolute; right: 0; top: 0;
  width: 36px; height: 100%;
  margin: 0; padding: 0;
  opacity: 0; cursor: pointer;
}
/* Sem os campos vazios o Safari deixa o placeholder em cinza-claro demais. */
.v2-input[type="date"]::-webkit-datetime-edit,
.v2-input[type="datetime-local"]::-webkit-datetime-edit { color: inherit; }

.v2-affix { display: flex; }
.v2-affix > span {
  height: var(--control); display: flex; align-items: center; padding: 0 11px;
  color: var(--text-2); background: var(--glass-soft);
  border: .5px solid var(--glass-ring); border-right: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  font-size: 11px; font-weight: 650;
}
.v2-affix .v2-input { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
/* Sufixo: a unidade vem DEPOIS do número ("3 mês(es)"). O texto do chip costuma
   ser escrito por JS, então o markup mantém o <span> antes do input e só a
   ordem visual e os cantos mudam. */
.v2-affix.is-suffix { flex-direction: row-reverse; }
.v2-affix.is-suffix > span {
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  border-left: 0; border-right: .5px solid var(--glass-ring);
}
.v2-affix.is-suffix .v2-input { border-radius: var(--r-lg) 0 0 var(--r-lg); border-right: 0; }

/* Floating label é variante explícita, nunca o padrão. */
.v2-floating-field { position: relative; }
.v2-floating-field .v2-input { height: 44px; padding: 14px 13px 0; }
.v2-floating-field label {
  position: absolute; top: 50%; left: 13px; z-index: 1;
  transform: translateY(-50%); color: var(--text); font-size: 13px; pointer-events: none;
  transition: top 130ms var(--ease), transform 130ms var(--ease), font-size 130ms var(--ease);
}
.v2-floating-field .v2-input:focus + label,
.v2-floating-field .v2-input:not(:placeholder-shown) + label {
  top: 7px; transform: none; color: var(--text); font-size: 9px; font-weight: 650;
}

.v2-choice-row { display: flex; flex-wrap: wrap; gap: 14px; min-height: var(--control); align-items: center; }
.v2-choice { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; cursor: pointer; }
.v2-choice input {
  appearance: none; width: 18px; height: 18px; flex: 0 0 auto;
  display: grid; place-content: center; margin: 0;
  background: var(--field-fill); border: .5px solid var(--glass-ring);
  box-shadow: none; cursor: pointer; transition: 140ms var(--ease);
}
.v2-choice input[type="checkbox"] { border-radius: 6px; }
.v2-choice input[type="radio"] { border-radius: 50%; }
.v2-choice input::before { content: ""; transform: scale(0); transition: transform 120ms var(--ease); }
.v2-choice input[type="checkbox"]::before {
  width: 8px; height: 4px; margin-top: -2px;
  border-left: 2px solid var(--brand-fg); border-bottom: 2px solid var(--brand-fg);
  transform: rotate(-45deg) scale(0);
}
.v2-choice input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.v2-choice input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.v2-choice input[type="radio"]::before { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.v2-choice input[type="radio"]:checked { border-color: var(--brand); }
.v2-choice input[type="radio"]:checked::before { transform: scale(1); }
.v2-choice input:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 52%, transparent); outline-offset: 2px; }

/* Cartão de opção: um .v2-card que é também um .v2-choice (radio/checkbox dentro).
   Estado marcado por :has(:checked) — sem peer-checked do Tailwind e sem JS. */
.v2-card.v2-choice { align-items: flex-start; gap: 10px; padding: 14px; font-size: inherit; }
.v2-card.v2-choice:has(input:checked) { border-color: var(--brand-line); background: var(--brand-soft); }
.v2-card.v2-choice:has(input:focus-visible) { outline: 2px solid var(--focus-soft); outline-offset: 1px; }
.v2-choice-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-choice-copy > strong { color: var(--text); font-size: 13px; }

/* Cartão de plano (wizard do Scale Up): opção em coluna com preço e benefícios. */
.v2-plan { flex-direction: column; height: 100%; padding: 18px; }
.v2-plan-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.v2-plan-name { color: var(--text); font-size: 14px; font-weight: 650; }
.v2-plan-price { display: flex; align-items: baseline; gap: 5px; margin-top: 14px; }
.v2-plan-price > strong { color: var(--text); font-size: 26px; font-variant-numeric: tabular-nums; }
.v2-plan-price > span { color: var(--text-3); font-size: 11px; }
.v2-plan-features { display: flex; flex-direction: column; gap: 7px; width: 100%; margin-top: 16px; }
.v2-plan-feature { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); font-size: 12px; }
.v2-plan-feature > svg, .v2-plan-feature > i > svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--ok); }
.v2-plan-feature.is-strong { color: var(--text); }

/* Banner de upgrade: peça comercial curta, sem quebrar a linguagem flat do V2. */
.v2-upgrade-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
  overflow: hidden; border: 1px solid var(--brand-line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-1);
}
.v2-upgrade-copy { padding: 22px 24px; }
.v2-upgrade-copy h2 { margin-top: 9px; color: var(--text); font-size: 22px; line-height: 1.2; letter-spacing: -.025em; }
.v2-upgrade-copy > p { max-width: 720px; margin-top: 6px; color: var(--text-2); font-size: 12px; line-height: 1.55; }
.v2-upgrade-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; color: var(--brand);
  font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
}
.v2-upgrade-eyebrow svg { width: 13px; height: 13px; }
.v2-upgrade-benefits { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.v2-upgrade-benefits span {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 4px 8px;
  border: .5px solid var(--line); border-radius: var(--r-md); color: var(--text-2);
  background: var(--surface-2); font-size: 10px; font-weight: 550;
}
.v2-upgrade-benefits svg { width: 12px; height: 12px; color: var(--ok); }
.v2-upgrade-recommendation {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px;
  border-top: .5px solid var(--line); color: var(--text-2); font-size: 10px;
}
.v2-upgrade-recommendation > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--warn); }
.v2-upgrade-recommendation > span { min-width: 0; flex: 1; }
.v2-upgrade-recommendation strong { color: var(--text); }
.v2-upgrade-recommendation a { flex: 0 0 auto; color: var(--brand); font-weight: 650; text-decoration: none; }
.v2-upgrade-recommendation a:hover { text-decoration: underline; }
.v2-upgrade-offer {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 20px; color: var(--brand-fg); background: var(--brand);
}
.v2-upgrade-plan { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; }
.v2-upgrade-plan svg { width: 15px; height: 15px; }
.v2-upgrade-price { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; }
.v2-upgrade-price strong { font-size: 28px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.v2-upgrade-price span, .v2-upgrade-offer p { color: color-mix(in srgb, var(--brand-fg) 76%, transparent); font-size: 10px; }
.v2-upgrade-offer p { margin-top: 7px; }
.v2-upgrade-button { justify-content: center; color: var(--brand); background: var(--brand-fg); border-color: transparent; }
.v2-upgrade-button:hover { color: var(--brand-hover); background: color-mix(in srgb, var(--brand-fg) 90%, transparent); }

/* Ação rápida horizontal: ícone, título, descrição e indicação de navegação. */
.v2-action-card {
  min-height: 64px; display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  color: inherit; background: var(--surface-2); text-decoration: none;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.v2-action-card:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.v2-action-card .v2-card-icon { flex: 0 0 30px; }
.v2-action-copy { min-width: 0; flex: 1; }
.v2-action-copy strong, .v2-action-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-action-copy strong { color: var(--text); font-size: 12px; font-weight: 650; }
.v2-action-copy small { margin-top: 2px; color: var(--text-3); font-size: 10px; }
.v2-action-arrow { width: 14px; height: 14px; flex: 0 0 auto; color: var(--text-3); }
.v2-action-card:hover .v2-action-arrow { color: var(--brand); }

.v2-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-2); font-size: 13px; }
.v2-switch input { position: absolute; opacity: 0; }
.v2-switch-track {
  width: 36px; height: 21px; padding: 2px;
  border: .5px solid var(--glass-ring); border-radius: 999px;
  background: var(--glass-soft); box-shadow: none;
  transition: background 140ms, border-color 140ms;
}
.v2-switch-track::after {
  content: ""; display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: .5px solid var(--glass-line);
  box-shadow: none; transition: transform 140ms;
}
.v2-switch input:checked + .v2-switch-track { background: var(--brand); border-color: var(--brand); }
.v2-switch input:checked + .v2-switch-track::after { transform: translateX(15px); }

/* ---------- Imagens ---------- */
.v2-dropzone {
  min-height: 150px; display: grid; place-items: center; padding: 20px;
  border: 1px dashed var(--glass-ring); border-radius: var(--r-xl);
  background-color: var(--glass-soft); text-align: center; cursor: pointer;
  transition: border-color 150ms, background-color 150ms;
}
.v2-dropzone:hover, .v2-dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.v2-dropzone-icon {
  width: 38px; height: 38px; display: grid; place-items: center; margin: 0 auto 8px;
  border-radius: 50%; background: var(--glass-strong); color: var(--brand);
  border: .5px solid var(--glass-line);
}
.v2-dropzone strong { font-size: 13px; }
.v2-dropzone p { color: var(--text-3); font-size: 11px; margin-top: 3px; }
.v2-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 12px; }
.v2-thumb {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2);
}
.v2-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v2-thumb button {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  color: #fff; background: rgba(0, 0, 0, .62); cursor: pointer;
}
.v2-thumb button svg { width: 12px; height: 12px; }

.v2-file-control {
  min-height: var(--control); display: flex; align-items: center; gap: 10px;
  overflow: hidden; padding-right: 12px;
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  background: var(--field-fill); cursor: pointer;
}
.v2-file-control:hover { border-color: var(--line-strong); background: var(--glass-strong); }
.v2-file-action {
  height: var(--control); display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 0 12px; color: var(--text); background: var(--surface-2);
  border-right: .5px solid var(--glass-ring); font-size: 11px; font-weight: 600;
}
.v2-file-action svg { width: 14px; height: 14px; }
.v2-file-name { min-width: 0; overflow: hidden; color: var(--text-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Badges, alertas, vazio, skeleton ---------- */
.v2-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 7px;
  border: 1px solid; border-radius: var(--r-sm);
  font-size: 10px; font-weight: 600;
}
.v2-badge svg, .v2-badge i { width: 11px; height: 11px; }
.v2-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.v2-badge.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.v2-badge.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.v2-badge.danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.v2-badge.info { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.v2-badge.neutral { color: var(--text-2); background: var(--surface-2); border-color: var(--line); }

.v2-alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border: .5px solid; border-radius: var(--r-lg);
  box-shadow: none; font-size: 12px;
  backdrop-filter: blur(10px) saturate(145%);
  -webkit-backdrop-filter: blur(10px) saturate(145%);
}
.v2-alert svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.v2-alert strong { display: block; font-weight: 650; }
/* Ênfase dentro do corpo do alerta continua no fluxo do texto — o display:block
   acima é só para o título do alerta. */
.v2-alert p strong, .v2-alert li strong { display: inline; }
.v2-alert p { color: var(--text-2); margin-top: 1px; }
.v2-alert.ok { color: var(--ok); background-color: color-mix(in srgb, var(--ok) 9%, var(--glass-soft)); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.v2-alert.warn { color: var(--warn); background-color: color-mix(in srgb, var(--warn) 9%, var(--glass-soft)); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.v2-alert.danger { color: var(--danger); background-color: color-mix(in srgb, var(--danger) 9%, var(--glass-soft)); border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.v2-alert.info { color: var(--info); background-color: color-mix(in srgb, var(--info) 9%, var(--glass-soft)); border-color: color-mix(in srgb, var(--info) 28%, transparent); }

.v2-empty { padding: 42px 20px; text-align: center; }
.v2-empty-icon {
  width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 10px;
  border-radius: var(--r-lg); background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text-3);
}
.v2-empty > svg {
  width: 42px; height: 42px; display: block; margin: 0 auto 10px;
  padding: 11px; border-radius: var(--r-lg); background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text-3);
}
.v2-empty p { color: var(--text-3); font-size: 12px; margin: 3px 0 14px; }

.v2-skeleton {
  height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 38%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: v2-skeleton 1.4s ease infinite;
}
@keyframes v2-skeleton { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* ---------- Abas ---------- */
/* Bloco recolhível nativo (<details>) com aparência V2 — sem JS. */
.v2-accordion { border: .5px solid var(--glass-ring); border-radius: var(--r-lg); background: var(--glass-soft); overflow: hidden; }
.v2-accordion > summary {
  min-height: 42px; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; list-style: none; cursor: pointer;
  color: var(--text); font-size: 12px; font-weight: 600;
}
.v2-accordion > summary::-webkit-details-marker { display: none; }
.v2-accordion > summary svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--text-3); }
.v2-accordion > summary .v2-push { margin-left: auto; }
.v2-accordion[open] > summary { border-bottom: .5px solid var(--glass-ring); }
.v2-accordion[open] > summary .v2-chevron-icon { transform: rotate(180deg); }
.v2-accordion-body { padding: 14px; }

/* Barra de ação fixa no rodapé de um formulário longo. */
.v2-formbar {
  position: sticky; bottom: 12px; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
}
.v2-formbar .v2-hint { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.v2-formbar .v2-hint svg { width: 14px; height: 14px; flex: 0 0 auto; }

.v2-tabs {
  display: flex; gap: 3px; border-bottom: .5px solid var(--glass-ring);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.v2-tabs::-webkit-scrollbar { display: none; }
.v2-tab {
  height: 36px; padding: 0 11px;
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  color: var(--text-3); background: transparent;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: inherit; font-size: 12px; cursor: pointer;
}
/* A aba também pode ser um <a> (troca de tela em vez de troca de painel). */
.v2-tab { text-decoration: none; }
.v2-tab:hover { color: var(--text); }
.v2-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.v2-tab svg { width: 14px; height: 14px; }
.v2-tab-panel { padding-top: 16px; }

/* Filtro compacto para estados mutuamente exclusivos dentro de cards. */
.v2-segmented {
  display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 3px; border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  background: var(--surface-2);
}
.v2-segmented-btn {
  min-height: 29px; padding: 5px 9px;
  border: 0; border-radius: var(--r-md);
  color: var(--text-3); background: transparent;
  font: inherit; font-size: 10px; font-weight: 600; cursor: pointer;
}
.v2-segmented-btn:hover { color: var(--text); background: var(--hover); }
.v2-segmented-btn.is-active { color: var(--brand-fg); background: var(--brand); }

/* ---------- Listas ---------- */
.v2-list { display: flex; flex-direction: column; }
.v2-list-item {
  min-height: 46px; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-bottom: .5px solid var(--glass-ring);
}
.v2-list-item:last-child { border: 0; }
.v2-list-item:hover { background: var(--hover); }
.v2-list-item .v2-grow { min-width: 0; flex: 1; }
.v2-list-item strong, .v2-list-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-list-item strong { font-size: 12px; font-weight: 600; }
.v2-list-item small { color: var(--text-3); font-size: 10px; }
.v2-list-item .v2-value { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Dropdown ---------- */
.v2-dropdown { position: relative; }
.v2-menu {
  width: 220px; position: absolute; right: 0; top: calc(100% + 7px);
  padding: 5px; z-index: 70;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  border-radius: var(--r-lg); transition: 130ms var(--ease);
}
.v2-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
.v2-menu-left { left: 0; right: auto; }
.v2-menu-title { padding: 7px 9px 5px; color: var(--text-3); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.v2-menu-item {
  width: 100%; min-height: 32px; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.v2-menu-item:hover { color: var(--text); background: var(--hover); }
.v2-menu-item svg { width: 14px; height: 14px; }
.v2-menu-item.danger { color: var(--danger); }
.v2-menu-sep { height: 1px; margin: 4px; background: var(--line); }
.v2-menu-item.is-active { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
/* O item que abre um submenu empurra o chevron para a direita. */
.v2-menu-item .v2-grow { flex: 1; min-width: 0; }
.v2-menu-item .v2-menu-caret { transition: transform 160ms var(--ease); }
.v2-menu-item[aria-expanded="true"] .v2-menu-caret { transform: rotate(90deg); }
/* Submenu: recuado, para o olho saber que pertence ao item de cima. */
.v2-menu-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 3px 14px; }
.v2-menu-sub .v2-menu-item { min-height: 28px; font-size: 11px; }
.v2-menu-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--line-strong); }
.v2-menu-item.is-active .v2-menu-dot { background: var(--brand); }

/* Bloco "onde eu estou" no topo de um menu de contexto. */
.v2-menu-context { display: flex; flex-direction: column; gap: 5px; padding: 7px 9px; }
.v2-menu-context > div { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.v2-menu-context svg { width: 13px; height: 13px; flex: 0 0 auto; }
.v2-menu-context strong { margin-left: auto; color: var(--text); font-weight: 600; }

/* ---------- Overlays ---------- */
.v2-overlay, .v2-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .44);
  opacity: 0; pointer-events: none; transition: opacity 160ms;
}
.v2-overlay { display: grid; place-items: center; padding: 16px; }
.v2-overlay.is-open, .v2-scrim.is-open { opacity: 1; pointer-events: auto; }
/* Camada intermediária para modais Alpine teleportados. `display: contents`
   deixa o backdrop capturar os cliques em engines antigos. */
.v2-modal-layer {
  width: 100%; max-width: 100%; min-height: 0;
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.v2-modal-layer > .v2-modal { pointer-events: auto; }
.v2-modal {
  width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  transform: translateY(8px) scale(.985);
  transition: transform 180ms var(--ease);
}
.v2-overlay.is-open .v2-modal { transform: none; }
.v2-modal-wide { width: min(620px, 100%); }
.v2-modal-head, .v2-modal-foot { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.v2-modal-head { border-bottom: .5px solid var(--glass-ring); }
.v2-modal-foot { justify-content: flex-end; border-top: .5px solid var(--glass-ring); }
.v2-modal-body { padding: 18px 16px; }
.v2-modal-head h3 { flex: 1; margin: 0; font-size: 14px; font-weight: 650; }
.v2-scrim { z-index: 90; }

.v2-drawer {
  width: min(430px, 92vw); position: fixed; inset: 0 0 0 auto; z-index: 110;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  transform: translateX(100%); transition: transform 200ms var(--ease);
}
.v2-drawer.is-open { transform: none; }
.v2-drawer .v2-modal-body { overflow: auto; flex: 1; }

/* ---------- Notificações / Rulebook ---------- */
.v2-notification-company {
  min-height: var(--control); display: flex; align-items: center; gap: 8px; padding: 0 13px;
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg); background: var(--surface-2);
  color: var(--text); font-size: 12px;
}
.v2-notification-company svg { width: 15px; height: 15px; color: var(--brand); }
.v2-notification-groups { display: flex; flex-direction: column; }
.v2-notification-group + .v2-notification-group { border-top: .5px solid var(--glass-ring); }
.v2-notification-group-title {
  min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 8px 16px;
  color: var(--text-2); background: var(--surface-2); font-size: 11px;
}
.v2-notification-group-title svg { width: 14px; height: 14px; color: var(--brand); }
.v2-notification-group-title span { margin-left: auto; color: var(--text-3); }
.v2-notification-setting-row {
  min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border-top: .5px solid var(--glass-ring);
}
.v2-notification-setting-row:hover { background: var(--hover); }
.v2-notification-setting-main { min-width: 0; flex: 1; }
.v2-notification-setting-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.v2-notification-setting-title > strong { margin-right: 2px; font-size: 13px; font-weight: 650; }
.v2-notification-setting-main > p { margin-top: 4px; color: var(--text-2); font-size: 11px; }
.v2-notification-setting-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.v2-notification-setting-meta > span,
.v2-notification-schedule-meta > span { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: 10px; }
.v2-notification-setting-meta svg, .v2-notification-schedule-meta svg { width: 12px; height: 12px; }
.v2-notification-setting-actions { display: flex; align-items: center; gap: 4px; }
.v2-notification-setting-actions form { display: inline-flex; margin: 0; }
.v2-notification-danger { color: var(--danger); }

.v2-notification-bulk-list { max-height: min(62vh, 560px); overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.v2-notification-bulk-category { min-height: 38px; display: flex; align-items: center; padding: 8px 12px; border-bottom: .5px solid var(--glass-ring); }
.v2-notification-bulk-category strong { font-size: 12px; }
.v2-notification-bulk-category span { margin-left: auto; color: var(--text-3); font-size: 10px; }
.v2-notification-bulk-options { display: flex; flex-direction: column; padding: 5px; }
.v2-notification-bulk-option { align-items: flex-start; padding: 8px; border-radius: var(--r-md); }
.v2-notification-bulk-option:hover { background: var(--hover); }
.v2-notification-bulk-option small { color: var(--text-3); font-size: 10px; }

.v2-notification-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v2-notification-channel {
  min-height: 70px; display: flex; align-items: center; gap: 10px; padding: 12px;
  cursor: pointer; transition: border-color 140ms, background-color 140ms;
}
.v2-notification-channel:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.v2-notification-channel > .v2-grow { min-width: 0; }
.v2-notification-channel strong, .v2-notification-channel small { display: block; }
.v2-notification-channel strong { font-size: 12px; }
.v2-notification-channel small { margin-top: 2px; color: var(--text-3); font-size: 10px; }
.v2-notification-channel .v2-switch { flex: 0 0 auto; }
.v2-notification-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-notification-schedule-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.v2-notification-variables { padding: 12px; border: .5px solid var(--glass-ring); border-radius: var(--r-lg); background: var(--surface-2); }
.v2-notification-variables-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.v2-notification-variables-title svg { width: 14px; height: 14px; color: var(--brand); }
.v2-notification-variables-title strong { font-size: 11px; }
.v2-notification-variables-title span { color: var(--text-3); font-size: 10px; }
.v2-notification-variable-group { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.v2-notification-variable-group > span { min-width: 118px; color: var(--text-3); font-size: 10px; font-weight: 600; }
.v2-notification-variable-group > small { color: var(--text-3); font-size: 10px; }
.v2-notification-variable {
  min-height: 25px; padding: 2px 8px; border: .5px solid var(--brand-line); border-radius: var(--r-sm);
  background: var(--brand-soft); color: var(--brand); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; cursor: pointer;
}
.v2-notification-variable.is-global { color: var(--info); border-color: color-mix(in srgb, var(--info) 28%, transparent); background: color-mix(in srgb, var(--info) 8%, var(--surface-2)); }
.v2-notification-variable:hover { filter: brightness(.97); }

.v2-notification-table-note { display: block; margin-top: 3px; color: var(--text-3); font-size: 10px; }
.v2-notification-log-cards { display: none; }

.v2-notification-menu { width: min(370px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.v2-notification-menu > .v2-menu-title { min-height: 44px; padding: 8px 10px; border-bottom: .5px solid var(--glass-ring); }
.v2-notification-menu-list { max-height: min(390px, calc(100vh - 170px)); overflow: auto; }
.v2-notification-menu-foot { padding: 5px; border-top: .5px solid var(--glass-ring); }
.v2-notification-menu-foot .v2-btn { width: 100%; }
.v2-notification-menu-empty { padding: 28px 12px; color: var(--text-3); text-align: center; font-size: 11px; }
.v2-notification-menu-empty .v2-empty-icon { margin-bottom: 7px; }

turbo-frame.v2-notification-item {
  position: relative; min-height: 82px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start; gap: 9px; padding: 10px; border-bottom: .5px solid var(--glass-ring);
}
turbo-frame.v2-notification-item:last-child { border-bottom: 0; }
turbo-frame.v2-notification-item:hover { background: var(--hover); }
turbo-frame.v2-notification-item.is-read { opacity: .68; }
.v2-notification-item-icon, .v2-notification-modal-icon {
  width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: var(--r-md); color: var(--brand); background: var(--brand-soft);
}
.v2-notification-item-icon svg { width: 15px; height: 15px; }
.v2-notification-item-copy { min-width: 0; }
.v2-notification-item-copy > strong { display: block; overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.v2-notification-item-copy > p { display: -webkit-box; overflow: hidden; margin-top: 2px; color: var(--text-2); font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.v2-notification-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; color: var(--text-3); font-size: 9px; }
.v2-notification-item-meta .v2-badge { height: 18px; font-size: 9px; }
.v2-notification-unread { color: var(--brand); font-weight: 650; }
.v2-notification-item-actions { display: flex; flex-direction: column; gap: 2px; }
.v2-notification-item-actions form { display: inline-flex; margin: 0; }
.v2-notification-item-actions .v2-icon-btn { width: 26px; height: 26px; }
.v2-notification-page-list turbo-frame.v2-notification-item { min-height: 92px; grid-template-columns: 38px minmax(0, 1fr) auto; padding: 13px 16px; }
.v2-notification-page-list .v2-notification-item-icon { width: 36px; height: 36px; }
.v2-notification-page-list .v2-notification-item-copy > strong { font-size: 12px; }
.v2-notification-page-list .v2-notification-item-copy > p { font-size: 11px; -webkit-line-clamp: 3; }
.v2-notification-pagination { justify-content: center; }

.v2-notification-item-icon.is-success, .v2-notification-modal-icon.is-success { color: var(--ok); background: var(--ok-bg); }
.v2-notification-item-icon.is-warning, .v2-notification-modal-icon.is-warning { color: var(--warn); background: var(--warn-bg); }
.v2-notification-item-icon.is-alert, .v2-notification-item-icon.is-error,
.v2-notification-modal-icon.is-alert, .v2-notification-modal-icon.is-error { color: var(--danger); background: var(--danger-bg); }
.v2-notification-item-icon.is-invoice, .v2-notification-modal-icon.is-invoice,
.v2-notification-item-icon.is-birthday, .v2-notification-modal-icon.is-birthday { color: var(--info); background: color-mix(in srgb, var(--info) 9%, var(--surface-2)); }

.v2-notification-modal-wide { width: min(920px, 100%); }
.v2-notification-modal-icon { width: 34px; height: 34px; }
.v2-notification-modal-icon svg { width: 17px; height: 17px; }
.v2-notification-modal-eyebrow { display: block; margin-bottom: 1px; color: var(--text-3); font-size: 9px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.v2-notification-modal-message { color: var(--text-2); font-size: 13px; line-height: 1.55; white-space: pre-line; }
.v2-notification-modal-ai { display: flex; flex-direction: column; overflow: hidden !important; }
.v2-notification-modal-ai > .v2-modal-head,
.v2-notification-modal-ai > .v2-modal-foot { flex: 0 0 auto; }
.v2-notification-modal-ai > .v2-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* Markdown das notificações de IA. A especificidade também
   neutraliza o `white-space: pre-line` das mensagens comuns logo acima. */
.v2-notification-markdown {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.68;
  overflow-wrap: anywhere;
  white-space: normal !important;
}
.v2-notification-markdown > :first-child { margin-top: 0; }
.v2-notification-markdown > :last-child { margin-bottom: 0; }
.v2-notification-markdown p { margin: .52rem 0; }
.v2-notification-markdown h1,
.v2-notification-markdown h2,
.v2-notification-markdown h3,
.v2-notification-markdown h4 {
  margin: .95rem 0 .42rem;
  color: var(--text);
  font-weight: 730;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.v2-notification-markdown h1 { font-size: 1.08rem; }
.v2-notification-markdown h2 { font-size: 1rem; }
.v2-notification-markdown h3 { font-size: .93rem; }
.v2-notification-markdown h4 { font-size: .88rem; }
.v2-notification-markdown ul { list-style: disc; }
.v2-notification-markdown ol { list-style: decimal; }
.v2-notification-markdown ul,
.v2-notification-markdown ol { margin: .5rem 0; padding-left: 1.35rem; }
.v2-notification-markdown li { margin: .18rem 0; padding-left: .08rem; }
.v2-notification-markdown li::marker { color: var(--brand); font-weight: 700; }
.v2-notification-markdown strong { color: var(--text); font-weight: 720; }
.v2-notification-markdown a {
  color: var(--brand);
  font-weight: 680;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.v2-notification-markdown code {
  padding: .1rem .32rem;
  border-radius: .3rem;
  color: var(--text);
  background: var(--surface-2);
  font-size: .82em;
}
.v2-notification-markdown pre {
  margin: .6rem 0;
  padding: .75rem;
  overflow-x: auto;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.v2-notification-markdown pre code { padding: 0; color: inherit; background: none; }
.v2-notification-markdown blockquote {
  margin: .6rem 0;
  padding: .18rem 0 .18rem .78rem;
  border-left: 2px solid var(--brand);
  color: var(--text-2);
}
.v2-notification-markdown blockquote > :first-child { margin-top: 0; }
.v2-notification-markdown blockquote > :last-child { margin-bottom: 0; }
.v2-notification-markdown hr { margin: .9rem 0; border: 0; border-top: 1px solid var(--line); }
.v2-notification-markdown .aia-table-scroll {
  width: 100%;
  max-width: 100%;
  margin: .7rem 0;
  overflow-x: auto;
  border: 1px solid var(--glass-ring);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.v2-notification-markdown table {
  width: 100%;
  min-width: 42rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.v2-notification-markdown th,
.v2-notification-markdown td {
  padding: .48rem .65rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: normal;
}
.v2-notification-markdown thead th {
  color: var(--text-2);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.v2-notification-markdown tbody tr:last-child td { border-bottom: 0; }
.v2-notification-markdown tbody tr:hover td { background: var(--hover); }
.v2-notification-markdown td a {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .2rem .48rem;
  border: 1px solid var(--glass-ring);
  border-radius: 999px;
  background: var(--surface-2);
  text-decoration: none;
  white-space: nowrap;
}
.v2-notification-markdown td a:hover { border-color: var(--brand); }
.v2-notification-modal-details { overflow: hidden; border: .5px solid var(--glass-ring); border-radius: var(--r-lg); }
.v2-notification-modal-details-head { min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: .5px solid var(--glass-ring); background: var(--surface-2); }
.v2-notification-modal-details-head strong { font-size: 11px; }
.v2-notification-modal-details-head span { margin-left: auto; color: var(--text-3); font-size: 10px; }

/* ---------- Trechos técnicos ----------
   Identificador que a pessoa vai copiar (uuid, token, chave) precisa de largura
   fixa por caractere; não é código-fonte, é dado. */
.v2-code {
  padding: 1px 6px;
  border: .5px solid var(--glass-ring); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
.v2-input-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

/* Imagem apresentada sobre uma placa neutra (assinatura, carimbo, anexo). */
.v2-signature-frame {
  display: grid; place-items: center;
  padding: 14px;
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  background: var(--surface-2);
}
.v2-signature-frame img { max-width: 100%; max-height: 128px; }

/* ---------- Lista de passos numerados ----------
   Explica um fluxo em ordem sem virar tabela nem cartão: o número é o marcador,
   o texto é a linha. O último passo pode ser um desfecho (`is-done`). */
.v2-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.v2-steps > li { display: flex; align-items: flex-start; gap: 9px; color: var(--text-2); font-size: 12px; line-height: 1.5; }
.v2-step-n {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--brand); background: var(--brand-soft);
  font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.v2-step-n.is-done { color: var(--ok); background: var(--ok-bg); }
.v2-step-n svg { width: 12px; height: 12px; }

/* ---------- Tooltip ----------
   Só CSS: aparece no hover e no foco do teclado, sem seta e sem sombra
   decorativa. Fica no vocabulário base porque qualquer tela pode precisar
   explicar um número sem gastar uma linha de legenda. */
.v2-tip { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.v2-tip > svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--text-3); cursor: help; }
.v2-tip-bubble {
  position: absolute; z-index: 60; bottom: 100%; left: 50%;
  width: max-content; max-width: 250px;
  margin-bottom: 8px; padding: 8px 10px;
  border: .5px solid var(--glass-line); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  color: var(--text-2); font-size: 11px; font-weight: 400; line-height: 1.5;
  letter-spacing: 0; text-align: left; text-transform: none; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 160ms var(--ease), visibility 160ms, transform 160ms var(--ease);
}
.v2-tip:hover > .v2-tip-bubble,
.v2-tip:focus-within > .v2-tip-bubble { opacity: 1; visibility: visible; transform: translateX(-50%); }
.v2-tip-bubble strong { display: block; margin-bottom: 2px; color: var(--text); font-weight: 650; }
.v2-tip-bubble p { margin: 0; }
.v2-tip-bubble .ok { color: var(--ok); font-weight: 650; }
.v2-tip-bubble .warn { color: var(--warn); font-weight: 650; }
.v2-tip-bubble .danger { color: var(--danger); font-weight: 650; }
.v2-tip-bubble .info { color: var(--info); font-weight: 650; }
/* Variantes de ancoragem: no topo da tabela a bolha abre para baixo; na borda
   direita ela alinha pela direita — senão sai do cartão. */
.v2-tip-bubble.below { top: 100%; bottom: auto; margin: 8px 0 0; }
.v2-tip-bubble.end { left: auto; right: 0; transform: translateY(4px); }
.v2-tip-bubble.start { left: 0; transform: translateY(4px); }
.v2-tip:hover > .v2-tip-bubble.end, .v2-tip:focus-within > .v2-tip-bubble.end,
.v2-tip:hover > .v2-tip-bubble.start, .v2-tip:focus-within > .v2-tip-bubble.start { transform: none; }

.v2-toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.v2-toast {
  width: min(430px, calc(100vw - 36px));
  min-height: 82px; position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 16px 18px; border-radius: var(--r-xl);
  pointer-events: auto;
  animation: v2-toast-in 180ms var(--ease);
}
.v2-toast > svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--ok); margin-top: 1px; }
.v2-toast[data-kind="info"] > svg { color: var(--info); }
.v2-toast[data-kind="warn"] > svg { color: var(--warn); }
.v2-toast[data-kind="danger"] > svg { color: var(--danger); }
.v2-toast .v2-grow { flex: 1; min-width: 0; }
.v2-toast strong { display: block; font-size: 14px; font-weight: 700; }
.v2-toast p { overflow-wrap: anywhere; color: var(--text-2); font-size: 12px; line-height: 1.45; margin-top: 4px; }
.v2-toast button { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--text-3); padding: 0; cursor: pointer; }
.v2-toast button:hover { color: var(--text); background: var(--surface-2); }
.v2-toast button svg { width: 14px; height: 14px; }
.v2-toast-timer { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--surface-2); }
.v2-toast-timer span {
  width: 100%; height: 100%; display: block; transform-origin: left;
  background: var(--ok); animation: v2-toast-timer var(--v2-toast-duration, 4000ms) linear forwards;
}
.v2-toast[data-kind="info"] .v2-toast-timer span { background: var(--info); }
.v2-toast[data-kind="warn"] .v2-toast-timer span { background: var(--warn); }
.v2-toast[data-kind="danger"] .v2-toast-timer span { background: var(--danger); }
@keyframes v2-toast-in { from { opacity: 0; transform: translateY(7px); } }
@keyframes v2-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ==========================================================================
   Campos compostos V2: seletor e período.

   O comportamento (busca, paginação remota, presets, calendário) continua
   sendo o dos arquivos orca_select_picker.js / orca_date_range_picker.js —
   estes estilos só vestem o mesmo componente com a linguagem do V2. O painel
   é teleportado para o <body>, por isso as classes não dependem do contexto.
   ========================================================================== */

/* Gatilho: mesma altura, raio e preenchimento de um .v2-input. */
.v2-field-trigger {
  width: 100%; height: var(--control);
  display: flex; align-items: center; gap: 9px;
  padding: 0 11px 0 13px;
  color: var(--text); background-color: var(--field-fill);
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  font-family: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
.v2-field-trigger:hover { border-color: var(--line-strong); background-color: var(--glass-strong); }
.v2-field-trigger.is-open { border-color: var(--focus); outline: 3px solid var(--focus-soft); }
.v2-field-trigger > svg:first-child { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-3); }
.v2-field-trigger .v2-field-value { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v2-field-trigger .v2-field-value.is-placeholder { color: var(--text-3); }
.v2-field-trigger .v2-field-caret { width: 14px; height: 14px; flex: 0 0 auto; color: var(--text-3); transition: transform 160ms var(--ease); }
.v2-field-trigger.is-open .v2-field-caret { transform: rotate(180deg); }

/* Painel flutuante compartilhado pelos dois componentes. */
.v2-popover {
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100vh - 16px);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: .5px solid var(--glass-line);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  z-index: 120;
}
.v2-popover-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-bottom: .5px solid var(--glass-ring);
}
.v2-popover-head p { margin: 0; color: var(--text-3); font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.v2-popover-head strong { display: block; margin-top: 2px; font-size: 13px; font-weight: 650; }
.v2-popover-head small { display: block; margin-top: 1px; color: var(--text-3); font-size: 11px; }
.v2-popover-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.v2-popover-search { padding: 10px 12px; border-bottom: .5px solid var(--glass-ring); }
.v2-popover-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-top: .5px solid var(--glass-ring);
  color: var(--text-3); font-size: 11px;
}

/* Opção da lista: linha de 34px, ativa com brand-soft — o mesmo vocabulário
   do item de menu, sem pill nem sombra colorida. */
.v2-option {
  width: 100%; min-height: 34px;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.v2-option:hover { background: var(--hover); color: var(--text); }
.v2-option.is-selected { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.v2-option .v2-option-copy { flex: 1; min-width: 0; }
.v2-option .v2-option-copy span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v2-option .v2-option-copy small { display: block; color: var(--text-3); font-size: 10px; }
.v2-option-check { width: 14px; height: 14px; flex: 0 0 auto; opacity: 0; }
.v2-option.is-selected .v2-option-check { opacity: 1; }
.v2-option-empty { padding: 22px 10px; color: var(--text-3); font-size: 12px; text-align: center; }

/* Calendário */
.v2-calendar { display: grid; gap: 12px; padding: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .v2-calendar { grid-template-columns: minmax(0, 1.3fr) minmax(210px, .7fr); } }
.v2-calendar-nav { display: flex; align-items: center; gap: 6px; }
.v2-calendar-nav .v2-calendar-title {
  flex: 1; height: 30px; border: 0; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
/* O JS devolve "agosto de 2026"; `capitalize` viraria "Agosto De 2026". */
.v2-calendar-nav .v2-calendar-title::first-letter { text-transform: uppercase; }
.v2-calendar-nav .v2-calendar-title:hover { background: var(--hover); }
.v2-weekdays, .v2-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.v2-weekdays { margin-top: 8px; color: var(--text-3); font-size: 9px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.v2-days { margin-top: 4px; }
.v2-day {
  height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--text);
  font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.v2-day:hover { background: var(--hover); }
.v2-day.is-outside { color: var(--text-3); opacity: .55; }
/* Extremos do intervalo em brand sólido; o miolo fica em brand-soft. */
.v2-day.is-edge { background: var(--brand); color: var(--brand-fg); font-weight: 650; }
.v2-day.is-range { background: var(--brand-soft); color: var(--text); border-radius: 0; }
.v2-day.is-today:not(.is-edge) { box-shadow: inset 0 0 0 1px var(--brand-line); }
.v2-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.v2-preset {
  padding: 7px 9px; border: .5px solid var(--glass-ring); border-radius: var(--r-md);
  background: var(--glass-soft); color: var(--text);
  font-family: inherit; font-size: 11px; text-align: left; cursor: pointer;
}
.v2-preset:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.v2-preset small { display: block; margin-top: 1px; color: var(--text-3); font-size: 10px; }
.v2-range-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin-bottom: 10px;
}
.v2-range-summary div { padding: 7px 9px; border: .5px solid var(--glass-ring); border-radius: var(--r-md); background: var(--glass-soft); }
.v2-range-summary p { margin: 0; color: var(--text-3); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.v2-range-summary strong { display: block; margin-top: 2px; font-size: 12px; font-weight: 650; }

/* Dashboard: em notebooks/telas 800px a sidebar reduz bastante a área útil.
   O período é o filtro que mais precisa de largura para exibir as duas datas,
   então ele ocupa meia linha nessa faixa, em vez de cortar o intervalo. */
@media (max-width: 1100px) and (min-width: 761px) {
  .v2-dashboard-filters .v2-form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .v2-dashboard-filters .v2-col-2,
  .v2-dashboard-filters .v2-col-3 { grid-column: span 3; }
  .v2-dashboard-filters .v2-col-4 { grid-column: span 6; }
}

/* O painel é um flex column; o miolo do calendário pode rolar, mas cabeçalho,
   resumo de início/fim e ações nunca somem em telas com pouca altura. */
.v2-date-popover .v2-calendar { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }

@media (max-height: 680px) and (min-width: 761px) {
  .v2-date-popover .v2-popover-head { padding-block: 8px; }
  .v2-date-popover .v2-calendar { gap: 8px; padding: 8px 10px; }
  .v2-date-popover .v2-weekdays { margin-top: 5px; }
  .v2-date-popover .v2-days { gap: 2px; margin-top: 2px; }
  .v2-date-popover .v2-day { height: 26px; font-size: 11px; }
  .v2-date-popover .v2-range-summary { gap: 6px; margin-bottom: 6px; }
  .v2-date-popover .v2-range-summary div { padding: 5px 7px; }
  .v2-date-popover .v2-preset { padding: 5px 7px; }
  .v2-date-popover .v2-popover-foot { padding-block: 7px; }
}

/* ---------- Dashboard ---------- */
.v2-dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; }
@media (max-width: 1050px) { .v2-dash-grid { grid-template-columns: 1fr; } }
.v2-section-intro { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 12px; }
.v2-section-intro p { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.v2-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; font-size: 11px; color: var(--text-3); }
.v2-meter-head strong { color: var(--text); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* Barra de progresso plana: sem gradiente nem sombra. */
.v2-progress { height: 3px; overflow: hidden; border-radius: 3px; background: var(--surface-3); }
.v2-progress > span { display: block; height: 100%; background: var(--brand); transition: width 400ms var(--ease); }
.v2-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-sale-id { flex: 0 0 auto; color: var(--brand); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* Lista de vendas dentro do card de status: rolagem própria e contida. */
.v2-status-scroll { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }

/* ==========================================================================
   Select2 vestido de V2.

   O select2 continua sendo o select2: o JS (select2_controller.js), a busca
   remota, o botão de criar/editar e o payload não mudam. O que muda é só a
   aparência — o gatilho vira um .v2-field-trigger e o dropdown vira um
   .v2-popover com .v2-option, para que um <select> com busca tenha exatamente
   o mesmo desenho em qualquer tela do sistema.

   O dropdown é anexado ao <body>, por isso as regras não dependem do contexto.
   ========================================================================== */

body.sysv2 .select2-container { width: 100% !important; }

/* ---------- Gatilho (single) ---------- */
body.sysv2 .select2-container--default .select2-selection--single {
  height: var(--control);
  display: flex;
  align-items: center;
  padding: 0 11px 0 13px;
  color: var(--text);
  background-color: var(--field-fill);
  border: .5px solid var(--glass-ring);
  border-radius: var(--r-lg);
  outline: 0;
  transition: border-color 150ms var(--ease), background-color 150ms var(--ease);
}
body.sysv2 .select2-container--default .select2-selection--single:hover {
  border-color: var(--line-strong);
  background-color: var(--glass-strong);
}
body.sysv2 .select2-container--default.select2-container--focus .select2-selection--single,
body.sysv2 .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--focus);
  background-color: var(--glass-strong);
  outline: 3px solid var(--focus-soft);
  outline-offset: 0;
}
body.sysv2 .select2-container--default .select2-selection--single .select2-selection__rendered {
  flex: 1; min-width: 0;
  padding: 0; line-height: normal;
  color: var(--text); font-size: 13px;
}
body.sysv2 .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-3); }

/* A seta padrão do select2 é um triângulo posicionado em absoluto; aqui ela
   vira o mesmo chevron dos demais campos. */
body.sysv2 .select2-container--default .select2-selection--single .select2-selection__arrow {
  position: static;
  width: 14px; height: 14px; flex: 0 0 auto;
  margin-left: 8px;
  background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23777d87' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  transition: transform 160ms var(--ease);
}
body.sysv2 .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
body.sysv2 .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow { transform: rotate(180deg); }
body.sysv2 .select2-container--default .select2-selection--single .select2-selection__clear {
  order: 1; margin: 0 4px 0 0; padding: 0;
  color: var(--text-3); font-size: 14px; font-weight: 400;
}

/* ---------- Gatilho (múltipla) ---------- */
body.sysv2 .select2-container--default .select2-selection--multiple {
  min-height: var(--control);
  padding: 3px 6px;
  color: var(--text);
  background-color: var(--field-fill);
  border: .5px solid var(--glass-ring);
  border-radius: var(--r-lg);
}
body.sysv2 .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--focus);
  outline: 3px solid var(--focus-soft);
}
body.sysv2 .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 2px 3px 2px 0; padding: 1px 7px;
  color: var(--brand); background: var(--brand-soft);
  border: .5px solid var(--brand-line); border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600;
}
body.sysv2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  order: 2; margin: 0; color: inherit; border: 0; background: transparent;
}

/* ---------- Dropdown ---------- */
body.sysv2 .select2-dropdown,
.select2-container--open .select2-dropdown {
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: .5px solid var(--glass-line);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  overflow: hidden;
}
body.sysv2 .select2-container--default .select2-search--dropdown { padding: 10px 12px; border-bottom: .5px solid var(--glass-ring); }
body.sysv2 .select2-container--default .select2-search--dropdown .select2-search__field {
  height: var(--control); padding: 0 13px;
  color: var(--text); background-color: var(--field-fill);
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  font-size: 13px; outline: 0;
}
body.sysv2 .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--focus); outline: 3px solid var(--focus-soft);
}
body.sysv2 .select2-container--default .select2-results > .select2-results__options {
  max-height: 260px;
  padding: 6px;
}
/* Cada resultado é uma .v2-option: 34px, hover neutro, escolhido em brand-soft. */
body.sysv2 .select2-container--default .select2-results__option {
  min-height: 34px;
  display: flex; align-items: center;
  padding: 7px 9px;
  border-radius: var(--r-md);
  color: var(--text-2); font-size: 12px;
}
body.sysv2 .select2-container--default .select2-results__option--highlighted[aria-selected],
body.sysv2 .select2-container--default .select2-results__option--highlighted {
  color: var(--text); background: var(--hover);
}
body.sysv2 .select2-container--default .select2-results__option[aria-selected="true"],
body.sysv2 .select2-container--default .select2-results__option[data-selected="true"] {
  color: var(--brand); background: var(--brand-soft); font-weight: 600;
}
body.sysv2 .select2-container--default .select2-results__option .select2-results__group {
  padding: 7px 9px 5px;
  color: var(--text-3); font-size: 10px; font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase;
}
body.sysv2 .select2-container--default .select2-results__message,
body.sysv2 .select2-container--default .select2-results__option.loading-results {
  color: var(--text-3); font-size: 12px;
}

/* Campo com ações ao lado (ex.: select2 com criar/editar). O campo ocupa a
   folga e os botões ficam do tamanho de um controle. */
.v2-field-inline { display: flex; align-items: center; gap: 6px; }
.v2-field-inline > :first-child { flex: 1; min-width: 0; }
.v2-field-inline .v2-field-inline-action {
  width: var(--control); height: var(--control);
  flex: 0 0 auto; border-radius: var(--r-lg);
  border: .5px solid var(--glass-ring); background: var(--glass-strong);
}
.v2-field-inline .v2-field-inline-action:hover { background: var(--brand-soft); border-color: var(--brand-line); }
/* d-none é a classe que o select2_controller usa para esconder o botão de
   editar enquanto não há seleção. */
.v2-field-inline .d-none { display: none !important; }

/* ---------- Discussão de tasks ---------- */
.v2-comment-body { color: var(--text-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.v2-mention {
  padding: 1px 4px; color: var(--brand-fg); background: var(--brand-soft);
  border-radius: var(--r-sm); font-weight: 650;
}
.v2-task-comments-scroll {
  gap: 10px;
  position: relative;
  height: 220px;
  min-height: 220px;
  min-width: 0;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 6px;
}
.v2-task-comments-scroll.ps { overflow: hidden !important; }
.v2-task-comments-scroll > .v2-card { flex: 0 0 auto; }
.v2-task-comments-scroll .ps__rail-y { width: 10px; background: transparent; opacity: 1; }
.v2-task-comments-scroll .ps__thumb-y { width: 6px; background: var(--text-3); opacity: .6; }

/* Administração de Preços: recomendações precisam permanecer legíveis mesmo
   quando o restante da tabela usa colunas compactas e layout fixo. */
.v2-table :is(th, td).v2-price-recommendations-col {
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.v2-price-recommendations-list { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 7px; }
.v2-price-recommendation { max-width: 100%; height: auto; white-space: normal; line-height: 1.35; text-align: left; }

/* ---------- Montagem de pedidos ----------
   Fluxo operacional mobile-first: ações têm área de toque ampla e os dados
   deixam de depender de tabelas horizontais abaixo de 760px. */
.v2-assembly-page { width: 100%; }
.v2-assembly-eyebrow {
  margin-bottom: 3px; color: var(--brand); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.v2-assembly-title-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.v2-assembly-live { gap: 7px; }
.v2-assembly-live > span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 4px var(--ok-bg);
}
.v2-assembly-range { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- Barra de comando da montagem ----------------------------------------
   A lista de pedidos é o conteúdo desta tela: título, período, filtros e
   resumo ficam todos numa faixa fina, para que o primeiro pedido apareça
   acima da dobra no telefone e no desktop. Os seletores usam o partial
   compartilhado `shared/system_v2/select` sem modificação — o rótulo some
   por CSS aqui dentro, e só aqui. */
.v2-assembly-bar {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; max-width: 100%;
  padding: 9px 12px;
  border: .5px solid var(--glass-ring);
  border-radius: var(--r-xl);
  background: var(--glass-soft);
}
.v2-assembly-bar-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.v2-assembly-page .v2-assembly-bar-title h1 { flex: 1; min-width: 0; font-size: 16px; }
.v2-assembly-bar-filters { gap: 10px; }
.v2-assembly-filter-form {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  flex: 1 1 320px; min-width: 0; max-width: 100%; margin: 0;
}
.v2-assembly-filter-field { min-width: 0; gap: 0; }
/* Rótulo continua no DOM para o leitor de tela; o nome do campo já aparece
   no placeholder do gatilho e no cabeçalho do popover. */
.v2-assembly-filter-field > label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.v2-assembly-filter-field .v2-field-trigger { height: 34px; gap: 7px; padding: 0 9px 0 11px; font-size: 12px; }
.v2-assembly-filter-submit { flex: 0 0 auto; }

.v2-assembly-stats {
  gap: 6px 16px; margin: 0; padding-top: 8px;
  border-top: .5px solid var(--glass-ring);
}
.v2-assembly-stats > div { display: inline-flex; align-items: baseline; gap: 6px; }
.v2-assembly-stats dt {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-3); font-size: 11px; font-weight: 600;
}
.v2-assembly-stats dt svg { width: 13px; height: 13px; }
.v2-assembly-stats dd {
  margin: 0; color: var(--text);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.v2-assembly-stats .is-danger dd { color: var(--danger); }
.v2-assembly-stats .is-info dd { color: var(--info); }
.v2-assembly-stats .is-ok dd { color: var(--ok); }
.v2-assembly-tabs { overflow-x: auto; scrollbar-width: thin; }
.v2-assembly-tabs .v2-tab { min-width: max-content; }
.v2-assembly-tabs .v2-tab svg { width: 14px; height: 14px; }
.v2-assembly-section-head { display: flex; align-items: center; justify-content: space-between; }
.v2-assembly-section-head p { margin-top: 5px; color: var(--text-3); font-size: 11px; }
.v2-assembly-cell-note { display: block; margin-top: 2px; color: var(--text-3); font-size: 10px; }
.v2-assembly-order-cards { display: none; }
/* A aba "A fazer" perdeu a casca de card para o primeiro pedido subir na
   tela; a tabela passa a carregar a própria superfície de vidro. */
.v2-assembly-orders-table {
  border-radius: var(--r-xl); overflow: hidden;
  border: .5px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
.v2-assembly-order-card.is-priority { border-color: color-mix(in srgb, var(--danger) 30%, var(--glass-ring)); }
.v2-assembly-card-top { display: flex; align-items: flex-start; gap: 10px; }
.v2-assembly-card-top h3 { margin-top: 8px; font-size: 14px; overflow-wrap: anywhere; }
.v2-assembly-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.v2-assembly-card-meta div { min-width: 0; padding-top: 9px; border-top: .5px solid var(--glass-ring); }
.v2-assembly-card-meta dt { color: var(--text-3); font-size: 10px; font-weight: 600; }
.v2-assembly-card-meta dd { margin: 3px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.v2-assembly-full-action { width: 100%; min-height: 42px; }
.v2-assembly-sale-links { display: flex; gap: 7px; flex-wrap: wrap; }
.v2-assembly-sale-head { flex-wrap: wrap; }
.v2-assembly-wide-field { grid-column: 1 / -1; }
.v2-assembly-progress-value { color: var(--text); font-size: 22px; font-variant-numeric: tabular-nums; }
.v2-assembly-progress { height: 9px; overflow: hidden; margin-bottom: 8px; border-radius: 999px; background: var(--surface-2); }
.v2-assembly-progress span { display: block; height: 100%; border-radius: inherit; background: var(--ok); transition: width 180ms var(--ease); }
.v2-assembly-items { display: flex; flex-direction: column; gap: 10px; }
.v2-assembly-item { padding: 13px; border: .5px solid var(--glass-ring); border-radius: var(--r-lg); background: var(--glass-soft); }
.v2-assembly-item.is-complete { border-color: color-mix(in srgb, var(--ok) 32%, var(--glass-ring)); background: var(--ok-bg); }
.v2-assembly-item-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v2-assembly-product-image {
  width: 52px; height: 52px; flex: 0 0 52px; overflow: hidden; padding: 0;
  border: .5px solid var(--glass-ring); border-radius: var(--r-md); background: var(--surface-2);
}
.v2-assembly-product-image:is(button, a) { cursor: pointer; }
.v2-assembly-product-image img { width: 100%; height: 100%; object-fit: cover; }
.v2-assembly-product-fallback { display: grid; place-items: center; color: var(--brand); font-size: 11px; font-weight: 700; }
.v2-assembly-product-copy { min-width: 0; }
.v2-assembly-product-copy h3 { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.v2-assembly-product-copy > p { margin-top: 2px; color: var(--text-3); font-size: 11px; }
.v2-assembly-item-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 7px; color: var(--warn); font-size: 11px; }
.v2-assembly-item-note svg { width: 13px; height: 13px; flex: 0 0 auto; }
.v2-assembly-quantities { display: flex; gap: 7px; }
.v2-assembly-quantities div { min-width: 66px; padding: 7px 9px; text-align: right; border: .5px solid var(--glass-ring); border-radius: var(--r-md); }
.v2-assembly-quantities span, .v2-assembly-quantities strong { display: block; }
.v2-assembly-quantities span { color: var(--text-3); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.v2-assembly-quantities strong { margin-top: 2px; font-size: 15px; font-variant-numeric: tabular-nums; }
.v2-assembly-item-action { min-width: 144px; display: flex; justify-content: flex-end; }
.v2-assembly-kit { margin: 10px 0 0 64px; border-top: .5px solid var(--glass-ring); }
.v2-assembly-kit summary { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 11px; font-weight: 600; cursor: pointer; list-style: none; }
.v2-assembly-kit summary::-webkit-details-marker { display: none; }
.v2-assembly-kit summary span { display: inline-flex; align-items: center; gap: 6px; }
.v2-assembly-kit summary svg { width: 14px; height: 14px; }
/* Crítica da montagem do kit dinâmico: o que saiu, o que entrou e o que mudou
   em relação ao kit cadastrado. Fica ACIMA da lista de componentes porque é a
   informação que decide a montagem — a lista é a conferência. */
.v2-assembly-critique {
  margin-bottom: 10px; padding: 10px;
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  background: var(--surface-2);
}
.v2-assembly-critique.is-changed { border-color: var(--warn-line); background: var(--warn-bg); }
.v2-assembly-critique.is-standard { border-color: var(--ok-line); background: var(--ok-bg); }
.v2-assembly-critique-head { display: flex; align-items: flex-start; gap: 8px; }
.v2-assembly-critique-head > svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--text-2); }
.v2-assembly-critique.is-changed .v2-assembly-critique-head > svg { color: var(--warn); }
.v2-assembly-critique.is-standard .v2-assembly-critique-head > svg { color: var(--ok); }
.v2-assembly-critique-head strong { display: block; font-size: 12px; font-weight: 650; }
.v2-assembly-critique-head small { display: block; margin-top: 1px; color: var(--text-2); font-size: 11px; }

/* Tabelas do kit (crítica e conferência): vivem dentro do painel do item, que
   já é uma superfície — daí o fundo próprio, a borda de contorno e o corpo de
   texto um degrau menor que o das tabelas de tela cheia. */
.v2-assembly-critique-table, .v2-assembly-kit-table {
  margin-top: 10px;
  border: .5px solid var(--glass-ring); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.v2-assembly-kit-table { margin-top: 0; }
:is(.v2-assembly-critique-table, .v2-assembly-kit-table) .v2-table-report :is(th, td) {
  padding: 8px 12px; font-size: 11px;
}
:is(.v2-assembly-critique-table, .v2-assembly-kit-table) .v2-table-report th { font-size: 10px; }
:is(.v2-assembly-critique-table, .v2-assembly-kit-table) .v2-cell-strong { font-size: 11px; }
:is(.v2-assembly-critique-table, .v2-assembly-kit-table) .v2-cell-sub { font-size: 10px; }

/* O veredito da linha também é cor: a montadora varre a coluna da esquerda. */
.v2-assembly-critique-table tbody tr > td:first-child { border-left: 2px solid transparent; }
.v2-assembly-critique-table tbody tr.is-removed > td:first-child { border-left-color: var(--danger); }
.v2-assembly-critique-table tbody tr.is-added > td:first-child { border-left-color: var(--info); }
.v2-assembly-critique-table tbody tr.is-changed > td:first-child { border-left-color: var(--warn); }
.v2-assembly-critique-table tbody tr.is-removed .v2-num { color: var(--danger); }
.v2-assembly-critique-table tbody tr.is-added .v2-num { color: var(--info); }
.v2-assembly-critique-table tbody tr.is-changed .v2-num { color: var(--warn); }
.v2-assembly-critique-table .v2-badge { margin-bottom: 2px; }

.v2-assembly-critique-foot {
  display: flex; align-items: center; gap: 5px;
  margin: 8px 0 0; color: var(--text-3); font-size: 11px;
}
.v2-assembly-critique-foot svg { width: 12px; height: 12px; color: var(--ok); }

.v2-assembly-kit-caption {
  margin: 0 0 6px; color: var(--text-3);
  font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
}
.v2-assembly-kit summary .v2-badge { margin-left: 6px; }

.v2-assembly-modal-image { display: grid; place-items: center; padding: 16px; }
.v2-assembly-modal-image img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r-lg); }
.v2-assembly-finalize-form { margin: 0; }
.v2-assembly-finalize { width: 100%; min-height: 46px; }

@media (max-width: 760px) {
  .v2-assembly-bar { padding: 8px 10px; gap: 7px; background: var(--surface); border-color: var(--line); }
  .v2-assembly-page .v2-assembly-bar-title h1 { font-size: 15px; }
  .v2-assembly-bar-filters { flex-direction: column; align-items: stretch; gap: 7px; }
  .v2-assembly-range { flex-wrap: nowrap; overflow-x: auto; min-width: 0; padding-bottom: 2px; scrollbar-width: none; }
  .v2-assembly-range::-webkit-scrollbar { display: none; }
  .v2-assembly-range .v2-btn { flex: 0 0 auto; min-height: 34px; }
  .v2-assembly-filter-form { flex: 1 1 auto; gap: 6px; }
  .v2-assembly-filter-submit { min-height: 34px; padding-inline: 11px; }
  .v2-assembly-stats { gap: 4px 12px; }
  .v2-assembly-tabs { margin-inline: -2px; }
  .v2-assembly-tabs .v2-tab { min-height: 44px; padding-inline: 14px; }
  .v2-assembly-orders-table { display: none; }
  .v2-assembly-order-cards { display: flex; flex-direction: column; gap: 9px; }
  .v2-assembly-summary-grid { gap: 10px; }
  .v2-assembly-item-main { align-items: flex-start; flex-wrap: wrap; }
  .v2-assembly-product-copy { flex: 1 1 calc(100% - 66px); }
  .v2-assembly-quantities { width: 100%; }
  .v2-assembly-quantities div { flex: 1; text-align: center; }
  .v2-assembly-item-action { width: 100%; min-width: 0; }
  .v2-assembly-item-action form, .v2-assembly-item-action .v2-btn { width: 100%; }
  .v2-assembly-item-action .v2-btn { min-height: 44px; }
  .v2-assembly-kit { margin-left: 0; }
  .v2-assembly-kit summary { min-height: 44px; }
  .v2-assembly-sale-head > .v2-btn { width: 100%; min-height: 42px; }
  .v2-assembly-card-meta { grid-template-columns: 1fr; }
}

/* ---------- Entregas do entregador (fila, rota e detalhe) ----------
   Fluxo operacional mobile-first, irmão da Montagem de Pedidos: quem usa
   estas telas está em pé, com uma das mãos no volante ou na caixa. Por isso
   a ação principal ocupa a largura toda, tem área de toque ampla, e os dados
   do endereço deixam de depender de tabela horizontal abaixo de 760px. */
.v2-delivery-page { width: 100%; }
.v2-delivery-eyebrow {
  margin-bottom: 3px; color: var(--brand); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.v2-delivery-title-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* --- Barra de comando -----------------------------------------------------
   Título, atalho do histórico e resumo numa faixa fina, para a primeira
   entrega aparecer acima da dobra. Mesma geometria da `.v2-assembly-bar`. */
.v2-delivery-bar {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; max-width: 100%;
  padding: 9px 12px;
  border: .5px solid var(--glass-ring);
  border-radius: var(--r-xl);
  background: var(--glass-soft);
}
.v2-delivery-bar-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.v2-delivery-page .v2-delivery-bar-title h1 { min-width: 0; font-size: 16px; }
.v2-delivery-bar-sub { flex: 1; min-width: 0; margin: 0; color: var(--text-3); font-size: 11px; }
.v2-delivery-bar-title > .v2-btn { margin-left: auto; }

.v2-delivery-stats {
  gap: 6px 16px; margin: 0; padding-top: 8px;
  border-top: .5px solid var(--glass-ring);
}
.v2-delivery-stats > div { display: inline-flex; align-items: baseline; gap: 6px; }
.v2-delivery-stats dt {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-3); font-size: 11px; font-weight: 600;
}
.v2-delivery-stats dt svg { width: 13px; height: 13px; }
.v2-delivery-stats dd {
  margin: 0; color: var(--text);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.v2-delivery-stats .is-ok dd { color: var(--ok); }
.v2-delivery-stats .is-info dd { color: var(--info); }
.v2-delivery-stats .is-warn dd { color: var(--warn); }

.v2-delivery-progress { flex: 1; height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.v2-delivery-progress span { display: block; height: 100%; border-radius: inherit; background: var(--ok); transition: width 220ms var(--ease); }

/* --- Seções da lista ------------------------------------------------------ */
.v2-delivery-section-head { display: flex; align-items: center; gap: 8px; }
.v2-delivery-section-head h2 { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; }
.v2-delivery-section-head h2 svg { width: 15px; height: 15px; color: var(--text-2); }
.v2-delivery-cards { display: flex; flex-direction: column; gap: 10px; }
/* A lista do modo clássico é tabela no desktop e cartão no telefone — a troca
   é só de CSS, as duas marcações saem juntas do `_delivery_list`. */
.v2-delivery-list-cards, .v2-delivery-done-cards { display: none; }
.v2-delivery-cell-note { display: block; margin-top: 2px; color: var(--text-3); font-size: 10px; }

/* --- Cartão de entrega / parada ------------------------------------------- */
.v2-delivery-card.is-mine { border-color: color-mix(in srgb, var(--info) 30%, var(--glass-ring)); }
.v2-delivery-card-top, .v2-delivery-stop-top { display: flex; align-items: flex-start; gap: 10px; }
.v2-delivery-card-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v2-delivery-card-badges strong { font-size: 12px; font-weight: 650; }
.v2-delivery-page :is(.v2-delivery-card-top, .v2-delivery-stop-top) h3 { margin-top: 8px; font-size: 14px; overflow-wrap: anywhere; }
.v2-delivery-card-value {
  flex: 0 0 auto; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.v2-delivery-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.v2-delivery-card-meta > div { min-width: 0; padding-top: 9px; border-top: .5px solid var(--glass-ring); }
.v2-delivery-card-meta dt {
  display: flex; align-items: center; gap: 5px;
  color: var(--text-3); font-size: 10px; font-weight: 600;
}
.v2-delivery-card-meta dt svg { width: 12px; height: 12px; }
.v2-delivery-card-meta dd { margin: 3px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.v2-delivery-card-meta dd small { display: block; margin-top: 2px; color: var(--text-3); font-size: 11px; }
.v2-delivery-card-wide { grid-column: 1 / -1; }

.v2-delivery-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.v2-delivery-card-actions .v2-alert { margin: 0; }
.v2-delivery-card-links { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-delivery-card-links .v2-btn { flex: 1 1 140px; min-height: 40px; }
.v2-delivery-full-action { width: 100%; min-height: 42px; }
.v2-delivery-card .v2-alert { margin-top: 12px; }

/* Parada da rota: o veredito é a cor da borda esquerda — a lista é varrida
   pela lateral, não lida item a item. */
.v2-delivery-stop { border-left: 2px solid var(--line); }
.v2-delivery-stop[data-status="aceito"] { border-left-color: var(--info); }
.v2-delivery-stop[data-status="em_transito"] { border-left-color: var(--warn); }
.v2-delivery-stop[data-status="entregue"] { border-left-color: var(--ok); opacity: .72; }
.v2-delivery-stop-index {
  width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center;
  border-radius: var(--r-md); border: .5px solid var(--line);
  color: var(--text-2); background: var(--surface-2);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.v2-delivery-stop[data-status="aceito"] .v2-delivery-stop-index { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.v2-delivery-stop[data-status="em_transito"] .v2-delivery-stop-index { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.v2-delivery-stop[data-status="entregue"] .v2-delivery-stop-index { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.v2-delivery-stop-transit { display: flex; flex-direction: column; gap: 6px; }
.v2-delivery-stop-done {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; margin: 0; color: var(--ok); font-size: 12px; font-weight: 650;
}
.v2-delivery-stop-done svg { width: 15px; height: 15px; }

.v2-delivery-receipt-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: .5px solid var(--warn-line); border-radius: var(--r-lg);
  background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 650;
}
.v2-delivery-receipt-strip span { display: inline-flex; align-items: center; gap: 6px; }
.v2-delivery-receipt-strip svg { width: 14px; height: 14px; }
.v2-delivery-receipt-strip strong { font-size: 13px; font-variant-numeric: tabular-nums; }

/* --- Rota ativa / rotas planejadas ---------------------------------------- */
.v2-delivery-route-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v2-delivery-route-dot {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  border-radius: var(--r-md); color: #fff;
}
.v2-delivery-route-dot svg { width: 16px; height: 16px; }
.v2-delivery-route-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-delivery-route-title strong { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.v2-delivery-route-meta {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  margin: 4px 0 0; color: var(--text-3); font-size: 11px;
}
.v2-delivery-route-meta span { display: inline-flex; align-items: center; gap: 5px; }
.v2-delivery-route-meta svg { width: 12px; height: 12px; }
.v2-delivery-planned { padding: 0; }
.v2-delivery-planned-item { border-left: 2px solid var(--v2-route-color, var(--line)); }

/* --- Detalhe da entrega --------------------------------------------------- */
.v2-delivery-date-value { font-size: 20px; }
.v2-delivery-wide-field { grid-column: 1 / -1; }
.v2-delivery-items-cards { display: none; }
.v2-delivery-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: .5px solid var(--glass-ring);
}
.v2-delivery-total span { color: var(--text-3); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.v2-delivery-total strong { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v2-delivery-page .v2-card-icon.warn { color: var(--warn); background: var(--warn-bg); }
.v2-delivery-receipt-total { font-size: 16px; font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; }

.v2-delivery-action { width: 100%; min-height: 46px; }
.v2-delivery-action-form { margin: 0; }

/* Segurar para finalizar: a barra de preenchimento é o feedback do gesto e
   vive DENTRO do botão, atrás do rótulo — daí o `position: relative` e a
   camada de rótulo com `z-index`. O Alpine escreve só a largura. */
.v2-delivery-hold { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.v2-delivery-hold-fill {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: rgba(255, 255, 255, .28); pointer-events: none;
}
.v2-delivery-hold-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.v2-delivery-hold-hint { text-align: center; }

.v2-delivery-success { width: min(320px, 100%); text-align: center; }
.v2-delivery-success .v2-modal-body { padding: 28px 22px; }
.v2-delivery-success-mark {
  width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 12px;
  border-radius: 50%; color: var(--ok); background: var(--ok-bg);
}
.v2-delivery-success-mark svg { width: 28px; height: 28px; }
.v2-delivery-success h2 { color: var(--ok); font-size: 18px; font-weight: 700; }
.v2-delivery-success p { margin-top: 4px; color: var(--text-3); font-size: 12px; }

/* Ícone de carregamento dos botões de ação (Alpine troca o <i>). */
.v2-spin { animation: v2-spin 900ms linear infinite; }
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* Os badges de situação vêm dos helpers `delivery_status_badge` e
   `delivery_time_indicator`, que servem V1 e V2 com o mesmo <span>. Aqui eles
   ganham a pele do V2 — mesma tradução já feita em `.v2-delivery-history`. */
.v2-delivery-page :is(.badge-light-info, .badge-light-primary, .badge-light-success, .badge-light-secondary,
                      .badge-danger, .badge-warning, .badge-info, .badge-light) {
  min-height: 22px; display: inline-flex; align-items: center; padding: 3px 8px;
  border: .5px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 650;
}
.v2-delivery-page :is(.badge-light-info, .badge-info) { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.v2-delivery-page .badge-light-primary { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line); }
.v2-delivery-page .badge-light-success { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.v2-delivery-page :is(.badge-light-secondary, .badge-light) { color: var(--text-2); background: var(--surface-2); }
.v2-delivery-page .badge-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.v2-delivery-page .badge-warning { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }

@media (max-width: 760px) {
  .v2-delivery-bar { padding: 8px 10px; gap: 7px; background: var(--surface); border-color: var(--line); }
  .v2-delivery-page .v2-delivery-bar-title h1 { font-size: 15px; }
  .v2-delivery-bar-sub { flex: 1 1 100%; order: 3; }
  .v2-delivery-stats { gap: 4px 12px; }
  .v2-delivery-card-meta { grid-template-columns: 1fr; }
  .v2-delivery-summary-grid { grid-template-columns: 1fr; gap: 10px; }
  .v2-delivery-done-table, .v2-delivery-items-table, .v2-delivery-list-table { display: none; }
  .v2-delivery-done-cards, .v2-delivery-items-cards { display: block; }
  .v2-delivery-list-cards { display: flex; flex-direction: column; gap: 10px; }
  .v2-delivery-card-links .v2-btn { min-height: 44px; }
  .v2-delivery-full-action, .v2-delivery-action { min-height: 46px; }
  .v2-delivery-page .v2-page-head > .v2-page-actions { width: 100%; }
  .v2-delivery-page .v2-page-actions .v2-btn { flex: 1; min-height: 42px; }
}

/* ---------- Histórico do entregador ---------- */
.v2-delivery-history-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  gap: 16px; align-items: start;
}
.v2-delivery-history-main { min-width: 0; }
.v2-delivery-history-filter { position: sticky; top: 8px; }
.v2-delivery-filter-actions { display: flex; gap: 7px; }
.v2-delivery-filter-actions .v2-btn { flex: 1; }
.v2-delivery-history-day-cards, .v2-delivery-history-cards { display: none; }
.v2-delivery-hour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.v2-delivery-hour-row { display: grid; grid-template-columns: 92px minmax(70px, 1fr) 26px; align-items: center; gap: 9px; }
.v2-delivery-hour-row > span { color: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.v2-delivery-hour-row > div { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.v2-delivery-hour-row > div i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.v2-delivery-hour-row > strong { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.v2-delivery-history-pagination { justify-content: space-between; flex-wrap: wrap; }
.v2-delivery-history-pagination > span { color: var(--text-3); font-size: 11px; }
.v2-delivery-history-pagination .pagy { display: flex; align-items: center; gap: 2px; }
.v2-delivery-history-pagination .pagy a {
  min-width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0 7px;
  color: var(--text-2); border-radius: var(--r-md); font-size: 11px; text-decoration: none;
}
.v2-delivery-history-pagination .pagy a:hover { color: var(--text); background: var(--hover); }
.v2-delivery-history-pagination .pagy a.current { color: var(--brand-fg); background: var(--brand); }
.v2-delivery-history-pagination .pagy a[aria-disabled="true"] { opacity: .35; }
.v2-delivery-history :is(.badge-light-info, .badge-light-primary, .badge-light-success, .badge-light-secondary) {
  min-height: 22px; display: inline-flex; align-items: center; padding: 3px 8px;
  border: .5px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 650;
}
.v2-delivery-history .badge-light-info { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.v2-delivery-history .badge-light-primary { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line); }
.v2-delivery-history .badge-light-success { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.v2-delivery-history .badge-light-secondary { color: var(--text-2); background: var(--surface-2); }
.v2-delivery-card-status { display: block; margin-top: 6px; }

@media (max-width: 900px) {
  .v2-delivery-history-layout { grid-template-columns: 1fr; }
  .v2-delivery-history-filter { position: static; order: -1; }
}

@media (max-width: 760px) {
  .v2-delivery-history-day-table, .v2-delivery-history-detail-table { display: none; }
  .v2-delivery-history-day-cards, .v2-delivery-history-cards { display: block; }
  .v2-delivery-hour-grid { grid-template-columns: 1fr; }
  .v2-delivery-hour-row { grid-template-columns: 86px minmax(60px, 1fr) 24px; min-height: 32px; }
  .v2-delivery-history-day-cards .v2-list-item { align-items: flex-start; }
  .v2-delivery-history-day-cards .v2-value { text-align: right; white-space: nowrap; }
  .v2-delivery-history-cards .v2-list-item { min-height: 64px; }
  .v2-delivery-history-pagination { align-items: flex-start; flex-direction: column; }
  .v2-delivery-filter-actions .v2-btn { min-height: 44px; }
}

/* ---------- Wizard horizontal (entrada de mercadoria com nota fiscal) ----------
   Diferente de `.v2-steps`, que é uma lista vertical explicativa: aqui os passos
   são navegação de verdade e precisam caber lado a lado, com o passo corrente
   destacado e os já cumpridos marcados. O estado é escrito pelo Stimulus
   (`purchase-ocr-wizard`) nas classes `is-active` / `is-done` do <li>. */
/* O estado do wizard não depende do Tailwind carregado por CDN. A classe
   hidden precisa vencer display:flex/grid dos componentes V2, inclusive
   quando as utilities do Tailwind estão em uma cascade layer. */
.v2-purchase-wizard .hidden { display: none !important; }
.v2-wizard { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.v2-wizard-step {
  flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px;
  opacity: .55; transition: opacity 140ms var(--ease);
}
.v2-wizard-step.is-active, .v2-wizard-step.is-done { opacity: 1; }
.v2-wizard-badge {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-md); font-size: 12px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-3); background: var(--surface-2); border: .5px solid var(--line);
  transition: color 140ms var(--ease), background-color 140ms var(--ease);
}
.v2-wizard-step.is-active .v2-wizard-badge { color: var(--brand-fg); background: var(--brand); border-color: var(--brand); }
.v2-wizard-step.is-done .v2-wizard-badge { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.v2-wizard-copy { min-width: 0; }
.v2-wizard-copy strong { display: block; font-size: 12px; font-weight: 650; }
.v2-wizard-copy span { display: block; color: var(--text-3); font-size: 11px; }
.v2-wizard-line { flex: 1; height: .5px; background: var(--glass-ring); }

/* Cartões de escolha do modo de entrada: são <button>, então precisam do reset
   de fonte/alinhamento que o .v2-card sozinho não dá. */
.v2-wizard-mode { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.v2-wizard-mode:hover { border-color: var(--brand-line); background-color: var(--glass-strong); }
.v2-wizard-mode .v2-card-body { display: flex; flex-direction: column; gap: 8px; }
.v2-wizard-mode h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 650; }
.v2-wizard-mode p { color: var(--text-2); font-size: 12px; line-height: 1.5; }
.v2-wizard-mode .v2-wizard-mode-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--brand); font-size: 12px; font-weight: 650; }
.v2-wizard-mode .v2-wizard-mode-go svg { width: 14px; height: 14px; }

/* Barra de confirmação do passo de vínculo: acompanha a rolagem da lista. */
/* O `display` fica no :not(.hidden) porque o Stimulus esconde a barra com a
   classe utilitária `hidden`, e as duas regras teriam a mesma especificidade. */
.v2-wizard-confirm {
  position: sticky; bottom: 16px; z-index: 5;
  padding: 12px 16px; background: var(--glass-strong);
}
.v2-wizard-confirm:not(.hidden) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- Leitura da nota fiscal (progresso + itens extraídos) ---------- */
.v2-ocr-progress-track { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 12px; }
.v2-ocr-progress-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width 700ms var(--ease); }
.v2-ocr-progress-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.v2-ocr-mark { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-3); font-size: 10px; font-weight: 550; }
.v2-ocr-mark::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--line); }
.v2-ocr-mark.is-done { color: var(--brand); }
.v2-ocr-mark.is-done::before { background: var(--brand); }
.v2-ocr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--text-2); font-size: 12px; }
.v2-ocr-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-ocr-suggestions form { display: inline; margin: 0; }
.v2-ocr-fiscal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; font-size: 12px; }
.v2-ocr-fiscal p { color: var(--text-2); }
.v2-ocr-fiscal strong { color: var(--text); }
.v2-ocr-fiscal-title { color: var(--brand); font-size: 11px; font-weight: 650; margin-bottom: 3px; }
.v2-ocr-fiscal-wide { grid-column: 1 / -1; }
.v2-ocr-fiscal-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

@media (max-width: 760px) {
  .v2-wizard-line { display: none; }
  .v2-ocr-fiscal, .v2-ocr-fiscal-figures { grid-template-columns: 1fr; }
  .v2-ocr-progress-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Entregas: a navegação herda a aparência de `.v2-tabs`/`.v2-tab`. No
   telefone os rótulos ficam curtos e as três opções usam a largura disponível
   sem quebrar em duas linhas; o nome completo continua no desktop e no nome
   acessível do link. */
.v2-delivery-tabs { width: 100%; gap: 4px; }
.v2-delivery-tab {
  flex: 1 1 0; min-width: 0; min-height: 44px; height: auto;
  justify-content: center; padding: 7px 12px; font-weight: 600;
}
.v2-delivery-tab > svg { width: 15px; height: 15px; flex: 0 0 auto; }
.v2-delivery-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v2-delivery-tab-label-compact { display: none; }
.v2-delivery-tab .v2-badge {
  min-width: 22px; height: 22px; flex: 0 0 auto; padding-inline: 6px;
  font-variant-numeric: tabular-nums;
}
.v2-delivery-queue { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.v2-delivery-row + .v2-delivery-row { border-top: 1px solid var(--line); }
.v2-delivery-row > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 80px; align-items: center; gap: 14px; padding: 14px; cursor: pointer; list-style: none; }
.v2-delivery-row > summary::-webkit-details-marker { display: none; }
.v2-delivery-row > summary:hover { background: var(--surface-2); }
.v2-delivery-row > summary:focus-visible, .v2-delivery-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.v2-delivery-row-order { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.v2-delivery-row-customer { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.v2-delivery-row-customer strong { font-size: 14px; }
.v2-delivery-row-customer > span { font-size: 12px; color: var(--text-2); }
.v2-delivery-deadline { display: flex; flex-direction: column; gap: 3px; color: var(--info); background: var(--info-bg); padding: 7px 10px; border-radius: 6px; }
.v2-delivery-deadline small { font-size: 11px; color: var(--text-2); }
.v2-delivery-deadline time, .v2-delivery-deadline strong { font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.v2-delivery-row-toggle { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); }
.v2-delivery-row-toggle svg { width: 16px; height: 16px; }
.v2-delivery-row .when-open, .v2-delivery-row[open] .when-closed { display: none; }
.v2-delivery-row[open] .when-open { display: inline; }
.v2-delivery-row[open] .v2-delivery-row-toggle svg { transform: rotate(180deg); }
.v2-delivery-row-body { padding: 16px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .v2-delivery-tabs {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px; overflow: visible;
  }
  .v2-delivery-tab {
    width: 100%; gap: 5px; padding: 7px 5px;
    white-space: nowrap; text-align: center; font-size: 12px;
  }
  .v2-delivery-tab-label-full { display: none; }
  .v2-delivery-tab-label-compact { display: inline; }
  .v2-delivery-tab .v2-badge { min-width: 20px; height: 20px; padding-inline: 5px; }
  .v2-delivery-row > summary { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; padding: 12px; }
  .v2-delivery-row-customer { grid-column: 2 / -1; }
  .v2-delivery-deadline { grid-column: 2; padding: 6px 8px; }
  .v2-delivery-deadline time, .v2-delivery-deadline strong { font-size: 16px; }
  .v2-delivery-row-toggle { grid-column: 3; }
  .v2-delivery-row-toggle .when-closed, .v2-delivery-row-toggle .when-open { display: none; }
}
@media (max-width: 400px) {
  .v2-delivery-tab > svg { display: none; }
}
@media (max-width: 360px) {
  .v2-delivery-tab { gap: 4px; padding-inline: 4px; font-size: 11px; }
}

/* Ambiente fiscal: radio nativo, seleção explícita e cartão clicável. */
.v2-sefaz-environment { border: 0; padding: 0; margin: 0; min-width: 0; }
.v2-sefaz-environment > legend { margin-bottom: 6px; font-size: 11px; font-weight: 600; color: var(--text); }
.v2-sefaz-option { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; }
.v2-sefaz-option input[type="radio"] { appearance: auto; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.v2-sefaz-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.v2-sefaz-option:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* NCM: feedback discreto de trabalho, resultado e revisão opcional. */
.v2-ncm-tools { display: grid; gap: 12px; }
.v2-ncm-tool-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.v2-ncm-tool-row .v2-field { min-width: 120px; max-width: 240px; }
.v2-ncm-feedback { margin-top: 8px; }
.v2-ncm-feedback[hidden] { display: none; }
.v2-ncm-feedback[data-state="loading"]::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: v2-ncm-spin .85s linear infinite;
}
.v2-ncm-filter-result { animation: v2-ncm-reveal .22s ease-out; }
@keyframes v2-ncm-spin { to { transform: rotate(360deg); } }
@keyframes v2-ncm-reveal { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .v2-ncm-feedback[data-state="loading"]::before, .v2-ncm-filter-result { animation: none; }
}

/* NCM: etapas, seleção e revisão com feedback no contexto da ação. */
.v2-ncm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v2-ncm-steps a { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; padding: 14px 16px; border: .5px solid var(--glass-ring); border-radius: 10px; background: var(--glass-strong); color: var(--text); text-decoration: none; }
.v2-ncm-steps a > span { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.v2-ncm-steps strong { font-size: 12px; }
.v2-ncm-steps small { color: var(--text-2); font-size: 11px; margin-top: 3px; }
.v2-ncm-steps a:hover, .v2-ncm-steps a[aria-current] { border-color: var(--brand); }
.v2-ncm-overview > summary { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 18px; cursor: pointer; font-size: 12px; font-weight: 600; }
.v2-ncm-overview > summary::before, .v2-ncm-manual > summary::before { content: "›"; font-size: 20px; transition: transform .2s ease; }
.v2-ncm-overview[open] > summary::before, .v2-ncm-manual[open] > summary::before { transform: rotate(90deg); }
.v2-ncm-overview > .v2-kpis, .v2-ncm-overview > .v2-alert { margin: 12px 16px; }
.v2-ncm-manual > summary { cursor: pointer; list-style: none; }
.v2-ncm-manual:not([open]) > summary { border-bottom: 0; }
.v2-ncm-selection-summary { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: var(--surface-2); }
.v2-ncm-tools > .v2-ncm-tool-row { padding: 14px; border: .5px solid var(--glass-ring); border-radius: 8px; background: var(--surface-2); }
.v2-ncm-auto-hint { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.v2-ncm-auto-hint svg, .v2-ncm-row-meta .v2-badge svg { width: 13px; height: 13px; }
.v2-ncm-row-meta .v2-badge { display: inline-flex; align-items: center; gap: 4px; }
.v2-ncm-refine-summary[hidden] { display: none; }
.v2-ncm-accept { display: flex; align-items: center; gap: 7px; min-width: 115px; color: var(--text-2); cursor: pointer; font-size: 11px; }
.v2-ncm-accept:has(input:checked) { color: var(--ok); font-weight: 650; }
#product-ncms-root input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }
#product-ncms-root .v2-ncm-row-selected > td { background: var(--brand-soft); }
#product-ncms-root .v2-ncm-row-accepted > td:last-child { background: var(--ok-bg); border-left: 2px solid var(--ok); }
#product-ncms-root tbody td { transition: background-color .22s ease; }
.v2-ncm-row-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 9px; }
.v2-ncm-dock { position: sticky; bottom: 12px; z-index: 25; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--brand-line); border-radius: 10px; background: var(--surface); backdrop-filter: blur(16px); }
.v2-ncm-dock strong { font-size: 13px; }
.v2-ncm-dock p { margin: 5px 0 0; color: var(--text-2); font-size: 12px; }
.v2-ncm-dock-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-ncm-feedback { align-items: flex-start; }
.v2-ncm-feedback[data-state="loading"]::before { content: none; }
.v2-ncm-status-icon { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; }
.v2-ncm-status-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-state="success"] .v2-ncm-status-icon path { stroke-dasharray: 32; stroke-dashoffset: 0; animation: v2-ncm-check .5s ease-out; }
[data-state="loading"] .v2-ncm-status-icon svg { stroke-dasharray: 54 22; animation: v2-ncm-spin 1s linear infinite; }
.v2-ncm-activity { display: block; height: 3px; overflow: hidden; background: var(--info-bg); border-radius: 6px; margin-top: 10px; }
.v2-ncm-activity::after { content: ""; display: block; width: 35%; height: 100%; background: var(--info); animation: v2-ncm-activity 1.6s ease-in-out infinite; }
.v2-ncm-toast { position: fixed; top: 82px; right: 24px; z-index: 90; max-width: min(440px, calc(100vw - 32px)); padding: 14px; display: flex; gap: 12px; align-items: center; background: var(--surface); color: var(--text); border: 1px solid var(--ok); border-radius: 10px; animation: v2-ncm-reveal .25s ease-out; }
.v2-ncm-toast[hidden] { display: none; }
.v2-ncm-toast > span { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.5; }
.v2-ncm-toast .v2-ncm-status-icon { color: var(--ok); }
.v2-ncm-toast[data-state="error"] { border-color: var(--danger); }
.v2-ncm-toast[data-state="error"] .v2-ncm-status-icon { color: var(--danger); }
.v2-ncm-toast[data-state="empty"] { border-color: var(--warn); }
.v2-ncm-toast[data-state="empty"] .v2-ncm-status-icon { color: var(--warn); }
.v2-ncm-toast > button { color: var(--text-2); background: none; border: 0; font-size: 22px; cursor: pointer; padding: 4px; }
.v2-ncm-search-option { display: block; width: 100%; text-align: left; padding: 12px 16px; color: var(--text); background: var(--surface); border: 0; border-bottom: .5px solid var(--glass-ring); cursor: pointer; }
.v2-ncm-search-option:hover, .v2-ncm-search-option:focus-visible { background: var(--brand-soft); outline: 2px solid var(--brand); outline-offset: -2px; }
#ncm-filtros, #ncm-lista, #ncm-aplicar { scroll-margin-top: 85px; }
#product-ncms-root button[aria-busy="true"]::after { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: v2-ncm-spin .85s linear infinite; }
@keyframes v2-ncm-check { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes v2-ncm-activity { from { transform: translateX(-100%); } to { transform: translateX(390%); } }
@media (max-width: 700px) {
  .v2-ncm-steps { gap: 6px; }
  .v2-ncm-steps a { display: flex; flex-direction: column; align-items: start; padding: 10px; gap: 7px; }
  .v2-ncm-steps small { display: none; }
  .v2-ncm-dock { bottom: 6px; padding: 12px; gap: 8px; }
  .v2-ncm-dock-actions { width: 100%; }
  .v2-ncm-dock-actions .v2-btn { flex: 1; padding-inline: 10px; font-size: 11px; }
  .v2-ncm-tool-row .v2-field { flex: 1; max-width: none; }
  .v2-ncm-toast { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #product-ncms-root *, #product-ncms-root *::before, #product-ncms-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
#ncm-lista .v2-table { table-layout: fixed; min-width: 1060px; }
#ncm-lista .v2-table th:nth-child(1) { width: 40px; }
#ncm-lista .v2-table th:nth-child(2) { width: 22%; }
#ncm-lista .v2-table th:nth-child(3) { width: 11%; }
#ncm-lista .v2-table th:nth-child(4) { width: 14%; }
#ncm-lista .v2-table td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
#ncm-lista .ncm-sugestao { width: 100%; text-overflow: ellipsis; }
#ncm-lista .ncm-sugestao-detalhe { line-height: 1.55; }
.v2-ncm-manual[open] { overflow: visible; }
.v2-ncm-generating > svg { animation: v2-ncm-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .v2-ncm-generating > svg { animation: none; } }

/* NCM: linhas que se atualizam durante a geração de sugestões. */
.v2-ncm-pending { display: inline-flex; align-items: center; gap: 8px; color: var(--info); font-size: 12px; }
.v2-ncm-pending-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); animation: v2-ncm-pulse 1.2s ease-in-out infinite; }
.v2-ncm-meter { display: inline-block; width: 64px; height: 5px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.v2-ncm-meter > span { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .4s ease; }
.v2-ncm-progress { display: block; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--info-bg); overflow: hidden; }
.v2-ncm-progress > span { display: block; height: 100%; background: var(--info); transition: width .5s ease; }
#product-ncms-root tr.v2-ncm-row-updated > td:last-child { animation: v2-ncm-row-in 1.6s ease-out; }
@keyframes v2-ncm-pulse { 50% { opacity: .3; transform: scale(.7); } }
@keyframes v2-ncm-row-in { from { background: var(--info-bg); } to { background: transparent; } }
.v2-ncm-regerar { margin-left: auto; gap: 5px; }
.v2-ncm-regerar svg { width: 13px; height: 13px; }
.v2-ncm-refazer { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); cursor: pointer; }

/* Seletor de contexto: nomes completos, busca e rolagem dentro do menu. */
.v2-context-menu {
  width: min(400px, calc(100vw - 24px));
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; transition: opacity 130ms var(--ease), transform 130ms var(--ease);
}
.v2-context-menu.is-open { visibility: visible; }
.v2-context-menu .v2-menu-context > div { align-items: flex-start; }
.v2-context-current-company { max-width: 75%; text-align: right; overflow-wrap: anywhere; }
.v2-context-current-company small { color: var(--text-3); font-weight: 400; margin-left: 4px; }
.v2-context-enterprises { margin: 4px 0 8px; }
.v2-context-search { position: relative; margin: 0 5px; }
.v2-context-search > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.v2-context-search .v2-input { width: 100%; padding-left: 32px; font-size: 12px; }
.v2-context-results { padding: 6px 10px; font-size: 10px; color: var(--text-3); }
.v2-context-enterprise-list { max-height: min(280px, 38dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.v2-context-enterprise { min-height: 40px; align-items: flex-start; }
.v2-context-enterprise-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.v2-context-enterprise-id { flex: 0 0 auto; color: var(--text-3); font-size: 11px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.v2-context-enterprise > svg { flex: 0 0 auto; margin-top: 2px; }
.v2-context-empty { margin: 0; padding: 16px 10px; color: var(--text-3); font-size: 12px; text-align: center; }

.v2-context-enterprise[hidden], .v2-context-empty[hidden] { display: none; }