/*
 * funil.css — o Kanban do funil de vendas (SP-CRM-01).
 *
 * A cor de cada coluna vem do BANCO (`pipeline_stages.color`, hexa conferido
 * por CHECK) e chega como `--cor-etapa` no atributo `style` da coluna. Ela é
 * só o fio no topo e a borda do cartão: o texto continua nos tokens da
 * Clareira, que já passaram pelo contraste nos dois temas (TokensDeCorTest).
 */

.funil-acoes {
    display: flex;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.funil-indicadores {
    margin-bottom: 1rem;
}

/*
 * ⚠️ `width: auto` NOS BOTÕES FORA DE FORMULÁRIO. O layout tem a regra global
 * `button { width: 100% }` (botão de submissão), e todo botão solto a herda —
 * foi assim que o seletor de idioma (17/09) e, aqui, o "Novo negócio" saíram
 * esticados. Só a foto pega: nenhuma asserção quebra.
 */
.funil-acoes button,
.funil-adicionar,
.funil-cartao-setas button,
.funil-teto button {
    width: auto;
}

/* ---- o quadro ------------------------------------------------------- */
/* `min-width: 0` + `max-width: 100%`: sem eles, a grade de colunas é item de
   um flex e EMPURRA a página — no celular, tudo passava da borda direita. */
.funil-quadro {
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: start;
}

.funil-coluna {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 12rem;
    background: var(--zen-surface-sunken, var(--zen-surface));
    border: 1px solid var(--zen-border);
    border-top: 3px solid var(--cor-etapa, var(--zen-border-strong));
    border-radius: var(--raio-m, 10px);
    padding: 0.6rem;
}

.funil-coluna.funil-alvo {
    outline: 2px dashed var(--cor-etapa, var(--zen-border-strong));
    outline-offset: -4px;
}

.funil-coluna-topo {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.funil-coluna-topo h2 {
    font-size: var(--fs-normal, 0.9375rem);
    margin: 0;
    flex: 1;
}

.funil-contagem {
    min-width: 1.4rem;
    text-align: center;
    border-radius: 999px;
    background: var(--zen-surface);
    border: 1px solid var(--zen-border);
    padding: 0 0.35rem;
}

.funil-contagem,
.funil-prob {
    font-size: var(--fs-micro, 0.75rem);
    color: var(--zen-text-soft);
    font-variant-numeric: tabular-nums;
}

.funil-cartoes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.funil-cartao {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--zen-surface);
    border: 1px solid var(--zen-border);
    border-left: 3px solid var(--cor-etapa, var(--zen-border-strong));
    border-radius: var(--raio-s, 6px);
    padding: 0.5rem 0.6rem;
    cursor: grab;
}

.funil-cartao.funil-arrastando {
    opacity: 0.5;
}

.funil-cartao-titulo {
    all: unset;
    text-align: left;
    font-weight: 600;
    color: var(--zen-text-main);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.funil-cartao-titulo:hover,
.funil-cartao-titulo:focus-visible {
    text-decoration: underline;
}

.funil-cartao-titulo:focus-visible {
    outline: 2px solid var(--zen-focus, currentColor);
    outline-offset: 2px;
}

.funil-cartao-cliente,
.funil-cartao-meta {
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
}

.funil-cartao-valor {
    font-variant-numeric: tabular-nums;
    font-family: var(--fonte-numeros, system-ui, sans-serif);
}

.funil-cartao-setas {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}

.funil-cartao-setas .acao {
    padding: 0.1rem 0.45rem;
}

.funil-vazio {
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
    padding: 0.5rem 0;
}

.funil-teto {
    font-size: var(--fs-micro, 0.75rem);
    color: var(--zen-text-soft);
}

.funil-adicionar {
    align-self: flex-start;
}

/* As colunas de fim são registro do mês, não fila de trabalho: mais quietas. */
.funil-ganha .funil-cartao,
.funil-perdida .funil-cartao {
    cursor: default;
}

/* ---- a gaveta do negócio -------------------------------------------- */
.gaveta-secao {
    border-top: 1px solid var(--zen-border);
    margin-top: 1rem;
    padding-top: 0.75rem;
}

.funil-itens {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.funil-itens li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--zen-border);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .funil-quadro {
        grid-auto-columns: 85%;
        scroll-snap-type: x mandatory;
    }

    .funil-coluna {
        scroll-snap-align: start;
    }
}

/* ---- a tabela ------------------------------------------------------- */
/* A grade divide as colunas por igual; o título do negócio é a coluna que se
   lê primeiro e recebe mais espaço — e, se ainda não couber, reticências em
   vez de corte seco no meio da palavra. */
.funil-tabela th:first-child,
.funil-tabela td:first-child {
    width: 22%;
}

.funil-tabela .funil-cartao-titulo {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- o caminho do negócio (CRM-30) ----------------------------------- */
.funil-caminho {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.funil-caminho li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
}

/* O seletor de ano do painel não encosta nos cartões logo abaixo. */
.seletor-de-periodo + .funil-indicadores {
    margin-top: 0.75rem;
}

/* SP-CRM-02: o resultado da tarefa concluída ocupa a linha inteira, embaixo. */
.tarefa-resultado {
    flex-basis: 100%;
}

/* As abas do módulo são LINKS na tela de Tarefas (rota própria) e botões no
   funil: o mesmo desenho nos dois, sem o sublinhado de link. A aba da página
   atual fica "ligada" como o botão com aria-pressed. */
.avisos-abas a.filtro {
    text-decoration: none;
}

.avisos-abas a.filtro[aria-current='page'] {
    background: var(--zen-primary);
    color: var(--zen-on-primary);
    border-color: var(--zen-primary);
}

/* ---- a lista de tarefas (SP-CRM-02) ---------------------------------- */
.tarefas-lista {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.tarefas-lista li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--zen-border);
}

.tarefas-lista li button {
    width: auto;
    margin-left: auto;
}

.tarefa-titulo {
    font-weight: 600;
    color: var(--zen-text-main);
}

.tarefa-meta {
    font-size: var(--fs-pequeno, 0.8125rem);
    color: var(--zen-text-soft);
}

.tarefa-feita .tarefa-titulo {
    color: var(--zen-text-soft);
    text-decoration: line-through;
}

/* CRM-07 — o vendedor escolhido no ranking. O aria-current diz ao leitor de
   tela; a cor só reforça. */
.linha-escolhida td {
    background: var(--zen-accent-soft);
}

/* O filtro de vendedor do painel respira antes dos cartões (a foto o pegou
   colado no "Ganhos"). */
.funil-vendedor {
    margin: 0.5rem 0 1rem;
}

/* CRM-32 — o projeto que o ganho criou, no cartão do negócio ganho. */
.funil-cartao-projeto {
    font-size: 0.78rem;
    color: var(--zen-accent-text);
}

/* CRM-27 — a tela de funis e etapas, e o seletor de funil do quadro. */
.config-funis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
}

.config-form {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
}

.config-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.config-acoes .acao,
.config-acoes button {
    width: auto;
}

.funil-escolha select {
    width: auto;
    min-width: 10rem;
}

/* CRM-43/FIN-38 — a agenda de tarefas: calendário do mês e quadro por prazo. */
.agenda-cabeca {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.agenda-cabeca .acao {
    width: auto;
}

.agenda-mes {
    margin: 0;
    font-size: 1.05rem;
}

.agenda-grade {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.agenda-grade th {
    padding: 0.35rem;
    color: var(--zen-text-soft);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
}

.agenda-grade td {
    height: 6.5rem;
    padding: 0.3rem;
    vertical-align: top;
    border: 1px solid var(--zen-border);
}

.agenda-fora {
    background: var(--zen-bg);
    color: var(--zen-text-soft);
}

.agenda-hoje {
    outline: 2px solid var(--zen-accent);
    outline-offset: -2px;
}

.agenda-numero {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
}

.agenda-tarefa {
    display: block;
    margin-top: 0.2rem;
    padding: 0.1rem 0.3rem;
    overflow: hidden;
    border-radius: 4px;
    background: var(--zen-accent-soft);
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.agenda-atrasada {
    background: var(--zen-negative-bg);
    color: var(--zen-negative);
}

.agenda-feita {
    opacity: 0.6;
    text-decoration: line-through;
}

.agenda-quadro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.agenda-coluna {
    padding: 0.5rem;
    border-radius: var(--raio-m);
    background: var(--zen-bg);
}

.agenda-coluna h3 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.agenda-coluna-atrasadas h3 {
    color: var(--zen-negative);
}

.agenda-cartao {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--zen-border);
    border-radius: var(--raio-p);
    background: var(--zen-surface);
}

.agenda-cartao .acao {
    width: auto;
    justify-self: start;
}

/* No celular a grade de 7 colunas não cabe: o mês vira uma lista de dias. */
@media (max-width: 40rem) {
    .agenda-grade thead {
        display: none;
    }

    .agenda-grade,
    .agenda-grade tbody,
    .agenda-grade tr,
    .agenda-grade td {
        display: block;
    }

    .agenda-grade td {
        height: auto;
    }

    .agenda-fora {
        display: none !important;
    }
}

/* CRM-09 — o modo TV: tela cheia, fundo escuro, letra para ler a três metros.
   Sem nada clicável. Escuro de propósito em qualquer tema: monitor de sala
   fica ligado o dia inteiro, e fundo claro cansa e marca a tela. */
.tv {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    padding: 3vh 4vw;
    background: #0b1f33;
    color: #f3efe6;
}

.tv-cabeca {
    display: flex;
    justify-content: space-between;
    font-size: clamp(1rem, 2.2vw, 2rem);
    opacity: 0.85;
}

.tv-empresa {
    font-weight: 700;
}

.tv-painel h1 {
    margin: 2vh 0 4vh;
    font-size: clamp(1.6rem, 4vw, 4rem);
}

.tv-numeros,
.tv-etapas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 3vw;
}

.tv-numeros div,
.tv-etapa {
    display: grid;
    gap: 0.5vh;
    padding: 2vh 2vw;
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.06);
}

.tv-numeros span,
.tv-etapa span {
    font-size: clamp(1rem, 1.8vw, 1.8rem);
    opacity: 0.8;
}

.tv-numeros b,
.tv-etapa b {
    font-size: clamp(2.5rem, 7vw, 7rem);
    line-height: 1;
}

.tv-numeros small,
.tv-etapa small,
.tv-ranking small {
    font-size: clamp(0.9rem, 1.4vw, 1.4rem);
    opacity: 0.75;
}

.tv-etapa-ganha b {
    color: #7fd1a2;
}

.tv-etapa-perdida b {
    color: #f0a39a;
}

.tv-ranking {
    display: grid;
    gap: 2vh;
    margin: 0;
    padding-left: 1.5em;
    font-size: clamp(1.4rem, 3vw, 3rem);
}

.tv-ranking li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem 2rem;
}

.tv-ranking b {
    margin-left: auto;
}

.tv-vazio {
    font-size: clamp(1.4rem, 3vw, 3rem);
    opacity: 0.8;
}

.tv-rodape {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.tv-ponto {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.25);
}

.tv-ponto-atual {
    background: #f3efe6;
}