/* =====================================================================================
   EFICÁCIA CRM — mod-clientes.css
   Extras do módulo Clientes que o design system (ds-) não cobre. Prefixo: mcl-
   Mobile-first; sem larguras fixas; zero scroll horizontal.
   ===================================================================================== */

/* ---------- genéricos ---------- */

/* o atributo hidden tem de ganhar SEMPRE às classes ds- com display próprio
   (ex.: .ds-pagination { display:flex } anulava o hidden).
   O modal é appendado ao body, por isso também leva a classe .mcl. */
.mcl [hidden] { display: none !important; }

/* `--neutral-300` (→ `--ink-300`) é cor de borda: em texto dava 1.63:1.
   `--text-3` sobe para 5.63:1 sem deixar de ser o valor «mais apagado» da
   linha — a hierarquia faz-se pelo peso, não pelo apagamento. */
.mcl .mcl-vazio {
    color: var(--text-3);
    font-weight: 500;
}

.mcl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px 10px;
}

.mcl-toolbar--direita {
    justify-content: flex-end;
    padding: 0 0 12px;
}

/* linhas clicáveis (lista, contratos, comentários) */
.mcl-linha { cursor: pointer; }
.mcl-linha:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* indicador de ordenação */
.mcl-ord-ind { font-size: 11px; }

/* tabelas listradas (striped), sem bordas verticais — paridade Boopgest.
   Só em desktop: em mobile as linhas viram cartões (design system). */
@media (min-width: 768px) {
    .mcl .ds-table tbody tr:nth-child(even) { background: var(--neutral-50); }
    .mcl .ds-table tbody tr:hover { background: var(--neutral-100); }
}

/* truncar e-mails compridos na tabela (desktop) */
@media (min-width: 768px) {
    .mcl-td-email {
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---------- variantes de botão da paridade Boopgest ----------
   O design system só tem primary (vermelho Eficácia) / secondary / danger / ghost.
   A spec exige "Procurar"/"Guardar"/"Adicionar Comentário" VERDES e "Editar"
   warning — variantes locais com os tokens globais de sucesso/aviso. */
/* `--success-700` e não `--500` no repouso: branco sobre #10B981 dá 2.54:1
   e isto é um botão de AÇÃO PRIMÁRIA («Procurar», «Guardar») — o rótulo
   tem de se ler. #047857 dá 5.55:1 e continua inequivocamente verde, que é
   o que a paridade com o BoopGest pede (a família da cor, não o hex). */
.mcl .ds-btn.mcl-btn--verde,
.ds-btn.mcl-btn--verde {
    background: var(--success-700, #047857);
    border-color: var(--success-700, #047857);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.25);
}
.ds-btn.mcl-btn--verde:hover {
    background: var(--success-800, #065F46);
    border-color: var(--success-800, #065F46);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.ds-btn.mcl-btn--verde:active {
    background: var(--success-700, #047857);
    border-color: var(--success-700, #047857);
    transform: scale(0.97);
    box-shadow: none;
}

/* O âmbar claro com texto branco era o pior contraste da app: branco sobre
   #F59E0B dá 2.14:1 — o rótulo do botão «Editar» era praticamente
   ilegível. Âmbar com branco só passa AA a partir do 700; a rampa desce um
   degrau em cada estado e mantém-se a mesma família de cor. */
.mcl .ds-btn.mcl-btn--aviso,
.ds-btn.mcl-btn--aviso {
    background: var(--warning-700, #b45309);
    border-color: var(--warning-700, #b45309);
    color: #fff;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.25);
}
.ds-btn.mcl-btn--aviso:hover {
    background: #92400E;
    border-color: #92400E;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.ds-btn.mcl-btn--aviso:active {
    background: #78350F;
    border-color: #78350F;
    transform: scale(0.97);
    box-shadow: none;
}

/* badge "Anulado" (preto) — o ds- não tem variante dark */
.mcl .mcl-badge--dark,
.ds-badge.mcl-badge--dark {
    background: var(--neutral-800);
    color: var(--neutral-0);
    border-color: var(--neutral-800);
}

/* visível só em mobile (badge de estado no cartão) / célula só em desktop */
.mcl-so-mobile { display: inline-flex; }
.mcl-td-estado { display: none; }
@media (min-width: 768px) {
    .mcl-so-mobile { display: none; }
    .mcl-td-estado { display: table-cell; }
}
@media (max-width: 767.98px) {
    /* em modo cartão a célula Estado é redundante (badge no hero) */
    .ds-table tbody td.mcl-td-estado { display: none; }
}

/* ---------- contactos clicáveis + copiar (M-11) ---------- */

.mcl-contacto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.mcl-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-600);
    text-decoration: none;
    font-weight: 600;
    min-height: 28px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.mcl-link:hover { text-decoration: underline; }

.mcl-link svg { flex-shrink: 0; opacity: 0.75; }

.mcl-copiar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    opacity: 0.55;
}

.mcl-copiar:hover { opacity: 1; }

@media (max-width: 767.98px) {
    /* alvos de toque >= 44px nos links tel:/mailto: */
    .mcl-link { min-height: 44px; }
    .mcl-copiar { width: 40px; height: 40px; min-width: 40px; }
}

/* ---------- pesquisa da listagem ---------- */

.mcl-procurar-wrap { position: relative; }

.mcl-procurar-wrap > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--neutral-400);
    pointer-events: none;
}

.mcl-procurar-wrap .ds-input { padding-left: 38px; }

/* ---------- combobox: opção "criar" (freguesia em texto livre) ---------- */

.mcl-op-criar span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-600);
    font-weight: 600;
}

/* ---------- detalhe: cabeçalho em destaque (M-13) ---------- */

.mcl-det-cab-body {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.mcl-det-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    color: var(--primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    flex-shrink: 0;
}

.mcl-det-cab-info { min-width: 0; }

.mcl-det-nome {
    margin: 0 0 6px;
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--neutral-900);
    overflow-wrap: anywhere;
}

.mcl-det-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.mcl-det-sub .ds-badge svg { margin-right: 2px; }

/* grupos de leitura empilhados; a grelha interna é o .ds-fieldlist */
.mcl-grupos {
    display: flex;
    flex-direction: column;
    gap: var(--ds-page-gap, 16px);
    margin-top: var(--ds-page-gap, 16px);
    min-width: 0;
}

.mcl-grupo-ro dl,
.mcl-grupo-ro dt,
.mcl-grupo-ro dd {
    margin: 0;
    padding: 0;
}

.mcl-auditoria {
    margin: 10px 2px 0;
    font-size: var(--text-xs);
    color: var(--neutral-400);
}

/* detalhe em mobile: ações (Voltar / Apagar / Editar) fixas no fundo do ecrã,
   com folga no fim da página para nada ficar tapado (spec §9 mobile) */
@media (max-width: 767.98px) {
    .ds-page[data-mcl-vista="detalhe"] { padding-bottom: 84px; }

    .ds-page[data-mcl-vista="detalhe"] .ds-page-header-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--ds-z-sticky, 40);
        display: flex;
        gap: 10px;
        margin: 0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--neutral-200);
        box-shadow: 0 -6px 16px -8px rgba(15, 23, 42, 0.12);
    }

    .ds-page[data-mcl-vista="detalhe"] .ds-page-header-actions .ds-btn-group {
        display: flex;
        width: 100%;
        gap: 10px;
    }

    .ds-page[data-mcl-vista="detalhe"] .ds-page-header-actions .ds-btn {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }
}

/* ---------- comentários ---------- */

.mcl-td-comentario { overflow-wrap: anywhere; }

@media (min-width: 768px) {
    .mcl-td-comentario { white-space: normal; }
}

.mcl-so-leitura {
    display: inline-flex;
    color: var(--neutral-400);
    vertical-align: middle;
}

/* modal de comentário: largo em desktop (paridade: máx. 1200px) */
@media (min-width: 768px) {
    .ds-modal.mcl-modal-comentario {
        max-width: min(1200px, calc(100vw - 48px));
        width: 100%;
    }
}

/* em ecrã pequeno ocupa o ecrã (sheet a alta) com o editor utilizável */
@media (max-width: 767.98px) {
    .ds-modal.mcl-modal-comentario {
        height: 96dvh;
        max-height: 96dvh;
        display: flex;
        flex-direction: column;
    }

    .ds-modal.mcl-modal-comentario .ds-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .ds-modal.mcl-modal-comentario .ds-richtext-content { min-height: 34dvh; }
}

/* editor rich text — linha de inserção de ligação */
.mcl-rt-linkrow {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--neutral-200);
    border-top: none;
    background: var(--neutral-50);
}

.mcl-rt-linkrow .ds-input { flex: 1 1 auto; min-width: 0; }

.mcl-rt-header {
    width: auto;
    min-width: 104px;
    height: 30px;
    padding: 0 26px 0 8px;
    font-size: var(--text-xs);
}

.mcl-rt-leitura .ds-richtext-content {
    background: var(--neutral-50);
    cursor: default;
}

/* conteúdo do editor: altura de escrita confortável */
.mcl .ds-richtext-content {
    min-height: 180px;
    max-height: 46vh;
    overflow-y: auto;
}

/* ecrãs baixos (telemóvel em paisagem 844x390): o modal tem de caber inteiro */
@media (max-height: 500px) {
    .mcl .ds-richtext-content {
        min-height: 96px;
        max-height: 30vh;
    }

    .ds-modal-overlay.mcl .ds-modal {
        max-height: calc(100dvh - 12px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .ds-modal-overlay.mcl .ds-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* ---------- formulário ---------- */

.mcl-form-card .ds-card-header { padding-bottom: 4px; }

/* os cards de secção empilham com o mesmo espaçamento da página */
[data-mcl-form-corpo] {
    display: flex;
    flex-direction: column;
    gap: var(--ds-page-gap, 16px);
    min-width: 0;
}

/* =====================================================================================
   FICHA (modal por cima da lista) — só o que o ds-ficha.css não cobre
   ===================================================================================== */

/* As sub-tabelas da ficha usam o .ds-table do design system (tabela em
   desktop, cartões abaixo de 768 px). Dentro da ficha não têm o card
   à volta, por isso a moldura vem daqui. */
.ds-fichamod.mcl .ds-subtabela .ds-table-wrap {
    border: 1px solid var(--neutral-200, #e5e7eb);
    border-radius: var(--radius-md, 10px);
    overflow: auto;
}

/* Em cartões (mobile) a moldura é de cada cartão, não do bloco. */
@media (max-width: 767.98px) {
    .ds-fichamod.mcl .ds-subtabela .ds-table-wrap {
        border: 0;
        border-radius: 0;
    }
}

/* A paginação da sub-tabela respira do bloco acima e nunca empurra a
   barra de ações: quebra para duas linhas em vez de rolar de lado. */
.ds-fichamod.mcl .ds-subtabela .ds-pagination {
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- modal «Contribuinte repetido» (alerta NIF duplicado) ---------- */

.mcl-dup-nota {
    margin: 0 0 12px;
    color: var(--neutral-500, #6b7280);
    font-size: 13px;
    line-height: 1.5;
}

.mcl-dups {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mcl-dups li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 44px;              /* alvo de toque (WCAG 2.5.5) */
    padding: 8px 10px;
    border-radius: var(--radius-sm, 6px);
}

.mcl-dups li:nth-child(odd) { background: var(--neutral-50, #f9fafb); }

.mcl-dup-nif {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    color: var(--neutral-500, #6b7280);
}

/* ---------- alvo de toque do «limpar» do combobox (WCAG 2.5.5) ----------
   O `.ds-combobox-clear` do design system tem 28x28 px. Em desktop é um
   alvo de rato e chega; em mobile é um alvo de DEDO e a auditoria
   responsiva marca-o como crítico nos 5 comboboxes preenchidos do
   formulário de cliente (Setor, Gestor, Agência, Distrito, Concelho,
   Freguesia). Alarga-se AQUI, com o prefixo do módulo, e não no design
   system: a folha partilhada serve mais de trinta ecrãs e não se mexe
   nela de passagem. O ícone continua com 14 px — cresce a área, não o
   desenho. (A partir dos 768 px fica tudo como estava.) */
@media (max-width: 767.98px) {
    .mcl .ds-combobox-clear {
        width: 44px;
        min-width: 44px;
        /* 44px cheios, não `height:100%`: a percentagem resolve contra a
           CAIXA DE CONTEÚDO do control (44 − 2 de borda = 42) e ficava a
           dois pixels do mínimo. As margens negativas devolvem-lhe o
           centro exato, sem esticar o control (que tem altura fixa). */
        height: 44px;
        margin-top: -1px;
        margin-bottom: -1px;
    }
}

/* =====================================================================================
   PAINEL DA CARTEIRA (mod-clientes.js §8b)
   -------------------------------------------------------------------------------------
   A faixa de KPIs reutiliza `.ds-lst-kpis` / `.ds-lst-kpi` do ds-listagem.css — o que
   está aqui é só o que é próprio deste painel: a micro-legenda do mosaico, o corpo
   colapsável, os dois gráficos e as três listas acionáveis.

   Mobile-first e sem tabelas: as listas são linhas com dois alvos de toque lado a lado
   (abrir a ficha · a ação secundária), ambos com 44 px. Uma tabela de 4 colunas viraria
   cartão em mobile e faria de 5 registos meio ecrã.
   ===================================================================================== */

.mcl-painel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
    margin-bottom: var(--sp-4, 16px);
}

/* ---------- faixa de KPIs ---------- */

.mcl-painel .mcl-kpis {
    /* a faixa rola na horizontal (herdado do ds-listagem); o padding em baixo
       deixa a sombra do :hover respirar sem ser cortada pelo overflow */
    padding-bottom: 6px;
}

.mcl-painel .mcl-kpi {
    max-width: 240px;
    min-height: 62px;
    align-items: flex-start;
}

/* A micro-legenda é o que separa um número de um número COM CONTEXTO:
   "valor dos contratos, não faturação" é uma exigência da spec, não um enfeite. */
.mcl-painel .mcl-kpi-nota {
    font-size: var(--txt-sm, 13px);
    line-height: 1.25;
    color: var(--text-3, #8A8283);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-transform: none;
    letter-spacing: 0;
}

@media (min-width: 1024px) {
    .mcl-painel .mcl-kpi-nota {
        font-size: var(--txt-xs, 11px);
    }
}

.mcl-painel .mcl-kpi--esqueleto {
    cursor: default;
    min-width: 118px;
    background: linear-gradient(90deg, var(--ink-100, #F1EEEE) 25%, var(--ink-50, #F8F6F6) 50%, var(--ink-100, #F1EEEE) 75%);
    background-size: 300% 100%;
    animation: mclPainelBrilho 1.2s ease-in-out infinite;
    border-color: transparent;
}

@keyframes mclPainelBrilho {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mcl-painel .mcl-kpi--esqueleto {
        animation: none;
    }
}

/* ---------- botão que abre/fecha o corpo ---------- */

/* O botão que abre/fecha a análise deixou de viver aqui: é
   `.ds-analise-toggle` no ds-listagem.css, igual nos dez módulos
   (MOD.listagem.painelAnalise). As mensagens de serviço do painel
   passaram a `.ds-analise-nota` / `.ds-analise-erro`. */

/* ---------- gráficos ---------- */

.mcl-grafs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3, 12px);
    min-width: 0;
}

@media (min-width: 1024px) {
    .mcl-grafs {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.mcl-graf {
    margin: 0;
    min-width: 0;
    padding: var(--sp-3, 12px);
    border: 1px solid var(--border, #E4E0E0);
    border-radius: var(--r-lg, 14px);
    background: var(--surface, #fff);
}

.mcl-graf-tit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--sp-3, 12px);
    font-size: var(--txt-base, 14px);
    font-weight: var(--fw-bold, 600);
    color: var(--text-1, #221F20);
}

.mcl-graf-sub {
    font-size: var(--txt-sm, 13px);
    font-weight: 400;
    color: var(--text-3, #8A8283);
}

/* Altura CONTIDA e relativa: o Chart.js mede o pai. Sem `position:relative`
   e sem altura, o canvas cresce a cada resize (bug clássico da biblioteca). */
.mcl-graf-caixa {
    position: relative;
    width: 100%;
    height: 240px;
    min-width: 0;
}

/* o gráfico de setores define a sua própria altura no JS (34 px por barra):
   10 setores espremidos em 240 px dariam barras de 12 px e rótulos ilegíveis */
.mcl-graf-caixa--setor {
    height: 400px;
}

.mcl-graf-caixa canvas {
    max-width: 100%;
}

.mcl-graf-dica {
    margin: var(--sp-2, 8px) 0 0;
    font-size: var(--txt-sm, 13px);
    color: var(--text-3, #8A8283);
}

/* ---------- listas acionáveis ---------- */

.mcl-pls {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3, 12px);
    min-width: 0;
}

@media (min-width: 768px) {
    .mcl-pls {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .mcl-pls {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mcl-pl {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--sp-3, 12px);
    border: 1px solid var(--border, #E4E0E0);
    border-radius: var(--r-lg, 14px);
    background: var(--surface, #fff);
}

.mcl-pl-cab {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    min-width: 0;
}

.mcl-pl-tit {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--txt-base, 14px);
    font-weight: var(--fw-bold, 600);
    color: var(--text-1, #221F20);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcl-pl-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: var(--r-full, 999px);
}

.mcl-pl-n {
    flex: 0 0 auto;
    font-size: var(--txt-lg, 16px);
    font-weight: var(--fw-extra, 800);
    font-variant-numeric: var(--num-tabular, tabular-nums);
    color: var(--text-1, #221F20);
}

.mcl-pl-sub {
    margin: 4px 0 var(--sp-2, 8px);
    font-size: var(--txt-sm, 13px);
    line-height: 1.35;
    color: var(--text-3, #8A8283);
}

.mcl-pl-itens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border, #E4E0E0);
}

.mcl-pl-item {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    border-bottom: 1px solid var(--border, #E4E0E0);
}

.mcl-pl-item:last-child {
    border-bottom: none;
}

.mcl-pl-alvo {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 6px 4px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.mcl-pl-alvo:hover .mcl-pl-nome {
    color: var(--primary-600, #B80A0C);
}

.mcl-pl-alvo:focus-visible {
    outline: 2px solid var(--primary-500, #DA0A0D);
    outline-offset: -2px;
    border-radius: var(--r-sm, 8px);
}

.mcl-pl-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.mcl-pl-nome {
    font-size: var(--txt-base, 14px);
    font-weight: var(--fw-bold, 600);
    color: var(--text-1, #221F20);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcl-pl-meta {
    font-size: var(--txt-sm, 13px);
    color: var(--text-3, #8A8283);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcl-pl-val {
    flex: 0 0 auto;
    font-size: var(--txt-sm, 13px);
    font-weight: var(--fw-bold, 600);
    font-variant-numeric: var(--num-tabular, tabular-nums);
    white-space: nowrap;
    color: var(--text-2, #554E50);
}

/* mesmo vocabulário de nível do MOD.alertas — âmbar avisa, índigo pede ação */
/* `--warning-700` e não `--600`: o âmbar #D97706 dá 3.19:1 sobre branco e
   isto é texto pequeno a bold com informação real («faltam 5 dias»), não
   decoração. O #B45309 dá 5.05:1 e continua inequivocamente âmbar. */
.mcl-pl-val[data-nivel="aviso"] {
    color: var(--warning-700, #B45309);
}

.mcl-pl-val[data-nivel="acao"] {
    color: #4F46E5;
}

.mcl-pl-val[data-nivel="critico"] {
    color: var(--brand-600, #B80A0C);
}

.mcl-pl-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--r-sm, 8px);
    color: var(--text-3, #8A8283);
    text-decoration: none;
}

.mcl-pl-acao:hover {
    background: var(--surface-alt, #FAF8F8);
    color: var(--primary-600, #B80A0C);
}

.mcl-pl-acao:focus-visible {
    outline: 2px solid var(--primary-500, #DA0A0D);
    outline-offset: -2px;
}

.mcl-pl-vazio {
    margin: 0;
    padding: var(--sp-3, 12px) 0;
    font-size: var(--txt-sm, 13px);
    color: var(--text-3, #8A8283);
    border-top: 1px solid var(--border, #E4E0E0);
}

.mcl-pl-mais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: var(--sp-2, 8px);
    padding: 0 var(--sp-3, 12px);
    border: 1px solid var(--border, #E4E0E0);
    border-radius: var(--r-sm, 8px);
    background: transparent;
    color: var(--text-2, #554E50);
    font-size: var(--txt-sm, 13px);
    font-weight: var(--fw-bold, 600);
    text-decoration: none;
    cursor: pointer;
}

.mcl-pl-mais:hover {
    border-color: var(--border-strong, #CFC9CA);
    color: var(--primary-600, #B80A0C);
}

.mcl-pl-mais:focus-visible {
    outline: 2px solid var(--primary-500, #DA0A0D);
    outline-offset: 2px;
}

/* ---------- faixa de aniversários (nasce escondida; aparece com dados) ---------- */

.mcl-anivs {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    flex-wrap: wrap;
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border: 1px solid var(--border, #E4E0E0);
    border-radius: var(--r-md, 10px);
    background: var(--surface-alt, #FAF8F8);
    font-size: var(--txt-sm, 13px);
    color: var(--text-2, #554E50);
}

.mcl-anivs-tit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--fw-bold, 600);
    color: var(--text-1, #221F20);
}

.mcl-aniv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mcl-aniv-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-3, 12px);
    border-radius: var(--r-sm, 8px);
    background: var(--brand-500, #DA0A0D);
    color: #fff;
    font-weight: var(--fw-bold, 600);
    text-decoration: none;
}

/* ---------- o que o painel NÃO mostra, e porquê ---------- */

.mcl-omitido {
    border: 1px dashed var(--border, #E4E0E0);
    border-radius: var(--r-md, 10px);
    background: var(--surface, #fff);
}

.mcl-omitido>summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-3, 12px);
    font-size: var(--txt-sm, 13px);
    font-weight: var(--fw-bold, 600);
    color: var(--text-3, #8A8283);
    cursor: pointer;
}

.mcl-omitido>summary:focus-visible {
    outline: 2px solid var(--primary-500, #DA0A0D);
    outline-offset: -2px;
}

.mcl-omitido ul {
    margin: 0;
    padding: 0 var(--sp-4, 16px) var(--sp-3, 12px) calc(var(--sp-4, 16px) + 8px);
    font-size: var(--txt-sm, 13px);
    line-height: 1.5;
    color: var(--text-3, #8A8283);
}

.mcl-omitido li+li {
    margin-top: 6px;
}

.mcl-omitido strong {
    color: var(--text-2, #554E50);
}

/* =====================================================================================
   AGÊNCIAS DE MEIOS — o separador pedido pelo cliente

   Cartões e não tabela: cada agência traz uma LISTA de contas lá dentro, e uma tabela com
   uma lista dentro de uma célula lê-se mal em qualquer largura. A grelha usa `auto-fill`
   com mínimo de 260px, o que a 320px dá uma coluna sem precisar de media query.
   ===================================================================================== */
.mcl-ag-resumo {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--text-2, #554E50);
}

.mcl-ag-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.mcl-ag-card {
    display: flex;
    flex-direction: column;
}

.mcl-ag-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* O nome da agência pode ser longo («Arn Media Communications - Publicidade…»): quebra em
   vez de empurrar o contador para fora do cartão. */
.mcl-ag-cab .ds-card-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mcl-ag-meta {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-3, #898792);
    overflow-wrap: anywhere;
}

.mcl-ag-clientes {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mcl-ag-clientes li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 13px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--linha, #EFEDEE);
}

.mcl-ag-clientes li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mcl-ag-marca {
    font-size: 11px;
    color: var(--text-3, #898792);
}

/* «Sem contas atribuídas» é um FACTO (23 das 41 agências estão assim), não uma avaria:
   texto sereno, não um alerta. */
.mcl-ag-vazio {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--text-3, #898792);
    font-style: italic;
}