/* ===========================================================================
   tailgrids.css — pele TailGrids

   Tokens extraidos do Figma pelo conector oficial, arquivo
   L0iittKd6cRQJGju4xtKWV (Tailwind UI Components for Figma | TailGrids),
   pagina "All Essential Components".

   EXTRAIDO do kit (valor exato lido do arquivo):
     310:24185  Page Title Style 3  -> cabecalho de pagina
     310:23249  Table Stack List    -> linha de tabela (padding, hover)
     310:23353  Item Badge          -> badge
     cores e tipografia via get_variable_defs

   DERIVADO das convencoes do kit (o limite de chamadas do Figma no plano
   Starter impediu buscar os componentes originais): campos de formulario,
   abas, menu de ordenar e paginacao. Seguem os mesmos tokens — traco
   DFE4EA, raio 6, Inter 16/24, foco no Primary — mas NAO foram conferidos
   contra o arquivo. Estao marcados com DERIVADO ao longo do arquivo.

   ESCOPO: tudo aqui vale so dentro de body.tg-skin. Uma pagina adota a pele
   passando bodyClass no View::render. As outras seguem intactas.
   =========================================================================== */

:root {
    /* --- Cor (get_variable_defs) ---------------------------------------- */
    /* O kit traz #3758F9 em Primary Color. A marca pediu outro azul, entao o
       token foi trocado; todo o resto do arquivo aponta para ele. As duas
       variantes abaixo existem para o tom nao ficar cravado em hex solto:
       -dark e o hover do botao primario, e -rgb alimenta os fundos
       translucidos (selecao, item de menu ativo, aro de foco). */
    --tg-primary: #4388c4;      /* Primary Color (kit: #3758F9) */
    --tg-primary-dark: #36709f; /* hover do primario */
    --tg-primary-rgb: 67, 136, 196;
    --tg-secondary: #13C296;    /* Secondary Color    */
    --tg-red: #F23030;          /* Red/Red            */
    --tg-dark: #111928;         /* Dark/Dark          */
    --tg-dark-3: #374151;       /* Dark/Dark 3        */
    --tg-text: #637381;         /* Primary Text Color */
    --tg-stroke: #DFE4EA;       /* Stroke             */
    --tg-gray: #F9FAFB;         /* Gray/Gray          */
    --tg-gray-2: #F3F4F6;       /* Gray/Gray 2        */
    --tg-white: #FFFFFF;

    /* --- Tipografia: Inter, a mesma fonte que o app ja hospeda ---------- */
    --tg-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* --- Escala de texto ------------------------------------------------
       O kit e desenhado para pagina de marketing, com corpo em 16/24. Num CRM
       de centenas de linhas por tela isso fica grande, entao a escala desce um
       degrau mantendo as proporcoes do kit. O corpo em 14px tambem e o tamanho
       que o app ja usava antes, no --type-body do app-shell.css.

         de / para   titulo   24/30 -> 20/28
                     corpo    16/24 -> 14/22
                     pequeno  14/22 -> 13/20
                     micro    12/18 -> 11/16

       Para afinar depois, mexa SO aqui: todas as regras do arquivo apontam
       para estas variaveis, nenhuma tem px cravado. */
    --tg-fs-title: 20px;   --tg-lh-title: 28px;
    --tg-fs-body: 14px;    --tg-lh-body: 22px;
    --tg-fs-small: 13px;   --tg-lh-small: 20px;
    --tg-fs-micro: 11px;   --tg-lh-micro: 16px;
    /* Chip de tag dentro do card do quadro. Menor que o micro de proposito: o
       card carrega nome, site, instagram, tags e data numa coluna de 296px. */
    --tg-fs-chip: 10px;

    /* Tamanho do texto DENTRO de campos de formulario. Separado da escala
       porque o iOS aumenta o zoom ao focar um campo com fonte menor que 16px,
       e esse zoom passa a rolar a pagina de lado. No celular ele vira 16px
       (ver o bloco de 860px); no desktop acompanha o corpo. */
    --tg-fs-field: var(--tg-fs-body);

    /* --- Raio ----------------------------------------------------------- */
    --tg-radius-3: 3px;   /* badge  — Item Badge (310:23353) */
    --tg-radius-6: 6px;   /* botao e campo — Table Stack List (310:23249) */

    /* Cartao. O kit usa raio 20 no Service Grid (310:22779), com padding 40.
       Como o padding daqui foi reduzido em ~25% junto com a escala de texto,
       o raio acompanha na mesma proporcao para o canto guardar a relacao que
       o kit desenhou. Antes eu usava 6 aqui, derivado do BOTAO do Table Stack
       List — era o raio errado para um cartao. */
    --tg-radius-card: 16px;

    /* --- Sombra --------------------------------------------------------- */
    /* Shadow 2 do kit, do Service Grid. */
    --tg-shadow-card: 0 5px 12px rgba(0, 0, 0, .10);
}

/* ---------------------------------------------------------------------------
   Base. O kit assenta o conteudo em branco, corpo em Primary Text Color e
   titulo em Dark.
   ------------------------------------------------------------------------ */
body.tg-skin .main-content {
    background: var(--tg-white);
    font-family: var(--tg-font);
    color: var(--tg-text);
}

/* O app-shell.css aplica JetBrains Mono em th, .status-pill, .eyebrow e mais
   uma duzia de seletores. O TailGrids e Inter do inicio ao fim — nao tem
   monoespacada nenhuma. Uma regra so desfaz todas elas de uma vez, e os icones
   do app sao SVG inline, entao nada depende de font-family aqui. */
body.tg-skin .main-content,
body.tg-skin .main-content * {
    font-family: var(--tg-font);
}

/* ---------------------------------------------------------------------------
   Cabecalho — Page Title Style 3 (310:24185)
   Do kit: flex, space-between, padding-bottom 25, borda inferior Stroke,
   titulo Heading 6 (24/30, 600, Dark), descricao Body Small Regular
   (14/22, 400, Primary Text Color), gap 8.
   ------------------------------------------------------------------------ */
body.tg-skin .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 24px;
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1px solid var(--tg-stroke);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
body.tg-skin .page-header > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
/* O Style 3 tem duas linhas: titulo e descricao. Nao existe eyebrow no kit. */
body.tg-skin .page-header .eyebrow { display: none; }
body.tg-skin .page-header h1 {
    margin: 0;
    font-size: var(--tg-fs-title);
    line-height: var(--tg-lh-title);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--tg-dark);
}
body.tg-skin .page-header p {
    margin: 0;
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 400;
    color: var(--tg-text);
}
body.tg-skin .page-header-actions { display: flex; align-items: center; gap: 12px; }

/* ---------------------------------------------------------------------------
   Botoes. Primario do kit: Primary Color, padding 24/12, raio 6,
   Body Medium Medium (16/24, 500) em branco, gap 10.
   ------------------------------------------------------------------------ */
body.tg-skin .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* 5px em cima e embaixo, a pedido: botao mais baixo em todo o app. No
       celular o min-height de 44px adiante segura o alvo de toque. */
    padding: 5px 20px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
body.tg-skin .button:hover { background: var(--tg-gray); }
body.tg-skin .button.primary {
    background: var(--tg-primary);
    border-color: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .button.primary:hover { background: var(--tg-primary-dark); border-color: var(--tg-primary-dark); }
body.tg-skin .button.ghost { background: none; border-color: transparent; color: var(--tg-text); }
body.tg-skin .button.ghost:hover { background: var(--tg-gray-2); color: var(--tg-dark); }
body.tg-skin .button.small { padding: 5px 14px; font-size: var(--tg-fs-small); line-height: var(--tg-lh-small); }

/* Icone do botao primario, exportado do kit (circle-plus do 310:24189).
   O kit tem uma caixa externa de 20x20 com a folha em 18.94x18.91 dentro; as
   duas medidas ficam explicitas para a arte nao esticar. */
body.tg-skin .tg-btn-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    overflow: hidden;
}
body.tg-skin .tg-btn-icon img { display: block; width: 18.94px; height: 18.91px; }

/* ---------------------------------------------------------------------------
   Abas Ativas / Arquivadas.  DERIVADO.
   ------------------------------------------------------------------------ */
body.tg-skin .filter-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 24px;
    padding: 4px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-gray);
}
body.tg-skin .filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-decoration: none;
}
body.tg-skin .filter-tab:hover { background: var(--tg-gray-2); color: var(--tg-dark); }
body.tg-skin .filter-tab.active {
    background: var(--tg-white);
    color: var(--tg-dark);
    box-shadow: 0 1px 2px rgba(17, 25, 40, .08);
}
body.tg-skin .filter-tab b {
    padding: 1px 6px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
}
body.tg-skin .filter-tab.active b { background: var(--tg-primary); color: var(--tg-white); }

/* ---------------------------------------------------------------------------
   Barra de filtros e campos.  DERIVADO.
   ------------------------------------------------------------------------ */
body.tg-skin .responsive-filter-shell > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 0 12px;
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    cursor: pointer;
}
body.tg-skin .responsive-filter-shell > summary b {
    padding: 1px 6px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-primary);
    color: var(--tg-white);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
body.tg-skin .filter-bar input,
body.tg-skin .filter-bar select {
    min-width: 0;
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
    font-weight: 400;
}
body.tg-skin .filter-bar input { flex: 1 1 260px; }
/* Sem uma base propria os selects encolhiam e cortavam o rotulo
   ("Todos os estad", "Todas as etapa"). 200px cabe o rotulo mais longo com o
   padding de 20 do kit; a barra tem flex-wrap, entao eles quebram a linha em
   vez de comprimir. Sem max-width: era ele que travava o campo no celular. */
/* O max-width evita que o campo estique pela linha inteira quando a barra tem
   poucos filtros — a Agenda tem so dois e eles chegavam a 542px cada. No
   celular o bloco de 860px devolve max-width: none. */
body.tg-skin .filter-bar select { flex: 0 1 240px; min-width: 200px; max-width: 240px; }
body.tg-skin .filter-bar input::placeholder { color: var(--tg-text); }
body.tg-skin .filter-bar input:focus,
body.tg-skin .filter-bar select:focus { border-color: var(--tg-primary); outline: 0; }

/* ---------------------------------------------------------------------------
   Tabela — Table Stack List (310:23249)
   Do kit: padding 24 lateral / 18 vertical, fundo branco, hover Gray/Gray,
   primario Body Medium Medium em Dark, secundario Body Medium Regular em
   Primary Text Color.
   ------------------------------------------------------------------------ */
body.tg-skin .table-card {
    /* Rola no lugar de cortar: a lista do Pipeline tem oito colunas e passava
       de 981px numa caixa de 942, perdendo a coluna Atividade. */
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: none;
}
body.tg-skin .table-card table { width: 100%; border-collapse: collapse; }
body.tg-skin .table-card thead th {
    padding: 13px 20px;
    border-bottom: 1px solid var(--tg-stroke);
    background: var(--tg-gray);
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}
body.tg-skin .table-card tbody td {
    padding: 13px 20px;
    border-bottom: 1px solid var(--tg-stroke);
    color: var(--tg-text);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 400;
    vertical-align: middle;
}
body.tg-skin .table-card tbody tr:last-child td { border-bottom: 0; }
body.tg-skin .table-card tbody tr:hover { background: var(--tg-gray); }
body.tg-skin .table-card .company-name {
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    text-decoration: none;
}
body.tg-skin .table-card .company-name:hover { color: var(--tg-primary); }
body.tg-skin .table-card td small {
    display: block;
    margin-top: 2px;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .empty-cell { padding: 40px 24px; color: var(--tg-text); text-align: center; }
body.tg-skin .muted { color: var(--tg-text); font-size: var(--tg-fs-small); line-height: var(--tg-lh-small); }

/* ---------------------------------------------------------------------------
   Badges — Item Badge (310:23353)
   Do kit: raio 3, padding 10/3, Body Small Medium (14/22, 500) em branco.
   As quatro prioridades usam so cores do kit, do mais fraco ao mais forte.
   ------------------------------------------------------------------------ */
body.tg-skin .priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border: 0;
    border-radius: var(--tg-radius-3);
    background: var(--tg-text);
    color: var(--tg-white);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    white-space: nowrap;
}
body.tg-skin .priority-badge.low { background: var(--tg-text); }
body.tg-skin .priority-badge.medium { background: var(--tg-secondary); }
body.tg-skin .priority-badge.high { background: var(--tg-primary); }
body.tg-skin .priority-badge.strategic { background: var(--tg-dark); }

/* Tags e etapa: o chip fica neutro como no kit, e a cor escolhida no app
   aparece como ponto — assim a informacao nao se perde. */
body.tg-skin .tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.tg-skin .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 0;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .tag-chip::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tag-color, var(--tg-text));
}
body.tg-skin .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-3);
    background: var(--tg-white);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .status-pill i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; }
body.tg-skin .mobile-row-action {
    color: var(--tg-primary);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Menu de ordenar.  DERIVADO.
   ------------------------------------------------------------------------ */
body.tg-skin .sort-menu-popover {
    padding: 8px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: 0 8px 24px rgba(17, 25, 40, .10);
}
body.tg-skin .sort-menu-popover strong {
    display: block;
    padding: 5px 10px;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 600;
}
body.tg-skin .sort-menu-popover a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    text-decoration: none;
}
body.tg-skin .sort-menu-popover a:hover { background: var(--tg-gray); color: var(--tg-dark); }
body.tg-skin .sort-menu-popover a.active { background: var(--tg-gray-2); color: var(--tg-dark); font-weight: 500; }

/* ---------------------------------------------------------------------------
   Paginacao.  DERIVADO.
   ------------------------------------------------------------------------ */
body.tg-skin .pagination { margin: 24px 0 0; gap: 8px; }
body.tg-skin .pagination-pages { gap: 6px; }
body.tg-skin .pagination-pages a {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .pagination-pages a:hover { background: var(--tg-gray); color: var(--tg-dark); }
body.tg-skin .pagination-pages a.active {
    background: var(--tg-primary);
    border-color: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .pagination-gap { color: var(--tg-text); }

/* ---------------------------------------------------------------------------
   Mobile. O kit nao traz recorte responsivo; estas regras cumprem o
   AGENTS.md — sem rolagem horizontal e area de toque de 44 px.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
    body.tg-skin .page-header { flex-direction: column; align-items: stretch; }
    body.tg-skin .page-header-actions { justify-content: space-between; }
    body.tg-skin .button { min-height: 44px; }
    /* 16px e o minimo que o iOS aceita sem aumentar o zoom ao focar o campo.
       Com o zoom, a pagina passa a rolar de lado — era o que acontecia ao
       abrir uma tarefa e tocar num campo. Uma variavel so resolve, porque
       variavel nao disputa especificidade com as regras de cada tela. */
    body.tg-skin { --tg-fs-field: 16px; }

    /* Campo de data/hora no iOS: o Safari desenha o proprio controle e lhe da
       uma largura minima a partir do texto por extenso ("26 de ago. de 2026,
       16:57"). Ele ignora o width:100% e empurra o formulario para fora da
       tela — e dai a rolagem lateral. O appearance:none devolve o controle ao
       fluxo normal; o min-width:0 permite que ele encolha dentro da grade.
       No Chrome o mesmo campo ja cabia, por isso o problema so aparecia no
       aparelho. */
    body.tg-skin input[type="date"],
    body.tg-skin input[type="time"],
    body.tg-skin input[type="datetime-local"],
    body.tg-skin input[type="month"],
    body.tg-skin input[type="week"] {
        -webkit-appearance: none;
        appearance: none;
        min-width: 0;
    }
    /* Nas linhas em que esse campo dividia espaco com outros controles, no
       desktop, ele tinha largura automatica — no celular isso o deixaria
       crescer com o texto por extenso do iOS. Aqui ele ocupa a linha. */
    body.tg-skin .deal-detail-layout .action-add input[type="datetime-local"],
    body.tg-skin .task-modal-content .action-add input[type="datetime-local"],
    body.tg-skin .action-add input[type="datetime-local"] {
        flex: 1 1 100%;
        width: 100%;
    }
    /* Rede de seguranca: nenhum controle passa da largura do que o contem. */
    body.tg-skin input,
    body.tg-skin select,
    body.tg-skin textarea { max-width: 100%; }
    /* Alguns campos recebem o tamanho de fora da pele (o 13px do comentario e
       o 12px do responsavel da subtarefa vem do custom.css e do app-shell).
       Esta varredura alcanca os dois sem precisar caçar cada seletor. */
    body.tg-skin .main-content input:not([type="checkbox"]):not([type="radio"]),
    body.tg-skin .main-content select,
    body.tg-skin .main-content textarea,
    body.tg-skin .task-modal-content input:not([type="checkbox"]):not([type="radio"]),
    body.tg-skin .task-modal-content select,
    body.tg-skin .task-modal-content textarea,
    body.tg-skin .deal-modal-content input:not([type="checkbox"]):not([type="radio"]),
    body.tg-skin .deal-modal-content select,
    body.tg-skin .deal-modal-content textarea { font-size: var(--tg-fs-field); }

    /* O max-width de 240px do desktop travava o select no celular. */
    body.tg-skin .filter-bar input,
    body.tg-skin .filter-bar select {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        min-height: 44px;
    }

    /* Cada linha vira um cartao solto. O container NAO pode manter moldura
       aqui: abaixo de 700px o app ja da borda, raio e margem a cada linha, e a
       borda do container aparecia por fora ligando todos os cartoes. */
    body.tg-skin .table-card {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    body.tg-skin .table-card thead { display: none; }
    body.tg-skin .table-card tbody tr {
        display: block;
        margin: 0 0 12px;
        padding: 16px 20px;
        border: 1px solid var(--tg-stroke);
        border-radius: var(--tg-radius-card);
        background: var(--tg-white);
    }
    body.tg-skin .table-card tbody tr:last-child { margin-bottom: 0; }
    body.tg-skin .table-card tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 4px 0;
        border: 0;
    }
    body.tg-skin .table-card tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--tg-text);
        font-size: var(--tg-fs-small);
        line-height: var(--tg-lh-small);
        font-weight: 500;
    }
    body.tg-skin .table-card tbody td[data-label="Empresa"] { display: block; margin-bottom: 6px; }
    body.tg-skin .table-card tbody td[data-label="Empresa"]::before { display: none; }
    body.tg-skin .pagination-pages a { min-width: 44px; height: 44px; }
    /* Com o texto em 13px este link caia para 42px de altura, abaixo do
       minimo de toque de 44px do AGENTS.md. */
    body.tg-skin .mobile-row-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    /* --- Empresas no celular ---------------------------------------------
       O topo comia quase metade da tela antes do primeiro registro: cabecalho,
       linha de acoes, abas e gaveta de filtros, cada um com a folga do
       desktop. Aqui tudo encosta mais, e Ordenar e Nova empresa dividem a
       mesma linha em vez de uma esticar sozinha.
       ------------------------------------------------------------------- */
    body.tg-skin .page-header { gap: 12px; margin: 0 0 14px; padding: 0 0 12px; }
    body.tg-skin .page-header-actions { gap: 8px; }
    body.tg-skin .page-header-actions > .button,
    body.tg-skin .page-header-actions > .sort-menu { flex: 1 1 0; }
    body.tg-skin .page-header-actions > .sort-menu > .button { width: 100%; }
    body.tg-skin .filter-tabs { margin: 0 0 10px; }
    body.tg-skin .responsive-filter-shell { margin: 0 0 14px; }

    /* Cartao da listagem: menos respiro interno, rotulos menores e a acao no
       rodape em vez de uma linha "Acoes" com botao em caixa. */
    body.tg-skin .table-card tbody tr {
        margin: 0 0 10px;
        padding: 14px 16px;
        border-radius: var(--tg-radius-6);
    }
    body.tg-skin .table-card tbody td { padding: 3px 0; }
    body.tg-skin .table-card tbody td::before {
        font-size: var(--tg-fs-micro);
        line-height: var(--tg-lh-micro);
    }
    body.tg-skin .table-card tbody td.row-action-cell {
        justify-content: flex-end;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--tg-gray-2);
    }
    body.tg-skin .table-card tbody td.row-action-cell::before { display: none; }
    body.tg-skin .table-card tbody td.row-action-cell .mobile-row-action {
        min-height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--tg-primary);
        font-weight: 500;
    }
}

/* ===========================================================================
   PAINEL — o cartao do kit, usado por Visao geral, Agenda, Importacoes,
   Ideias e Meu perfil. Regra de maior alcance do arquivo: cinco telas.

   EXTRAIDO: 310:22779 Service Grid — branco, Shadow 2, raio 20 (aqui 16, ver
   --tg-radius-card), padding 40 (aqui 28), titulo Heading 6, texto 16/24.
   =========================================================================== */
body.tg-skin .panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border: 0;
    border-radius: var(--tg-radius-card);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
body.tg-skin .panel > h2,
body.tg-skin .panel-title h2 {
    margin: 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-title);
    line-height: var(--tg-lh-title);
    font-weight: 600;
    letter-spacing: 0;
}
body.tg-skin .panel-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    border: 0;
    background: none;
}
body.tg-skin .panel-title > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.tg-skin .panel-title p,
body.tg-skin .panel-description {
    margin: 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 400;
}
body.tg-skin .panel-title > a {
    flex: 0 0 auto;
    color: var(--tg-primary);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-decoration: none;
}
body.tg-skin .empty-mini,
body.tg-skin .empty-state,
body.tg-skin .idea-empty {
    padding: 24px;
    border: 1px dashed var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-gray);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    text-align: center;
}
/* A tabela alinha o raio ao cartao, mas segue de traco em vez de sombra:
   dado tabular le melhor com a borda fechando a area. */
body.tg-skin .table-card { border-radius: var(--tg-radius-card); }

/* ===========================================================================
   VISAO GERAL
   Cartao de metrica e barras de etapa nao existem no kit — DERIVADOS da
   linguagem dele (superficie branca, traco, Primary no destaque).
   =========================================================================== */
body.tg-skin .metric-grid { gap: 20px; }
body.tg-skin .metric-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-card);
    background: var(--tg-white);
    box-shadow: none;
}
body.tg-skin .metric-card > span {
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .metric-card strong {
    color: var(--tg-dark);
    font-size: 26px;
    line-height: 34px;
    font-weight: 600;
    letter-spacing: 0;
}
body.tg-skin .metric-card small,
body.tg-skin .metric-card > a {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    text-decoration: none;
}
body.tg-skin .metric-card > a { color: var(--tg-primary); font-weight: 500; }
/* O cartao que pede atencao recebe o Primary, nao o vermelho: e pendencia de
   trabalho, nao erro. */
body.tg-skin .metric-card.attention { border-color: var(--tg-primary); }
body.tg-skin .metric-card.attention strong { color: var(--tg-primary); }

body.tg-skin .content-grid { gap: 20px; }
body.tg-skin .stage-bars { display: flex; flex-direction: column; gap: 14px; }
body.tg-skin .stage-bar { display: flex; flex-direction: column; gap: 6px; }
body.tg-skin .stage-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
body.tg-skin .stage-label span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tg-dark-3);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .stage-label span i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
body.tg-skin .stage-label strong {
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 600;
}
body.tg-skin .bar-track {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: var(--tg-gray-2);
}
body.tg-skin .bar-track span { display: block; height: 100%; border-radius: 999px; }

body.tg-skin .task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--tg-stroke);
}
body.tg-skin .task-row:last-child { border-bottom: 0; }
body.tg-skin .task-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
body.tg-skin .task-row strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .task-row small,
body.tg-skin .task-row time {
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .task-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: 4px;
    background: var(--tg-white);
}

/* ===========================================================================
   TAREFAS

   EXTRAIDO:
     310:23051  Tab Menu Style 1 -> abas de escopo e de formato
                (padding 12px 35px, raio 6, inativo branco com #637381,
                ativo #3758F9 com texto branco, Inter 16/24 Medium;
                no app a cor vem de --tg-primary, que foi trocado)
     310:24185  Page Title Style 3 -> cabecalho (mesmo de Empresas)
     310:23249  Table Stack List   -> padding 18/24 dos cards e da lista
     310:23353  Item Badge         -> prioridade e tipo

   DERIVADO: o quadro. O kit nao tem kanban; coluna e card seguem a linguagem
   de cartao dele (branco, traco DFE4EA, raio 6, padding 18/24).
   =========================================================================== */

/* --- Cabecalho: mesmo tratamento do Page Title Style 3 ----------------- */
body.tg-skin .pipeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 1px solid var(--tg-stroke);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
/* O align-items:center do custom.css centralizava o h1 dentro da coluna. */
body.tg-skin .pipeline-head-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}
body.tg-skin .pipeline-head-title h1 {
    margin: 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-title);
    line-height: var(--tg-lh-title);
    font-weight: 600;
    letter-spacing: 0;
}
body.tg-skin .task-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --- Abas — Tab Menu Style 1 (310:23051) -------------------------------
   O kit usa 35px de padding lateral. Com quatro escopos mais contador isso
   fica largo, entao a faixa rola sozinha no lugar de comprimir os itens. */
body.tg-skin .task-scope-tabs,
body.tg-skin .task-layout-tabs {
    display: inline-flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
body.tg-skin .task-scope-tabs::-webkit-scrollbar,
body.tg-skin .task-layout-tabs::-webkit-scrollbar { display: none; }
body.tg-skin .task-scope-tabs a,
body.tg-skin .task-layout-tabs a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
body.tg-skin .task-scope-tabs a:hover,
body.tg-skin .task-layout-tabs a:hover { background: var(--tg-gray); color: var(--tg-dark); }
body.tg-skin .task-scope-tabs a.active,
body.tg-skin .task-layout-tabs a.active {
    border-color: var(--tg-primary);
    background: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .task-scope-tabs a b {
    padding: 1px 7px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .task-scope-tabs a.active b { background: rgba(255, 255, 255, .22); color: var(--tg-white); }
/* Atrasadas com contador acima de zero: o vermelho do kit. */
body.tg-skin .task-scope-tabs a b.attention { background: var(--tg-red); color: var(--tg-white); }
body.tg-skin .task-scope-tabs a.active b.attention { background: var(--tg-white); color: var(--tg-red); }

/* --- Barra de busca e filtros.  DERIVADO. ------------------------------ */
body.tg-skin .toolbar-search-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; }
body.tg-skin .toolbar-search {
    display: flex;
    flex: 1 1 280px;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
}
body.tg-skin .toolbar-search:focus-within { border-color: var(--tg-primary); }
body.tg-skin .toolbar-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
    outline: 0;
}
body.tg-skin .toolbar-search input::placeholder { color: var(--tg-text); }
body.tg-skin .toolbar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
body.tg-skin .toolbar-trigger::-webkit-details-marker { display: none; }
body.tg-skin .toolbar-trigger b {
    padding: 1px 7px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-primary);
    color: var(--tg-white);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .toolbar-popover {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: 0 8px 24px rgba(17, 25, 40, .12);
}
body.tg-skin .toolbar-popover strong { color: var(--tg-dark); font-size: var(--tg-fs-body); line-height: var(--tg-lh-body); font-weight: 600; }
body.tg-skin .toolbar-popover label {
    display: grid;
    gap: 6px;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .toolbar-popover select,
body.tg-skin .toolbar-popover input {
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
    font-weight: 400;
}
body.tg-skin .toolbar-popover-actions { display: flex; justify-content: flex-end; gap: 8px; }
body.tg-skin .toolbar-submit {
    padding: 10px 20px;
    border: 1px solid var(--tg-primary);
    border-radius: var(--tg-radius-6);
    background: var(--tg-primary);
    color: var(--tg-white);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    cursor: pointer;
}

/* --- Quadro.  DERIVADO da linguagem de cartao do kit. ------------------ */
/* O gap so muda no desktop. No celular o custom.css da ao quadro uma margem
   direita negativa de -14px para sangrar ate a borda; a geometria de la esta
   calibrada e a pele nao mexe nela, so nas cores.
   (A pagina estoura 2px em 360px, mas isso e anterior a pele: medido com e
   sem body.tg-skin, o scrollWidth e 362 nos dois casos.) */
@media (min-width: 901px) {
    body.tg-skin .task-board { gap: 20px; }
}
body.tg-skin .task-column {
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-gray);
    box-shadow: none;
}
body.tg-skin .task-column > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    border: 0;
    border-bottom: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6) var(--tg-radius-6) 0 0;
    background: var(--tg-white);
}
body.tg-skin .task-column > header strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
}
body.tg-skin .task-column > header span,
body.tg-skin .task-column > header b {
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 400;
}
body.tg-skin .task-column-cards { gap: 12px; padding: 16px; }
body.tg-skin .task-column-empty {
    padding: 16px;
    border: 1px dashed var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    text-align: center;
}

/* --- Card de tarefa.  Padding 18/24 do Table Stack List. -------------- */
body.tg-skin .task-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px 20px;
    border: 1px solid var(--tg-stroke);
    border-left: 0;
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: none;
}
body.tg-skin .task-card:hover { border-color: var(--tg-primary); }
body.tg-skin .task-card.is-overdue { border-left: 3px solid var(--tg-red); }
body.tg-skin .task-card > strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
}
body.tg-skin .task-card .task-relation {
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    text-decoration: none;
}
body.tg-skin .task-card .task-relation:hover { color: var(--tg-primary); }
body.tg-skin .task-card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.tg-skin .task-card .task-type {
    padding: 2px 8px;
    border: 0;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .task-card-tools { display: inline-flex; align-items: center; gap: 6px; }
body.tg-skin .task-card .task-delete,
body.tg-skin .task-card .task-drag-handle {
    border: 0;
    background: none;
    color: var(--tg-text);
    cursor: pointer;
}
body.tg-skin .task-card .task-delete:hover { color: var(--tg-red); }
body.tg-skin .task-card .task-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.tg-skin .task-card .task-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 0;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .task-card .task-tags span::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tag-color, var(--tg-text));
}
body.tg-skin .task-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.tg-skin .task-card .task-due {
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .task-card .task-due.overdue { color: var(--tg-red); }

/* --- Lista: reaproveita a tabela de Empresas, com dois ajustes. -------- */
body.tg-skin .task-list-table tbody td strong {
    display: block;
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
}
body.tg-skin .task-list-table .task-status-form select {
    /* Sem o min-width o rotulo saia cortado ("A faze"). */
    min-width: 148px;
    padding: 5px 10px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-small);
}

/* --- Formularios em painel e modal -------------------------------------
   O app-shell.css define .task-detail-form label { font-size:12px;
   font-weight:700 } — e o campo dentro do label HERDA esse 700, porque nada
   dava peso proprio ao input. Resultado: painel inteiro em negrito.

   No kit, rotulo e Body Small Medium (500) e valor e Body Medium Regular
   (400). As outras familias de formulario do app entram na mesma regra para
   nao repetir o problema quando as telas delas receberem a pele.
   ------------------------------------------------------------------------ */
body.tg-skin .task-detail-form label,
body.tg-skin .form-grid label,
body.tg-skin .deal-create-fields label,
body.tg-skin .classification-panel form > label {
    gap: 6px;
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .task-detail-form input,
body.tg-skin .task-detail-form select,
body.tg-skin .task-detail-form textarea,
body.tg-skin .form-grid input,
body.tg-skin .form-grid select,
body.tg-skin .form-grid textarea,
body.tg-skin .deal-create-fields input,
body.tg-skin .deal-create-fields select,
body.tg-skin .deal-create-fields textarea {
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
    /* O peso precisa ser explicito: sem ele o campo herda o 700 do label. */
    font-weight: 400;
}
body.tg-skin .task-detail-form input::placeholder,
body.tg-skin .task-detail-form textarea::placeholder,
body.tg-skin .form-grid input::placeholder,
body.tg-skin .deal-create-fields input::placeholder {
    color: var(--tg-text);
    font-weight: 400;
}
body.tg-skin .task-detail-form input:focus,
body.tg-skin .task-detail-form select:focus,
body.tg-skin .task-detail-form textarea:focus { border-color: var(--tg-primary); outline: 0; }

/* O h1 do painel usa o atalho font: 700 26px/1.2 no app-shell.css e por isso
   escapou da reducao de escala — ficava 26px ao lado de titulos de pagina em
   20px. Mesmo token dos demais titulos. */
body.tg-skin .task-detail-header h1 {
    font-family: var(--tg-font);
    font-size: var(--tg-fs-title);
    line-height: var(--tg-lh-title);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--tg-dark);
}

/* --- Painel de detalhes: as abas de status usavam navy (#18204a), o que
       brigava com as abas da propria tela atras dele. Mesmo Tab Menu Style 1,
       em escala menor por caber num painel. ------------------------------- */
body.tg-skin .task-status-switch button {
    padding: 7px 14px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    cursor: pointer;
}
body.tg-skin .task-status-switch button:hover { background: var(--tg-gray); color: var(--tg-dark); }
body.tg-skin .task-status-switch button.active {
    border-color: var(--tg-primary);
    background: var(--tg-primary);
    color: var(--tg-white);
}

@media (max-width: 860px) {
    body.tg-skin .pipeline-head { flex-direction: column; align-items: stretch; }
    body.tg-skin .task-scope-tabs a,
    body.tg-skin .task-layout-tabs a { padding: 10px 18px; min-height: 44px; }
    body.tg-skin .toolbar-search,
    body.tg-skin .toolbar-submit { flex: 1 1 100%; min-height: 44px; justify-content: center; }
    /* O custom.css esconde o .toolbar-trigger-label abaixo de 760px: o gatilho
       de filtros vira so icone, de proposito. Aqui ele fica um alvo quadrado
       de 44px em vez de esticar pela linha inteira. */
    body.tg-skin .toolbar-menu { flex: 0 0 auto; }
    body.tg-skin .toolbar-trigger {
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px 14px;
    }
}

/* ===========================================================================
   AGENDA
   O kit nao tem calendario — tudo aqui e DERIVADO da linguagem dele.
   Abas de visao reusam o Tab Menu Style 1.
   =========================================================================== */
body.tg-skin .calendar-page-header,
body.tg-skin .calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
}
/* O app desenha uma borda em volta do grupo. Com as abas ja tendo moldura
   propria, sobrava uma borda dupla em volta de Mes/Semana/Dia/Lista. */
body.tg-skin .calendar-view-switch {
    display: inline-flex;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
body.tg-skin .calendar-view-switch a {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    text-decoration: none;
}
body.tg-skin .calendar-view-switch a:hover { background: var(--tg-gray); color: var(--tg-dark); }
body.tg-skin .calendar-view-switch a.active {
    border-color: var(--tg-primary);
    background: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .calendar-period-navigation { display: inline-flex; align-items: center; gap: 8px; }
body.tg-skin .calendar-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
body.tg-skin .calendar-filters select,
body.tg-skin .calendar-filters input {
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
}
body.tg-skin .calendar-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 24px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-card);
    background: var(--tg-gray);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .calendar-month,
body.tg-skin .calendar-week,
body.tg-skin .calendar-list {
    overflow: hidden;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-card);
    background: var(--tg-white);
}
body.tg-skin .calendar-month-grid > * {
    border-color: var(--tg-stroke);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .calendar-list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 20px;
    border: 0;
    border-bottom: 1px solid var(--tg-stroke);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .calendar-list-row:last-child { border-bottom: 0; }
body.tg-skin .calendar-list-row:hover { background: var(--tg-gray); }
body.tg-skin .calendar-list-row strong { color: var(--tg-dark); font-weight: 500; }

/* ===========================================================================
   IMPORTACOES.  DERIVADO.
   =========================================================================== */
body.tg-skin .import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 24px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-card);
    background: var(--tg-gray);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .import-summary strong { color: var(--tg-dark); font-weight: 600; }
/* O seletor de lote fica no lugar das acoes do cabecalho. Sem limite, o
   select esticava para ~600px e desequilibrava a linha do titulo. */
body.tg-skin .import-batch-picker {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}
body.tg-skin .import-batch-picker select { max-width: 320px; }
body.tg-skin .import-batch-picker label {
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .import-batch-picker select {
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
}
body.tg-skin .bulk-action { display: inline-flex; align-items: center; gap: 12px; }

/* ===========================================================================
   IDEIAS.  DERIVADO, com o cartao do Service Grid.
   =========================================================================== */
/* A marcacao e class="filter-tabs idea-status-tabs": sem anular a moldura do
   grupo, o fundo cinza e a borda de .filter-tabs somavam com as pilulas aqui
   e davam uma caixa dentro de outra, com sobra vazia no fim da linha. */
body.tg-skin .idea-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
}
body.tg-skin .idea-status-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-decoration: none;
}
body.tg-skin .idea-status-tabs a:hover { background: var(--tg-gray); color: var(--tg-dark); }
body.tg-skin .idea-status-tabs a.active {
    border-color: var(--tg-primary);
    background: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .idea-grid { gap: 20px; }
body.tg-skin .idea-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-card);
    background: var(--tg-white);
    box-shadow: none;
}
body.tg-skin .idea-card:hover { border-color: var(--tg-primary); box-shadow: var(--tg-shadow-card); }
body.tg-skin .idea-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.tg-skin .idea-card strong,
body.tg-skin .idea-card h3 {
    margin: 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
}
body.tg-skin .idea-card p {
    margin: 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .idea-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .idea-attach-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
}
body.tg-skin .idea-create,
body.tg-skin .idea-create-form { display: flex; flex-direction: column; gap: 12px; }
body.tg-skin .idea-create-form input,
body.tg-skin .idea-create-form textarea,
body.tg-skin .idea-create-form select {
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
}

/* ===========================================================================
   MEU PERFIL.  DERIVADO.
   =========================================================================== */
body.tg-skin .profile-layout { gap: 20px; }
body.tg-skin .profile-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    border: 0;
    border-radius: var(--tg-radius-card);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
body.tg-skin .profile-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.tg-skin .profile-section-heading h2 {
    margin: 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-title);
    line-height: var(--tg-lh-title);
    font-weight: 600;
}
body.tg-skin .profile-section-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--tg-radius-6);
    background: rgba(var(--tg-primary-rgb), .10);
    color: var(--tg-primary);
}
body.tg-skin .profile-role {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
    letter-spacing: 0;
}
body.tg-skin .profile-form { display: grid; gap: 14px; }
body.tg-skin .profile-form label {
    display: grid;
    gap: 6px;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .profile-form input,
body.tg-skin .profile-form select {
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
    font-weight: 400;
}
body.tg-skin .profile-form input:focus,
body.tg-skin .profile-form select:focus { border-color: var(--tg-primary); outline: 0; }
body.tg-skin .field-help {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .form-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 860px) {
    body.tg-skin .calendar-view-switch,
    body.tg-skin .idea-status-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    body.tg-skin .calendar-view-switch::-webkit-scrollbar,
    body.tg-skin .idea-status-tabs::-webkit-scrollbar { display: none; }
    body.tg-skin .calendar-view-switch a,
    body.tg-skin .idea-status-tabs a { flex: 0 0 auto; min-height: 44px; }
    body.tg-skin .calendar-filters select,
    body.tg-skin .calendar-filters input,
    body.tg-skin .import-batch-picker select,
    body.tg-skin .profile-form input,
    body.tg-skin .profile-form select { min-height: 44px; }
    body.tg-skin .panel,
    body.tg-skin .profile-card { padding: 20px; }
}

/* ===========================================================================
   PIPELINE

   EXTRAIDO do kit:
     310:24185  Page Title Style 3 -> cabecalho da pagina
     310:23051  Tab Menu Style 1   -> Quadro/Lista e abas do modal
     310:23249  Table Stack List   -> lista e linhas
     310:23353  Item Badge         -> prioridade, tags e contadores
     310:23950  Steps              -> trilha de etapas do modal: circulo de 34,
                                      gap 12, numero 16/24 Medium centrado,
                                      rotulo 16/24 Regular em Dark; concluido
                                      com aro Primary, pendente em Gray 2 com
                                      texto Primary Text Color
     310:24152  List Select Item   -> opcoes de importancia: padding 12/20,
                                      raio 6, borda Stroke -> Primary, ponto de
                                      20px #8899A8 -> Primary, rotulo 16/24
                                      Medium Primary Text Color -> Primary
     310:22779  Service Grid       -> sombra do cartao ao passar o mouse

   DERIVADO (o kit nao tem estes componentes; seguem seus tokens):
     a coluna do quadro, o card de negociacao, a barra de acoes em massa e a
     propria gaveta de detalhes.

   As medidas do kit entram reduzidas no mesmo passo da escala de texto
   (~25%): circulo 34 -> 26, padding 12/20 -> 9/14, gap 14 -> 10.

   Os poucos font-size em px aqui (x, v, dois-pontos-verticais, >) sao tamanho
   de glifo de icone, nao texto: nao pertencem a escala tipografica e por isso
   nao apontam para as variaveis.
   =========================================================================== */

/* --- Cabecalho: Page Title Style 3, com a folga cortada ----------------- */
body.tg-skin .pipeline-head-actions:not(.task-head-actions) { display: flex; align-items: center; gap: 8px; }

/* Seletor Em andamento / Encerrados. */
body.tg-skin .pipeline-scope > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}
body.tg-skin .pipeline-scope > summary::-webkit-details-marker { display: none; }
body.tg-skin .pipeline-scope > summary svg { width: 14px; height: 14px; }
body.tg-skin .pipeline-scope[open] > summary { border-color: var(--tg-primary); color: var(--tg-primary); }
body.tg-skin .pipeline-scope-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
body.tg-skin .pipeline-scope-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--tg-radius-6);
    color: var(--tg-text);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    text-decoration: none;
}
body.tg-skin .pipeline-scope-menu a:hover { background: var(--tg-gray); }
body.tg-skin .pipeline-scope-menu a.active { background: rgba(var(--tg-primary-rgb), .05); color: var(--tg-primary); }
body.tg-skin .pipeline-scope-menu b {
    padding: 0 6px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-micro);
    line-height: 18px;
    font-weight: 500;
}

/* --- Barra de ferramentas -----------------------------------------------
   Antes: a busca tinha 283px fixos numa linha de 1200, os gatilhos eram so
   icone e as alturas iam de 34 a 42px, o que deixava a linha desalinhada.
   Agora a busca ocupa a sobra, todo controle tem 40px e rotulo escrito, e a
   visualizacao fica agrupada na direita.
   ------------------------------------------------------------------------ */
body.tg-skin .pipeline-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: none;
}
body.tg-skin .pipeline-toolbar .toolbar-search-form {
    display: flex;
    flex: 1 1 340px;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Gatilhos de menu: Filtros e Salvos. */
body.tg-skin .pipeline-toolbar .toolbar-search { flex: 1 1 auto; }
body.tg-skin .pipeline-toolbar .toolbar-menu { flex: 0 0 auto; }
body.tg-skin .pipeline-toolbar .toolbar-trigger svg { width: 15px; height: 15px; }
/* O rotulo estava escondido no desktop: so o icone nao diz o que o menu faz. */
body.tg-skin .pipeline-toolbar .toolbar-menu .toolbar-trigger-label,
body.tg-skin .pipeline-toolbar .toolbar-menu.filters-menu .toolbar-trigger-label { display: inline; }
body.tg-skin .toolbar-menu[open] > .toolbar-trigger,
body.tg-skin .filters-menu.is-active > .toolbar-trigger {
    border-color: var(--tg-primary);
    color: var(--tg-primary);
}
body.tg-skin .toolbar-saved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--tg-radius-6);
    background: var(--tg-gray);
}
body.tg-skin .toolbar-saved a {
    min-width: 0;
    overflow: hidden;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.tg-skin .toolbar-saved a:hover { color: var(--tg-primary); }
body.tg-skin .toolbar-saved form button {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: var(--tg-radius-3);
    background: none;
    color: var(--tg-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
body.tg-skin .toolbar-saved form button:hover { background: var(--tg-gray-2); color: var(--tg-red); }
body.tg-skin .toolbar-save-form { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--tg-stroke); }
body.tg-skin .toolbar-save-form input { flex: 1 1 auto; min-width: 0; }

/* Limpar busca e filtros: so existe quando ha algo aplicado. Discreto de
   proposito — sem borda e sem fundo, a mesma altura dos controles vizinhos
   (o border transparente completa os 34px) e vermelho so ao passar o mouse,
   porque desfaz uma escolha. */
body.tg-skin .toolbar-clear {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: var(--tg-radius-6);
    background: none;
    color: var(--tg-text);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
body.tg-skin .toolbar-clear:hover { background: var(--tg-gray-2); color: var(--tg-red); }
body.tg-skin .toolbar-clear:focus-visible { outline: 2px solid var(--tg-primary); outline-offset: 2px; }
body.tg-skin .toolbar-clear svg { width: 14px; height: 14px; }

/* Visualizacao a direita — Tab Menu Style 1 (310:23051). */
body.tg-skin .pipeline-toolbar .pipeline-view-switch {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
}
body.tg-skin .pipeline-toolbar .pipeline-view-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 18px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    text-decoration: none;
}
body.tg-skin .pipeline-toolbar .pipeline-view-switch a:hover { color: var(--tg-primary); }
body.tg-skin .pipeline-toolbar .pipeline-view-switch a.active {
    border-color: var(--tg-primary);
    background: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .pipeline-toolbar .card-view-toggle { flex: 0 0 auto; gap: 8px; padding: 5px 16px; }

/* --- Faixa de acompanhamento -------------------------------------------- */
body.tg-skin .pipeline-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
}
body.tg-skin .pipeline-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-decoration: none;
}
body.tg-skin .pipeline-chip:hover { border-color: var(--tg-primary); color: var(--tg-primary); }
body.tg-skin .pipeline-chip b {
    min-width: 18px;
    padding: 0 5px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark);
    font-size: var(--tg-fs-micro);
    line-height: 18px;
    font-weight: 600;
    text-align: center;
}
body.tg-skin .pipeline-chip.is-overdue b { background: var(--tg-red); color: var(--tg-white); }
body.tg-skin .pipeline-chip.is-today b { background: var(--tg-secondary); color: var(--tg-white); }
body.tg-skin .pipeline-chip.active {
    border-color: var(--tg-primary);
    background: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .pipeline-chip.active b { background: rgba(255, 255, 255, .22); color: var(--tg-white); }
body.tg-skin .pipeline-chip-clear { border-style: dashed; }

/* --- Quadro --------------------------------------------------------------
   O kit nao tem kanban. A coluna vira uma bandeja em Gray 2 sobre o branco do
   conteudo, e cada negociacao e um cartao branco com traco Stroke: agrupa sem
   criar caixa dentro de caixa, porque a bandeja nao tem borda propria.
   ------------------------------------------------------------------------ */
body.tg-skin .kanban { gap: 10px; padding-bottom: 16px; }
body.tg-skin .kanban-column {
    width: 296px;
    min-width: 296px;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: var(--tg-gray-2);
    overflow: visible;
}
body.tg-skin .kanban-column > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
    padding: 18px 12px;
    border: 1px solid var(--tg-stroke);
    border-left: 3px solid var(--stage-color, var(--tg-text));
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
}
body.tg-skin .kanban-column-heading { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.tg-skin .kanban-column-name {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .kanban-column-name:focus { outline: none; border-bottom: 1px solid var(--tg-primary); }
body.tg-skin .kanban-column-meta {
    display: flex;
    gap: 8px;
    margin: 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 400;
}
/* Dois lugares mostravam o mesmo total; o small duplicado sai. */
body.tg-skin .kanban-column-heading > small { display: none; }
body.tg-skin .kanban-column-tools { display: flex; align-items: center; gap: 6px; }
body.tg-skin .kanban-column-tools > b {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark);
    font-size: var(--tg-fs-micro);
    line-height: 18px;
    font-weight: 600;
    text-align: center;
}
body.tg-skin .column-sort-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--tg-radius-3);
    color: var(--tg-text);
    list-style: none;
    cursor: pointer;
}
body.tg-skin .column-sort-trigger::-webkit-details-marker { display: none; }
body.tg-skin .column-sort-trigger:hover { background: var(--tg-gray-2); color: var(--tg-dark); }
body.tg-skin .sort-menu-popover {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
body.tg-skin .sort-menu-popover strong {
    padding: 0 6px 4px;
    color: var(--tg-dark);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.tg-skin .sort-menu-popover button {
    padding: 6px 8px;
    border: 0;
    border-radius: var(--tg-radius-6);
    background: none;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
body.tg-skin .sort-menu-popover button:hover { background: var(--tg-gray); color: var(--tg-dark); }
body.tg-skin .kanban-cards { display: flex; flex-direction: column; gap: 6px; padding: 0; }
body.tg-skin .empty-column {
    padding: 18px 10px;
    border: 1px dashed color-mix(in srgb, var(--stage-color, var(--tg-text)) 32%, var(--tg-stroke));
    border-radius: var(--tg-radius-6);
    background: none;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    text-align: center;
}
body.tg-skin .column-more { padding: 6px 0 0; }
body.tg-skin .column-more .button { width: 100%; }

/* --- Card de negociacao -------------------------------------------------- */
body.tg-skin .deal-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 12px;
    border: 1px solid color-mix(in srgb, var(--stage-color, var(--tg-text)) 32%, var(--tg-stroke));
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
body.tg-skin .deal-card:hover { box-shadow: var(--tg-shadow-card); }
body.tg-skin .deal-card:focus-visible { outline: 2px solid var(--tg-primary); outline-offset: 1px; }
body.tg-skin .deal-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
body.tg-skin .deal-card-company {
    min-width: 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .deal-card-actions { display: flex; align-items: center; gap: 5px; }
/* O endereco do site fica logo abaixo do nome. O -3px no topo encosta a linha
   no nome, em vez de herdar o gap de 7px do card inteiro. */
/* Site e Instagram formam um bloco so, encostado no nome: o -3px anula o gap
   de 7px do card, e os dois links ficam a 2px um do outro. */
body.tg-skin .deal-card-links {
    display: flex;
    flex-direction: column;
    /* O app-shell.css aplica align-items:center e justify-content:space-between
       a todo div filho direto do card (sobra do Tailwind). Sem estes dois, os
       links apareciam centralizados em vez de alinhados ao nome. */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
    margin-top: -3px;
}
/* Com align-items:flex-start o link deixa de esticar; o max-width mantem as
   reticencias funcionando em enderecos longos. */
body.tg-skin .deal-card-links > a { max-width: 100%; }
body.tg-skin .deal-card-site {
    display: block;
    margin-top: 0;
    overflow: hidden;
    color: var(--tg-primary);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.tg-skin .deal-card-site:hover { text-decoration: underline; }
body.tg-skin .deal-card-priority-tag {
    order: 2;
    margin-left: auto;
    padding: 1px 6px;
    border: 0;
    border-radius: var(--tg-radius-3);
    background: var(--tg-text);
    color: var(--tg-white);
    font-size: 10px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .deal-card-actions .drag-handle,
body.tg-skin .deal-card-actions .deal-select { order: 1; }
body.tg-skin .deal-card-priority-tag.low { background: var(--tg-text); }
body.tg-skin .deal-card-priority-tag.medium { background: var(--tg-secondary); }
body.tg-skin .deal-card-priority-tag.high { background: var(--tg-primary); }
body.tg-skin .deal-card-priority-tag.strategic { background: var(--tg-dark); }
body.tg-skin .deal-card .drag-handle { color: var(--tg-stroke); font-size: 13px; line-height: 1; cursor: grab; }
body.tg-skin .deal-card .drag-handle:hover { color: var(--tg-text); }
/* --- Tags do card: medidas tiradas da referencia enviada ------------------
   Amostrei o PNG em vez de estimar no olho: pilula de 26px de altura, canto
   totalmente arredondado, fundo #E6E6E7, texto #66666B, 12px de padding
   lateral e 4px entre uma e outra. O texto era 13px e passou a 10px (token
   --tg-fs-chip); a altura de 26px ficou, so o texto diminuiu.
   O FUNDO e a cor escolhida para a tag, e --tag-ink (calculado pelo servidor
   e pelo navegador) escolhe texto claro ou escuro para ficar legivel. O cinza
   da referencia e so o valor de reserva, para chip sem cor.
   Vale so no card do quadro; a tag do restante do app segue o kit. */
body.tg-skin .deal-card .deal-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
body.tg-skin .deal-card .deal-card-tags .tag-chip {
    gap: 0;
    padding: 4px 12px;
    border: 0;
    /* O .pipeline-tag desenha um aro interno na cor da tag; a referencia nao tem. */
    box-shadow: none;
    border-radius: 999px;
    background: var(--tag-color, #E6E6E7);
    color: var(--tag-ink, #66666B);
    font-size: var(--tg-fs-chip);
    line-height: 18px;
    font-weight: 500;
}
/* A referencia nao tem o ponto colorido da tag. */
body.tg-skin .deal-card .deal-card-tags .tag-chip::before { content: none; }
body.tg-skin .deal-card .compact-tag-more {
    padding: 4px 10px;
    border-radius: 999px;
    background: #E6E6E7;
    color: #66666B;
    font-size: var(--tg-fs-chip);
    line-height: 18px;
    font-weight: 500;
}
body.tg-skin .compact-tag-more {
    padding: 1px 6px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: 18px;
    font-weight: 500;
}
body.tg-skin .deal-card-start {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--tg-gray-2);
}
body.tg-skin .deal-owner-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--tg-primary-rgb), .10);
    color: var(--tg-primary);
    font-size: var(--tg-fs-micro);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
}
body.tg-skin .deal-owner-avatar.is-empty { background: var(--tg-gray-2); color: var(--tg-text); }
body.tg-skin .deal-start-info { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
body.tg-skin .deal-start-info b {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .deal-start-info small {
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .deal-select input,
body.tg-skin .column-select input { width: 14px; height: 14px; accent-color: var(--tg-primary); }

/* --- Barra de acoes em massa --------------------------------------------- */
/* A barra fica presa na largura da coluna de conteudo. Antes ela vinha
   centrada por left:50% mais translateX(-50%) medidos na pagina inteira, e o
   comeco dela ("0 negociacoes selecionadas") sumia atras da sidebar. */
body.tg-skin .bulk-bar {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
body.tg-skin .bulk-bar-count { color: var(--tg-text); font-size: var(--tg-fs-small); line-height: var(--tg-lh-small); }
body.tg-skin .bulk-bar-count strong { color: var(--tg-dark); font-weight: 600; }
body.tg-skin .bulk-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.tg-skin .bulk-menu { position: relative; }
body.tg-skin .bulk-menu-trigger {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}
body.tg-skin .bulk-menu-trigger::-webkit-details-marker { display: none; }
body.tg-skin .bulk-menu[open] > .bulk-menu-trigger { border-color: var(--tg-primary); color: var(--tg-primary); }
body.tg-skin .bulk-menu-popover {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 250px;
    padding: 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
body.tg-skin .bulk-menu-popover.wide { width: 310px; }
body.tg-skin .bulk-menu-popover strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 600;
}
body.tg-skin .bulk-menu-warning { margin: 0; color: var(--tg-text); font-size: var(--tg-fs-micro); line-height: var(--tg-lh-micro); }
body.tg-skin .bulk-menu-popover select,
body.tg-skin .bulk-menu-popover input[type="text"],
body.tg-skin .bulk-menu-popover input:not([type]),
body.tg-skin .bulk-menu-popover input[type="datetime-local"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
    font-weight: 400;
}
body.tg-skin .bulk-menu-options { display: flex; flex-direction: column; gap: 2px; max-height: 210px; overflow-y: auto; }
body.tg-skin .bulk-option,
body.tg-skin .modal-tag-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--tg-radius-6);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 400;
}
body.tg-skin .bulk-option:hover,
body.tg-skin .modal-tag-option:hover { background: var(--tg-gray); }
body.tg-skin .bulk-option input,
body.tg-skin .modal-tag-option input { accent-color: var(--tg-primary); }
body.tg-skin .bulk-follow-up {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .bulk-follow-up small {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 400;
}

@media (min-width: 901px) {
    body.tg-skin .bulk-bar { left: 304px; right: 24px; }
}

body.tg-skin .pipeline-back-to-top {
    width: 40px;
    height: 40px;
    border: 1px solid var(--tg-stroke);
    border-radius: 50%;
    background: var(--tg-white);
    color: var(--tg-dark-3);
    box-shadow: var(--tg-shadow-card);
}

/* ===========================================================================
   PIPELINE — gaveta de detalhes

   O ponto mais pesado da tela: o cabecalho sozinho ocupava 339px antes de
   qualquer conteudo aparecer. Aqui ele vira um bloco de identificacao curto,
   com os dados da empresa numa grade que se ajusta a largura.
   =========================================================================== */
body.tg-skin .deal-modal {
    /* 60% da largura da janela. O piso de 1180px mantem o que ja existia em
       telas pequenas: 60% de um monitor de 1280px daria 768px, estreito demais
       para o corpo e a lateral de 300px lado a lado. O teto de 96vw impede o
       popup de encostar na borda. No celular, o bloco de 900px abaixo o leva
       para 100vw. */
    width: min(96vw, max(60vw, 1180px));
    /* O app-shell.css limita o popup a 1440px (max-width), o que travaria os
       60% em monitores acima de 2400px de largura. */
    max-width: none;
    border: 0;
    border-radius: 0;
    background: var(--tg-gray);
    box-shadow: -20px 0 60px rgba(17, 25, 40, .28);
}
body.tg-skin .deal-modal::backdrop { background: rgba(17, 25, 40, .45); }
body.tg-skin .deal-modal-close {
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark-3);
    font-size: 18px;
    line-height: 1;
}
body.tg-skin .deal-modal-close:hover { border-color: var(--tg-red); color: var(--tg-red); }

/* --- Identificacao -------------------------------------------------------- */
body.tg-skin .deal-detail-header {
    display: block;
    padding: 28px 56px 24px 28px;
    border-bottom: 1px solid var(--tg-stroke);
    background: var(--tg-white);
}
body.tg-skin .deal-detail-header h2 {
    margin: 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-title);
    line-height: var(--tg-lh-title);
    font-weight: 600;
    letter-spacing: 0;
}
body.tg-skin .deal-detail-header > div > p {
    margin: 4px 0 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .deal-detail-company-panel {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 20px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-gray);
}
body.tg-skin .deal-header-company-data {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px 24px;
    min-width: 0;
    margin: 0;
}
body.tg-skin .deal-header-company-data > div {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--tg-radius-3);
    background: none;
}
body.tg-skin .deal-header-company-data > div:hover { background: rgba(var(--tg-primary-rgb), .05); }
body.tg-skin .deal-header-company-data dt {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}
body.tg-skin .deal-header-company-data dd {
    margin: 0;
    overflow: hidden;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.tg-skin .deal-header-company-data dd a { color: var(--tg-primary); text-decoration: none; }
body.tg-skin .deal-header-company-link {
    flex: 0 0 auto;
    align-self: flex-start;
    padding-top: 14px;
    color: var(--tg-primary);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* --- Trilha de etapas — Steps (310:23950) --------------------------------
   O numero do passo nao existe na marcacao; vem de um contador do CSS, para
   nao mexer no PHP que o arrastar e soltar tambem usa.
   ------------------------------------------------------------------------ */
body.tg-skin .deal-stageflow-block {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--tg-stroke);
    background: var(--tg-white);
}
body.tg-skin .deal-stageflow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    counter-reset: tg-step;
    list-style: none;
}
body.tg-skin .deal-stageflow > li { counter-increment: tg-step; list-style: none; }
body.tg-skin .deal-stagestep {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 400;
    list-style: none;
    cursor: pointer;
    clip-path: none;
}
body.tg-skin .deal-stagestep::-webkit-details-marker { display: none; }
body.tg-skin .deal-stagestep::before {
    content: counter(tg-step);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--tg-gray-2);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: 1;
    font-weight: 500;
}
body.tg-skin .deal-stagestep.is-done::before {
    border-color: var(--tg-primary);
    background: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .deal-stagestep.is-current::before {
    border-color: var(--tg-primary);
    background: var(--tg-white);
    color: var(--tg-primary);
}
body.tg-skin .deal-stagestep.is-current { color: var(--tg-dark); font-weight: 500; }
body.tg-skin .deal-stagestep:hover { color: var(--tg-primary); }
/* O passo de encerramento e um menu, nao uma etapa: sai da contagem. */
body.tg-skin .deal-stagestep-close { position: relative; }
body.tg-skin .deal-stagestep-close > .deal-stagestep::before { content: "\00d7"; font-size: var(--tg-fs-body); }
body.tg-skin .deal-stagestep-menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 6px);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
body.tg-skin .deal-stagestep-menu button {
    padding: 6px 10px;
    border: 0;
    border-radius: var(--tg-radius-6);
    background: none;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
body.tg-skin .deal-stagestep-menu button:hover { background: var(--tg-gray); color: var(--tg-dark); }
body.tg-skin .deal-stagestep-menu button.active { background: rgba(var(--tg-primary-rgb), .05); color: var(--tg-primary); }

body.tg-skin .deal-summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 32px;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--tg-stroke);
}
body.tg-skin .deal-summary-strip dt {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}
body.tg-skin .deal-summary-strip dd {
    margin: 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 400;
}
body.tg-skin .deal-summary-strip dd.is-strong { font-weight: 600; }
body.tg-skin .deal-summary-owner { display: flex; align-items: center; gap: 7px; }

/* --- Abas do modal — Tab Menu Style 1 (310:23051) ------------------------ */
body.tg-skin .deal-workspace-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    border-bottom: 1px solid var(--tg-stroke);
    background: var(--tg-white);
}
body.tg-skin .deal-workspace-tabs > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    cursor: pointer;
}
body.tg-skin .deal-workspace-tabs > button:hover { color: var(--tg-primary); }
body.tg-skin .deal-workspace-tabs > button.active {
    border-color: var(--tg-primary);
    background: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .deal-workspace-tabs > button > span {
    padding: 0 5px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-micro);
    line-height: 17px;
    font-weight: 600;
}
body.tg-skin .deal-workspace-tabs > button.active > span { background: rgba(255, 255, 255, .22); color: var(--tg-white); }
/* Excluir fica na faixa de abas, a direita, e por isso aparece na primeira tela
   em qualquer aba — antes morava dentro de Dados e exigia dois cliques. */
body.tg-skin .deal-delete-form { display: flex; align-items: center; margin: 0 0 0 auto; padding-left: 12px; }
body.tg-skin .deal-workspace-tabs .deal-delete-button .deal-delete-label { display: inline; }
body.tg-skin .deal-delete-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    cursor: pointer;
}
body.tg-skin .deal-delete-button:hover { border-color: var(--tg-red); background: var(--tg-white); color: var(--tg-red); }
body.tg-skin .deal-delete-icon { width: 15px; height: 15px; }

/* --- Corpo ---------------------------------------------------------------- */
body.tg-skin .deal-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 20px;
    padding: 24px 28px 32px;
    background: var(--tg-gray);
}
body.tg-skin .deal-detail-main,
body.tg-skin .deal-detail-sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
body.tg-skin .deal-detail-section,
body.tg-skin .deal-detail-sidebar > section {
    padding: 22px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: none;
}
body.tg-skin .deal-section-heading,
body.tg-skin .minimal-heading,
body.tg-skin .sidebar-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}
body.tg-skin .deal-detail-section h3,
body.tg-skin .deal-detail-sidebar h3 {
    margin: 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .deal-section-heading p,
body.tg-skin .sidebar-section-heading p {
    margin: 1px 0 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .minimal-count,
body.tg-skin .sidebar-section-heading > span,
body.tg-skin .next-action-status {
    padding: 0 7px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-micro);
    line-height: 18px;
    font-weight: 500;
}
body.tg-skin .next-action-section.is-overdue .next-action-status { background: var(--tg-red); color: var(--tg-white); }
body.tg-skin .modal-save-state { color: var(--tg-secondary); font-size: var(--tg-fs-micro); line-height: var(--tg-lh-micro); }

/* Formularios do modal: label 13/20 Medium, campo 14/22 Regular. O peso do
   campo precisa ser explicito, senao ele herda o do label. */
body.tg-skin .modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.tg-skin .modal-form-grid .span-2 { grid-column: 1 / -1; }
body.tg-skin .modal-form-grid label,
body.tg-skin .company-data-fields label,
body.tg-skin .contact-create-form label,
body.tg-skin .modal-new-tag,
body.tg-skin .modal-stage-control {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .deal-detail-layout input:not([type="checkbox"]):not([type="radio"]),
body.tg-skin .deal-detail-layout select,
body.tg-skin .deal-detail-layout textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
    font-weight: 400;
}
body.tg-skin .deal-detail-layout input:focus,
body.tg-skin .deal-detail-layout select:focus,
body.tg-skin .deal-detail-layout textarea:focus { outline: none; border-color: var(--tg-primary); }
body.tg-skin .input-suffix { display: flex; align-items: center; gap: 6px; }
body.tg-skin .input-suffix span { color: var(--tg-text); font-size: var(--tg-fs-field); }
body.tg-skin .modal-form-actions,
body.tg-skin .company-data-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
body.tg-skin .company-data-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

/* Proximas acoes. */
body.tg-skin .action-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
body.tg-skin .deal-detail-layout .action-add .action-add-title { flex: 1 1 180px; width: auto; min-width: 0; }
body.tg-skin .deal-detail-layout .action-add select,
body.tg-skin .deal-detail-layout .action-add input[type="datetime-local"] { flex: 0 0 auto; width: auto; }
body.tg-skin .deal-empty {
    padding: 14px;
    border: 1px dashed var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: none;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    text-align: center;
}
body.tg-skin .deal-checklist { display: flex; flex-direction: column; gap: 6px; }
body.tg-skin .deal-task {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
}
body.tg-skin .deal-task.overdue { border-color: var(--tg-red); }
body.tg-skin .deal-task.done { background: var(--tg-gray); }
body.tg-skin .deal-task strong {
    display: block;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .deal-task small,
body.tg-skin .deal-task p {
    display: block;
    margin: 1px 0 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 400;
}
body.tg-skin .task-toggle {
    width: 17px;
    height: 17px;
    border: 1px solid var(--tg-stroke);
    border-radius: 50%;
    background: var(--tg-white);
    color: var(--tg-secondary);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
body.tg-skin .deal-task.done .task-toggle {
    border-color: var(--tg-secondary);
    background: var(--tg-secondary);
    color: var(--tg-white);
}
body.tg-skin .completed-task-list > summary {
    margin-top: 8px;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    cursor: pointer;
}

/* Comentarios. */
body.tg-skin .comment-box { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; }
body.tg-skin .comment-box textarea { flex: 1 1 auto; min-height: 38px; resize: vertical; }
body.tg-skin .comment-list { display: flex; flex-direction: column; gap: 10px; }
body.tg-skin .comment {
    padding: 0 0 10px;
    border: 0;
    border-bottom: 1px solid var(--tg-gray-2);
    border-radius: 0;
    background: none;
}
body.tg-skin .comment:last-of-type { padding-bottom: 0; border-bottom: 0; }
body.tg-skin .comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 3px; }
body.tg-skin .comment-head strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 600;
}
body.tg-skin .comment-head time,
body.tg-skin .comment-empty {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .comment-kind {
    padding: 0 6px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-micro);
    line-height: 17px;
    font-weight: 500;
}
body.tg-skin .comment p {
    margin: 0;
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .comment-history-toggle {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    cursor: pointer;
}
body.tg-skin .comment-history-toggle:hover { border-color: var(--tg-primary); color: var(--tg-primary); }
body.tg-skin .comment-history-count {
    padding: 0 6px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-micro);
    line-height: 17px;
    font-weight: 600;
}

/* --- Lateral do modal ----------------------------------------------------- */
/* Importancia — List Select Item (310:24152). */
body.tg-skin .modal-priority-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.tg-skin .modal-priority-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
body.tg-skin .modal-priority-option:hover { border-color: var(--tg-primary); }
body.tg-skin .modal-priority-option.active { border-color: var(--tg-primary); color: var(--tg-primary); }
/* Ponto do List Select Item: #8899A8 quando solto, Primary quando escolhido. */
body.tg-skin .modal-priority-option .priority-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8899A8;
}
body.tg-skin .modal-priority-option.active .priority-dot { background: var(--tg-primary); }
body.tg-skin .modal-priority-option i { margin-left: auto; color: var(--tg-primary); font-style: normal; }

/* --- Secoes recolhiveis da lateral (Tags, Segmentos, Origem) ------------
   O app-shell da ao summary padding 12/16, altura minima de 54 e fundo cinza no
   hover, e ao conteudo mais 14/16 de padding. Somados ao padding da propria
   secao, o titulo virava uma faixa cinza recuada e a lista perdia ~32px de
   largura. Aqui o respiro fica so na secao.
   ------------------------------------------------------------------------ */
body.tg-skin .modal-sidebar-details > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
body.tg-skin .modal-sidebar-details > summary:hover { background: none; color: var(--tg-primary); }
body.tg-skin .modal-sidebar-details[open] > summary { border-bottom: 0; }
body.tg-skin .modal-sidebar-details > summary strong {
    color: inherit;
    font: 600 var(--tg-fs-body) / var(--tg-lh-body) var(--tg-font);
    letter-spacing: 0;
}
body.tg-skin .modal-sidebar-details > summary::-webkit-details-marker { display: none; }
body.tg-skin .modal-sidebar-details > summary::after {
    content: "\203a";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: var(--tg-text);
    font: 400 16px/1 var(--tg-font);
    transform: rotate(90deg);
    transition: transform .15s;
}
body.tg-skin .modal-sidebar-details[open] > summary::after { transform: rotate(-90deg); }
body.tg-skin .modal-sidebar-details > summary > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 0;
    margin-left: auto;
    padding: 0 6px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font: 500 var(--tg-fs-micro) / 18px var(--tg-font);
}
/* A secao Etapa sai da tela, mas fica no DOM: e no <select> dela que a trilha
   de etapas do topo escreve ao mover a negociacao. */
body.tg-skin .modal-stage-section { display: none; }
/* As legendas dos grupos de tags e segmentos saem da tela, nao do DOM: elas
   nomeiam o <fieldset> para quem usa leitor de tela. */
body.tg-skin .taxonomy-inline-fieldset legend,
body.tg-skin .taxonomy-selection-form legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
body.tg-skin .modal-sidebar-details-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 0 0;
    border-top: 1px solid var(--tg-stroke);
}
body.tg-skin .modal-collapsible-description {
    margin: 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .taxonomy-inline-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
body.tg-skin .taxonomy-inline-fieldset legend,
body.tg-skin .taxonomy-selection-form legend {
    margin: 0 0 6px;
    padding: 0;
    color: var(--tg-text);
    font: 500 var(--tg-fs-micro) / var(--tg-lh-micro) var(--tg-font);
    letter-spacing: .05em;
    text-transform: uppercase;
}
body.tg-skin .modal-tag-options { display: flex; flex-direction: column; gap: 4px; margin-top: 0; }

/* --- Linha de tag: [caixa] [nome] [uso] [salvar] [excluir] ----------------
   Todos os controles com 30px de altura. So o nome estica; o resto tem
   largura fixa e nao encolhe — antes a caixa de selecao era espremida ate
   virar uma barra de 14px. O seletor do campo inclui .deal-detail-layout
   porque a regra generica de campos do modal tem essa mesma especificidade
   e impunha padding 12px e fonte 14px, cortando o nome em "Implemen".
   ------------------------------------------------------------------------ */
body.tg-skin .deal-detail-layout .taxonomy-inline-tag-row,
body.tg-skin .deal-detail-layout .taxonomy-definition-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
}
body.tg-skin .deal-detail-layout .taxonomy-inline-tag-row:hover,
body.tg-skin .deal-detail-layout .taxonomy-definition-row:hover { background: none; }

/* Caixa de selecao: quadrado de 18px com a cor da tag no traco; marcada, a
   cor enche o quadrado e o check aparece em branco. */
body.tg-skin .deal-detail-layout .taxonomy-inline-selector {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}
body.tg-skin .deal-detail-layout .taxonomy-inline-selector > span:not(.sr-only) {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--tag-color, var(--tg-text));
    border-radius: 4px;
    background: var(--tg-white);
    box-shadow: none;
    color: transparent;
    font: 700 11px/1 var(--tg-font);
}
body.tg-skin .deal-detail-layout .taxonomy-inline-selector input:checked + span {
    border-color: var(--tag-color, var(--tg-primary));
    background: var(--tag-color, var(--tg-primary));
    box-shadow: none;
    color: var(--tg-white);
}
body.tg-skin .deal-detail-layout .taxonomy-inline-selector input:focus-visible + span {
    outline: 2px solid var(--tg-primary);
    outline-offset: 2px;
}

body.tg-skin .deal-detail-layout .taxonomy-inline-name,
body.tg-skin .deal-detail-layout .taxonomy-definition-row > label { flex: 1 1 0; min-width: 0; }
body.tg-skin .deal-detail-layout .taxonomy-inline-tag-row .taxonomy-inline-name input,
body.tg-skin .deal-detail-layout .taxonomy-definition-row > label input {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: none;
    color: var(--tg-dark);
    font: 500 var(--tg-fs-field) / 30px var(--tg-font);
    text-overflow: ellipsis;
}
body.tg-skin .deal-detail-layout .taxonomy-inline-tag-row .taxonomy-inline-name input:focus,
body.tg-skin .deal-detail-layout .taxonomy-definition-row > label input:focus {
    border-color: var(--tg-primary);
    box-shadow: none;
    outline: none;
}
/* Sem permissao de editar, o nome vem como texto e nao como campo. */
body.tg-skin .deal-detail-layout span.taxonomy-inline-name {
    overflow: hidden;
    color: var(--tg-dark);
    font: 500 var(--tg-fs-small) / 30px var(--tg-font);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.tg-skin .deal-detail-layout .taxonomy-usage {
    flex: 0 0 auto;
    grid-area: auto;
    color: var(--tg-text);
    font: 400 var(--tg-fs-micro) / var(--tg-lh-micro) var(--tg-font);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
body.tg-skin .deal-detail-layout .taxonomy-save,
body.tg-skin .deal-detail-layout .taxonomy-delete {
    display: grid;
    flex: 0 0 26px;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font: 500 12px/1 var(--tg-font);
    cursor: pointer;
}
body.tg-skin .deal-detail-layout .taxonomy-save:hover { border-color: var(--tg-secondary); background: var(--tg-white); color: var(--tg-secondary); }
body.tg-skin .deal-detail-layout .taxonomy-delete:hover { border-color: var(--tg-red); background: var(--tg-white); color: var(--tg-red); }
body.tg-skin .modal-new-tag small {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 400;
}
body.tg-skin .button.wide { width: 100%; }
body.tg-skin .modal-contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
}
body.tg-skin .modal-contact strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 600;
}
body.tg-skin .modal-contact small,
body.tg-skin .modal-contact span {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .modal-contact a {
    color: var(--tg-primary);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    text-decoration: none;
}
/* Opcao de segmento — uma linha de lista: caixa, nome.
   O app-shell desenha cada opcao como um chip colorido: o <input> real fica
   invisivel (opacity 0, 1px) e o quadrado de marcar e um ::after depois do
   texto, com um inset box-shadow de 4px na cor da tag quando marcado. Esse
   box-shadow e a "borda em destaque" que passava por cima da primeira letra
   do nome — o texto estava com padding 0 e a barra caia dentro dele.
   Aqui o input nativo vira o controle visivel, o ::after sai, o destaque de
   selecao passa a ser so a caixa marcada, e o texto ganha folga propria. */
body.tg-skin .deal-detail-sidebar .modal-tag-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--tg-radius-6);
    background: none;
}
body.tg-skin .deal-detail-sidebar .modal-tag-option > input {
    position: static;
    order: 0;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    accent-color: var(--tg-primary);
}
body.tg-skin .deal-detail-sidebar .modal-tag-option > span,
body.tg-skin .deal-detail-sidebar .modal-tag-option input:checked + span {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .deal-detail-sidebar .modal-tag-option input:checked + span {
    color: var(--tg-dark);
    font-weight: 500;
}
/* O quadrado de marcar que o app-shell desenhava depois do texto. */
body.tg-skin .deal-detail-sidebar .modal-tag-option > span::after,
body.tg-skin .deal-detail-sidebar .modal-tag-option input:checked + span::after { content: none; display: none; }
/* O app-shell empurrava o texto 2px para a direita ao passar o mouse. */
body.tg-skin .deal-detail-sidebar .modal-tag-option:hover > span { transform: none; }
body.tg-skin .deal-detail-sidebar .modal-tag-option input:focus-visible { outline: 2px solid var(--tg-primary); outline-offset: 2px; }
body.tg-skin .deal-detail-sidebar .modal-tag-options { align-items: stretch; }

body.tg-skin .crm-composer > summary,
body.tg-skin .taxonomy-definition-manager > summary {
    margin-top: 8px;
    color: var(--tg-primary);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
body.tg-skin .contact-create-form { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }

/* "+ Adicionar contato". O .crm-composer herda do Tailwind uma caixa com
   borda, e o summary ficava com padding lateral 0 e margin-top de 8px dentro
   dela: o texto caia no canto inferior esquerdo, colado na borda. Aqui a caixa
   some e o proprio summary vira o botao — tracejado, centralizado, com a
   altura de toque — e fica solido quando o formulario esta aberto. */
body.tg-skin .crm-composer {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
body.tg-skin .crm-composer > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px dashed var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: none;
    color: var(--tg-primary);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
body.tg-skin .crm-composer > summary:hover { border-color: var(--tg-primary); background: rgba(var(--tg-primary-rgb), .05); }
body.tg-skin .crm-composer[open] > summary { border-style: solid; }
body.tg-skin .crm-composer:focus-within > summary { border-color: var(--tg-primary); }

/* Criar tag / segmento: campo e botao compacto na mesma linha. Marcar e
   desmarcar ja grava sozinho, entao nao ha mais o "Salvar" de largura total. */
body.tg-skin .modal-new-row { display: flex; align-items: flex-end; gap: 8px; }
body.tg-skin .modal-new-row .modal-new-tag { flex: 1 1 auto; min-width: 0; }
body.tg-skin .modal-new-row .button { flex: 0 0 auto; }
body.tg-skin .modal-new-row .button:disabled { opacity: .5; cursor: not-allowed; }
body.tg-skin .modal-autosave-state {
    min-height: var(--tg-lh-micro);
    margin: 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .modal-autosave-state.is-error { color: var(--tg-red); }
body.tg-skin .modal-autosave-state:empty { display: none; }

/* ===========================================================================
   GERENCIADOR DE TAGS (popup de detalhes)

   O campo de nome ficava espremido porque dividia uma linha de 256px com a
   caixa, o contador e dois botoes. Agora a linha so mostra o chip, o contador
   e um lapis; o nome e a cor vivem num painel que abre embaixo da propria
   linha, com a largura inteira da lateral. Um painel aberto por vez.
   =========================================================================== */
/* align-items:stretch e width:100% sao explicitos: o app aplica align-items:
   center a qualquer div filha da lateral, e sem isso cada linha encolhia ate a
   largura do chip e ficava centralizada, cada uma num x diferente. */
body.tg-skin .tag-list { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
body.tg-skin .tag-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--tg-radius-6);
    transition: background-color .15s, border-color .15s;
}
body.tg-skin .tag-row:hover { background: var(--tg-gray); }
body.tg-skin .tag-row.is-editing { border-color: var(--tg-stroke); background: var(--tg-gray); }
body.tg-skin .tag-row-main { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px 0 8px; }
/* justify-content explicito: uma regra generica de label do app centraliza o
   conteudo, e com chips de larguras diferentes cada caixa caia num lugar. */
body.tg-skin .tag-pick { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; text-align: left; cursor: pointer; }
body.tg-skin .tag-pick > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--tg-primary);
}
/* O mesmo chip que aparece no card, so que maior: aqui e para ler e editar. */
body.tg-skin .tag-preview {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--tag-color, #e5e7eb);
    color: var(--tag-ink, #111928);
    font-size: var(--tg-fs-small);
    line-height: 18px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.tg-skin .tag-edit-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--tg-radius-6);
    background: none;
    color: var(--tg-text);
    cursor: pointer;
}
body.tg-skin .tag-edit-toggle:hover { background: var(--tg-gray-2); color: var(--tg-dark); }
body.tg-skin .tag-edit-toggle[aria-expanded="true"] { background: rgba(var(--tg-primary-rgb), .08); color: var(--tg-primary); }
body.tg-skin .tag-row-editor[hidden] { display: none; }
body.tg-skin .tag-row-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 12px 12px;
    border-top: 1px solid var(--tg-stroke);
}
body.tg-skin .tag-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .tag-field-label { color: var(--tg-dark); }

/* Paleta de fundos. O seletor de cor nativo fica por baixo do ultimo circulo,
   invisivel, para abrir o seletor do sistema ao clicar nele. */
body.tg-skin .tag-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
body.tg-skin .tag-swatch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(17, 25, 40, .14);
    border-radius: 50%;
    background: var(--sw, #e5e7eb);
    cursor: pointer;
    transition: transform .12s;
}
body.tg-skin .tag-swatch:hover { transform: scale(1.12); }
body.tg-skin .tag-swatch:focus-visible,
body.tg-skin .tag-swatch:focus-within { outline: 2px solid var(--tg-primary); outline-offset: 2px; }
body.tg-skin .tag-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tg-white), 0 0 0 4px var(--tg-primary); }
body.tg-skin .tag-swatch-custom {
    overflow: hidden;
    background: conic-gradient(#f87171, #fbbf24, #a3e635, #34d399, #38bdf8, #818cf8, #e879f9, #f87171);
}
body.tg-skin .deal-detail-layout .tag-swatches .tag-swatch-custom > input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

body.tg-skin .tag-row-actions { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; }
body.tg-skin .tag-row-actions-spacer { flex: 1 1 auto; }
body.tg-skin .button.tag-delete { border-color: transparent; background: none; color: var(--tg-red); }
body.tg-skin .button.tag-delete:hover { border-color: var(--tg-red); background: rgba(242, 48, 48, .06); }

body.tg-skin .tag-create {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--tg-stroke);
}
body.tg-skin .tag-create-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.tg-skin .tag-create-foot .button:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 860px) {
    body.tg-skin .tag-row-main { min-height: 44px; }
    body.tg-skin .tag-pick > input[type="checkbox"] { width: 20px; height: 20px; }
    body.tg-skin .tag-edit-toggle { width: 44px; height: 44px; }
    body.tg-skin .tag-swatches { gap: 4px; }
    /* Alvo de 44px com o circulo menor por dentro; o anel de selecao vai por fora. */
    body.tg-skin .tag-swatch { width: 44px; height: 44px; padding: 8px; background-clip: content-box; }
    body.tg-skin .tag-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tg-primary); }
    body.tg-skin .tag-row-actions .button,
    body.tg-skin .tag-create-foot .button { min-height: 44px; }
}

body.tg-skin .checkbox-line { flex-direction: row; align-items: center; gap: 8px; }
body.tg-skin .modal-source {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    text-decoration: none;
}
body.tg-skin .modal-source strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .modal-source small {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}

/* --- Nova negociacao e data de retomada ----------------------------------- */
body.tg-skin .deal-create-modal {
    width: min(560px, 94vw);
    padding: 0;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-card);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
/* O dialogo de retomada segue outro arranjo: a caixa e o <form>, e o <dialog>
   e so um envelope transparente. Pintar o envelope criava cartao dentro de
   cartao e tirava a centralizacao. */
body.tg-skin .follow-up-dialog {
    width: 100%;
    max-width: min(460px, calc(100vw - 32px));
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body.tg-skin .follow-up-dialog > form {
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-card);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
body.tg-skin .deal-create-form { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
body.tg-skin .deal-create-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.tg-skin .deal-create-head .eyebrow {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}
body.tg-skin .deal-create-head h2 {
    margin: 1px 0 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-title);
    line-height: var(--tg-lh-title);
    font-weight: 600;
    letter-spacing: 0;
}
body.tg-skin .deal-create-modal .deal-modal-close {
    position: static;
    width: 30px;
    height: 30px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark-3);
    font-size: 18px;
}
body.tg-skin .deal-create-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.tg-skin .deal-create-fields .span-2 { grid-column: 1 / -1; }
body.tg-skin .deal-create-actions { display: flex; justify-content: flex-end; gap: 8px; }
body.tg-skin .follow-up-dialog form { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
body.tg-skin .follow-up-dialog h2 {
    margin: 0;
    color: var(--tg-dark);
    font-size: var(--tg-fs-title);
    line-height: var(--tg-lh-title);
    font-weight: 600;
    letter-spacing: 0;
}
body.tg-skin .follow-up-lead {
    margin: 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .follow-up-dialog label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body.tg-skin .follow-up-dialog input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
    font-weight: 400;
}
body.tg-skin .follow-up-dialog small {
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 400;
}
body.tg-skin .follow-up-error {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--tg-radius-6);
    background: rgba(242, 48, 48, .08);
    color: var(--tg-red);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
}
body.tg-skin .follow-up-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------------------------
   Desempate com o desenho anterior do Pipeline

   O custom.css carrega um redesenho inteiro desta tela (o bloco "visual no
   padrao Flowlu"), e varias regras de la sao mais especificas que as da pele:
   .pipeline-toolbar .toolbar-menu.filters-menu>summary.toolbar-trigger tem
   quatro classes, contra as duas de body.tg-skin .toolbar-trigger.

   As regras abaixo repetem a estrutura daqueles seletores com o tg-skin na
   frente, para o kit vencer sem !important. Cada bloco diz o que estava
   ganhando antes. Fora do Pipeline nada muda: todos os seletores aqui passam
   por .pipeline-toolbar, .kanban, .deal-card ou .deal-modal.
   --------------------------------------------------------------------------- */

/* Busca: o custom.css prende em 235px de largura e 38 de altura, e esconde a
   lupa. No kit ela ocupa a sobra da linha e mantem o icone. */
body.tg-skin .pipeline-toolbar .toolbar-search {
    flex: 1 1 320px;
    height: auto;
    min-height: 0;
    max-width: none;
    padding: 5px 16px;
    border-radius: var(--tg-radius-6);
    box-shadow: none;
}
body.tg-skin .pipeline-toolbar .toolbar-search > span {
    display: inline-flex;
    align-items: center;
    color: var(--tg-text);
}
body.tg-skin .pipeline-toolbar .toolbar-search input { width: 100%; padding: 0; }

/* Gatilho de filtros: era um quadrado azul de 38px sem rotulo, com o contador
   solto no canto. Vira um botao com texto, igual aos outros da linha. */
body.tg-skin .pipeline-toolbar .toolbar-menu.filters-menu > summary.toolbar-trigger,
body.tg-skin .pipeline-toolbar .toolbar-menu > summary.toolbar-trigger {
    justify-content: flex-start;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 5px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
}
body.tg-skin .pipeline-toolbar .toolbar-menu.filters-menu.is-active > summary.toolbar-trigger,
body.tg-skin .pipeline-toolbar .toolbar-menu[open] > summary.toolbar-trigger {
    border-color: var(--tg-primary);
    background: var(--tg-white);
    color: var(--tg-primary);
}
body.tg-skin .pipeline-toolbar .toolbar-menu.filters-menu > summary.toolbar-trigger:hover,
body.tg-skin .pipeline-toolbar .toolbar-menu > summary.toolbar-trigger:hover {
    border-color: var(--tg-primary);
    background: var(--tg-white);
    color: var(--tg-primary);
}
body.tg-skin .pipeline-toolbar .toolbar-menu.filters-menu > summary.toolbar-trigger svg,
body.tg-skin .pipeline-toolbar .toolbar-menu > summary.toolbar-trigger svg { width: 15px; height: 15px; }
body.tg-skin .pipeline-toolbar .toolbar-menu.filters-menu > summary.toolbar-trigger b,
body.tg-skin .pipeline-toolbar .toolbar-menu > summary.toolbar-trigger b {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 0;
    border-radius: 9px;
    background: var(--tg-primary);
    color: var(--tg-white);
    font-size: var(--tg-fs-micro);
    line-height: 18px;
    font-weight: 500;
}

/* "+" sem rotulo: agora e o botao primario da linha, com texto. */
body.tg-skin .pipeline-head-actions .pipeline-add-btn {
    display: inline-flex;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 5px 20px;
    border: 1px solid var(--tg-primary);
    border-radius: var(--tg-radius-6);
    background: var(--tg-primary);
    color: var(--tg-white);
}
body.tg-skin .pipeline-head-actions .pipeline-add-btn:hover { background: var(--tg-primary-dark); border-color: var(--tg-primary-dark); color: var(--tg-white); }
body.tg-skin .pipeline-head-actions .pipeline-add-btn svg { width: 16px; height: 16px; }
body.tg-skin .pipeline-toolbar .card-view-toggle {
    height: auto;
    min-height: 0;
    padding: 5px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
}
body.tg-skin .pipeline-toolbar .card-view-toggle[aria-pressed="true"] {
    border-color: var(--tg-primary);
    background: rgba(var(--tg-primary-rgb), .05);
    color: var(--tg-primary);
}
body.tg-skin .pipeline-toolbar .toolbar-popover {
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}

/* Chips: eram pilulas de 32px com raio 999. O kit usa o mesmo raio 6 do resto. */
body.tg-skin .pipeline-chips { align-items: center; }
body.tg-skin .pipeline-chip {
    height: auto;
    padding: 6px 12px;
    border-radius: var(--tg-radius-6);
    box-shadow: none;
}
body.tg-skin .pipeline-chip b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--tg-radius-3);
    font-size: var(--tg-fs-micro);
    line-height: 18px;
}
body.tg-skin .pipeline-chip.is-no_next b { background: var(--tg-dark-3); color: var(--tg-white); }
body.tg-skin .pipeline-chip.is-stale b { background: var(--tg-text); color: var(--tg-white); }
body.tg-skin .pipeline-chip.pipeline-chip-clear { padding: 6px 12px; color: var(--tg-text); }

/* Coluna: a largura, o fundo e o raio vinham de .kanban>.kanban-column. */
body.tg-skin .kanban > .kanban-column {
    flex: 0 0 296px;
    width: 296px;
    min-width: 296px;
    gap: 0;
    padding: 6px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--stage-color, var(--tg-text)) 5%, var(--tg-gray-2));
}
/* Modo "Relax": o card cresce 20% em largura e em altura.
   A largura vem da coluna (296 -> 355). A altura vem do zoom de 1.2 no card,
   que escala padding, texto, avatar e etiquetas no mesmo passo — sem zoom o
   card so ficaria mais largo, com o mesmo conteudo esticado. Zoom e nao
   transform: scale porque o zoom participa do layout, entao a coluna cresce
   junto e o arrastar continua lendo as posicoes certas. */
body.tg-skin .kanban.cards-relax > .kanban-column { flex: 0 0 355px; width: 355px; min-width: 355px; }
body.tg-skin .kanban.cards-relax .deal-card { zoom: 1.2; }
/* --- Identificacao por cor da etapa --------------------------------------
   Cada coluna recebe a cor da etapa em tres doses, da mais forte para a mais
   fraca: o traco da esquerda no tom cheio, o cabecalho preenchido com ~10% do
   tom sobre branco, e o contorno dos cards com ~32%. O miolo da coluna fica
   quase neutro, com 5%, para a cor identificar sem disputar com o conteudo.
   Tudo sai de --stage-color, que a coluna carrega; nenhum tom e cravado aqui.
   ------------------------------------------------------------------------ */
body.tg-skin .kanban-column > header {
    display: flex;
    min-height: 0;
    padding: 18px 12px;
    border: 1px solid color-mix(in srgb, var(--stage-color, var(--tg-text)) 22%, var(--tg-stroke));
    border-left: 3px solid var(--stage-color, var(--tg-text));
    border-radius: var(--tg-radius-6);
    background: color-mix(in srgb, var(--stage-color, var(--tg-text)) 10%, #fff);
}
body.tg-skin .kanban-column.drag-over > header { box-shadow: 0 0 0 2px rgba(var(--tg-primary-rgb), .18); }
body.tg-skin .kanban-stage-name-form { height: auto; padding-right: 0; }
body.tg-skin .kanban-column-name { height: auto; min-height: 0; }
body.tg-skin .kanban-column-name:focus { box-shadow: none; padding: 0; margin: 0; background: none; }
/* O valor da coluna volta para a linha de meta: o <small> que o repetia
   continua escondido, entao ele nao aparecia em lugar nenhum. */
body.tg-skin .kanban-column-meta [data-stage-value-label] { display: inline; }
body.tg-skin .kanban-column-meta span { display: inline; }
body.tg-skin .kanban-column-tools { position: static; }
body.tg-skin .kanban-cards { display: flex; }
body.tg-skin .kanban-pinned-layer { background: var(--tg-white); }
/* A copia fixa do cabecalho vive num envelope com a classe .kanban-column, e
   herdava o padding de 6px da bandeja. O JS da ao envelope a altura exata do
   cabecalho, entao os 6px de cima empurravam a borda de baixo para fora da
   camada, que corta o excesso. Fica so o recuo lateral, que alinha a copia
   com o cabecalho original. */
body.tg-skin .kanban-pinned-column.kanban-column { padding: 0 6px; }

/* Card. */
body.tg-skin .deal-card { display: flex; padding: 16px 12px; border-radius: var(--tg-radius-6); border-color: color-mix(in srgb, var(--stage-color, var(--tg-text)) 32%, var(--tg-stroke)); box-shadow: none; }
body.tg-skin .deal-card:hover { border-color: color-mix(in srgb, var(--stage-color, var(--tg-text)) 55%, var(--tg-stroke)); box-shadow: var(--tg-shadow-card); }
body.tg-skin .deal-card .deal-card-top { display: flex; margin: 0; }
body.tg-skin .deal-card .deal-card-tags { margin: 0; }
body.tg-skin .deal-card .deal-card-start { margin: 0; }
body.tg-skin .deal-card .deal-card-priority-tag { padding: 1px 6px; border-radius: var(--tg-radius-3); font-size: 10px; line-height: 16px; font-weight: 500; }
body.tg-skin .deal-card .deal-owner-avatar { width: 24px; height: 24px; }
body.tg-skin .deal-start-info { display: flex; }

/* Trilha de etapas: as setas em clip-path do custom.css valem para o primeiro
   e o ultimo passo com dois seletores de classe, entao o desfazer precisa de
   um a mais. */
body.tg-skin .deal-stageflow > li .deal-stagestep {
    min-height: 0;
    padding: 2px 0;
    background: none;
    font: 400 var(--tg-fs-small) / var(--tg-lh-small) var(--tg-font);
    letter-spacing: 0;
    clip-path: none;
}
body.tg-skin .deal-stageflow > li .deal-stagestep.is-current { color: var(--tg-dark); font-weight: 500; }
body.tg-skin .deal-stageflow > li .deal-stagestep.is-done,
body.tg-skin .deal-stageflow > li .deal-stagestep:hover { background: none; }
body.tg-skin .deal-stageflow > li .deal-stagestep:hover { color: var(--tg-primary); }
body.tg-skin .deal-stagestep-menu { right: auto; left: 0; }
body.tg-skin .deal-summary-strip { border-bottom: 0; }

/* Painel de detalhes: o bloco minimalista do custom.css desenha o comentario
   com traco em cima e a caixa de comentario em grade. */
body.tg-skin .comment { border-top: 0; }
body.tg-skin .comment:first-of-type { padding-top: 0; }
body.tg-skin .comment-head time { margin-left: auto; }
body.tg-skin .comment-history-toggle { margin-top: 0; }
body.tg-skin .deal-create-actions { margin-top: 0; padding-top: 0; border-top: 0; }
body.tg-skin .deal-create-modal { max-width: none; border: 1px solid var(--tg-stroke); }
body.tg-skin .deal-create-form { display: flex; }
body.tg-skin .deal-create-head { margin-bottom: 0; }
body.tg-skin .deal-create-fields .span-2 { grid-column: 1 / -1; }

/* --- Popup de detalhes no celular ----------------------------------------
   Mesma logica do desktop: o respiro acompanha a tela menor, mas sem voltar
   a apertar tudo. A grade de duas colunas do cabecalho saiu junto com a
   inicial decorativa, entao aqui so sobra o padding.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    body.tg-skin .deal-modal { width: 100vw; }
    body.tg-skin .deal-detail-header { padding: 18px 48px 16px 20px; }
    /* Dados da empresa mais compactos: o painel era quase um terco da altura
       do cabecalho no celular. */
    /* O align-items:flex-start do desktop vira coluna aqui: sem voltar para
       stretch, a lista de dados encolhe ate a largura do proprio texto e as
       duas colunas se sobrepoem. */
    body.tg-skin .deal-detail-company-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 12px;
        padding: 12px 14px;
    }
    body.tg-skin .deal-header-company-data { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
    body.tg-skin .deal-header-company-data dt { line-height: 14px; }
    body.tg-skin .deal-header-company-data dd { line-height: 18px; }
    body.tg-skin .deal-header-company-link { align-self: flex-start; padding-top: 0; }

    /* A trilha de etapas e a faixa Valor/Responsavel saem no celular: a trilha
       de sete passos ocupava tres linhas, e os dois dados repetem a aba Dados.
       Como e na trilha que se move a negociacao, o seletor de etapa da lateral
       — escondido no desktop — volta a aparecer aqui. Sem isso, nao haveria
       como trocar de etapa pelo celular. */
    body.tg-skin .deal-stageflow-block { display: none; }
    body.tg-skin .modal-stage-section { display: block; }
    /* O custom.css da a faixa de abas um encaixe por coluna (scroll-snap). Sem
       o scroll-padding, o encaixe alinha a primeira aba na borda do elemento e
       nao na borda do conteudo: o navegador rolava 20px sozinho e o padding da
       esquerda sumia, deixando "Resumo" colado na borda. */
    body.tg-skin .deal-workspace-tabs {
        padding: 10px 20px;
        overflow-x: auto;
        scroll-padding-inline: 20px;
        scrollbar-width: none;
    }
    body.tg-skin .deal-workspace-tabs::-webkit-scrollbar { display: none; }
    body.tg-skin .deal-workspace-tabs > button { flex: 0 0 auto; }
    /* A faixa rola na horizontal; o botao fica preso a ponta direita com
       position:sticky, so com o icone, para nunca sair da tela. O fundo branco
       e a sombra a esquerda evitam que as abas aparecam por baixo dele. */
    body.tg-skin .deal-workspace-tabs .deal-delete-form {
        position: sticky;
        right: -20px;
        flex: 0 0 auto;
        margin: 0 -20px 0 0;
        padding: 0 20px 0 10px;
        background: var(--tg-white);
        box-shadow: -10px 0 10px -4px var(--tg-white);
    }
    body.tg-skin .deal-workspace-tabs .deal-delete-button { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 10px; }
    body.tg-skin .deal-workspace-tabs .deal-delete-button .deal-delete-label { display: none; }
    body.tg-skin .deal-workspace-tabs .deal-delete-icon { width: 18px; height: 18px; }
    /* Uma coluna so. O align-items:start do desktop precisa virar stretch aqui,
       senao cada bloco encolhe ate a largura do proprio conteudo. */
    body.tg-skin .deal-detail-layout {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 16px;
        padding: 18px 20px 28px;
    }
    body.tg-skin .deal-detail-main,
    body.tg-skin .deal-detail-sidebar { gap: 16px; }
    body.tg-skin .deal-detail-section,
    body.tg-skin .deal-detail-sidebar > section { padding: 18px; }
    body.tg-skin .modal-form-grid,
    body.tg-skin .deal-create-fields,
    body.tg-skin .modal-priority-options { grid-template-columns: 1fr; }
    body.tg-skin .crm-composer > summary,
    body.tg-skin .modal-new-row .button { min-height: 44px; }
    /* Campo e botao lado a lado nao cabem em 390px: o texto do comentario
       ficava cortado na vertical. Empilhados, o campo usa a linha inteira. */
    body.tg-skin .comment-box { flex-direction: column; align-items: stretch; }
    body.tg-skin .comment-box textarea { min-height: 72px; }
    body.tg-skin .comment-box .button { align-self: flex-end; }
}
@media (max-width: 860px) {
    /* Alvo de toque de 44px (AGENTS.md) nos controles do topo. */
    body.tg-skin .pipeline-toolbar .toolbar-search,
    body.tg-skin .pipeline-toolbar .toolbar-menu > summary.toolbar-trigger,
    body.tg-skin .pipeline-scope > summary,
    body.tg-skin .pipeline-toolbar .pipeline-view-switch a,
    body.tg-skin .pipeline-toolbar .card-view-toggle,
    body.tg-skin .pipeline-head-actions .pipeline-add-btn { min-height: 44px; }
    body.tg-skin .pipeline-chip,
    body.tg-skin .bulk-menu-trigger,
    body.tg-skin .deal-workspace-tabs > button { min-height: 44px; }
    /* A busca e o gatilho de filtros ficam na mesma linha; sem encolher a
       busca, os 320px de base dela estouravam a largura do celular. */
    body.tg-skin .pipeline-toolbar .toolbar-search-form { flex: 1 1 100%; }
    body.tg-skin .pipeline-toolbar .toolbar-search { flex: 1 1 120px; min-width: 0; }
    /* O custom.css prende os menus em 44px no celular, porque la o gatilho
       era so icone. Com o rotulo de volta, o summary ficava 55px maior que
       o proprio details e vazava a pagina para a direita. */
    body.tg-skin .pipeline-toolbar .toolbar-menu.filters-menu,
    body.tg-skin .pipeline-toolbar > .toolbar-menu { width: auto; }
    body.tg-skin .pipeline-toolbar .card-view-toggle { width: auto; min-width: 0; }
    /* Busca, Filtros e Limpar dividem a linha de 390px: o rotulo sai e fica
       so o X, que mantem o nome acessivel pelo aria-label. */
    body.tg-skin .toolbar-clear { justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; }
    body.tg-skin .toolbar-clear span { display: none; }
    /* Visao e acao primaria dividem uma linha so, em vez de empilhar. */
    body.tg-skin .pipeline-head-actions:not(.task-head-actions) { flex-wrap: wrap; width: 100%; }
    body.tg-skin .pipeline-head-actions .pipeline-scope { flex: 0 0 auto; }
    body.tg-skin .pipeline-head-actions .pipeline-add-btn { flex: 1 1 auto; }
    body.tg-skin .pipeline-toolbar .pipeline-view-switch { margin-left: 0; }
    body.tg-skin .pipeline-toolbar .toolbar-popover { width: min(300px, calc(100vw - 32px)); }
    body.tg-skin .pipeline-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    body.tg-skin .pipeline-chips::-webkit-scrollbar { display: none; }
    body.tg-skin .pipeline-chip { flex: 0 0 auto; }

    /* --- Topo de filtros no celular --------------------------------------
       Eram cinco linhas antes do quadro comecar. Saem os dois controles que
       so fazem sentido no desktop:
         Salvos  -> filtro salvo e trabalho de montagem, feito sentado;
                    os filtros em si continuam em "Filtros".
         Relax   -> aumenta o card em 20%; no celular a coluna ja ocupa
                    quase a tela inteira, entao nao muda nada util.
       Com eles fora, Quadro/Lista ocupa a linha inteira em vez de sobrar
       solto num canto. ------------------------------------------------- */
    body.tg-skin .pipeline-toolbar > .toolbar-menu,
    body.tg-skin .pipeline-toolbar .card-view-toggle { display: none; }
    body.tg-skin .pipeline-toolbar { gap: 10px; margin-bottom: 12px; }
    body.tg-skin .pipeline-toolbar .pipeline-view-switch { flex: 1 1 100%; }
    body.tg-skin .pipeline-toolbar .pipeline-view-switch a { flex: 1 1 0; }
    body.tg-skin .pipeline-head { margin-bottom: 12px; padding-bottom: 10px; }
    body.tg-skin .pipeline-head-actions:not(.task-head-actions) { gap: 10px; }
    body.tg-skin .pipeline-chips { gap: 8px; margin-bottom: 12px; }
}

/* ===========================================================================
   EDICAO RAPIDA DE PRIORIDADE E TAGS NO CARD (estilo Trello)

   Clicar na etiqueta de prioridade ou nas tags do card abre este seletor.
   No desktop e um popover ancorado no gatilho; no celular vira uma folha
   presa ao rodape, porque um popover de 288px colado numa borda estreita nao
   tem onde ficar e os alvos de toque precisam de 44px.
   Tudo usa os tokens da pele; nenhuma cor nova.
   =========================================================================== */

/* Os gatilhos ja vivem no card: so ganham cursor e resposta ao mouse. */
body.tg-skin .deal-card-priority-tag[data-quick-edit],
body.tg-skin .deal-card-tags[data-quick-edit] { cursor: pointer; }
body.tg-skin .deal-card-priority-tag[data-quick-edit]:hover { filter: brightness(.92); }
body.tg-skin .deal-card-tags[data-quick-edit]:hover .tag-chip { filter: brightness(.94); }
body.tg-skin .deal-card-tags[data-quick-edit]:hover .compact-tag-more { background: #D5D5D7; }
body.tg-skin .deal-card-priority-tag[data-quick-edit]:focus-visible,
body.tg-skin .deal-card-tags[data-quick-edit]:focus-visible {
    outline: 2px solid var(--tg-primary);
    outline-offset: 2px;
    border-radius: var(--tg-radius-3);
}

body.tg-skin .quick-edit-backdrop[hidden],
body.tg-skin .quick-edit[hidden] { display: none; }
body.tg-skin .quick-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(17, 25, 40, .45);
}
body.tg-skin .quick-edit {
    position: fixed;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 288px;
    max-height: min(520px, calc(100vh - 16px));
    overflow-y: auto;
    padding: 14px 16px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: 0 12px 32px rgba(17, 25, 40, .18);
    font-family: var(--tg-font);
}
/* Sem estado "salvando" visual: escurecer o seletor a cada gravacao fazia ele
   piscar a cada clique. O andamento aparece so na linha de status. */
body.tg-skin .quick-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.tg-skin .quick-edit-head strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 600;
}
body.tg-skin .quick-edit-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--tg-radius-6);
    background: none;
    color: var(--tg-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
body.tg-skin .quick-edit-close:hover { background: var(--tg-gray-2); color: var(--tg-dark); }
body.tg-skin .quick-edit-section { display: flex; flex-direction: column; gap: 8px; }
body.tg-skin .quick-edit-section h4 {
    margin: 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Prioridade: mesmo desenho do List Select Item usado na lateral do popup. */
body.tg-skin .quick-edit-priority { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body.tg-skin .quick-edit-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
body.tg-skin .quick-edit-option:hover { border-color: var(--tg-primary); }
body.tg-skin .quick-edit-option[aria-pressed="true"] { border-color: var(--tg-primary); color: var(--tg-primary); }
body.tg-skin .quick-edit-option i { display: none; margin-left: auto; font-style: normal; }
body.tg-skin .quick-edit-option[aria-pressed="true"] i { display: inline; }
/* O contorno de foco aparece so para quem navega por teclado (focus-visible).
   Antes era :focus-within, que acende tambem ao clicar com o mouse: a linha
   da tag ganhava uma borda azul a cada clique, e como a lista tem rolagem
   propria o contorno de fora era cortado, sobrando so uma linha no topo e na
   base. outline-offset negativo desenha por dentro e nao e cortado. */
body.tg-skin .quick-edit-option:focus-visible { outline: 2px solid var(--tg-primary); outline-offset: 1px; }
body.tg-skin .quick-edit-tag:has(input:focus-visible) { outline: 2px solid var(--tg-primary); outline-offset: -2px; }
body.tg-skin .quick-edit-tag input:focus { outline: none; }
body.tg-skin .quick-edit-tag input:focus-visible { outline: none; }
body.tg-skin .quick-edit-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tg-text); }
body.tg-skin .quick-edit-dot.is-medium { background: var(--tg-secondary); }
body.tg-skin .quick-edit-dot.is-high { background: var(--tg-primary); }
body.tg-skin .quick-edit-dot.is-strategic { background: var(--tg-dark); }

/* Tags: lista com caixa, cor da tag e nome. */
body.tg-skin .quick-edit-tags {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
}
body.tg-skin .quick-edit-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--tg-radius-6);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    cursor: pointer;
}
body.tg-skin .quick-edit-tag:hover { background: var(--tg-gray); }
body.tg-skin .quick-edit-tag input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--tg-primary); }
body.tg-skin .quick-edit-swatch { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--tag-color, var(--tg-text)); }
body.tg-skin .quick-edit-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tg-skin .quick-edit-empty { margin: 0; color: var(--tg-text); font-size: var(--tg-fs-small); line-height: var(--tg-lh-small); }

body.tg-skin .quick-edit-new { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--tg-stroke); }
body.tg-skin .quick-edit-new input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 10px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
    font-weight: 400;
}
body.tg-skin .quick-edit-new input:focus { outline: none; border-color: var(--tg-primary); }
body.tg-skin .quick-edit-status {
    min-height: var(--tg-lh-micro);
    margin: 0;
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
}
body.tg-skin .quick-edit-status.is-error { color: var(--tg-red); }
body.tg-skin .quick-edit-status:empty { display: none; }

@media (max-width: 860px) {
    body.tg-skin .quick-edit {
        top: auto !important;
        right: 0;
        bottom: 0;
        left: 0 !important;
        width: auto;
        max-height: 78dvh;
        padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
    }
    /* Alvo de toque de 44px (AGENTS.md) e 16px nos campos, contra o zoom do iOS. */
    body.tg-skin .quick-edit-close { width: 44px; height: 44px; margin-right: -10px; }
    body.tg-skin .quick-edit-option { min-height: 44px; }
    body.tg-skin .quick-edit-tag { min-height: 44px; }
    body.tg-skin .quick-edit-tag input { width: 20px; height: 20px; }
    body.tg-skin .quick-edit-new input,
    body.tg-skin .quick-edit-new .button { min-height: 44px; }
    body.tg-skin .quick-edit-tags { max-height: 34dvh; }
}

/* ===========================================================================
   SHELL — sidebar e topbar, para o app INTEIRO

   Atencao: daqui para baixo NAO ha escopo tg-skin. Estas regras valem em todas
   as telas, porque o shell e compartilhado pelo layout/header.php.

   EXTRAIDO do kit:
     310:24008  Sidebar Menu  -> item de navegacao (largura 280, padding
                                10px 30px 10px 35px, texto 16/24 Medium
                                #637381; ativo = fundo rgba(55,88,249,.05),
                                borda direita 3px #3758F9, texto #3758F9;
                                no app os dois vem de --tg-primary)
     310:23986  Avatar With Text -> bloco do usuario (avatar 42 redondo,
                                nome 16/24 Medium #111928, gap 15)

   DERIVADO: a topbar. O kit nao tem componente de barra superior de app;
   ela segue os tokens (branco, traco DFE4EA, Inter).

   O app-shell.css tem duas geracoes de regra para o shell — um conjunto
   escrito a mao e outro compilado do Tailwind. O prefixo body eleva a
   especificidade, e este arquivo carrega por ultimo.
   =========================================================================== */

/* --- Posicao fixa dentro do conteudo ------------------------------------
   O .main-content roda a animacao "enter" com animation-fill-mode: both, e o
   ultimo quadro dela (opacidade 1, translateY 0) fica preso no elemento. Um
   transform, mesmo neutro, cria bloco de contencao: tudo que e position:fixed
   dentro dele passa a se ancorar no elemento e nao na janela. Na lista do
   Pipeline isso jogava a barra de acoes em massa para o fim de uma pagina de
   38 mil pixels, fora da tela. Como o quadro final e identico ao estado
   natural, tirar o fill nao muda nada na tela e devolve o fixed.
   ------------------------------------------------------------------------ */
body .main-content { animation-fill-mode: none; }

/* --- Sidebar ------------------------------------------------------------
   A GEOMETRIA fica presa ao desktop (min-width 901px, o mesmo ponto de corte
   do app). Abaixo disso a sidebar deixa de ser coluna e vira cabecalho, com
   medidas proprias no app-shell.css — e como este arquivo nao usa @layer, uma
   largura global de 280px vencia aquelas regras e o cabecalho do celular
   ficava com 280px num viewport de 360. A pele so recolore no celular.
   ------------------------------------------------------------------------ */
@media (min-width: 901px) {
    body.app-shell { grid-template-columns: 280px 1fr; }
    body .sidebar {
        width: 280px;
        padding: 28px 0;
        border-right: 1px solid var(--tg-stroke);
    }
    body .sidebar .brand { gap: 0; padding: 0 24px 28px; }
    body .sidebar .brand-logo { width: 168px; height: auto; }
    body .sidebar nav { gap: 2px; }
    /* Sidebar Menu (310:24008): padding e borda direita do item. */
    body .sidebar nav a {
        gap: 12px;
        padding: 9px 24px 9px 28px;
        border-right: 3px solid transparent;
        border-radius: 0;
    }
    body .sidebar nav a.active { border-right-color: var(--tg-primary); }
    body .sidebar nav a .nav-icon,
    body .sidebar nav a .nav-icon svg { width: 20px; height: 20px; }
    body .sidebar nav a .nav-icon { display: inline-flex; }
    /* Avatar With Text (310:23986). */
    body .sidebar-user {
        grid-template-columns: 42px 1fr auto;
        gap: 15px;
        margin-top: auto;
        padding: 16px 24px 0;
    }
    body .sidebar-user .avatar { width: 42px; height: 42px; }

    /* Menu recolhido: so existe no desktop. E o estado padrao do app, entao e
       ele que precisa ficar legivel sozinho. No lugar de so o icone, cada item
       vira icone em cima e rotulo embaixo, como num trilho de navegacao. Os
       88px saem do rotulo mais longo, "Importacoes", que mede ~58px em 10px e
       ainda sobra folga para o respiro lateral. */
    body.app-shell.sidebar-collapsed { grid-template-columns: 88px 1fr; }
    body.sidebar-collapsed .sidebar { width: 88px; padding: 24px 8px; }
    /* O justify-content sozinho nao fazia nada: no estado recolhido o .brand
       computa display:block, e a marca encostava na esquerda do trilho. */
    body.sidebar-collapsed .sidebar .brand {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0 22px;
    }
    /* Volta a recortar: no trilho estreito aparece so a montanha do lockup.
       As medidas saem das proporcoes do arquivo, nao de tentativa e erro. O
       logo-lockup-ink.png tem 1299x367, e dentro dele a montanha e um quadrado
       de 310x310 que comeca em x=21, y=23. Antes o recorte era 36x38 com o
       logo em 148px: a montanha caia em 35,3px a partir de 2,4px, entao
       sobrava fora da caixa e aparecia cortada a direita e embaixo.
       Agora so --tg-brand-mark manda; o resto e regra de tres. */
    body.sidebar-collapsed .sidebar .brand-logo-crop {
        --tg-brand-mark: 34px;
        flex: 0 0 auto;
        width: var(--tg-brand-mark);
        height: var(--tg-brand-mark);
        overflow: hidden;
    }
    body.sidebar-collapsed .sidebar .brand-logo {
        display: block;
        width: calc(var(--tg-brand-mark) * 1299 / 310);
        max-width: none;
        height: auto;
        margin-top: calc(var(--tg-brand-mark) * -23 / 310);
        margin-left: calc(var(--tg-brand-mark) * -21 / 310);
    }
    body.sidebar-collapsed .sidebar .brand-product { display: none; }
    body.sidebar-collapsed .sidebar nav { gap: 4px; }
    body.sidebar-collapsed .sidebar nav a {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 9px 4px;
        border-right-width: 0;
        border-radius: var(--tg-radius-6);
        text-align: center;
    }
    /* O app-shell.css esconde o rotulo no estado recolhido; aqui ele volta. */
    body.sidebar-collapsed .sidebar nav a .nav-label {
        display: block;
        width: 100%;
        overflow: hidden;
        font-size: 10px;
        line-height: 14px;
        font-weight: 500;
        letter-spacing: 0;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.sidebar-collapsed .sidebar nav a .nav-icon,
    body.sidebar-collapsed .sidebar nav a .nav-icon svg { width: 22px; height: 22px; }
    body.sidebar-collapsed .sidebar nav a.active { background: rgba(var(--tg-primary-rgb), .08); }
    body.sidebar-collapsed .sidebar-user { padding: 16px 0 0; }
}

body .sidebar {
    background: var(--tg-white);
    color: var(--tg-text);
    box-shadow: none;
}
body .sidebar .brand { color: var(--tg-dark); }
/* O .brand-logo-crop tinha altura fixa de 36px, calibrada para o logo claro
   (895x202). O lockup escuro e mais alto (1299x367) e ficava com a tagline
   "SCALE COMMERCE" cortada pela metade. Aqui a caixa acompanha a arte. */
body .sidebar .brand-logo-crop { height: auto; overflow: visible; }
body .sidebar .brand-product {
    margin-top: 10px;
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Item de navegacao — Sidebar Menu (310:24008).
   A borda direita fica sempre presente e transparente, para o item nao
   deslocar 3px ao virar ativo. */
body .sidebar nav a {
    background: none;
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
}
body .sidebar nav a:hover { background: var(--tg-gray); color: var(--tg-dark); }
body .sidebar nav a.active {
    background: rgba(var(--tg-primary-rgb), .05);
    color: var(--tg-primary);
}

/* Recolher o menu: o kit nao tem esse controle, so recoloracao. */
body .sidebar-toggle {
    border-color: var(--tg-stroke);
    background: var(--tg-white);
    color: var(--tg-text);
}

/* Bloco do usuario — Avatar With Text (310:23986). */
body .sidebar-user {
    border-top: 1px solid var(--tg-stroke);
}
body .sidebar-user .avatar {
    background: rgba(var(--tg-primary-rgb), .10);
    color: var(--tg-primary);
    font-size: var(--tg-fs-body);
    font-weight: 600;
}
body .sidebar-user strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-body);
    line-height: var(--tg-lh-body);
    font-weight: 500;
}
body .sidebar-user small {
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    letter-spacing: 0;
    text-transform: none;
}
body .sidebar-user .icon-button { color: var(--tg-text); }
body .sidebar-user .icon-button:hover { color: var(--tg-primary); }

/* --- Menu recolhido ----------------------------------------------------
   O app tem o estado sidebar-collapsed, com regras proprias em 72px. Elas
   ficam dentro de @layer no app-shell.css, e estilo sem layer vence estilo em
   layer independentemente da especificidade — ou seja, as regras acima
   sobrepunham o recolhido e deixavam uma coluna branca de 280px so com icones.
   Este bloco devolve o comportamento, agora nas cores do kit.
   ------------------------------------------------------------------------ */
/* Volta a recortar: no trilho estreito aparece so a montanha do lockup. */

/* --- Topbar.  DERIVADO. ------------------------------------------------ */
body .app-topbar {
    border-bottom: 1px solid var(--tg-stroke);
    background: var(--tg-white);
    color: var(--tg-text);
    box-shadow: none;
}
body .app-topbar .topbar-context small {
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    letter-spacing: 0;
    text-transform: none;
}
body .app-topbar .topbar-context strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body .app-search input {
    padding: 9px 14px 9px 38px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-small);
}
body .app-search input::placeholder { color: var(--tg-text); }
body .app-search input:focus { border-color: var(--tg-primary); outline: 0; }
body .app-search svg { color: var(--tg-text); }
body .app-search kbd {
    border: 1px solid var(--tg-stroke);
    border-radius: 4px;
    background: var(--tg-gray);
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-micro);
}
body .topbar-profile { border-radius: var(--tg-radius-6); }
body .topbar-profile:hover { background: var(--tg-gray); }
body .topbar-profile strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    font-weight: 500;
}
body .topbar-profile small {
    color: var(--tg-text);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    letter-spacing: 0;
    text-transform: none;
}
body .topbar-avatar {
    background: rgba(var(--tg-primary-rgb), .10);
    color: var(--tg-primary);
    font-weight: 600;
}

/* --- Celular: a sidebar vira barra inferior (breakpoint do app: 900) -------
   Aqui a pele SO RECOLORE. O espacamento e o corpo de texto da barra inferior
   ja estao calibrados no app-shell.css para caber cinco itens em 360px; mexer
   neles truncava "Visao geral". Padding e font-size ficam como estao.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    body.app-shell { grid-template-columns: 1fr; }
    body .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--tg-stroke);
        background: var(--tg-white);
    }
    /* No celular o .sidebar e so o cabecalho: o nav se desprende e vira barra
       inferior com position:fixed e fundo proprio. Pintar a sidebar nao
       alcanca essa barra — ela precisa ser pintada aqui, e o painel do
       "Mais" tambem, que abre por cima dela. */
    body .sidebar nav {
        border-top: 1px solid var(--tg-stroke);
        background: var(--tg-white);
        box-shadow: 0 -2px 12px rgba(17, 25, 40, .06);
    }
    body .mobile-more-panel {
        border: 1px solid var(--tg-stroke);
        background: var(--tg-white);
        box-shadow: 0 8px 24px rgba(17, 25, 40, .12);
    }
    body .mobile-more-panel a,
    body .mobile-more-panel button { color: var(--tg-text); }
    body .mobile-more-panel a:hover,
    body .mobile-more-panel button:hover { background: var(--tg-gray); color: var(--tg-dark); }
    body .sidebar nav a {
        border-right: 0;
        background: none;
        color: var(--tg-text);
    }
    body .sidebar nav a.active {
        border-right: 0;
        background: rgba(var(--tg-primary-rgb), .08);
        color: var(--tg-primary);
    }
    /* A sidebar no celular e cabecalho ou barra inferior, nao coluna: o padding
       vertical de 28px do desktop nao se aplica. */
    body .sidebar .brand { padding: 0; }
}

/* ===========================================================================
   REDE DE CONTATOS.  DERIVADO, a partir de Ideias (cartao e abas) e do painel
   de tarefas (popup). Pessoas que podem indicar negocios; o valor de cada uma
   aparece nas indicacoes, nao na empresa onde trabalha.
   =========================================================================== */
body.tg-skin .network-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}
body.tg-skin .network-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-card);
    background: var(--tg-white);
    color: var(--tg-text);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    text-decoration: none;
}
body.tg-skin a.network-stat:hover { border-color: var(--tg-primary); }
body.tg-skin .network-stat strong {
    color: var(--tg-dark);
    font-size: var(--tg-fs-title);
    line-height: var(--tg-lh-title);
    font-weight: 600;
}
body.tg-skin .network-stat.is-alert strong { color: var(--tg-red); }
body.tg-skin .network-stat.is-won strong { color: #0f8f6d; }

body.tg-skin .network-create-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}
body.tg-skin .network-create-form input { flex: 1 1 220px; min-width: 0; }
body.tg-skin .network-create-form select { flex: 0 1 180px; min-width: 0; }
body.tg-skin .network-create-form .button { flex: 0 0 auto; }
body.tg-skin .network-filter { align-items: center; }
body.tg-skin .network-due-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    white-space: nowrap;
}
body.tg-skin .network-due-toggle input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--tg-primary);
}

/* Cartao */
body.tg-skin .network-card { gap: 12px; cursor: pointer; }
body.tg-skin .network-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
}
body.tg-skin .network-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--tg-primary-rgb), .12);
    color: var(--tg-primary);
    font-size: var(--tg-fs-body);
    font-weight: 600;
}
body.tg-skin .network-card-title {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
}
body.tg-skin .network-card-title strong,
body.tg-skin .network-card-title small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.tg-skin .network-card-title small { color: var(--tg-text); font-size: var(--tg-fs-small); line-height: var(--tg-lh-small); }
body.tg-skin .network-potential {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--tg-radius-3);
    background: var(--tg-gray-2);
    color: var(--tg-text);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
body.tg-skin .network-potential.potential-high { background: rgba(19, 194, 150, .14); color: #0f8f6d; }
body.tg-skin .network-potential.potential-medium { background: rgba(var(--tg-primary-rgb), .10); color: var(--tg-primary-dark); }
body.tg-skin .network-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.tg-skin .network-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--tg-gray-2);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-micro);
    line-height: var(--tg-lh-micro);
    font-weight: 500;
}
body.tg-skin .network-chip.is-soft { border-color: var(--tg-stroke); background: none; color: var(--tg-text); }
body.tg-skin .network-help {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
body.tg-skin .network-contact-state { color: var(--tg-text); }
body.tg-skin .network-contact-state.is-overdue { color: var(--tg-red); font-weight: 500; }
body.tg-skin .network-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--tg-stroke);
}
body.tg-skin .network-link {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    color: var(--tg-dark-3);
    font-size: var(--tg-fs-small);
    line-height: var(--tg-lh-small);
    text-decoration: none;
}
body.tg-skin .network-link:hover { border-color: var(--tg-primary); color: var(--tg-primary); }
body.tg-skin .network-owner { margin-left: auto; color: var(--tg-text); font-size: var(--tg-fs-micro); }

/* Popup do contato */
body.tg-skin .network-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 20px;
}
body.tg-skin .network-quick form { display: contents; }
body.tg-skin .network-quick small { margin-left: auto; }
body.tg-skin .network-referral-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
body.tg-skin .network-referral {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
}
body.tg-skin .network-referral.status-won { border-color: rgba(19, 194, 150, .5); background: rgba(19, 194, 150, .05); }
body.tg-skin .network-referral.status-lost { opacity: .7; }
body.tg-skin .network-referral-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
}
body.tg-skin .network-referral-info strong { color: var(--tg-dark); font-weight: 500; overflow-wrap: anywhere; }
body.tg-skin .network-referral-info a { color: var(--tg-primary); font-size: var(--tg-fs-small); }
body.tg-skin .network-referral select,
body.tg-skin .network-referral-form input,
body.tg-skin .network-referral-form select {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    color: var(--tg-dark);
    font-family: var(--tg-font);
    font-size: var(--tg-fs-field);
    line-height: var(--tg-lh-body);
}
body.tg-skin .network-referral-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 8px;
}
body.tg-skin .network-lookup { position: relative; min-width: 0; }
body.tg-skin .network-lookup input { width: 100%; min-width: 0; }
body.tg-skin .network-lookup-results {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--tg-stroke);
    border-radius: var(--tg-radius-6);
    background: var(--tg-white);
    box-shadow: var(--tg-shadow-card);
}
body.tg-skin .network-lookup-results[hidden] { display: none; }
body.tg-skin .network-lookup-results p { margin: 0; padding: 10px 12px; font-size: var(--tg-fs-small); }
body.tg-skin .network-lookup-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--tg-radius-3);
    background: none;
    color: var(--tg-dark);
    text-align: left;
    cursor: pointer;
}
body.tg-skin .network-lookup-option:hover,
body.tg-skin .network-lookup-option:focus-visible { background: rgba(var(--tg-primary-rgb), .08); outline: 0; }
body.tg-skin .network-lookup-option small { color: var(--tg-text); font-size: var(--tg-fs-small); }
body.tg-skin .network-danger { padding-top: 8px; }

@media (max-width: 1100px) {
    body.tg-skin .network-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    body.tg-skin .network-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    body.tg-skin .network-stat { padding: 12px 14px; }
    body.tg-skin .network-create-form { flex-direction: column; }
    body.tg-skin .network-create-form input,
    body.tg-skin .network-create-form select,
    body.tg-skin .network-create-form .button { flex: 0 0 auto; width: 100%; min-height: 44px; }
    body.tg-skin .network-filter select { max-width: none; width: 100%; min-height: 44px; }
    body.tg-skin .network-due-toggle { min-height: 44px; }
    body.tg-skin .network-due-toggle input { width: 20px; height: 20px; min-height: 0; }
    body.tg-skin .network-link { min-height: 44px; padding: 0 16px; }
    body.tg-skin .network-quick .button { min-height: 44px; }
    /* Fechar com alvo de 44px; o cabecalho ganha folga a direita para nao ficar por baixo. */
    body.tg-skin .network-modal .deal-modal-close { top: 8px; right: 8px; width: 44px; height: 44px; }
    body.tg-skin .network-modal .task-detail-header { padding-right: 56px; }
    body.tg-skin .network-quick small { flex: 1 0 100%; margin-left: 0; }
    body.tg-skin .network-referral { grid-template-columns: minmax(0, 1fr) auto; }
    body.tg-skin .network-referral form:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
    body.tg-skin .network-referral select,
    body.tg-skin .network-referral-form input,
    body.tg-skin .network-referral-form select { width: 100%; min-height: 44px; }
    body.tg-skin .network-referral-form { grid-template-columns: minmax(0, 1fr); }
    body.tg-skin .network-referral-form .button { min-height: 44px; }
    body.tg-skin .network-referral .task-delete { min-width: 44px; min-height: 44px; }
}

/* Menu lateral sem animacao no carregamento da pagina. O header.php marca o body
   com .sidebar-instant antes do primeiro desenho e so remove a marca quando a
   pessoa clica na seta; a partir dai a transicao do shell volta a valer. */
@media (min-width: 901px) {
    /* So no desktop: no celular a barra do topo precisa animar ao esconder, e la
       nao existe o botao que removeria a marca. */
    body.app-shell.sidebar-instant,
    body.app-shell.sidebar-instant .sidebar,
    body.app-shell.sidebar-instant .main-content,
    body.app-shell.sidebar-instant .app-workspace { transition: none !important; }
}

/* ===========================================================================
   PIPELINE NO CELULAR: UMA COLUNA POR TELA
   Em pe, a coluna ocupa toda a largura do quadro (a pagina ja deixa 14px de
   cada lado) e cada deslize encaixa na proxima. Antes a coluna tinha 296px e
   sobrava uma faixa vazia, e havia 42px de "espiada" da coluna seguinte.

   Deitado, a coluna NAO acompanha a largura da tela: o teto e a largura que o
   celular tem em pe. Em paisagem o lado curto do aparelho e a altura da janela,
   entao 100lvh (altura maxima, com as barras do navegador recolhidas) menos as
   duas margens da pagina da exatamente essa largura. Em pe 100% e sempre menor
   que 100lvh, e o min() escolhe o 100%. O 430px logo abaixo e so reserva para
   navegador sem suporte a lvh.
   Vale para os tres modos de card (normal, compacto e relax).
   =========================================================================== */
@media (max-width: 900px) {
    body.tg-skin .kanban {
        max-width: 100%;
        margin-right: 0;
        padding-right: 0;
        scroll-padding-inline: 0;
    }
    body.tg-skin .kanban > .kanban-column,
    body.tg-skin .kanban.cards-compact > .kanban-column,
    body.tg-skin .kanban.cards-relax > .kanban-column {
        flex: 0 0 min(100%, 430px);
        width: min(100%, 430px);
        min-width: 0;
        flex: 0 0 min(100%, calc(100lvh - 28px));
        width: min(100%, calc(100lvh - 28px));
    }
}

/* ===========================================================================
   CELULAR: BARRA DO TOPO QUE SOME AO ROLAR + CABECALHO DE COLUNA COMPACTO

   A barra (marca Norway) e position:sticky no topo. O header.php poe a classe
   nav-hidden no body ao rolar para baixo e a tira ao rolar para cima. Esconder
   e mexer no top negativo do sticky: transform no .sidebar viraria o bloco de
   contencao da barra inferior, que e position:fixed dentro dele.
   --mobile-bar-h e medido pelo script (a barra nao tem altura fixa em todos
   os aparelhos); o 80px e so reserva.
   =========================================================================== */
@media (max-width: 900px) {
    body .sidebar { transition: top .25s ease; }
    body.nav-hidden .sidebar { top: calc(-1 * var(--mobile-bar-h, 80px) - 2px); }

    /* Copia fixa do cabecalho de coluna no Pipeline: uma faixa de 48px com o
       nome a esquerda e a contagem a direita. O cabecalho original, no fluxo
       da pagina, continua completo (nome, contagem, valor e ferramentas). O
       JS usa a mesma altura (48) para posicionar a camada. */
    body.tg-skin .kanban-pinned-column.kanban-column > header.kanban-pinned-header-copy {
        display: flex;
        align-items: center;
        height: 48px;
        min-height: 0;
        margin: 0;
        padding: 0 12px;
    }
    body.tg-skin .kanban-pinned-column .kanban-column-heading {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }
    body.tg-skin .kanban-pinned-column .kanban-stage-name-form { flex: 1 1 auto; min-width: 0; }
    body.tg-skin .kanban-pinned-column .kanban-column-name {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
        text-overflow: ellipsis;
    }
    body.tg-skin .kanban-pinned-column .kanban-column-meta {
        position: static;
        flex: 0 0 auto;
        margin: 0;
        font-size: 11px;
        line-height: 16px;
    }
    body.tg-skin .kanban-pinned-column .kanban-column-meta [data-stage-value-label] { display: none; }
    /* A copia e so para olhar (pointer-events:none): checkbox e ordenar ali
       eram controles mortos, e ainda disputavam a largura com o nome. A regra
       do kit (display:flex, mais especifica) vencia o display:none antigo. */
    body.tg-skin .kanban-pinned-column .kanban-column-tools { display: none; }

    /* Ordenar coluna e selecionar todas, no cabecalho completo. O botao era uma
       caixa branca com borda de 44px, pesada ao lado da caixa de selecao e
       parecendo solta do cabecalho colorido. Agora o alvo de toque continua com
       44px, mas o que se ve e um quadrado de 36px na cor da etapa, sem borda. */
    body.tg-skin .kanban-column > header .kanban-column-tools { align-items: center; gap: 0; }
    body.tg-skin .kanban-column > header .column-sort-trigger {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 4px;
        border: 0;
        border-radius: 12px;
        background: color-mix(in srgb, var(--stage-color, var(--tg-text)) 14%, transparent);
        background-clip: content-box;
        color: var(--tg-dark-3);
    }
    body.tg-skin .kanban-column > header .column-sort-trigger svg { width: 18px; height: 18px; }
    body.tg-skin .kanban-column > header .column-sort-trigger:active,
    body.tg-skin .kanban-column > header .column-sort-menu[open] .column-sort-trigger {
        background-color: color-mix(in srgb, var(--stage-color, var(--tg-text)) 26%, transparent);
        color: var(--tg-dark);
    }
    body.tg-skin .kanban-column > header .column-select input { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    body .sidebar { transition: none; }
}
/* ===========================================================================
   CELULAR: GESTOS NO QUADRO DO PIPELINE

   - Cabecalho (original e copia fixa): o deslize para os lados e tratado pelo
     JS da pagina, que troca de coluna. Por isso touch-action:pan-y: a rolagem
     vertical segue nativa e o horizontal chega ao JS. A copia fixa era
     pointer-events:none e ficava fora do quadro, entao o gesto nunca chegava.
   - Card: antes touch-action:pan-y, o que impedia deslizar para os lados a
     partir de qualquer card. Agora os dois eixos rolam nativamente; arrastar o
     card exige o toque longo, e durante o arrasto o JS bloqueia a rolagem.
   - Sem o menu de "copiar/compartilhar" do iOS no toque longo do card.
   =========================================================================== */
@media (max-width: 900px) {
    body.tg-skin .kanban-pinned-layer { pointer-events: auto; touch-action: pan-y; }
    body.tg-skin .kanban > .kanban-column > header { touch-action: pan-y; }
    body.tg-skin .kanban .deal-card { touch-action: pan-x pan-y; -webkit-touch-callout: none; }
    body.kanban-dragging { -webkit-touch-callout: none; }
}

/* ===========================================================================
   LINKS DO CARD (site e Instagram): texto um pouco maior e area de clique maior.
   O padding aumenta a area tocavel e a margem negativa devolve o mesmo valor,
   entao o card nao cresce. O overflow:hidden do link (reticencias) continua
   valendo porque a area extra e padding do proprio link, nao um pseudo-elemento
   que seria cortado.
   Desktop: 11px -> 12px, +4px/+6px de area. Celular: 13px, area de 44px de
   altura (22px de linha + 11px de cada lado), medida minima do AGENTS.md.
   =========================================================================== */
body.tg-skin .deal-card-site {
    box-sizing: border-box;
    max-width: calc(100% + 12px);
    margin: -4px -6px;
    padding: 4px 6px;
    font-size: 12px;
    line-height: 18px;
}
@media (max-width: 900px) {
    body.tg-skin .deal-card-links { gap: 12px; }
    body.tg-skin .deal-card-site {
        max-width: calc(100% + 16px);
        margin: -11px -8px;
        padding: 11px 8px;
        font-size: 13px;
        line-height: 22px;
    }
    /* O margin-top:-3px do bloco era calibrado para a linha de 16px. */
    body.tg-skin .deal-card-links { margin-top: 0; }
}