:root {
    /* Paleta NXMAPS: preto, laranja, branco e cinza.
       --blue mantém o nome como cor primária (CTA / ativo / links) mas usa laranja. */
    --blue: #F2691A;
    --blue-light: #FFF1E6;
    --blue-dark: #C9550F;
    --orange: #F2691A;
    --green: #166534;
    --red: #B91C1C;
    --gray-bg: #F5F5F5;
    --gray-line: #E5E7EB;
    --gray-text: #475569;
    --gray-soft: #94A3B8;
    --text: #1A1A1A;
    /* Acento de cor por seção da sidebar (diferenciação visual dos grupos). */
    --sec-gestao: #6366F1;
    --sec-cadastro: #0D9488;
    --sec-vendas: #F2691A;
    --sec-cs: #16A34A;
    --sec-dev: #2563EB;
    --sec-conhecimento: #7C3AED;
    --sec-operacoes: #D97706;
    --sec-admin: #B91C1C;
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 56px;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--gray-bg);
    color: var(--text);
    font-size: 14px;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button, .btn {
    font: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 8px 14px;
    background: var(--blue);
    color: #fff;
    transition: filter .15s;
    /* Sem isto, clicar no TEXTO do botão podia virar seleção de texto e o clique
       não disparava — só a borda respondia. user-select:none garante o clique. */
    -webkit-user-select: none;
    user-select: none;
}

button:hover, .btn:hover {
    filter: brightness(1.08);
}

button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-secondary {
    background: #fff;
    color: var(--blue);
    border-color: var(--blue);
}

.btn-ghost {
    background: transparent;
    color: var(--gray-text);
    border-color: var(--gray-line);
}

.btn-danger {
    background: var(--red);
}

/* SPEC-UI-008 — botão pequeno só com ícone (ex: "🔗 Compartilhar" nos rodapés
   dos modais). Fundo claro neutro, padding compacto, hover azul.
   Usar quando o significado do ícone for óbvio ou estiver no `title=`/aria. */
.btn-icon {
    background: var(--gray-bg);
    color: var(--gray-text);
    border: 1px solid var(--gray-line);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
}

.btn-icon:hover {
    background: var(--blue-light);
    color: var(--blue);
    border-color: var(--blue);
    filter: none;
}

input, select, textarea {
    font: inherit;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--gray-line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--blue-light);
    border-color: var(--blue);
}

.card {
    background: #fff;
    border: 1px solid var(--gray-line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.app {
    display: flex;
    min-height: 100vh;
}

.main {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 14px;
    overflow-y: auto;
    transition: margin-left .2s;
}

body.sidebar-collapsed .main {
    margin-left: var(--sidebar-width-collapsed);
}

/* SPEC-DEV-033: banner global de apontamento de horas pendente. Prepended dentro
   de .main (sticky no topo) — fica na coluna de conteúdo e acompanha a rolagem.
   padding-right reserva espaço pro sino fixo (z-index 200) no canto superior. */
.nx-apontamento-banner {
    position: sticky;
    top: -14px;
    z-index: 50;
    margin: -14px -14px 14px;
    padding: 11px 64px 11px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--blue-light);
    border-bottom: 2px solid var(--orange);
    color: var(--blue-dark);
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}
.nx-apontamento-banner .nx-ab-icon { font-size: 16px; line-height: 1; }
.nx-apontamento-banner .nx-ab-msg { flex: 1; }
.nx-apontamento-banner .nx-ab-cta {
    flex: none;
    background: var(--orange);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.nx-apontamento-banner .nx-ab-cta:hover { background: var(--blue-dark); }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-right: 3rem;
}

.page-header h1 {
    font-size: 22px;
    margin: 0;
    color: var(--text);
}

.page-header .actions {
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center;
}

.toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}

.toolbar input[type=search] {
    max-width: 300px;
}

table {
    width: 100%;
    background: #fff;
    border-collapse: collapse;
    border: 1px solid var(--gray-line);
    border-radius: var(--radius);
    overflow: hidden;
}

table th, table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-line);
}

table th {
    background: var(--blue-light);
    color: var(--blue-dark);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

table tr:last-child td {
    border-bottom: none;
}

table tbody tr:hover {
    background: #FAFBFD;
}

/* Padrão dos grids: conteúdo SEM negrito. Aplicado também a <b>/<strong>
   para garantir consistência caso alguém ainda os use no markup. */
table tbody td,
table tbody td b,
table tbody td strong,
.nx-grid table tbody td {
    font-weight: normal;
}

/* Cabeçalho ordenável */
.nx-sortable-th {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.nx-sortable-th .nx-sort-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    opacity: .4;
    transition: opacity .15s;
    vertical-align: middle;
}

.nx-sortable-th.asc .nx-sort-arrow,
.nx-sortable-th.desc .nx-sort-arrow {
    opacity: 1;
    color: var(--blue);
}

/* Lupa de filtro por coluna — sempre visível, à esquerda da seta de ordenação */
.nx-filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    opacity: .55;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
    transition: opacity .15s;
    line-height: 1;
}

.nx-filter-btn:hover {
    opacity: 1;
}

.nx-filter-btn.active {
    opacity: 1;
    color: var(--blue);
}

.nx-filter-btn.active::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--blue);
    border-radius: 50%;
    margin-left: 2px;
    vertical-align: top;
}

.nx-filter-popup {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid var(--gray-line);
    border-radius: var(--radius);
    padding: 12px;
    width: 260px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .14);
}

.nx-fp-label {
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 6px;
    color: var(--gray-text);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.nx-fp-row, .nx-fp-vals {
    margin-bottom: 8px;
}

.nx-fp-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.nx-fp-vals input, .nx-fp-vals select, .nx-fp-row select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--gray-line);
    border-radius: var(--radius);
    font-size: 13px;
    box-sizing: border-box;
}

.nx-fp-vals .nx-fp-val-a, .nx-fp-vals .nx-fp-val-b {
    width: calc(50% - 4px);
    display: inline-block;
}

.nx-fp-vals .nx-fp-val-a {
    margin-right: 4px;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--gray-line);
    color: var(--gray-text);
}

.badge-blue {
    background: var(--blue-light);
    color: var(--blue-dark);
}

.badge-green {
    background: #DCFCE7;
    color: var(--green);
}

.badge-orange {
    background: #FEF3C7;
    color: var(--orange);
}

.badge-red {
    background: #FEE2E2;
    color: var(--red);
}

.flex {
    display: flex;
}

.col {
    display: flex;
    flex-direction: column;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: 16px;
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.muted {
    color: var(--gray-text);
    font-size: 12px;
}

.right {
    margin-left: auto;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.modal {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    width: min(560px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
}

.modal h2 {
    margin: 0 0 16px;
    font-size: 18px;
    padding-right: 32px;
}

.modal .actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--gray-soft);
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

.modal-close:hover {
    background: var(--gray-bg);
    color: var(--red);
}

.modal-close:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.form-row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-text);
}

.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

/* SPEC-UI-001: rodapé fixo padronizado dos modais.
   - margens negativas laterais sangram para cobrir o padding lateral do .modal
   - bottom:0 cola na borda inferior do padding-box do .modal (referência do sticky)
   - z-index alto evita ficar atrás de dropdowns de combobox
   - box-shadow upward sinaliza scroll sob o rodapé
   SPEC-UI-007: o .modal com footer sticky perde o `padding-bottom` via `:has()`
   — o footer encosta direto na borda inferior do scroll container, sem deixar
   faixa rolante visível atrás dele. O footer também perde a margem negativa
   inferior (já não há padding-bottom pra "cobrir"). Padding interno mantido
   enxuto (14 top / 7 bottom — SPEC-UI-004) garantindo altura mínima.
   Alias .modal-footer aceito para markup semântico novo. */
.modal:has(> form > .form-actions),
.modal:has(> .form-actions),
.modal:has(> form > .modal-footer),
.modal:has(> .modal-footer) {
    padding-bottom: 0;
}

/* SPEC-PES-002/EMP-002 + UI-fix-split: quando o modal usa o layout split
   (nx-entity-split), o form-actions vive no scroll container interno
   (nx-entity-form) — a regra :has() acima não pega porque o form não é filho
   direto do modal. Aqui zeramos o padding do modal pra que tanto o split
   quanto o footer sticky encostem na borda sem faixa transparente. */
.modal:has(> .nx-entity-split) {
    padding: 0;
}

.modal:has(> .nx-entity-split) > h2 {
    padding: 18px 24px 12px;
    margin: 0;
    border-bottom: 1px solid var(--gray-line);
}

.form-actions,
.modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    margin: 20px -20px 0;
    padding: 14px 20px 7px;
    border-top: 1px solid var(--gray-line);
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 10;
    box-shadow: 0 -6px 12px -8px rgba(15, 23, 42, 0.08);
}

.story-card--bug-destaque {
    border-color: #FCA5A5;
    background: #FFF5F5;
    padding: 7px 10px;
}

/* SPEC-UI-005 (revisado): "Compartilhar" agora vive dentro dos menus de
   contexto próprios das páginas — não precisa de CSS dedicado aqui. */
.story-card--bug-destaque h4 {
    font-size: 12px;
    margin: 3px 0;
}

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 16px;
    background: var(--text);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
    /* Lote M: acima dos modais empilhados (.nx-empresa-modal-root vai até 2050)
       pra alertas de validação (CNPJ inválido, etc) aparecerem por cima. */
    z-index: 3000;
    opacity: 0;
    transition: opacity .2s;
    /* O #nx-toast nunca é removido do DOM (só perde a classe .show), e fica fixo
       no canto inferior direito — onde também ficam os botões de rodapé do modal.
       Sem pointer-events:none, o toast invisível (opacity:0) capturava o clique
       sobre o TEXTO dos botões; só a borda, fora da área do toast, respondia.
       Toast é só notificação: nunca deve interceptar clique. */
    pointer-events: none;
}

.toast.show {
    opacity: 1;
}

/* X de fechamento antecipado, ao final do quadro (depois do texto). Só clicável
   enquanto o toast está visível (.show); o resto do toast segue pointer-events:none. */
.toast-msg { flex: 1; }
.toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: inherit;
    padding: 0 2px;
    margin: 0;
    font-size: 15px;
    line-height: 1;
    opacity: .75;
    cursor: pointer;
}
.toast-close:hover { opacity: 1; filter: none; }
.toast.show .toast-close { pointer-events: auto; }

.toast.error {
    background: var(--red);
}

.toast.success {
    background: var(--green);
}

/* Combobox */
.nx-combobox {
    position: relative;
    display: block;
    width: 100%;
}

.nx-combobox-input {
    padding-right: 28px !important;
}

.nx-combobox-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--gray-soft);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    display: none;
}

.nx-combobox-clear:hover {
    background: var(--gray-bg);
    color: var(--red);
}

.nx-combobox.open .nx-combobox-input,
.nx-combobox-input:focus {
    border-color: var(--blue);
    outline: 2px solid var(--blue-light);
}

.nx-combobox-input:not(:placeholder-shown) ~ .nx-combobox-clear {
    display: block;
}

.nx-combobox-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--gray-line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    max-height: 240px;
    overflow-y: auto;
    z-index: 60;
    display: none;
}

.nx-combobox.open .nx-combobox-dropdown {
    display: block;
}

.nx-combobox-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.nx-combobox-item .sub {
    color: var(--gray-soft);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.nx-combobox-item.active,
.nx-combobox-item:hover {
    background: var(--blue-light);
}

.nx-combobox-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--gray-text);
    text-align: center;
}

/* SPEC-PES-002/EMP-002: componente NXTimeline reutilizável (comments + history
   + pipeline_moves). Layout: flex column, lista com scroll, footer fixo com
   textarea+botão. Comentários têm avatar; history e pipeline são linhas enxutas. */
.nx-tl {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #fff;
}

.nx-tl-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nx-tl-item {
    font-size: 13px;
}

.nx-tl-comment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
}

.nx-tl-avatar {
    width: 32px;
    height: 32px;
    background: var(--blue-light);
    color: var(--blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.nx-tl-body {
    flex: 1;
    min-width: 0;
}

.nx-tl-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.nx-tl-head .muted {
    color: var(--gray-text);
    font-size: 11px;
}

.nx-tl-text {
    background: var(--gray-bg);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}

.nx-tl-del {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--gray-soft);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}

.nx-tl-del:hover {
    color: var(--red);
}

.nx-tl-history,
.nx-tl-pipeline {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    background: var(--gray-bg);
    border-left: 3px solid var(--gray-line);
    border-radius: 4px;
    font-size: 12px;
    color: var(--gray-text);
}

.nx-tl-pipeline {
    border-left-color: var(--blue);
}

/* SPEC-PROSP-030 — célula Status sem quebra entre ícone e label. */
.msg-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.msg-pausada-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* SPEC-PROSP-029 — chips clicáveis pra inserir variáveis em templates. */
.nx-var-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0;
}

.nx-var-pill {
    display: inline-block;
    padding: 2px 6px;
    background: var(--gray-bg);
    border: 1px solid var(--gray-line);
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    color: var(--blue);
    cursor: pointer;
}

.nx-var-pill:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

/* SPEC-UI-015 — máscara de telefone com DDI. */
.nx-phone-input {
    display: flex;
    gap: 4px;
    align-items: stretch;
}

.nx-phone-input select.nx-phone-ddi {
    width: auto;
    min-width: 86px;
    flex-shrink: 0;
}

.nx-phone-input input.nx-phone-num {
    flex: 1;
    min-width: 0;
}

/* SPEC-EMP-003 / SPEC-PES-003 — atividades na timeline. */
.nx-tl-atividade {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    background: var(--gray-bg);
    border-left: 3px solid var(--orange);
    border-radius: 4px;
    font-size: 13px;
}

.nx-tl-atividade.nx-tl-atividade-done {
    border-left-color: var(--green);
    opacity: .88;
}

.nx-tl-atividade-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.nx-tl-atividade-body {
    flex: 1;
    min-width: 0;
}

.nx-tl-atividade-meta {
    font-size: 11.5px;
    margin-top: 2px;
}

.nx-tl-atividade-check {
    color: var(--green);
    font-weight: 700;
    margin-left: 4px;
}

.nx-tl-history-icon, .nx-tl-pipeline-icon {
    font-size: 13px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.nx-tl-history-body, .nx-tl-pipeline-body {
    flex: 1;
    min-width: 0;
}

.nx-tl-history-body b, .nx-tl-pipeline-body b {
    color: var(--text);
}

.nx-tl-arrow {
    color: var(--gray-soft);
    margin: 0 4px;
}

.nx-tl-ts {
    margin-left: 8px;
    font-size: 11px;
}

.nx-tl-footer {
    border-top: 1px solid var(--gray-line);
    padding: 10px 14px;
    display: flex;
    gap: 8px;
    background: #fff;
}

.nx-tl-input {
    flex: 1;
    border: 1px solid var(--gray-line);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 38px;
    max-height: 200px;
}

.nx-tl-input:focus {
    outline: none;
    border-color: var(--blue);
}

.nx-tl-send {
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.nx-tl-send:hover {
    background: var(--blue-dark, #1d4ed8);
}

.nx-tl-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* SPEC-PES-002/EMP-002: split do modal (form esquerda | timeline direita).
   Aplicado em pessoas e empresas (modal de edição). Em criação (sem id), a
   timeline esconde via JS (sem entidade) — modal volta a single-col automatico. */
.nx-entity-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.nx-entity-split .nx-entity-form {
    overflow-y: auto;
    padding: 20px 24px;
    border-right: 1px solid var(--gray-line);
}

/* Dentro do split, o form-actions sangra o padding 24px lateral do
   .nx-entity-form (em vez do -20px default do modal). Sem isso,
   ficaria uma faixa de 4px do background visível na lateral. */
.nx-entity-split .nx-entity-form > .form-actions,
.nx-entity-split .nx-entity-form > .modal-footer {
    margin: 20px -24px 0;
    padding: 14px 24px 14px;
}

/* Fix complementar ao UI-007: o sticky bottom:0 para na borda do padding-box
   do scroll container, então um padding-bottom no .nx-entity-form aparece como
   faixa transparente entre o footer e a borda visual. Zerar quando o form
   tem footer (mesma lógica do :has() do .modal). */
.nx-entity-split .nx-entity-form:has(> .form-actions),
.nx-entity-split .nx-entity-form:has(> .modal-footer) {
    padding-bottom: 0;
}

.nx-entity-split .nx-entity-timeline {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 900px) {
    .nx-entity-split {
        grid-template-columns: 1fr;
    }

    .nx-entity-split .nx-entity-form {
        border-right: none;
        border-bottom: 1px solid var(--gray-line);
    }
}

/* Modal compacto reusável (pessoa-modal, empresa-modal) precisa ficar
   ACIMA do modal pai (ex: atividade-modal) quando aberto via combobox
   entityEditMenu. `.modal-overlay` padrão tem z-index 50; pra modais
   compactos abertos por cima de outros modais, força z-index alto no
   overlay (position:fixed cria seu próprio contexto de empilhamento,
   então z-index no root não basta — precisa direto no overlay). */
.nx-pessoa-modal-root, .nx-empresa-modal-root {
    position: relative;
    z-index: 2000;
}

.nx-pessoa-modal-root > .modal-overlay,
.nx-empresa-modal-root > .modal-overlay {
    z-index: 2050;
}

/* SPEC-UI-013: menu de contexto do NXCombobox (botão direito num item ou
   no input com seleção). Visual igual ao .nx-context-menu do NXGrid pra
   coerência. Posicionamento via JS (fixed, top/left). */
.nx-cb-ctx-menu {
    position: fixed;
    display: none;
    background: #fff;
    border: 1px solid var(--gray-line);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    z-index: 1500;
    min-width: 180px;
    padding: 4px 0;
}

.nx-cb-ctx-menu.show {
    display: block;
}

.nx-cb-ctx-menu button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    text-align: left;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}

.nx-cb-ctx-menu button:hover {
    background: var(--blue-light);
    color: var(--blue);
}

/* NXGrid */
.nx-grid-counter {
    font-size: 12px;
    color: var(--gray-text);
}

.nx-grid-loader {
    text-align: center;
    padding: 14px;
    color: var(--gray-soft);
    font-size: 12px;
}

/* SPEC-UI-009: toolbar do grid (contador + botão de configurar colunas) */
.nx-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 8px;
    gap: 12px;
}

.nx-gear-btn {
    background: #fff;
    border: 1px solid var(--gray-line);
    color: var(--gray-text);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s, color .12s;
}

.nx-gear-btn:hover {
    background: var(--gray-bg);
    border-color: var(--blue);
    color: var(--blue);
}

/* Indicadores de sort no <th> do NXGrid */
.nx-grid-table-wrap th[data-sort] {
    cursor: pointer;
    user-select: none;
}

.nx-grid-table-wrap th[data-sort]:hover {
    background: var(--gray-bg);
}

.nx-sort-ind {
    margin-left: 4px;
    font-size: 11px;
    color: var(--gray-soft);
    opacity: .55;
}

.nx-sort-ind.nx-sort-asc,
.nx-sort-ind.nx-sort-desc {
    color: var(--blue);
    opacity: 1;
    font-weight: 700;
}

/* SPEC-UI-009: popover de configuração de colunas */
.nx-grid-config-popover {
    background: #fff;
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    width: min(320px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nx-grid-config-popover .nx-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-line);
    font-size: 13px;
}

.nx-grid-config-popover .nx-pop-close {
    background: none;
    border: none;
    color: var(--gray-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.nx-grid-config-popover .nx-pop-hint {
    margin: 0;
    padding: 8px 14px;
    font-size: 11px;
    color: var(--gray-text);
    background: var(--gray-bg);
    border-bottom: 1px solid var(--gray-line);
}

.nx-grid-config-popover .nx-pop-list {
    overflow-y: auto;
    padding: 6px 0;
    flex: 1;
}

.nx-grid-config-popover .nx-col-row {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    gap: 8px;
    font-size: 13px;
    cursor: grab;
}

.nx-grid-config-popover .nx-col-row.dragging {
    opacity: .45;
    background: var(--blue-light);
}

.nx-grid-config-popover .nx-col-row:hover {
    background: var(--gray-bg);
}

.nx-grid-config-popover .nx-col-handle {
    color: var(--gray-soft);
    font-size: 14px;
    width: 14px;
    text-align: center;
}

.nx-grid-config-popover .nx-pop-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--gray-line);
    text-align: right;
}

.nx-grid-config-popover .nx-pop-reset {
    background: none;
    border: none;
    color: var(--blue);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.nx-grid-config-popover .nx-pop-reset:hover {
    color: var(--blue-dark, #1d4ed8);
}

.nx-context-menu {
    position: absolute;
    background: #fff;
    border: 1px solid var(--gray-line);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
    min-width: 200px;
    z-index: 100;
    padding: 4px;
    display: none;
}

.nx-context-menu.show {
    display: block;
}

.nx-context-menu .nx-cm-header {
    font-size: 11px;
    color: var(--gray-text);
    padding: 6px 10px;
    border-bottom: 1px solid var(--gray-line);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .04em;
}

.nx-context-menu button {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
}

.nx-context-menu button:hover:not(:disabled) {
    background: var(--blue-light);
    color: var(--blue);
}

.nx-context-menu button:disabled {
    color: var(--gray-soft);
    cursor: not-allowed;
}

/* SPEC-DEV-006/009: menu de contexto multi-nível (hover 200ms abrir, 150ms fechar).
   Estilos globais — qualquer .nx-context-menu pode ter sub-itens via .has-sub. */
.nx-cm-header {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-text);
    background: var(--gray-bg);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--gray-line);
}

.nx-cm-item {
    position: relative;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    user-select: none;
    border-bottom: 1px solid var(--gray-line);
}

.nx-cm-item:last-child {
    border-bottom: none;
}

.nx-cm-item.has-sub::after {
    content: '▸';
    font-size: 11px;
    margin-left: 8px;
    color: var(--gray-text);
}

.nx-cm-item.has-sub.open {
    color: var(--blue);
    background: var(--blue-light);
}

.nx-cm-item:not(.has-sub) {
    cursor: pointer;
}

.nx-cm-item:not(.has-sub):hover {
    background: var(--blue-light);
    color: var(--blue);
}

.nx-cm-submenu {
    position: absolute;
    top: -1px;
    left: 100%;
    background: #fff;
    border: 1px solid var(--gray-line);
    border-radius: 6px;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    display: none;
    z-index: 1001;
}

.nx-cm-item.open > .nx-cm-submenu {
    display: block;
}

.nx-cm-submenu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-size: 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text);
}

.nx-cm-submenu button:hover {
    background: var(--blue-light);
    color: var(--blue);
}

.nx-cm-submenu button.danger {
    color: var(--red);
}

/* nx-toggle-box — caixa destacada com checkbox/radio dentro.
   Promovida de story-modal/epic-modal pro design system. Use no padrão:
     <div class="nx-toggle-box">
       <label>
         <input type="checkbox" …>
         <span>📌 Texto</span>
       </label>
     </div>
   Quando o input fica checked, a caixa ganha borda azul + bg azul claro. */
.nx-toggle-box {
    border: 1px solid var(--gray-line);
    border-radius: 6px;
    padding: 8px 10px;
    display: inline-block;
}

.nx-toggle-box label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    margin: 0;
}

.nx-toggle-box input[type="checkbox"], .nx-toggle-box input[type="radio"] {
    width: auto;
    margin: 0;
}

.nx-toggle-box:has(input:checked) {
    border-color: var(--blue);
    background: var(--blue-light);
}

/* SPEC-DOC-001 — Callouts (admonitions) usados no editor de documentação
   e reutilizáveis em qualquer página. 5 variantes seguindo padrão Docusaurus. */
.nx-callout {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-left: 4px solid var(--gray-soft);
    background: #fafbfc;
    border-radius: 6px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
}

/* Botão flutuante de remover bloco no editor de documentação (SPEC-DOC-001).
   Aparece no canto superior direito de qualquer bloco no hover. Ring branco
   garante contraste tanto em blocos claros quanto em code blocks escuros. */
.doc-block-remove {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--gray-line);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5;
    transition: background .15s, color .15s, border-color .15s;
}

.doc-block-remove:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* Context menu (right-click) pra adicionar/remover linha/coluna em tabelas do
   editor de documentação (SPEC-DOC-001). Aparece posicionado nas coordenadas
   do clique direito sobre uma célula. */
.doc-table-menu {
    position: fixed;
    z-index: 1000;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--gray-line);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
    font-size: 13px;
}

.doc-table-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 6px 14px;
    font: inherit;
    color: var(--text);
    cursor: pointer;
}

.doc-table-menu-item:hover {
    background: var(--gray-bg);
}

.doc-table-menu-item.is-danger {
    color: var(--red);
}

.doc-table-menu-item.is-danger:hover {
    background: var(--red);
    color: #fff;
}

.doc-table-menu-sep {
    height: 1px;
    background: var(--gray-line);
    margin: 4px 0;
}

.nx-callout::before {
    content: attr(data-icon);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.nx-callout .nx-callout-body {
    flex: 1;
}

.nx-callout .nx-callout-title {
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.nx-callout--info {
    border-left-color: var(--blue);
    background: var(--blue-light);
}

.nx-callout--info .nx-callout-title {
    color: var(--blue-dark);
}

.nx-callout--dica {
    border-left-color: var(--green);
    background: #ecfdf5;
}

.nx-callout--dica .nx-callout-title {
    color: var(--green);
}

.nx-callout--importante {
    border-left-color: var(--orange);
    background: #fff7ed;
}

.nx-callout--importante .nx-callout-title {
    color: #9a3412;
}

.nx-callout--atencao {
    border-left-color: var(--red);
    background: #fef2f2;
}

.nx-callout--atencao .nx-callout-title {
    color: var(--red);
}

.nx-callout--nota {
    border-left-color: var(--gray-soft);
    background: #f8fafc;
}

.nx-callout--nota .nx-callout-title {
    color: var(--gray-text);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE — breakpoint principal ≤768px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Layout: sidebar vira overlay, conteúdo ocupa 100% da largura */
  .main {
    margin-left: 0 !important;
    padding: 8px;
    padding-top: 56px;
  }

  /* Grids de formulário → coluna única */
  .row-2,
  .row-3 {
    grid-template-columns: 1fr !important;
  }

  /* Page header empilha verticalmente */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
  }

  .page-header h1 {
    font-size: 18px;
  }

  .page-header .actions {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Toolbar: quebra em múltiplas linhas */
  .toolbar {
    flex-wrap: wrap;
  }

  .toolbar input[type=search] {
    max-width: 100%;
    flex: 1;
    min-width: 140px;
  }

  /* Tabelas: scroll horizontal */
  .nx-grid-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modal: bottom sheet (abre pela base da tela) */
  .modal-overlay {
    align-items: flex-end;
  }

  .modal {
    width: 100% !important;
    max-height: 88vh;
    border-radius: var(--radius) var(--radius) 0 0;
    margin: 0;
  }

  /* Split modal (pessoa/empresa): empilha form + timeline */
  .nx-entity-split {
    grid-template-columns: 1fr !important;
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Dropdown de notificações: quase tela toda */
  .nx-topbar .notif-dropdown {
    width: calc(100vw - 16px);
    right: -4px;
  }

  /* Toast: largura total */
  .toast {
    bottom: 12px;
    right: 8px;
    left: 8px;
    max-width: none;
  }

  /* Kanban page: padding-top para hamburger */
  body.kanban-page .main {
    padding-top: 56px;
  }
}