/* Leads (mod-leads). Prefixo ld-.

   Só vive aqui o que é MESMO deste módulo: o funil (colunas e cartões), o menu do
   cartão, a ficha da lead e a importação. Cabeçalho, KPIs, modais, campos e combobox
   vêm do design system e não se re-escrevem (a lição da auditoria do mod-projetos).

   Regras de cor da casa: o vermelho é SÓ o sólido (#DA0A0D) - nada de fundos
   rosados; o selecionado é pílula vermelha com texto branco. As etapas distinguem-se
   por um ponto de cor, não por faixas de fundo. */

.ld-lst { min-width: 0; }

/* ---------- pontos de etapa ---------- */
.ld-ponto {
    display: inline-block; width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0;
    background: var(--ink-400, #9A9294);
}
.ld-ponto[data-cor="blue"] { background: var(--info-500, #3B82F6); }
.ld-ponto[data-cor="amber"] { background: var(--warning-500, #F59E0B); }
.ld-ponto[data-cor="green"] { background: var(--success-500, #15803D); }
.ld-ponto[data-cor="red"] { background: var(--brand-500, #DA0A0D); }

/* ---------- barra: vistas + filtros ---------- */
.ld-barra {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 16px; margin: 4px 0 14px;
}
.ld-vistas { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ld-vista, .ld-chip, .ld-tipo, .ld-etapa-tab {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 14px;
    border: 1px solid var(--border, #E5E1E2); border-radius: 9999px;
    background: var(--surface, #fff); color: var(--text-2, #4A4245);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ld-vista:hover, .ld-chip:hover, .ld-tipo:hover, .ld-etapa-tab:hover { border-color: var(--border-strong, #CFC9CB); }
.ld-vista.is-active,
.ld-chip[aria-pressed="true"],
.ld-tipo[aria-checked="true"],
.ld-etapa-tab[aria-selected="true"] {
    background: var(--primary-500, #DA0A0D); border-color: var(--primary-500, #DA0A0D); color: #fff;
}
.ld-vista.is-active .ld-ponto, .ld-etapa-tab[aria-selected="true"] .ld-ponto,
.ld-chip[aria-pressed="true"] .ld-ponto { box-shadow: 0 0 0 2px #fff; }
.ld-vista-n, .ld-etapa-n {
    min-width: 20px; padding: 0 6px; border-radius: 9999px; text-align: center;
    font-size: 11px; line-height: 18px; background: var(--neutral-100, #F3F1F2); color: var(--text-2, #4A4245);
}
.ld-vista.is-active .ld-vista-n, .ld-etapa-tab[aria-selected="true"] .ld-etapa-n { background: rgba(255,255,255,.22); color: #fff; }
.ld-vista-n:empty { display: none; }

/* A barra de filtros é o `.ds-filters` das outras listas (caeaf1b9, 29/09/2026): grelha,
   alturas e botões vêm do design system — aqui não se mexe na forma dela. */

/* ---------- funil ---------- */
.ld-zona { min-width: 0; }
.ld-quadro {
    /* 180 px de mínimo: é o que põe as cinco colunas lado a lado num portátil de 1366
       com o menu aberto. Abaixo disso rola para o lado em vez de esmagar os cartões. */
    display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 10px;
    align-items: start; overflow-x: auto; padding-bottom: 6px;
}
.ld-coluna {
    display: flex; flex-direction: column; min-width: 0;
    border: 1px solid rgba(15, 12, 41, .06); border-radius: 18px;
    background: var(--surface-alt, #F7F6F6); transition: border-color .15s ease, box-shadow .15s ease;
}
.ld-coluna.is-alvo { border-color: var(--primary-500, #DA0A0D); box-shadow: 0 0 0 3px rgba(218, 10, 13, .12); }
.ld-col-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 12px 10px 8px 12px; min-height: 44px; }
.ld-col-tit {
    margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-2, #4A4245);
}
.ld-col-n { font-size: 12px; font-weight: 700; color: var(--text-3, #6E6668); font-variant-numeric: tabular-nums; }
/* A soma vai para a linha de baixo: numa coluna de 180 px, «QUALIFICADA 1 12 000 €» e
   o botão + na mesma linha atropelavam-se. */
.ld-col-soma { order: 10; flex: 1 0 100%; padding-left: 16px; font-size: 12px; font-weight: 600; color: var(--text-3, #6E6668); font-variant-numeric: tabular-nums; }
.ld-col-mais { margin-left: auto; }
.ld-col-corpo { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; min-height: 64px; }
@media (min-width: 768px) {
    .ld-col-corpo { max-height: calc(100vh - 330px); min-height: 120px; overflow-y: auto; }
}
.ld-col-vazia { margin: 6px 4px; font-size: 12.5px; color: var(--text-3, #6E6668); }

/* ---------- cartão ---------- */
.ld-cartao {
    position: relative; flex-shrink: 0;       /* sem isto, numa coluna com scroll os cartões encolhiam e o nome saía cortado */
    display: flex; flex-direction: column; gap: 6px;
    padding: 11px 12px; border-radius: 14px; overflow: hidden;
    background: var(--surface, #fff); border: 1px solid rgba(15, 12, 41, .07);
    box-shadow: 0 1px 2px rgba(15, 12, 41, .04), 0 4px 14px rgba(15, 12, 41, .04);
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ld-cartao[draggable="true"] { cursor: grab; }
.ld-cartao:hover { border-color: rgba(15, 12, 41, .14); box-shadow: 0 2px 4px rgba(15, 12, 41, .05), 0 8px 22px rgba(15, 12, 41, .07); transform: translateY(-1px); }
.ld-cartao:focus-visible { outline: 2px solid var(--primary-500, #DA0A0D); outline-offset: 2px; }
.ld-cartao.is-a-arrastar { opacity: .45; }
/* Parada: um fio âmbar na margem em vez de um bloco de aviso - diz o mesmo sem tomar
   conta do cartão (a mesma escolha da Agiliz). */
.ld-cartao.is-parada::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--warning-500, #F59E0B);
}
.ld-cartao-topo { display: flex; align-items: flex-start; gap: 8px; }
.ld-cartao-txt { flex: 1 1 auto; min-width: 0; }
.ld-cartao-tit { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text-1, #1B1618); overflow-wrap: anywhere; }
.ld-cartao-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3, #6E6668); overflow-wrap: anywhere; }
/* Com rato, os botões aparecem POR CIMA do canto do cartão ao passar: reservar-lhes o
   lugar (mesmo invisíveis) partia o nome da empresa em três linhas. Em toque não há
   passar por cima - ficam sempre à vista e no seu lugar. */
.ld-cartao-acoes { display: flex; gap: 2px; flex-shrink: 0; }
@media (hover: hover) {
    .ld-cartao-acoes {
        position: absolute; top: 6px; right: 6px; padding: 2px; border-radius: 9999px;
        background: var(--surface, #fff); box-shadow: 0 1px 6px rgba(15, 12, 41, .14);
        opacity: 0; pointer-events: none; transition: opacity .15s ease;
    }
    .ld-cartao:hover .ld-cartao-acoes, .ld-cartao:focus-within .ld-cartao-acoes { opacity: 1; pointer-events: auto; }
}
.ld-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 9999px;
    border: 1px solid transparent; background: transparent; color: var(--text-3, #6E6668); cursor: pointer;
}
.ld-mini:hover { background: var(--neutral-100, #F3F1F2); color: var(--text-1, #1B1618); }
.ld-mini:focus-visible { outline: 2px solid var(--primary-500, #DA0A0D); outline-offset: 1px; }

.ld-selos { display: flex; flex-wrap: wrap; gap: 4px; }
.ld-selo {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px;
    font-size: 11px; font-weight: 700; line-height: 16px;
    background: var(--neutral-100, #F3F1F2); color: var(--text-2, #4A4245);
}
.ld-selo--parada { background: var(--warning-50, #FFF7E6); color: var(--warning-700, #92400E); }
.ld-selo--atraso { background: #fff; color: var(--brand-500, #DA0A0D); box-shadow: inset 0 0 0 1px var(--brand-500, #DA0A0D); }

.ld-cartao-dono { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; color: var(--text-3, #6E6668); min-width: 0; }
.ld-cartao-dono span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-cliente, .ld-criar-cliente {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    font-size: 12px; font-weight: 700;
}
.ld-cliente { color: var(--success-700, #166534); text-decoration: none; }
.ld-cliente:hover { text-decoration: underline; }
.ld-criar-cliente {
    padding: 4px 10px; border-radius: 9999px; border: 0; cursor: pointer;
    background: var(--primary-500, #DA0A0D); color: #fff; font: inherit; font-size: 12px; font-weight: 700;
}
.ld-criar-cliente:hover { filter: brightness(.92); }
.ld-cartao-rodape { display: flex; align-items: center; gap: 8px; }
.ld-cartao-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 11.5px; color: var(--text-3, #6E6668); }
.ld-valor { font-weight: 800; color: var(--text-1, #1B1618); font-variant-numeric: tabular-nums; }
.ld-sep { color: var(--ink-300, #BDB6B8); }

.ld-av {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 9999px;
    background: var(--ink-800, #2B2426); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
.ld-av--vazio { background: transparent; color: var(--ink-400, #9A9294); border: 1px dashed var(--ink-300, #BDB6B8); }
.ld-av--mini { width: 20px; height: 20px; font-size: 9px; }

/* ---------- telemóvel: uma etapa de cada vez ---------- */
.ld-etapas-movel { display: none; }
@media (max-width: 767px) {
    .ld-etapas-movel:not([hidden]) {
        display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 2px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .ld-etapas-movel::-webkit-scrollbar { display: none; }
    .ld-etapa-tab { flex-shrink: 0; }
    .ld-quadro { display: block; overflow: visible; }
    .ld-coluna { display: none; background: transparent; border: 0; }
    .ld-coluna.is-atual { display: flex; }
    .ld-coluna .ld-col-cab { padding: 0 2px 8px; }
    .ld-col-corpo { padding: 0; }
}

/* ---------- menu do cartão ---------- */
.ld-menu {
    position: fixed; z-index: 9999; min-width: 230px; max-width: calc(100vw - 16px); max-height: 70vh; overflow-y: auto;
    padding: 6px; border-radius: 14px; background: var(--surface, #fff);
    border: 1px solid rgba(15, 12, 41, .08); box-shadow: 0 12px 36px rgba(15, 12, 41, .16);
}
.ld-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px;
    border: 0; border-radius: 9px; background: transparent; color: var(--text-1, #1B1618);
    font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.ld-menu button:hover, .ld-menu button:focus-visible { background: var(--neutral-100, #F3F1F2); outline: none; }
.ld-menu button[aria-checked="true"] { font-weight: 700; }
.ld-menu button svg:last-child:not(:first-child) { margin-left: auto; }
.ld-menu-grupo { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3, #6E6668); }
.ld-menu-rol { max-height: 220px; overflow-y: auto; }
.ld-menu-sep { height: 1px; margin: 6px 4px; background: var(--border, #E5E1E2); }
.ld-menu .ld-menu-perigo { color: var(--brand-500, #DA0A0D); }

/* ---------- follow-ups ---------- */
.ld-follows { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 1100px) { .ld-follows { grid-template-columns: 1fr 1fr; } }
.ld-follow { padding: 0; overflow: hidden; }
.ld-follow-cab { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.ld-follow-cab h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-1, #1B1618); }
.ld-follow-lista { list-style: none; margin: 0; padding: 0 8px 8px; }
.ld-follow-linha { display: flex; align-items: center; gap: 8px; padding: 2px 0; border-top: 1px solid var(--border, #EEEAEB); }
.ld-follow-linha:first-child { border-top: 0; }
.ld-follow-abrir {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 9px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; font: inherit;
}
.ld-follow-abrir:hover { background: var(--neutral-50, #FAF9F9); }
.ld-follow-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ld-follow-txt strong { font-size: 13.5px; color: var(--text-1, #1B1618); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-follow-txt span { font-size: 12px; color: var(--text-3, #6E6668); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-follow-selos { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ld-follow .ld-col-vazia { padding: 0 16px 14px; margin: 0; }
@media (max-width: 600px) { .ld-follow-selos { display: none; } }

.ld-vazio { margin-top: 12px; }

/* ---------- modais ---------- */
.ld-modal-head-txt { min-width: 0; flex: 1 1 auto; }
body.ld-modal-aberto { overflow: hidden; }
.ld-dica { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3, #6E6668); }
.ld-ficha { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 960px) { .ld-ficha { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.ld-ficha-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ld-bloco { min-width: 0; padding: 14px 16px 16px; border: 1px solid rgba(15, 12, 41, .07); border-radius: 16px; background: var(--surface, #fff); }
.ld-bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ld-bloco-cab h3 { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2, #4A4245); }
.ld-bloco--etapa { margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.ld-etapa-atual { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ld-etapa-atual .ld-dica { margin: 0; }
.ld-mover-para { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-ganha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--success-700, #166534); font-weight: 600; }
.ld-ganha--falta { color: var(--text-1, #1B1618); }
.ld-ganha .ds-btn { margin-left: auto; }
.ld-contactos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ld-contacto {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 9999px;
    border: 1px solid var(--border, #E5E1E2); background: var(--surface, #fff);
    color: var(--text-1, #1B1618); font-size: 13px; font-weight: 600; text-decoration: none; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-contacto:hover { border-color: var(--border-strong, #CFC9CB); }

/* atividades */
.ld-nova-ativ { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ld-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-tipo { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.ld-nova-ativ-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-nova-ativ-linha .ds-input:first-child { flex: 1 1 200px; min-width: 0; }
.ld-at-data { flex: 0 1 200px; min-width: 0; }
.ld-ativ-grupo { margin: 12px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3, #6E6668); }
.ld-ativs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-ativ { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; border-radius: 10px; }
.ld-ativ:hover { background: var(--neutral-50, #FAF9F9); }
.ld-ativ-check, .ld-ativ-ico {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 22px; height: 22px; margin-top: 1px; border-radius: 9999px;
}
.ld-ativ-check { border: 2px solid var(--ink-300, #BDB6B8); background: #fff; color: #fff; cursor: pointer; padding: 0; }
.ld-ativ-check[aria-pressed="true"] { background: var(--success-500, #15803D); border-color: var(--success-500, #15803D); }
.ld-ativ-ico { background: var(--neutral-100, #F3F1F2); color: var(--text-2, #4A4245); }
.ld-ativ-txt { flex: 1 1 auto; min-width: 0; }
.ld-ativ-tit { font-size: 13.5px; color: var(--text-1, #1B1618); overflow-wrap: anywhere; }
.ld-ativ-tipo { margin-right: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3, #6E6668); }
.ld-ativ-notas { margin-top: 2px; font-size: 12.5px; color: var(--text-2, #4A4245); white-space: pre-wrap; overflow-wrap: anywhere; }
.ld-ativ-meta { margin-top: 2px; font-size: 11.5px; color: var(--text-3, #6E6668); }
.ld-ativ.is-feita .ld-ativ-tit { color: var(--text-2, #4A4245); }
.ld-ativ.is-atrasada .ld-ativ-meta strong { color: var(--brand-500, #DA0A0D); }

/* conversão e importação */
.ld-vistas--modal { margin-bottom: 12px; }
.ld-erros { margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: var(--brand-500, #DA0A0D); }
.ld-erros li { margin-bottom: 3px; }
.ld-feito { text-align: center; padding: 18px 8px 6px; }
.ld-feito h3 { margin: 10px 0 4px; font-size: 18px; color: var(--text-1, #1B1618); }
.ld-feito-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 9999px;
    background: var(--success-50, #ECFDF3); color: var(--success-700, #166534);
}
.ld-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ld-imp-res {
    margin-top: 14px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600;
    background: var(--neutral-50, #FAF9F9); color: var(--text-1, #1B1618); border: 1px solid var(--border, #E5E1E2);
}
.ld-imp-res--ok { background: var(--success-50, #ECFDF3); color: var(--success-800, #14532D); border-color: var(--success-200, #BBF7D0); }
.ld-imp-res--aviso { background: var(--warning-50, #FFF7E6); color: var(--warning-700, #92400E); border-color: var(--warning-100, #FDECC8); }
.ld-imp-res--erro { background: #fff; color: var(--brand-500, #DA0A0D); border-color: var(--brand-500, #DA0A0D); }

/* Paisagem em telemóvel: o cabeçalho e o rodapé da modal têm de continuar visíveis. */
@media (max-height: 520px) and (orientation: landscape) {
    .ld-modal-overlay .ds-modal { max-height: 96vh; }
    .ld-modal-overlay .ds-modal-body { max-height: calc(96vh - 118px); overflow-y: auto; }
}