/* Componentes — visual Lukana Finance UI Kit (métricas reais do .fig). Dependem de tokens.css. */

* { -webkit-font-smoothing: antialiased; box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-secondary);
  font-size: 14px;
}

/* ---------- Layout app ---------- */
.app { display: flex; height: 100vh; overflow: hidden; }

/* Sidebar Lukana: 270px branca, borda #eeeeee; itens 40px r=8 pad 8/12 gap 12;
   ativo = texto preto SemiBold em "cartão" com borda (como no kit). */
.sidebar {
  width: 252px; min-width: 252px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-medium);
  display: flex; flex-direction: column;
  padding: 12px 12px 16px;
}
.workspace {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 12px; border-radius: var(--radius-sm);
  cursor: default;
}
.workspace:hover { background: var(--bg-hover); }
.workspace__logo {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--accent-primary); color: var(--on-accent, #000);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.workspace__name { font-weight: 600; font-size: 16px; color: var(--text-primary); }

.nav-section { margin-top: 12px; }
.nav-section__title {
  font-size: 12px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; padding: 8px 12px; letter-spacing: .04em;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  height: 36px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--text-secondary); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: background .1s ease, border-color .1s ease;
}
.nav-item:hover { background: var(--bg-hover); }
/* Item ativo à Lukana: cartão branco com borda + texto preto SemiBold. */
.nav-item.is-active {
  background: var(--bg-primary); border-color: var(--border-medium);
  color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-light);
}
.nav-item svg { width: 18px; height: 18px; stroke-width: 2; color: currentColor; flex: none; }
.nav-item.is-active svg { color: var(--text-primary); }
.nav-spacer { flex: none; height: 8px; }

/* Navegação por categorias + sub-itens com conector curvo (árvore).
   flex:1 + min-height:0 + overflow-y:auto → a nav ocupa o espaço disponível e
   faz scroll interno quando há muitas secções (workspace fixo em cima, utilizador
   fixo em baixo). */
.nav {
  display: flex; flex-direction: column; gap: 2px; margin-top: 10px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.nav-group { display: flex; flex-direction: column; }
.nav-cat {
  display: flex; align-items: center; gap: 4px; width: 100%; height: 28px; padding: 0 8px;
  border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-tertiary); transition: background 0.1s ease, color 0.1s ease;
}
.nav-cat:hover { background: var(--bg-hover); color: var(--text-tertiary); }
.nav-cat__chev { width: 12px; height: 12px; stroke-width: 2.5; transition: transform 0.15s ease; flex: none; }
.nav-cat__chev.is-open { transform: rotate(90deg); }
/* 2.º nível (itens da categoria): conector curvo de árvore. */
.nav-sub { display: flex; flex-direction: column; gap: 2px; padding-left: 24px; padding-top: 2px; }
.nav-item--sub { position: relative; }
.nav-item--sub::before {
  content: ""; position: absolute; left: -13px; top: -15px; width: 11px; height: 29px;
  border-left: 1.5px solid var(--border-strong); border-bottom: 1.5px solid var(--border-strong);
  border-bottom-left-radius: 10px; pointer-events: none; opacity: 0.6;
}
.nav-item--sub.is-active::before { border-color: var(--blue); opacity: 0.5; }

/* 3.º nível (sub-itens de um item — sub-categorias): conector curvo de árvore. */
.nav-subsub { display: flex; flex-direction: column; gap: 2px; padding-left: 30px; padding-top: 2px; }
.nav-item--subsub { position: relative; }
.nav-item--subsub::before {
  content: ""; position: absolute; left: -14px; top: -15px; width: 12px; height: 29px;
  border-left: 1.5px solid var(--border-strong); border-bottom: 1.5px solid var(--border-strong);
  border-bottom-left-radius: 10px; pointer-events: none; opacity: 0.65;
}
.nav-item--subsub.is-active::before { border-color: var(--blue); opacity: 0.55; }

/* ---------- Topbar ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-secondary); }
.topbar {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; border-bottom: 1px solid var(--border-medium);
  background: var(--bg-primary);
}
.topbar__title { font-size: 16px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.topbar__title svg { width: 18px; height: 18px; stroke-width: 2; color: var(--text-tertiary); }
.content { flex: 1; overflow: auto; padding: 20px 24px; }

.avatar {
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--accent-primary); color: var(--on-accent, #000);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.iconbtn {
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  display: grid; place-items: center; color: var(--text-tertiary);
  background: var(--bg-tertiary); border: none; cursor: pointer; transition: background .1s ease;
}
.iconbtn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.iconbtn svg { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- Botões (Lukana: pill r=100, pad 12/16, gap 8; primário lima + texto PRETO) ---------- */
.btn {
  height: 36px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-medium);
  font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--bg-primary); color: var(--text-primary);
  transition: background .1s ease, box-shadow .1s ease; white-space: nowrap;
}
.btn:hover { background: var(--bg-tertiary); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--blue); }
.btn svg { width: 16px; height: 16px; stroke-width: 2; }
.btn--sm { height: 28px; font-size: 13px; padding: 0 12px; }
.btn--blue { background: var(--blue); color: var(--on-accent, #000); border-color: transparent; }
.btn--blue:hover { background: var(--blue-hover); }
.btn--danger { background: var(--red); color: #fff; border-color: transparent; }
.btn--secondary { background: var(--bg-primary); border-color: var(--border-medium); color: var(--text-primary); }
.btn--secondary:hover { background: var(--bg-tertiary); }
.btn--ghost { background: transparent; border: none; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-hover); }

/* ---------- Inputs (Lukana: h=48 r=10 borda #eeeeee; aqui 40px para densidade de CRM) ---------- */
.input {
  height: 40px; width: 100%; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border-medium); background: var(--bg-primary);
  font-size: 14px; color: var(--text-primary); font-family: var(--font);
}
.input::placeholder { color: var(--text-secondary); }
.input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--blue); }
/* Label de formulário Lukana: Medium 14 #7b7b7b por cima do input (gap 4) */
.label { font-size: 13px; font-weight: 500; color: var(--text-tertiary); }

.search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--bg-tertiary); color: var(--text-tertiary); width: 240px;
}
.search input { border: none; outline: none; background: transparent; font-size: 14px; width: 100%; color: var(--text-primary); }
.search svg { width: 14px; height: 14px; stroke-width: 2; }
.sidebar .search { width: 100%; }
/* kbd chips como no kit: quadrados brancos r=4 stroke #f2f2f2 (⌘ F) */
.kbd {
  font-size: 11px; color: var(--text-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius-xs); padding: 1px 5px; background: var(--bg-primary);
}

/* ---------- Tags (badges Lukana: pill r=50, h=22, pad 2/8, fundo semântico a 10%) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
  background: var(--tag-bg-gray); color: var(--tag-text-gray); white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.tag--blue { background: var(--tag-bg-blue); color: var(--tag-text-blue); }
.tag--green { background: var(--tag-bg-green); color: var(--tag-text-green); }
.tag--red { background: var(--tag-bg-red); color: var(--tag-text-red); }
.tag--orange { background: var(--tag-bg-orange); color: var(--tag-text-orange); }
.tag--purple { background: var(--tag-bg-purple); color: var(--tag-text-purple); }
.tag--amber { background: var(--tag-bg-amber); color: var(--tag-text-amber); }
.tag--teal { background: var(--tag-bg-teal); color: var(--tag-text-teal); }
.tag--plain::before { display: none; }
/* Segmento como botão de toggle (ficha do lote, feedback #16): pill clicável. */
.tag--toggle { border: 0; font-family: inherit; cursor: pointer; transition: opacity .12s, filter .12s; }
.tag--toggle:hover { filter: brightness(.97); opacity: 1; }
.tag--toggle:focus-visible { outline: 2px solid var(--accent, #9FE870); outline-offset: 1px; }

/* ---------- Painéis / cards (Lukana: r=16, borda #eeeeee, quase sem sombra; header h=52) ---------- */
.panel { background: var(--bg-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-light); }
.panel__head { padding: 14px 16px; border-bottom: 1px solid var(--border-light); font-weight: 600; font-size: 14px; color: var(--text-primary); }
.panel__body { padding: 16px; }

/* KPI Lukana: título Medium 16 preto, valor Bold 24, delta em pill (204x137, pad 16) */
.kpi { background: var(--bg-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-light); padding: 16px; }
.kpi__label { font-size: 14px; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.kpi__label svg { width: 15px; height: 15px; stroke-width: 2; color: var(--text-tertiary); }
.kpi__value { margin-top: 8px; font-size: 24px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.kpi__value.is-danger { color: var(--red); }
.kpi__value.is-blue { color: var(--accent-text); }

/* ---------- Painel: cartões KPI ao estilo COINEST (referência do Cláudio) ----------
   Tudo isto está SCOPED a .kpi-grid — que só o painel usa — para não afetar os
   KPI de Relatórios/Comunicações (que reutilizam .kpi / .kpi__delta noutro layout).
   Grelha 4→2→1, herói verde-floresta na métrica principal, restantes brancos com
   contorno de menta ténue. */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-grid .kpi {
  position: relative; display: flex; flex-direction: column; min-height: 104px;
  border-color: var(--mint-line); padding: 16px 18px;
}
.kpi-grid .kpi__label { font-size: 13px; font-weight: 600; color: var(--text-tertiary); }
.kpi-grid .kpi__value { margin-top: auto; padding-top: 10px; font-size: 26px; font-weight: 800; line-height: 1.1; }

/* Estado em pill no canto (verde = bom, vermelho = alerta) — estilo COINEST.
   Só aparece quando há um sinal REAL (ver template); nunca percentagens inventadas. */
.kpi-grid .kpi__delta {
  position: absolute; top: 14px; right: 14px; margin: 0;
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--tag-bg-green); color: var(--tag-text-green);
}
.kpi-grid .kpi__delta svg { width: 12px; height: 12px; stroke-width: 2.5; }
.kpi-grid .kpi__delta.is-bad { background: var(--tag-bg-red); color: var(--tag-text-red); }

/* Herói — a métrica principal (valor em pipeline) em verde-floresta, texto branco. */
.kpi-grid .kpi--hero {
  border: none; color: var(--on-forest);
  background: linear-gradient(150deg, var(--forest) 0%, var(--forest-deep) 100%);
  box-shadow: 0 10px 24px -12px var(--forest-glow);
}
.kpi-grid .kpi--hero .kpi__label { color: rgba(255, 255, 255, 0.72); }
.kpi-grid .kpi--hero .kpi__label svg { color: rgba(255, 255, 255, 0.72); }
.kpi-grid .kpi--hero .kpi__value { color: var(--on-forest); }
/* Chip de menta no canto do herói (marca visual COINEST) */
.kpi-grid .kpi--hero .kpi__chip {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(159, 232, 112, 0.18); color: var(--accent-primary);
}
.kpi-grid .kpi--hero .kpi__chip svg { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- Tabela "record index" (Lukana Invoice List: card r=12 c/ sombra dupla,
   header #f5f5f5 h=40, células h=56 pad 16, bordas #eeeeee) ---------- */
.rtable { width: 100%; border-collapse: collapse; background: var(--bg-primary);
  border: none; box-shadow: var(--shadow-card); border-radius: var(--radius-md); overflow: hidden; }
.rtable thead th {
  height: 40px; text-align: left; padding: 0 16px; font-size: 12px; font-weight: 600;
  color: var(--text-tertiary); border-bottom: 1px solid var(--border-medium); background: var(--bg-tertiary);
}
.rtable tbody td { padding: 0 16px; }
.rtable tbody td { height: 52px; padding: 0 16px; font-size: 14px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); }
.rtable tbody tr:last-child td { border-bottom: none; }
.rtable tbody tr:hover { background: var(--bg-hover); }
.rtable a.cell-strong { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.rtable a.cell-strong:hover { color: var(--accent-text); }
.rtable .empty { text-align: center; color: var(--text-light); height: 80px; }

/* ---------- Sub-barra de filtros (sempre visível, não scrolla) ---------- */
.subbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 20px; background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
}
/* Barra de ações da página — separada do header global (título + ícones globais).
   As ações específicas da página (tabs, filtros, botão primário) vivem aqui. */
.pagebar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
}
.pagebar:empty { display: none; }
/* Empurra o botão de ação primário para a direita (tabs/filtros à esquerda) */
.pagebar > .btn--blue,
.pagebar > .pagebar__primary { margin-left: auto; }

/* Tabs de pipeline (e afins): pills Lukana sobre fundo cinza */
.ptabs { display: flex; gap: 2px; background: var(--bg-tertiary); padding: 3px; border-radius: var(--radius-pill); max-width: 100%; }
.ptab {
  max-width: 170px; overflow: hidden; text-decoration: none; display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; height: 28px; padding: 0 12px; border-radius: var(--radius-pill);
  color: var(--text-tertiary); white-space: nowrap;
}
.ptab span { display: inline-block; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; overflow: hidden; vertical-align: bottom; }
.ptab.is-active { background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow-light); }
.ptab:hover { color: var(--text-primary); }
.ptab.is-marquee:hover span { overflow: visible; animation: ptab-marquee 4.5s linear infinite alternate; }
@keyframes ptab-marquee {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(calc(150px - 100%)); }
}
@media (prefers-reduced-motion: reduce) { .ptab.is-marquee:hover span { animation: none; } }

/* Sub-abas da família Paisagismo (2.ª linha): estilo underline, secundário */
.psubtabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.psubtab {
  max-width: 220px; overflow: hidden; text-decoration: none; display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 500; height: 30px; padding: 0 10px; border-radius: var(--radius-sm);
  color: var(--text-tertiary); white-space: nowrap; border: 1px solid transparent;
}
.psubtab span { display: inline-block; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; overflow: hidden; vertical-align: bottom; }
.psubtab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.psubtab.is-active { color: var(--text-primary); background: var(--bg-tertiary); border-color: var(--border-light); font-weight: 600; }
.psubtab.is-marquee:hover span { overflow: visible; animation: ptab-marquee 4.5s linear infinite alternate; }
@media (prefers-reduced-motion: reduce) { .psubtab.is-marquee:hover span { animation: none; } }
.inv-search {
  display: flex; align-items: center; gap: 8px; width: 260px; max-width: 42vw; height: 36px;
  padding: 0 12px; background: var(--bg-tertiary);
  border: 1px solid transparent; border-radius: 10px;
}
.inv-search svg { width: 15px; height: 15px; stroke-width: 2; color: var(--text-tertiary); flex: none; }
.inv-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 14px; font-family: var(--font); color: var(--text-primary);
}
.input--inline { width: auto; height: 32px; padding: 0 8px; }
.inv-count { margin-left: auto; font-size: 13px; color: var(--text-tertiary); white-space: nowrap; }

/* ---------- Grelha (cabeçalho fixo, encostado à barra de filtros) ---------- */
.content--flush { padding-top: 0; }
.rtable--grid { overflow: visible; border-radius: 0; border: none; box-shadow: none; border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); }
.rtable--grid thead th {
  position: sticky; top: 0; z-index: 10; background: var(--bg-tertiary);
  box-shadow: inset 0 -1px 0 var(--border-medium);
}
.th-sort { padding: 0; }
.th-sort a {
  display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px;
  color: var(--text-tertiary); text-decoration: none; font-weight: 600;
  white-space: nowrap;  /* título numa só linha (ex.: "Preço Std") */
}
.th-sort.num a { justify-content: flex-end; }
.th-sort a:hover { color: var(--text-primary); }
.th-sort.is-sorted a { color: var(--text-primary); }
.th-arrow { font-size: 11px; opacity: .5; flex: none; }
.th-sort.is-sorted .th-arrow { opacity: 1; color: var(--accent-text); }

.rtable td.num, .rtable th.num { text-align: right; }
.rtable td.num .cell-edit { font-variant-numeric: tabular-nums; }
.rtable--grid { width: 100%; }
/* separadores verticais (folha de cálculo) */
.rtable--grid thead th, .rtable--grid tbody td { border-right: 1px solid var(--border-light); }
.rtable--grid thead th:last-child, .rtable--grid tbody td:last-child { border-right: none; }
.rtable--grid tbody tr:hover td { background: var(--bg-hover); }
.td-strong { color: var(--text-primary); font-weight: 500; font-style: italic; }
.td-strong .row-open { color: var(--text-primary); text-decoration: none; }
.td-strong .row-open:hover { color: var(--accent-text); }
.td-price .cell-edit { color: var(--text-primary); font-weight: 500; }
/* Célula por defeito do segmento na matriz de Preços & Condições */
.td-price.is-default { background: var(--accent-tertiary); }
.td-price.is-default .cell-edit, .td-price.is-default .cell-locked { color: var(--accent-text); font-weight: 600; }
.rtable--grid tbody td { vertical-align: middle; }
.td-segs .tag { height: 18px; font-size: 11px; padding: 0 6px; margin: 1px 3px 1px 0; }
.td-segs .seg-empty { color: var(--text-light); }

/* miniatura + acções */
.rtable--grid tbody td { height: 40px; }
.th-thumb { width: 48px; }
.td-thumb { width: 48px; padding: 0 4px 0 10px; }
.thumb-link { position: relative; display: inline-flex; }
.thumb { width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; display: block; background: var(--bg-tertiary); }
/* popover de pré-visualização (hover na miniatura) */
.thumb-pop {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  display: none; z-index: 50; padding: 4px; width: 232px; background: var(--bg-primary);
  border: 1px solid var(--border-medium); border-radius: var(--radius-sm); box-shadow: var(--shadow-modal);
}
.thumb-pop img { width: 224px; height: 150px; object-fit: cover; border-radius: var(--radius-xs); display: block; }
.thumb-pop b { display: block; margin: 6px 2px 3px; font-size: 12px; font-weight: 500; font-style: italic; color: var(--text-secondary); }
.thumb-link:hover .thumb-pop { display: block; }
.thumb--ph {
  display: grid; place-items: center; color: var(--accent-text);
  background: var(--accent-tertiary); border: 1px solid var(--border-light);
}
.thumb--ph svg { width: 16px; height: 16px; stroke-width: 1.8; }
.th-actions, .td-actions { width: 104px; text-align: right; white-space: nowrap; }
.actbtn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-tertiary); vertical-align: middle; margin-left: 1px; }
.actbtn:hover { background: var(--bg-hover); color: var(--accent-text); }
.actbtn svg { width: 15px; height: 15px; stroke-width: 2; }
/* tooltip genérico */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--text-primary); color: var(--bg-primary); font-size: 11px; font-weight: 500;
  padding: 3px 7px; border-radius: var(--radius-xs); opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 60;
}
.tip:hover::after { opacity: 1; }

/* ---------- Ficha (record page) ---------- */
.rec-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.rec-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rec-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .rec-grid { grid-template-columns: 1fr; } }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.gallery__item { display: block; position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-light); aspect-ratio: 4/3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item--cover { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text); }
/* Pastas de espécie — nível 1 do banco de imagens (Cláudio: «organizar por
   pastas de espécie»). Grelha própria, mais larga que a das fotos: uma pasta
   é um item de biblioteca, não uma miniatura, e o nome tem de caber. */
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.folder { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-primary); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.folder:hover { border-color: var(--accent-text); box-shadow: 0 4px 14px rgba(0,0,0,.07); transform: translateY(-2px); }
.folder__thumb { display: block; position: relative; aspect-ratio: 4/3; background: var(--bg-secondary); }
.folder__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folder__thumb--vazio { display: flex !important; align-items: center; justify-content: center; color: var(--text-tertiary); }
.folder__thumb--vazio svg { width: 34px; height: 34px; stroke-width: 1.4; }
/* Duas folhas atrás da capa — dá o aspeto de pasta com conteúdo lá dentro. */
.folder__thumb::before, .folder__thumb::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 5px; border-radius: 2px; background: rgba(0,0,0,.10); }
.folder__thumb::before { right: -1px; }
.folder__thumb::after { right: 4px; background: rgba(0,0,0,.05); }
.folder__meta { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px 11px; }
.folder__meta svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--accent-text); stroke-width: 1.7; }
.folder__nome { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder__n { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-tertiary); }
.gallery__item[draggable="true"] { cursor: grab; }
.gallery__item[draggable="true"]:active { cursor: grabbing; }
.gallery__item.is-dragging { opacity: .45; }
.gallery__badge { position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--accent-text); color: var(--text-inverted); letter-spacing: .02em; }
.gallery__empty { grid-column: 1 / -1; padding: 22px; text-align: center; color: var(--text-tertiary); font-size: 13px; background: var(--bg-secondary); border: 1px dashed var(--border-medium); border-radius: var(--radius-sm); }
/* Ingestão inteligente da Base de Conhecimento (dropzone) */
.kb-drop { display: block; margin-bottom: 18px; padding: 18px 20px; border: 1.5px dashed var(--border-medium); border-radius: var(--radius-md); background: var(--bg-primary); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.kb-drop.is-over { border-color: var(--accent-text); background: var(--accent-tertiary); }
.kb-drop.is-busy { cursor: progress; }
.kb-drop__idle { display: flex; align-items: center; gap: 14px; }
.kb-drop__idle svg { width: 26px; height: 26px; stroke-width: 1.7; color: var(--accent-text); flex: none; }
.kb-drop__txt { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.kb-drop__txt strong { color: var(--text-primary); }
.kb-drop__txt span { display: block; color: var(--text-tertiary); font-size: 12px; }
.kb-drop__link { border: none; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--accent-text); text-decoration: underline; cursor: pointer; }
.kb-drop__busy { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.kb-spin { width: 15px; height: 15px; border: 2px solid var(--border-medium); border-top-color: var(--accent-text); border-radius: 50%; animation: kb-spin .7s linear infinite; flex: none; }
@keyframes kb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kb-spin { animation: none; } }
/* Cards de resumo da ficha do lote */
.lote-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .lote-cards { grid-template-columns: repeat(2, 1fr); } }
.lote-card { display: flex; flex-direction: column; gap: 3px; padding: 16px; background: var(--bg-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); }
.lote-card--link { text-decoration: none; transition: border-color .12s ease, background .12s ease; }
.lote-card--link:hover { border-color: var(--accent-text); background: var(--bg-hover); }
.lote-card__k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }
.lote-card__v { font-size: 26px; font-weight: 650; line-height: 1.1; color: var(--text-primary); }
.lote-card__s { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 5px; }
/* Matriz de preços editável */
.pricegrid td.num { position: relative; padding: 4px 6px; }
.priceinput { width: 100%; max-width: 92px; text-align: right; padding: 5px 16px 5px 8px; border: 1px solid var(--border-light); border-radius: var(--radius-xs); background: var(--bg-primary); font: inherit; font-size: 13px; color: var(--text-primary); }
.priceinput:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 2px var(--accent-tertiary); }
.priceinput__eur { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-tertiary); pointer-events: none; }
/* Controlos por foto (definir capa, mover, apagar) — surgem no hover */
.gallery__ctrls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 2px; justify-content: center; padding: 5px; background: linear-gradient(to top, rgba(0,0,0,.62), transparent); opacity: 0; transition: opacity .12s ease; }
.gallery__item:hover .gallery__ctrls, .gallery__item:focus-within .gallery__ctrls { opacity: 1; }
.gallery__ctrls form { display: contents; }
.gallery__ctrls button { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; font-size: 13px; line-height: 1; border: none; border-radius: var(--radius-xs); background: rgba(255,255,255,.92); color: var(--text-secondary); cursor: pointer; }
.gallery__ctrls button:hover { background: #fff; color: var(--accent-text); }
.gallery__ctrls button.is-danger:hover { color: var(--danger-text, #c0392b); }
@media (prefers-reduced-motion: reduce) { .gallery__ctrls { transition: none; } }
.gallery__addform { display: contents; }
.gallery__add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  aspect-ratio: 4/3; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-tertiary); cursor: pointer; background: var(--bg-secondary); text-align: center;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.gallery__add:hover, .gallery__add.is-over { border-color: var(--accent-text); color: var(--accent-text); background: var(--accent-tertiary); }
.gallery__add svg { width: 22px; height: 22px; stroke-width: 1.8; }
.gallery__add span { font-size: 13px; font-weight: 500; }
.gallery__add small { font-size: 11px; opacity: .7; }

/* Origem/publicação: badges extra da foto (banco de imagens + galerias). */
.gallery__badge--site { background: var(--green, #009F42); color: #fff; }
.gallery__badge--lote { background: var(--accent-text); color: var(--text-inverted); }

/* Partilha/download por foto (moodboard, WhatsApp) — canto superior direito. */
.gallery__share { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; opacity: 0; transition: opacity .12s ease; }
.gallery__item:hover .gallery__share, .gallery__item:focus-within .gallery__share { opacity: 1; }
.gallery__sharebtn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--radius-xs); background: rgba(255,255,255,.92); color: var(--text-secondary); cursor: pointer; text-decoration: none; }
.gallery__sharebtn svg { width: 14px; height: 14px; stroke-width: 1.8; }
.gallery__sharebtn:hover { background: #fff; color: var(--accent-text); }
.gallery__sharebtn.is-done { background: var(--green, #009F42); color: #fff; }

/* Legenda/ligação à ficha (banco de imagens). */
.gallery__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 8px; font-size: 11px; color: #fff; text-decoration: none; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery__caption:hover { text-decoration: underline; }

/* ---------- Edição inline: caixa + ✓/✕ (Enter grava, Esc cancela) ---------- */
.cell-locked { color: var(--text-secondary); cursor: default; }
.cell-editing { display: inline-flex; align-items: center; gap: 2px; }
.cell-editing .cell-input { width: 92px; min-width: 0; }
.cell-motivo { width: 120px; min-width: 0; height: 24px; padding: 0 6px; font-size: 11px;
  border: 1px solid var(--border-medium); border-radius: var(--radius-xs);
  background: var(--bg-secondary); color: var(--text-secondary); }
.cell-motivo:focus { outline: none; border-color: var(--blue); }
.cell-ok, .cell-cancel {
  width: 20px; height: 22px; display: grid; place-items: center; border: none; cursor: pointer;
  border-radius: var(--radius-xs); font-size: 12px; line-height: 1;
}
.cell-ok { color: #fff; background: var(--accent-text); }
.cell-ok:hover { background: var(--turquoise); }
.cell-cancel { color: var(--text-tertiary); background: transparent; }
.cell-cancel:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---------- Kanban (cards Lukana: r=16, borda #eeeeee, pad 14/16) ---------- */
.content:has(.kanban) { display: flex; flex-direction: column; min-height: 0; }
/* Assistente: ocupa toda a altura, sem padding, com scroll interno (como o kanban). */
.content:has(.chat) { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; flex: 1; min-height: 0; }
.kanban::-webkit-scrollbar { height: 10px; }
.kanban::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.kanban-col { width: 250px; min-width: 250px; display: flex; flex-direction: column; max-height: 100%; }
.kanban-col__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.kanban-col__title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.kanban-col__dot { width: 8px; height: 8px; border-radius: 50%; }
.kanban-col__count { font-size: 12px; font-weight: 600; color: var(--text-tertiary); background: var(--bg-tertiary); border-radius: var(--radius-pill); padding: 1px 8px; }
.kanban-col__list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.op-card {
  background: var(--bg-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-lg);
  padding: 14px 16px; cursor: grab; transition: box-shadow .12s ease, border-color .12s ease;
}
.op-card:hover { box-shadow: var(--shadow-strong); border-color: var(--border-strong); }
.op-card:active { cursor: grabbing; }
.op-card__title { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; display: block; }
.op-card__title:hover { color: var(--accent-text); }
.op-card__sub { margin-top: 2px; font-size: 12px; color: var(--text-tertiary); }
.op-card__foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.op-card__amount { font-size: 13px; font-weight: 600; color: var(--text-primary); }

/* ---------- Timeline (record page) ---------- */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { position: relative; padding: 0 0 16px 18px; border-left: 1px solid var(--border-medium); }
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-item__dot { position: absolute; left: -5px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.tl-item__title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.tl-item__body { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.tl-item__meta { font-size: 12px; color: var(--text-light); margin-top: 4px; }

.field-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; }
.field-row:last-child { border-bottom: none; }
.field-row__k { color: var(--text-tertiary); }
.field-row__v { color: var(--text-primary); font-weight: 500; }

/* Command palette (⌘K) */
.cmdk-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: grid; place-items: start center; padding-top: 13vh; z-index: 50; }
.cmdk { width: 580px; max-width: 92vw; background: var(--bg-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); overflow: hidden; }
.cmdk__input { width: 100%; height: 50px; border: none; border-bottom: 1px solid var(--border-light); padding: 0 16px; font-size: 15px; background: transparent; color: var(--text-primary); outline: none; font-family: var(--font); }
.cmdk__list { max-height: 340px; overflow: auto; padding: 6px; }
.cmdk__group { font-size: 11px; color: var(--text-light); padding: 8px 10px 4px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.03em; }
.cmdk__item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.cmdk__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.cmdk__item svg { width: 15px; height: 15px; stroke-width: 2; flex: none; color: var(--text-tertiary); }

/* Edição inline (folha de cálculo) */
.cell-edit { display: inline-block; min-width: 24px; padding: 1px 4px; margin: -1px -4px; border-radius: var(--radius-xs); cursor: text; }
.cell-edit:hover { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--border-medium); }
.cell-input { width: 100%; min-width: 60px; height: 24px; padding: 0 6px; border: 1.5px solid var(--blue);
  border-radius: var(--radius-xs); font-size: 14px; font-family: var(--font); color: var(--text-primary);
  background: var(--bg-primary); outline: none; box-shadow: var(--focus-ring); }

/* HTMX */
.htmx-swapping { opacity: 0; transition: opacity .12s ease-out; }
.sortable-ghost { opacity: .35; }
.sortable-drag { transform: rotate(2deg); }
.focus-ring:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Login (split premium, marca Diaplant) ---------- */
.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; background: var(--bg-primary); }
.auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px; color: #fff; }
/* Verde-escuro Lukana (#062f28) com folha em lima translúcido */
.auth-brand__bg { position: absolute; inset: 0; background: linear-gradient(150deg, #041f1a 0%, #062f28 55%, #0b4a3e 100%); z-index: 0; }
.auth-brand__leaf { position: absolute; right: -70px; bottom: -60px; width: 440px; height: 440px; color: rgba(159,232,112,.14); stroke-width: 1; z-index: 0; }
.auth-brand__content, .auth-brand__foot { position: relative; z-index: 1; }
.auth-brand__kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.auth-brand__title { margin: 14px 0 0; font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.auth-brand__sub { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 430px; }
.auth-brand__foot { font-size: 13px; color: rgba(255,255,255,.62); }
.auth-form { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 360px; }
.auth-logo { height: 40px; width: auto; display: block; margin-bottom: 30px; }
.auth-title { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.auth-hint { margin: 6px 0 0; font-size: 14px; color: var(--text-tertiary); }
.auth-error { margin-top: 18px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; background: var(--tag-bg-red); color: var(--tag-text-red); }
.auth-fields { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.auth-fields .label { display: block; margin-bottom: 6px; }
.auth-fields .input { height: 48px; }
.auth-submit { width: 100%; justify-content: center; height: 48px; font-size: 15px; margin-top: 4px; }
.auth-foot { margin-top: 22px; font-size: 12px; color: var(--text-light); text-align: center; }
.workspace__logo-img { height: 24px; width: auto; max-width: 156px; object-fit: contain; display: block; }
.workspace__logo-img--dark { display: none; }
.dark .workspace__logo-img--light { display: none; }
.dark .workspace__logo-img--dark { display: block; }
/* Marca — pré-visualização do logótipo nas definições */
.brand-preview__box { margin-top: 6px; padding: 22px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-secondary); display: grid; place-items: center; min-height: 90px; }
.brand-preview__img { max-height: 54px; max-width: 260px; object-fit: contain; }
@media (max-width: 820px) { .auth-split { grid-template-columns: 1fr; } .auth-brand { display: none; } }

/* ---------- Menu de utilizador (rodapé da sidebar) ---------- */
.usermenu { position: relative; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.usermenu__btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); text-align: left; transition: background .1s ease; }
.usermenu__btn:hover, .usermenu__btn.is-open { background: var(--bg-hover); }
.usermenu__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.usermenu__name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usermenu__sub { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usermenu__chev { width: 14px; height: 14px; stroke-width: 2; color: var(--text-tertiary); flex: none; transition: transform .15s ease; }
.usermenu__btn.is-open .usermenu__chev { transform: rotate(180deg); }
.usermenu__pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--bg-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); padding: 8px; z-index: 40; }
.usermenu__head { display: flex; gap: 10px; align-items: center; padding: 8px 8px 10px; border-bottom: 1px solid var(--border-light); margin-bottom: 6px; }
.avatar--lg { width: 36px; height: 36px; font-size: 14px; flex: none; }
.usermenu__sub--mail { margin-top: 1px; }
.usermenu__role { margin-top: 5px; display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-text); background: var(--accent-tertiary); padding: 1px 7px; border-radius: var(--radius-pill); }
.usermenu__item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font); color: var(--text-secondary); text-decoration: none; text-align: left; }
.usermenu__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.usermenu__item svg { width: 15px; height: 15px; stroke-width: 2; color: var(--text-tertiary); flex: none; }
.usermenu__item--danger { color: var(--red); }
.usermenu__item--danger:hover { background: var(--tag-bg-red); color: var(--tag-text-red); }
.usermenu__item--danger:hover svg { color: currentColor; }
.usermenu__sep { height: 1px; background: var(--border-light); margin: 6px 4px; }

/* ---------- Wizard de criação (reutilizável: orçamentos, etc.) ---------- */
.wiz { max-width: 980px; }
.stepper { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; flex-wrap: wrap; }
.stepper__item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 150px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-primary); }
.stepper__item.is-active { border-color: var(--accent-text); box-shadow: var(--focus-ring); }
.stepper__item.is-done { background: var(--accent-tertiary); border-color: var(--accent-primary); }
.stepper__dot { width: 26px; height: 26px; flex: none; border-radius: 50%; border: none; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--bg-tertiary); color: var(--text-tertiary); display: grid; place-items: center; }
.stepper__item.is-active .stepper__dot { background: var(--accent-primary); color: var(--on-accent, #000); }
.stepper__item.is-done .stepper__dot { background: var(--accent-text); color: #fff; }
.stepper__txt { display: flex; flex-direction: column; min-width: 0; }
.stepper__label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.stepper__sub { font-size: 11px; color: var(--text-tertiary); }

.wiz__grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.wiz__form { padding: 22px; }
.wiz__title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -.01em; }
.wiz__lead { margin: 6px 0 18px; font-size: 14px; color: var(--text-tertiary); line-height: 1.5; }
.wiz__field { margin-bottom: 16px; }
.wiz__field .label { display: block; margin-bottom: 6px; }
.wiz__field .input, .wiz__field select, .wiz__field textarea { width: 100%; }
.wiz__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.req { color: var(--red); }
.opt { color: var(--text-light); font-weight: 400; font-size: 12px; }
.wiz__hint { margin: 6px 0 0; font-size: 12px; color: var(--text-tertiary); line-height: 1.45; }
.wiz__hint a { color: var(--accent-text); }
.wiz__err { color: var(--red); font-size: 12px; margin-top: 4px; }
.wiz__examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.wiz__examples > span { font-size: 12px; color: var(--text-light); }
.chip { font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-medium); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; }
.chip:hover { border-color: var(--accent-text); color: var(--accent-text); background: var(--accent-tertiary); }
/* Vista Boutique/Lotes/Tudo do inventário (§5). Grupo de chips selecionáveis. */
.chip--on { background: var(--blue); border-color: var(--blue); color: var(--on-accent, #163300); font-weight: 600; }
.chip--on:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--on-accent, #163300); }
.seg-chips { display: inline-flex; gap: 6px; align-items: center; }
/* Contador no botão de ação (nº de exemplares boutique num lote). */
.actbtn.is-on { color: var(--accent-text); }
.actbtn__n { font-size: 10px; font-weight: 700; margin-left: -3px; }
.wiz__review { border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; }
.wiz__rev-row { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-light); font-size: 14px; }
.wiz__rev-row:last-child { border-bottom: none; }
.wiz__rev-row span { color: var(--text-tertiary); }
.wiz__rev-row b { color: var(--text-primary); }
.wiz__next-note { display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; background: var(--accent-tertiary); border-radius: var(--radius-md); font-size: 13px; color: var(--accent-text); line-height: 1.5; }
.wiz__next-note svg { width: 18px; height: 18px; flex: none; stroke-width: 2; }
.wiz__nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.wiz__aside { position: sticky; top: 16px; }
.wiz__help-card { padding: 18px; }
.wiz__help-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--accent-tertiary); color: var(--accent-text); display: grid; place-items: center; margin-bottom: 12px; }
.wiz__help-icon svg { width: 19px; height: 19px; stroke-width: 2; }
.wiz__help-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
.wiz__help-body { font-size: 13px; color: var(--text-tertiary); line-height: 1.55; margin: 0 0 12px; }
.wiz__help-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 7px; }
.wiz__help-list li { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
@media (max-width: 860px) { .wiz__grid { grid-template-columns: 1fr; } .wiz__aside { position: static; } .stepper__sub { display: none; } }

.nav-top { margin-bottom: 6px; }

/* ---------- Header global (Lukana topbar: branco, pesquisa em pill #f7f7f7 r=10,
   botões-ícone circulares #f5f5f5 40px) ---------- */
.gtopbar { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--border-medium); background: var(--bg-primary); }
.gsearch { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; min-width: 240px; max-width: 380px; flex: 1; border: 1px solid transparent; border-radius: 10px; background: var(--bg-secondary); color: var(--text-tertiary); cursor: pointer; font-size: 14px; font-family: var(--font); }
.gsearch svg { width: 16px; height: 16px; stroke-width: 2; flex: none; }
.gsearch > span:first-of-type { flex: 1; text-align: left; }
.gsearch:hover { background: var(--bg-tertiary); }
.gtopbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gicon { width: 36px; height: 36px; border-radius: var(--radius-pill); display: grid; place-items: center; border: none; background: var(--bg-tertiary); color: var(--text-primary); cursor: pointer; position: relative; }
.gicon:hover { background: var(--bg-quaternary); color: var(--text-primary); }
.gicon svg { width: 18px; height: 18px; stroke-width: 2; }
.gpop { position: relative; }
.gpop__menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--bg-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); padding: 8px; z-index: 50; }
.gpop__menu--wide { min-width: 260px; }
.gpop__lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-light); padding: 6px 8px 4px; }
.gpop__menu a { display: block; padding: 8px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.gpop__menu a:hover { background: var(--bg-hover); color: var(--text-primary); }
.gpop__empty { padding: 14px 8px; font-size: 13px; color: var(--text-tertiary); text-align: center; }
/* chave mascarada + copiar (integrações) */
.keycell { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text-secondary); }
.keycopy { border: 1px solid var(--border-medium); background: var(--bg-secondary); border-radius: var(--radius-xs); padding: 2px 7px; font-size: 11px; cursor: pointer; color: var(--text-secondary); }
.keycopy:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* ---------- Formulários de criação (genéricos, com aside) ---------- */
.formwrap { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; max-width: 980px; }
.formcard { min-width: 0; }
.formaside { position: sticky; top: 16px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ffield { display: flex; flex-direction: column; min-width: 0; }
.ffield .label { margin-bottom: 6px; }
.ffield--full { grid-column: 1 / -1; }
.ffield__inline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-primary); cursor: pointer; }
.ffield__hint { margin: 6px 0 0; font-size: 12px; color: var(--text-tertiary); }
.ffield__err { margin: 4px 0 0; font-size: 12px; color: var(--red); }
.checkgroup { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.checkgroup label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.formactions { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-light); }
@media (max-width: 860px) { .formwrap { grid-template-columns: 1fr; } .formaside { position: static; } .fgrid { grid-template-columns: 1fr; } }

/* header da página: grupo direito + separador das ações globais */
.topbar__right { display: flex; align-items: center; gap: 6px; }
.topbar__sep { width: 1px; height: 20px; background: var(--border-medium); margin: 0 4px; flex: none; }
.topbar__right:first-child .topbar__sep { display: none; }

/* ---------- Transições de página ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .16s ease-in both; }
::view-transition-new(root) { animation: vtIn .22s ease-out both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* fallback (browsers sem View Transitions): entrada suave do conteúdo */
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.content { animation: pageIn .2s ease-out; }
/* micro-transições gerais */
.panel, .kpi, .op-card, .stepper__item { transition: box-shadow .14s ease, border-color .14s ease, background .14s ease; }
.rtable tbody tr { transition: background .1s ease; }
@media (prefers-reduced-motion: reduce) {
  .content { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Copiloto IA (chip "Assistant" do kit: pill #f5f5f5, ícone em círculo lima) ---------- */
.askai { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border: none; border-radius: var(--radius-pill); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.askai svg { width: 18px; height: 18px; stroke-width: 2; padding: 3px; box-sizing: content-box; background: var(--accent-primary); color: var(--on-accent, #163300); border-radius: 50%; }
.askai:hover { background: var(--bg-quaternary); }
.copilot-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 70; }
.copilot { position: fixed; top: 0; right: 0; height: 100dvh; width: 384px; max-width: 92vw; background: var(--bg-primary); border-left: 1px solid var(--border-medium); box-shadow: var(--shadow-modal); z-index: 71; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1); }
.copilot.is-open { transform: none; }
.copilot__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-light); }
.copilot__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.copilot__title svg { width: 16px; height: 16px; color: var(--accent-text); stroke-width: 2; }
.copilot__ctx { margin: 12px 14px 0; padding: 10px 12px; background: var(--accent-tertiary); border-radius: var(--radius-md); }
.copilot__ctx-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-text); }
.copilot__ctx-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 3px; }
.copilot__ctx-prev { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.4; max-height: 54px; overflow: hidden; }
.copilot__msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.copilot__hint { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }
.copilot__msg { font-size: 13.5px; line-height: 1.5; padding: 9px 12px; border-radius: var(--radius-md); white-space: pre-wrap; max-width: 92%; }
.copilot__msg--user { align-self: flex-end; background: var(--accent-text); color: #fff; border-bottom-right-radius: 4px; }
.copilot__msg--ai { align-self: flex-start; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-light); border-bottom-left-radius: 4px; }
.copilot__typing { color: var(--text-tertiary); font-style: italic; }
.copilot__input { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--border-light); }
.copilot__input textarea { flex: 1; resize: none; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); padding: 8px 10px; font-family: var(--font); font-size: 13.5px; color: var(--text-primary); background: var(--bg-primary); outline: none; }
.copilot__input textarea:focus { border-color: var(--accent-text); box-shadow: var(--focus-ring); }
@media (prefers-reduced-motion: reduce) { .copilot { transition: none; } }

/* ---------- Modal global (ações rápidas) ---------- */
/* z-index 100: o modal é uma ação focada e tem de ficar SEMPRE por cima de
   tudo — incl. o painel "Dia" da agenda (day-drawer, z-index 91), senão o
   "Novo evento" abre por baixo do drawer. */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; display: grid; place-items: start center; padding-top: 12vh; }
.modal { position: relative; z-index: 1; width: 460px; max-width: 94vw; background: var(--bg-primary); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); overflow: hidden; display: flex; flex-direction: column; max-height: 92dvh; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-light); flex: none; }
.modal__title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.modal__body { padding: 18px; overflow-y: auto; }
.modal__loading { color: var(--text-tertiary); font-size: 13px; padding: 10px 0; }
.modalform { display: flex; flex-direction: column; gap: 14px; }
.modalform input, .modalform textarea, .modalform select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border-medium); border-radius: 10px; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; font-family: var(--font); }
.modalform textarea { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; }
.modalform input:focus, .modalform textarea:focus, .modalform select:focus { outline: none; border-color: var(--accent-text); box-shadow: var(--focus-ring); }
.modalform__actions { display: flex; gap: 8px; margin-top: 4px; }

/* ---------- Mini-calendário (Painel) ---------- */
.minical { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.minical__dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-light); padding: 2px 0 6px; }
.minical__cell { aspect-ratio: 1; display: grid; place-items: center; border: none; background: transparent; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); cursor: pointer; position: relative; font-family: var(--font); }
.minical__cell:hover { background: var(--bg-hover); color: var(--text-primary); }
.minical__cell--out { cursor: default; }
.minical__cell.is-today { background: var(--accent-text); color: #fff; font-weight: 600; }
.minical__cell.has-ev::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-text); }
.minical__cell.is-today.has-ev::after { background: #fff; }

/* ---------- Agenda (Painel) ---------- */
.agenda-day { font-size: 12px; font-weight: 600; color: var(--text-tertiary); text-transform: capitalize; padding: 12px 16px 4px; }
.agenda-item { display: flex; align-items: center; gap: 12px; padding: 7px 16px; }
.agenda-item:hover { background: var(--bg-hover); }
.agenda-item__time { font-size: 13px; font-weight: 600; color: var(--text-primary); width: 44px; flex: none; font-variant-numeric: tabular-nums; }
.agenda-item__title { flex: 1; font-size: 14px; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Pipeline (extras) ---------- */
.op-card__date { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.kanban-empty { border: 1.5px dashed var(--border-medium); border-radius: var(--radius-md); padding: 18px 10px; text-align: center; font-size: 12px; color: var(--text-light); }

/* ---------- Centro de Notificações (🔔 + popup + página) ---------- */
.gicon__badge { position: absolute; top: -1px; right: -1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
/* O popup vive dentro do .gpop__menu mas sem padding (o cartão é edge-to-edge). */
.gpop__menu--notif { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.ncard { display: flex; flex-direction: column; }
.ncard__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.ncard__title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.ncard__pill { font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--accent-primary); border-radius: var(--radius-pill); padding: 1px 8px; line-height: 1.5; }
.ncard__mark { margin-left: auto; background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent-text); }
.ncard__mark:hover { text-decoration: underline; }
.ncard__list { max-height: 380px; overflow-y: auto; }
.ncard__empty { padding: 28px 16px; font-size: 13px; color: var(--text-tertiary); text-align: center; }
.ncard__empty small { display: block; margin-top: 4px; font-size: 11px; color: var(--text-light); line-height: 1.4; }
.ncard__foot { display: block; text-align: center; font-size: 13px; font-weight: 600; color: var(--accent-text); text-decoration: none; padding: 12px; border-top: 1px solid var(--border-light); }
.ncard__foot:hover { background: var(--bg-hover); }
/* Linha de notificação (partilhada entre popup e página).
   .nrow é o contentor; .nrow__link leva o layout (ícone + texto) e navega;
   o ponto de não-lida é um botão à parte que marca como lida sem navegar. */
.nrow { display: flex; align-items: center; gap: 6px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border-light); transition: background .12s; }
.nrow:last-child { border-bottom: none; }
.nrow:hover { background: var(--bg-hover); }
.nrow--unread { background: var(--accent-tertiary); }
.nrow--unread:hover { background: var(--accent-tertiary); }
.nrow__link { flex: 1; min-width: 0; display: flex; gap: 11px; align-items: flex-start; padding: 12px 0; text-decoration: none; }
.nrow__icon { flex: none; width: 36px; height: 36px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--bg-tertiary); color: var(--text-secondary); }
.nrow__icon svg { width: 17px; height: 17px; stroke-width: 2; }
/* Tinta suave por tipo — herda do accent Lukana, com sinais de estado pontuais. */
.nrow__icon--novo_lead, .nrow__icon--negocio_ganho, .nrow__icon--orcamento_aceite, .nrow__icon--fatura_emitida { background: var(--accent-tertiary); color: var(--accent-text); }
.nrow__icon--negocio_perdido { background: rgba(248, 100, 50, 0.12); color: var(--red); }
.nrow__icon--tarefa_atribuida, .nrow__icon--tarefa_prazo, .nrow__icon--feedback_novo { background: var(--bg-tertiary); color: var(--accent-text); }
.nrow__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.nrow__title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.nrow__body { font-size: 12.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrow__time { font-size: 11px; color: var(--text-light); margin-top: 2px; }
/* Ponto de não-lida — botão que marca como lida (área de clique confortável). */
.nrow__dot { flex: none; border: none; background: none; cursor: pointer; width: 22px; height: 22px; border-radius: var(--radius-pill); display: grid; place-items: center; padding: 0; }
.nrow__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); }
.nrow__dot:hover { background: var(--bg-hover-medium); }
/* Página "ver todas": cartão único com cantos arredondados */
.npage { border: 1px solid var(--border-medium); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); }
.nrow--page .nrow__link { padding: 14px 0; }

/* Paginação server-side das listas */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; }
.pager__btn {
  font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-medium); background: var(--bg-primary); color: var(--text-primary);
  text-decoration: none;
}
.pager__btn:hover:not(.is-disabled) { background: var(--bg-hover); border-color: var(--border-strong); }
.pager__btn.is-disabled { color: var(--text-extralight); cursor: default; }
.pager__info { font-size: 12px; color: var(--text-tertiary); }
/* Banda de alertas por função no painel ("Para ti") */
.role-alerts { margin-bottom: 16px; }
.role-alerts__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); margin: 0 2px 6px; }
.role-alerts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.role-alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-medium); border-left-width: 3px; border-radius: var(--radius-lg); background: var(--bg-primary); text-decoration: none; transition: background .12s ease, border-color .12s ease; }
.role-alert:hover { background: var(--bg-hover); }
.role-alert--red { border-left-color: var(--red); }
.role-alert--amber { border-left-color: var(--orange); }
.role-alert--blue { border-left-color: var(--blue); }
.role-alert__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none; }
.role-alert--red .role-alert__dot { background: var(--red); }
.role-alert--amber .role-alert__dot { background: var(--orange); }
.role-alert--blue .role-alert__dot { background: var(--blue); }
.role-alert__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.role-alert__txt strong { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.role-alert__txt span { font-size: 11px; color: var(--text-tertiary); }
.role-alert__go { width: 16px; height: 16px; color: var(--text-light); flex: none; }

/* ===================================================================
   RESPONSIVO MOBILE (fundação mobile-first) — só CSS + estrutura.
   Mantém a identidade Lukana; em <768px troca a sidebar lateral por uma
   bottom tab bar + drawer, colapsa as tabelas .rtable em cartões e empilha
   os contentores/topbar/formulários. Não altera cores nem lógica.
   =================================================================== */

/* Bottom nav + drawer só existem no DOM em mobile; escondidos em desktop. */
.mnav, .mdrawer, .mdrawer-overlay { display: none; }

@media (max-width: 767.98px), (max-height: 480px) and (orientation: landscape) {
  /* --- Layout base: coluna, sem scroll horizontal, altura flexível --- */
  html, body { overflow-x: hidden; }
  .app { flex-direction: column; height: auto; min-height: 100dvh; overflow: visible; }

  /* Sidebar lateral escondida em mobile (a navegação passa para a bottom bar) */
  .sidebar { display: none; }

  .main { min-width: 0; width: 100%; }

  /* Espaço no fundo para a bottom tab bar fixa (56px + safe-area) não tapar conteúdo */
  .content { padding: 14px 14px calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* --- Topbar full-width, mais compacta; ações não empurram para fora --- */
  .topbar { padding: 0 12px; }
  .topbar__title { font-size: 15px; }
  .topbar__right { gap: 2px; }

  /* Sub-barras e barra de ações: empilham e fazem scroll sem cortar --- */
  .subbar, .pagebar { padding: 8px 12px; gap: 6px; }
  .pagebar > .btn--blue, .pagebar > .pagebar__primary { margin-left: 0; }

  /* Pesquisa das listas ocupa a largura toda (colapsa a topbar de pesquisa) */
  .subbar .inv-search, .inv-search { flex: 1 1 100%; min-width: 0; }
  .subbar .input, .subbar select, .subbar .btn { flex: 1 1 auto; }
  .inv-count { flex-basis: 100%; margin-left: 0; }

  /* --- Inputs / botões touch-friendly (alvo >=44px) e full-width em forms --- */
  .btn { min-height: 40px; }
  .btn--sm { min-height: 36px; }
  .input, .modalform input, .modalform textarea, .modalform select { min-height: 44px; }

  /* Formulários empilham a 1 coluna e ocupam a largura toda */
  .formwrap, .fgrid, .rec-grid { grid-template-columns: 1fr; max-width: 100%; }
  .formaside, .formactions { position: static; }
  .formactions .btn { flex: 1 1 auto; justify-content: center; }

  /* Linhas de ficha (rótulo/valor): quebram para não cortar valores longos.
     O valor passa a alinhar à esquerda por baixo do rótulo; grupos de ações
     (tags + botões) podem quebrar em vez de transbordar. */
  .field-row { flex-wrap: wrap; gap: 2px 10px; }
  .field-row__v { text-align: left; min-width: 0; }
  .field-row > span[style*="flex"] { flex-wrap: wrap; }

  /* Grelhas inline dos painéis (KPI 4-col, 2-col) -> 1 coluna.
     Usa !important porque os templates trazem grid inline no atributo style. */
  .content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* --- Tabelas .rtable -> cartões (linha = cartão) sem reescrever templates.
     A thead esconde-se; cada <tr> vira um cartão e cada <td> uma linha
     "rótulo: valor" (o rótulo vem do data-label injetado por JS). --- */
  .rtable { box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
  .rtable thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .rtable tbody, .rtable tbody tr, .rtable tbody td { display: block; width: 100%; }
  .rtable tbody tr {
    background: var(--bg-primary); border: 1px solid var(--border-medium);
    border-radius: var(--radius-md); box-shadow: var(--shadow-light);
    padding: 6px 4px; margin-bottom: 10px;
  }
  .rtable tbody tr:hover { background: var(--bg-primary); }
  .rtable tbody td {
    height: auto; min-height: 40px; padding: 8px 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid var(--border-light); text-align: right; white-space: normal;
  }
  .rtable tbody tr td:last-child { border-bottom: none; }
  /* rótulo da coluna, à esquerda de cada célula */
  .rtable tbody td::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-tertiary); white-space: nowrap;
  }
  /* células sem rótulo (linha "vazio", ações) não mostram o pseudo-rótulo */
  .rtable tbody td[data-label=""]::before,
  .rtable tbody td.empty::before,
  .rtable tbody td.td-actions::before,
  .rtable tbody td.td-thumb::before { content: none; }
  .rtable tbody td.empty { justify-content: center; text-align: center; min-height: 60px; }
  .rtable tbody td.td-actions, .rtable tbody td.td-thumb { justify-content: flex-start; }
  /* linha "sem resultados" ocupa o cartão todo, centrada */
  .rtable tbody tr:has(td.empty) { padding: 0; }
  /* o nome/link principal fica em destaque no topo do cartão */
  .rtable a.cell-strong { font-size: 15px; }

  /* Grelha "record index" editável (inventário/preços) mantém-se em scroll
     horizontal — é uma folha de cálculo, não colapsa em cartões. */
  .rtable--grid { display: table; box-shadow: var(--shadow-card); border-radius: var(--radius-md); }
  .rtable--grid thead { position: static; width: auto; height: auto; clip: auto; }
  .rtable--grid tbody, .rtable--grid tbody tr, .rtable--grid tbody td { display: revert; width: auto; }
  .rtable--grid tbody tr { border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
  .rtable--grid tbody td { display: table-cell; text-align: left; }
  .rtable--grid tbody td::before { content: none; }
  /* embrulho para poder deslizar a grelha densa sem partir o ecrã */
  .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Kanban (pipeline): mantém-se board deslizável, com snap às colunas --- */
  .kanban { scroll-snap-type: x mandatory; padding: 0 0 12px; }
  .kanban-col { scroll-snap-align: start; width: 82vw; min-width: 82vw; max-width: 320px; }
  /* Sem arrastar em toque (feedback #1): o cartão não sugere "grab". */
  .op-card { cursor: default; }

  /* Copiloto e modal ocupam quase todo o ecrã em mobile */
  .copilot { width: 100vw; max-width: 100vw; }
  .modal { width: 94vw; }

  /* ---- Bottom tab bar (5 destinos) ---- */
  .mnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bg-primary); border-top: 1px solid var(--border-medium);
    box-shadow: 0 -1px 3px rgba(0,0,0,.04);
  }
  .mnav__item {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; min-height: 44px; padding: 6px 2px;
    border: none; background: transparent; cursor: pointer; font-family: var(--font);
    color: var(--text-tertiary); font-size: 10px; font-weight: 600; text-decoration: none;
  }
  .mnav__item svg { width: 22px; height: 22px; stroke-width: 2; }
  .mnav__item.is-active { color: var(--accent-text); }
  .mnav__lbl { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* ---- Drawer (menu completo, aberto pelo "Mais") ---- */
  .mdrawer-overlay { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(0,0,0,.4); }
  .mdrawer {
    display: flex; flex-direction: column; position: fixed; z-index: 90;
    left: 0; right: 0; bottom: 0; max-height: 82dvh;
    background: var(--bg-primary); border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
    padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .mdrawer__grip { width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 6px auto 4px; flex: none; }
  .mdrawer__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 8px; }
  .mdrawer__title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
  .mdrawer__nav { overflow-y: auto; }
  /* dentro do drawer, a nav Lukana mostra-se por inteiro (categorias abertas) */
  .mdrawer .nav { display: flex; overflow: visible; margin-top: 4px; }
  .mdrawer .nav-sub { display: flex !important; }
  /* Nota: o FAB de feedback (.fbw) sobe acima da bottom bar via media query no
     próprio widget (templates/feedback/_widget.html) — a ordem de origem do
     <style> inline vence o components.css, por isso o override vive lá. */
}

/* Em ecrãs médios/grandes garante que a bottom nav e drawer nunca aparecem */
@media (min-width: 768px) and (min-height: 481px) {
  .mnav, .mdrawer, .mdrawer-overlay { display: none !important; }
}

/* ===================================================================
   RESPONSIVO 100% — correções complementares à fundação (#77).
   Fecha as páginas que a regra genérica não apanha: títulos longos,
   grelhas densas (.rtable--grid) sem transbordo, e tabelas próprias
   (.ci-table/.rel-table) que colapsam em cartões no telemóvel.
   Só CSS + tokens; sem mexer no visual desktop.
   =================================================================== */

/* Título da página nunca empurra os ícones globais para fora do ecrã. */
.topbar__title { min-width: 0; }
.topbar__title span, .topbar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767.98px), (max-height: 480px) and (orientation: landscape) {
  /* Grelhas densas (folha de cálculo): em vez de rebentar o ecrã, deslizam
     na horizontal dentro da largura do viewport (o .content é overflow:auto).
     IMPORTANTE: a tabela mantém-se `display: table` — um só contexto de tabela
     para TODAS as secções. O inventário tem vários <tbody> (um por espécie);
     se cada thead/tbody virasse a sua própria `display: table` (como antes),
     cada bloco calculava larguras de coluna à parte e o cabeçalho/linhas de
     espécies diferentes deixavam de alinhar no telemóvel (bug reportado). */
  .rtable--grid { display: table; width: max-content; min-width: 100%; max-width: none; -webkit-overflow-scrolling: touch; }
  .rtable--grid thead { display: table-header-group; }
  .rtable--grid tbody { display: table-row-group; }
  .rtable--grid tbody tr { display: table-row; }
  .rtable--grid thead th, .rtable--grid tbody td { display: table-cell; white-space: nowrap; }

  /* Tabelas próprias de painéis (Consumo de IA, BI) colapsam em cartões,
     tal como as .rtable, sem reescrever cada template. O rótulo vem do
     data-label injetado por labelTables() em base.html. */
  .ci-table, .rel-table { display: block; }
  .ci-table thead, .rel-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .ci-table tbody, .ci-table tbody tr, .ci-table tbody td,
  .rel-table tbody, .rel-table tbody tr, .rel-table tbody td { display: block; width: 100%; }
  .ci-table tbody tr, .rel-table tbody tr {
    border: 1px solid var(--border-medium); border-radius: var(--radius-md);
    background: var(--bg-primary); padding: 4px 4px; margin-bottom: 10px;
  }
  .ci-table tbody td, .rel-table tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px; border-bottom: 1px solid var(--border-light); text-align: right;
    white-space: normal; min-height: 40px;
  }
  .ci-table tbody tr td:last-child, .rel-table tbody tr td:last-child { border-bottom: none; }
  .ci-table tbody td::before, .rel-table tbody td::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-tertiary); white-space: nowrap;
  }
  .ci-table tbody td[data-label=""]::before, .rel-table tbody td[data-label=""]::before { content: none; }
  /* .num deixa de alinhar à direita porque já é flex space-between */
  .ci-table td.num, .rel-table td.num { text-align: right; }
  /* linhas "vazio" (colspan) ocupam o cartão inteiro, centradas */
  .ci-empty, .rel-table td[colspan] { justify-content: center; text-align: center; }
  .ci-empty::before, .rel-table td[colspan]::before { content: none; }

  /* Grelhas em <style> de página (Consumo de IA) colapsam a 1 coluna.
     A regra genérica só apanha grid inline no atributo; estas vêm de classes. */
  .ci-top, .ci-grid2 { grid-template-columns: 1fr !important; }

  /* Gráficos (Chart.js) nunca ultrapassam a largura do cartão. */
  .ci-panel canvas, .rel-chart-wrap canvas { max-width: 100%; }
}

/* ===================================================================
   MODO TERRENO / ESCRITÓRIO
   Escritório = experiência completa (default, sem alterações).
   Terreno = mobile-first: alvos maiores, densidade menor e uma barra de
   ações rápidas de campo. Alterna no header (e no drawer) e persiste na
   sessão (context processor `modo_trabalho`).
   =================================================================== */

/* Toggle Escritório/Terreno (segmented pill, identidade Lukana) */
.modo-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--bg-secondary); border-radius: var(--radius-pill);
  border: 1px solid var(--border-medium);
}
.modo-toggle__opt {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border: none; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  border-radius: var(--radius-pill); white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.modo-toggle__opt:hover { color: var(--text-primary); }
.modo-toggle__opt svg { width: 16px; height: 16px; stroke-width: 2; flex: none; }
.modo-toggle__opt.is-active { background: var(--accent-primary); color: var(--on-accent); }
.modo-toggle__opt.is-active:hover { color: var(--on-accent); }
.modo-toggle--drawer { display: flex; width: 100%; margin: 2px 0 12px; }
.modo-toggle--drawer .modo-toggle__opt { flex: 1 1 0; justify-content: center; height: 40px; }

/* Barra de ações de campo — escondida no Escritório, aparece no Terreno. */
.terreno-actions { display: none; }
.app[data-modo="terreno"] .terreno-actions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 12px 24px; background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
}
.terreno-action {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; text-decoration: none; text-align: center;
  background: var(--bg-primary); border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg); color: var(--text-primary);
  font-size: 13px; font-weight: 600; min-height: 44px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.terreno-action:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-light); }
.terreno-action__ico {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: grid; place-items: center; background: var(--accent-tertiary); color: var(--accent-text);
}
.terreno-action__ico svg { width: 20px; height: 20px; stroke-width: 2; }
.terreno-action__lbl { line-height: 1.2; }

/* Terreno adensa menos e aumenta alvos de toque (mais legível em campo). */
.app[data-modo="terreno"] .btn { min-height: 44px; }
.app[data-modo="terreno"] .btn--sm { min-height: 40px; }
.app[data-modo="terreno"] .iconbtn, .app[data-modo="terreno"] .gicon { width: 40px; height: 40px; }
.app[data-modo="terreno"] .content { font-size: 15px; }
.app[data-modo="terreno"] .rtable tbody td { height: 60px; }
.app[data-modo="terreno"] .field-row { padding-top: 4px; padding-bottom: 4px; }

@media (min-width: 768px) and (min-height: 481px) {
  /* No desktop o Terreno mantém-se legível mas não domina o ecrã: a barra de
     ações fica numa faixa compacta com os cartões alinhados à esquerda. */
  .app[data-modo="terreno"] .terreno-actions {
    grid-template-columns: repeat(4, minmax(0, 200px)); justify-content: start;
  }
}

@media (max-width: 767.98px), (max-height: 480px) and (orientation: landscape) {
  /* No telemóvel o toggle grande do header dá lugar só aos ícones (o toggle
     completo vive no drawer). Poupa espaço na topbar apertada. */
  .topbar .modo-toggle { padding: 2px; }
  .topbar .modo-toggle__lbl { display: none; }
  .topbar .modo-toggle__opt { padding: 0 8px; height: 30px; }

  /* Ações de campo: 2 colunas maiores no telemóvel (polegar-friendly). */
  .app[data-modo="terreno"] .terreno-actions { grid-template-columns: 1fr 1fr; padding: 12px; }
  .app[data-modo="terreno"] .terreno-action { flex-direction: row; justify-content: flex-start; min-height: 56px; }
}

/* --- Notas de voz (captura em terreno) --------------------------------- */
.voz-capture { max-width: 560px; margin: 0 auto; }
.voz-capture__card { padding: 24px; text-align: center; }
.voz-capture__lede { color: var(--text-secondary); margin: 0 0 20px; }
.voz-rec { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.voz-rec__btn {
  width: 112px; height: 112px; border-radius: var(--radius-pill);
  border: none; cursor: pointer; display: grid; place-items: center;
  background: var(--blue); color: var(--on-accent);
  box-shadow: var(--shadow-strong); transition: transform .12s ease, background .12s ease;
}
.voz-rec__btn svg { width: 44px; height: 44px; }
.voz-rec__btn:hover { background: var(--blue-hover); }
.voz-rec__btn:active { transform: scale(.96); }
.voz-rec__btn:disabled { opacity: .5; cursor: not-allowed; }
.voz-rec__btn.is-recording { background: var(--red); color: #fff; animation: vozPulse 1.4s ease-in-out infinite; }
.voz-rec__btn.is-busy { opacity: .6; }
@keyframes vozPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,100,50,.45); } 50% { box-shadow: 0 0 0 16px rgba(248,100,50,0); } }
.voz-rec__status { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-weight: 600; }
.voz-rec__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: vozBlink 1s steps(2) infinite; }
@keyframes vozBlink { 50% { opacity: .2; } }
.voz-rec__timer { font-family: var(--font-mono, monospace); font-size: 22px; color: var(--text-primary); }
.voz-capture__nosupport, .voz-capture__result { margin-top: 16px; }
.voz-capture__result:empty { display: none; }

.voz-detail { max-width: 640px; }
.voz-detail__meta { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary); }
.voz-detail__h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin: 8px 0; }
.voz-detail__transcript { white-space: pre-wrap; line-height: 1.5; margin: 0; }
.voz-detail__empty { color: var(--text-tertiary); margin: 0; }
.voz-detail__action { display: flex; align-items: center; gap: 8px; }

/* Switch «publicar no site» (lista de espécies) — on/off por linha, via HTMX. */
.site-switch {
  position: relative; width: 40px; height: 22px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--bg-secondary);
  cursor: pointer; padding: 0; transition: background .15s, border-color .15s;
}
.site-switch__knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--text-tertiary); transition: left .15s, background .15s;
}
.site-switch--on { background: var(--accent); border-color: var(--accent); }
.site-switch--on .site-switch__knob { left: 20px; background: var(--on-accent); }

/* Inventário agrupado por espécie (#36) — cabeçalho colapsável. */
/* Layout D: cabeçalho de espécie = linha-resumo agregada, alinhada às colunas. */
.inv-grp__head { cursor: pointer; background: var(--bg-secondary); }
.inv-grp__head:hover td { background: var(--bg-hover); }
.inv-grp__head td { padding: 9px 12px; border-top: 1px solid var(--border-strong); }
.inv-grp__toggle {
  display: inline-flex; align-items: center; justify-content: center; background: none; border: none;
  padding: 4px; cursor: pointer; color: var(--text-primary); border-radius: var(--radius-sm);
}
.inv-grp__toggle:hover { background: rgba(0,0,0,.06); }
.inv-grp__chev { width: 18px; height: 18px; color: var(--text-secondary); transition: transform .16s ease; }
.inv-grp__chev.is-open { transform: rotate(90deg); }
.inv-grp__name { display: flex; align-items: center; gap: 10px; }
.inv-grp__thumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.inv-grp__nametxt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.inv-grp__cap { font-size: 11px; font-weight: 600; color: var(--text-light); }
.inv-grp__link { font-size: 12px; color: var(--accent-text); text-decoration: none; font-weight: 600; white-space: nowrap; }
.inv-grp__link:hover { text-decoration: underline; }
/* células agregadas do cabeçalho: texto secundário; o total de Qtd fica a bold */
.inv-grp__head td.agg { color: var(--text-tertiary); font-weight: 500; }
.inv-grp__head td.num b { color: var(--text-primary); }
.agg-un { font-weight: 600; color: var(--text-light); font-size: 12px; }
/* linhas de lote (planas) */
.inv-lote:hover td { background: var(--bg-hover); }

/* ===== Assistente conversacional (Base de Conhecimento) ===== */
.chat { display: flex; height: 100%; min-height: 0; background: var(--bg-primary); }
.chat__side {
  width: 260px; flex: none; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; background: var(--bg-secondary);
}
.chat__new { margin: 12px; width: calc(100% - 24px); }
.chat__list { flex: 1; overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.chat__item {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--text-secondary);
}
.chat__item:hover { background: var(--bg-hover); }
.chat__item.is-active { background: var(--bg-hover-medium); color: var(--text-primary); }
.chat__item-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__item-area { font-size: 11px; color: var(--text-tertiary); }
.chat__empty-side { padding: 12px; font-size: 12px; color: var(--text-tertiary); }

.chat__main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat__log { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.chat__welcome { margin: auto; max-width: 460px; text-align: center; color: var(--text-tertiary); }
.chat__welcome h3 { color: var(--text-primary); font-size: 18px; margin-bottom: 8px; }
.chat__welcome--full { padding: 40px; }
.chat__welcome--full form { margin-top: 16px; }

.chat__msg { display: flex; }
.chat__msg--user { justify-content: flex-end; }
.chat__bubble {
  max-width: 76%; padding: 10px 14px; border-radius: var(--radius-lg);
  font-size: 14px; line-height: 1.5; word-wrap: break-word;
}
.chat__msg--user .chat__bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: var(--radius-xs); }
.chat__msg--assistant .chat__bubble { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border); border-bottom-left-radius: var(--radius-xs); }
.chat__bubble p:first-child { margin-top: 0; }
.chat__bubble p:last-child { margin-bottom: 0; }

.chat__attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px; }
.chat__chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: var(--bg-tertiary); border-radius: var(--radius-pill); font-size: 12px; color: var(--text-secondary);
}
.chat__chip svg { width: 14px; height: 14px; }
.chat__chip-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__chip-ok { color: var(--accent-text); font-style: normal; font-size: 11px; }

.chat__composer {
  display: flex; align-items: flex-end; gap: 8px; margin: 12px 24px 8px;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-secondary);
}
.chat__composer.is-over { border-color: var(--accent); background: var(--bg-hover); }
.chat__input {
  flex: 1; border: none; background: transparent; resize: none; outline: none;
  font-family: var(--font); font-size: 14px; color: var(--text-primary); max-height: 160px; padding: 6px 4px;
}
.chat__attach-btn, .chat__send {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
}
.chat__attach-btn { background: transparent; color: var(--text-tertiary); }
.chat__attach-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.chat__attach-btn svg, .chat__send svg { width: 18px; height: 18px; }
.chat__send { background: var(--accent); color: var(--on-accent); }
.chat__send:hover { filter: brightness(0.95); }
.chat__hint { padding: 0 24px 10px; font-size: 12px; color: var(--text-tertiary); }
.chat__hint.htmx-indicator { display: none; }
.chat__hint.htmx-request { display: block; }

/* --- Página de Tarefas (interface dedicada) --------------------------------
   Barra de filtros (chips) + tabela .rtable com edição inline do responsável e
   do prazo (HTMX). Segue os tokens Lukana/COINEST (lima --blue, r=pill/md). */
.task-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-bottom: 16px; }
.task-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.task-filters__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin-right: 2px; }
.chip { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.chip--on { background: var(--blue); border-color: var(--blue); color: var(--accent-text); font-weight: 600; }
.chip--on:hover { background: var(--blue); border-color: var(--blue); color: var(--accent-text); filter: brightness(.97); }
.chip--danger.chip--on { background: var(--tag-bg-red); border-color: var(--tag-text-red); color: var(--tag-text-red); }
.chip__count { font-variant-numeric: tabular-nums; font-size: 11px; padding: 0 6px; border-radius: var(--radius-pill); background: rgba(0,0,0,.08); color: inherit; }
.chip--on .chip__count { background: rgba(6,47,40,.14); }

.task-table td { vertical-align: middle; }
.task-cell-main { min-width: 260px; }
.task-check { display: inline-block; margin-right: 10px; vertical-align: top; }
.task-check__box { width: 19px; height: 19px; border: 1.6px solid var(--border-strong); border-radius: 50%; background: transparent; cursor: pointer; padding: 0; line-height: 1; transition: border-color .12s, background .12s; }
.task-check__box:hover { border-color: var(--blue); background: var(--accent-tertiary); }
.task-check__box--done { border-color: var(--blue); background: var(--blue); color: var(--accent-text); font-size: 12px; font-weight: 700; }
.task-title { display: inline-flex; flex-direction: column; gap: 2px; }
.task-title .cell-strong { line-height: 1.3; }
.task-body { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.35; }
.task-row--done .task-title .cell-strong { text-decoration: line-through; color: var(--text-tertiary); }

.task-processo { display: block; text-decoration: none; color: var(--text-primary); font-weight: 500; font-size: 13.5px; }
.task-processo:hover { color: var(--accent-text); }
.task-processo--none { color: var(--text-light); font-weight: 400; font-style: italic; }
.task-conta { display: block; text-decoration: none; color: var(--text-tertiary); font-size: 12px; margin-top: 1px; }
.task-conta:hover { color: var(--accent-text); }

.task-inline-select, .task-inline-date {
  font-family: inherit; font-size: 13px; color: var(--text-secondary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 4px 6px; max-width: 100%; cursor: pointer; transition: border-color .12s, background .12s;
}
.task-inline-select:hover, .task-inline-date:hover,
.task-inline-select:focus, .task-inline-date:focus {
  border-color: var(--border-medium); background: var(--bg-secondary); outline: none;
}
.task-inline-date.is-overdue { color: var(--tag-text-red); font-weight: 600; }

.tag--gray { background: var(--bg-secondary); color: var(--text-tertiary); }
.tag--gray::before { opacity: .5; }