/* ===================================================================
   EFICÁCIA CRM — mod-tickets.css
   Estilos próprios do módulo Tickets + Agenda (Calendário + Eventos).
   Complementa o design-system.css (nunca o substitui): tudo o que é
   genérico (cards, tabelas→cartões, formulários, modais, badges,
   paginação) vem das classes ds-. Aqui vive apenas o específico:
   calendário, chips de estado, seletor de cor, bolas de sigla, etc.
   Prefixo: mtk-  ·  Mobile-first; sem scroll horizontal de página.
   =================================================================== */

/* A barra de ferramentas própria (.mtk-toolbar/.mtk-pesquisa) foi
   apagada: as duas listagens deste módulo passaram a usar a barra de
   filtros única do CRM (`.ds-filters`, MOD.listagem.barraFiltros). */

/* segmentos (Todos · Abertos · Fechados / vistas do calendário) */
.mtk-segmentos {
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    padding: 4px;
    background: var(--neutral-100);
    border-radius: var(--radius-md);
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.mtk-seg {
    appearance: none;
    border: none;
    background: transparent;
    min-height: calc(var(--ds-touch) - 8px);
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--neutral-500);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.mtk-seg:hover { color: var(--neutral-700); }
.mtk-seg.is-active {
    background: var(--neutral-0);
    color: var(--neutral-900);
    box-shadow: var(--shadow-xs);
}
.mtk-seg:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* =====================================================================================
   PAINEL DE INDICADORES DA LISTAGEM  (mod-tickets.js §11.4)
   -------------------------------------------------------------------------------------
   Mobile-first e por esta ordem: três mosaicos (uma linha que rola) → botão que abre a
   análise → gráficos → filas de trabalho. Em mobile o painel nasce FECHADO: quem abre a
   listagem no telemóvel quer a lista, e o painel não lhe pode roubar o ecrã. Em desktop
   nasce aberto.

   Os mosaicos reutilizam `.ds-lst-kpis`/`.ds-lst-kpi` da moldura (`ds-listagem.css`,
   dentro de `@layer listagem` — por isso estas regras sem camada ganham-lhe sempre,
   independentemente da especificidade). Só se alargam: «386 dias» mais a legenda da
   mediana não cabem nos 96 px pensados para uma contagem.
   ===================================================================================== */

.mtk-dash { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }

/* `display:flex` ganha ao `[hidden]{display:none}` do agente do utilizador — sem estas
   duas linhas o painel «fechado» continuava a ocupar o ecrã todo em mobile. */
.mtk-dash[hidden] { display: none; }

.mtk-dash-kpis { align-items: stretch; }
.mtk-dash-kpi {
    min-width: 176px;
    max-width: 280px;
    gap: 3px;
    padding: var(--sp-2) var(--sp-3);
}
.mtk-dash-kpi .ds-lst-kpi-n { white-space: nowrap; }
/* Mosaico a zero: continua a informar (e a ser focável, com o porquê no
   `title`), mas não finge ser um destino — não há lista para abrir. */
.mtk-dash-kpi--inerte { cursor: default; }
.mtk-dash-kpi--inerte:hover { border-color: var(--border); box-shadow: none; }
.mtk-dash-kpi-nota {
    font-size: var(--txt-xs);
    line-height: 1.35;
    color: var(--text-3);
    white-space: normal;
    font-weight: 500;
}

/* O botão que abre/fecha a análise e o corpo do painel deixaram de
   viver aqui: são `.ds-analise*` no ds-listagem.css (MOD.listagem). */

/* `align-items:start` — com uma fila expandida, esticar as outras deixava cartões meio
   vazios. Cada cartão tem a altura do que tem dentro. */
.mtk-dash-grelha, .mtk-dash-filas {
    display: grid; gap: var(--sp-3); grid-template-columns: 1fr; align-items: start;
}
.mtk-dash-card, .mtk-dash-fila {
    display: flex; flex-direction: column;
    padding: var(--sp-3); gap: var(--sp-2); min-width: 0;
}
.mtk-dash-card-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.mtk-dash-card-tit {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 auto; min-width: 0;
    margin: 0; font-size: var(--txt-sm); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-2);
}

/* O Chart.js com `maintainAspectRatio:false` precisa de uma altura definida no pai;
   sem `position:relative` o canvas cresce a cada redimensionamento. */
.mtk-dash-chart { position: relative; height: 196px; min-width: 0; }
.mtk-dash-chart canvas { max-width: 100%; }

.mtk-dash-nota { margin: 0; font-size: var(--txt-xs); line-height: 1.45; color: var(--text-3); }
/* O «ainda não há dados que cheguem» de um gráfico com limiar (§2.2): é informação,
   não erro — traço a tracejado, nunca a cor de aviso. */
.mtk-dash-espera {
    display: flex; align-items: flex-start; gap: 8px; margin: 0;
    padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
    font-size: var(--txt-xs); line-height: 1.5; color: var(--text-3);
}
.mtk-dash-espera svg { flex-shrink: 0; margin-top: 1px; }
.mtk-dash-espera strong { color: var(--text-1); font-variant-numeric: var(--num-tabular); }

/* ---- filas de trabalho ---- */
.mtk-fila-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 6px;
    border-radius: var(--r-full); background: var(--surface-alt);
    color: var(--text-2); font-size: var(--txt-xs); font-variant-numeric: var(--num-tabular);
}
/* O ponto de nível é o MESMO vocabulário do mod-alertas.js: `acao` = marca (há trabalho
   parado), `aviso` = âmbar (há algo por distribuir), `info` = neutro. */
.mtk-fila-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-400); flex-shrink: 0; }
.mtk-fila-pt[data-nivel="acao"] { background: var(--brand-500); }
.mtk-fila-pt[data-nivel="aviso"] { background: var(--warning-500); }
.mtk-fila-pt[data-nivel="info"] { background: var(--info-500); }
.mtk-fila-sub { margin: 0; font-size: var(--txt-xs); line-height: 1.45; color: var(--text-3); }

.mtk-fila-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mtk-fila-item {
    display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
}
.mtk-fila-item + .mtk-fila-item { border-top: 1px solid var(--border); }
.mtk-fila-linha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "cod nome" "meta meta";
    align-items: center;
    column-gap: 8px; row-gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--ds-touch);
    padding: 8px 2px;
    border: 0; background: none; cursor: pointer; text-align: left;
    font-family: inherit;
    color: var(--text-1);
    border-radius: 8px;
}
.mtk-fila-linha:hover { background: var(--surface-alt); }
.mtk-fila-cod {
    grid-area: cod; font-family: var(--font-mono); font-size: var(--txt-xs);
    font-weight: var(--fw-bold); font-variant-numeric: var(--num-tabular);
}
.mtk-fila-nome {
    grid-area: nome; min-width: 0; font-size: var(--txt-sm); font-weight: var(--fw-bold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtk-fila-meta {
    grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
    font-size: var(--txt-xs); color: var(--text-3); min-width: 0;
}
.mtk-fila-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtk-fila-dias { color: var(--brand-600); font-weight: var(--fw-bold); font-variant-numeric: var(--num-tabular); }
.mtk-fila-data { font-variant-numeric: var(--num-tabular); }
/* Separador ENTRE campos curtos, e só entre esses. Um `::before` genérico em
   `:not(:first-child)` parecia certo e não era: quando a lista de atribuídos
   passa para a linha de baixo, o ponto fica órfão a abrir a linha. Por isso os
   atribuídos NUNCA partilham linha — `flex-basis:100%` — e dispensam ponto. */
.mtk-fila-meta > .mtk-fila-cli::before,
.mtk-fila-meta > .mtk-fila-data:not(:first-child)::before { content: "· "; }
.mtk-fila-users { flex: 1 0 100%; }
.mtk-fila-acao { flex: 0 0 auto; }
.mtk-fila-vazia {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: var(--sp-2) 0;
    font-size: var(--txt-sm); color: var(--text-3);
}
.mtk-fila-vazia svg { color: var(--success-500); flex-shrink: 0; }
.mtk-fila-vazia--erro svg { color: var(--warning-700); }
.mtk-fila-skel { padding: var(--sp-2) 0; }
.mtk-fila-mais { align-self: flex-start; margin-top: 2px; }
.mtk-fila-mais svg { transition: transform .18s ease; }
.mtk-fila-mais[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (min-width: 768px) {
    .mtk-dash-chart { height: 224px; }
}

@media (min-width: 1024px) {
    /* Deixa de ser um carrossel: os três mosaicos cabem numa grelha e lêem-se ao mesmo
       tempo, cada um com a mesma largura. */
    .mtk-dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    .mtk-dash-kpi { max-width: none; min-width: 0; }
    .mtk-dash-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mtk-dash-filas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
    .mtk-dash-filas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .mtk-fila-mais svg { transition: none; }
}

/* =====================================================================================
   LISTAGEM DE TICKETS — as colunas próprias na moldura `ds-listagem.css`
   -------------------------------------------------------------------------------------
   A folha genérica traz os slots do contrato (--codigo, --cliente, --marca…) e a troca
   TABELA ↔ CARTÕES aos 1024 px. As colunas deste módulo são outras — Nome, Cliente,
   Criado Por, Data — e a colocação no CARTÃO tem de ser EXPLÍCITA: a `.ds-lst-linha` é
   um grid com colocação célula a célula e uma célula sem `grid-row` cairia em
   auto-placement, sobrepondo-se às outras. Só isso é que aqui se declara; tudo o resto
   (faixa de estado, cartão, hover, tabela a partir dos 1024 px) vem da moldura.
   Mobile-first: a base é o cartão, o `min-width` é que traz a tabela.

   A distinção de estado ao nível da linha (a antiga borda vermelha/verde) passou a ser
   a faixa de 3 px da moldura, alimentada por `--lst-estado` em cada `<tr>`.
   ===================================================================================== */

/* --- cartão (< 1024 px): #Id | Estado · Nome · Cliente · Criado Por + Data --- */
.ds-lst-c--tknome { grid-column: 1 / -1; grid-row: 2; }
.ds-lst-c--tkcliente { grid-column: 1 / -1; grid-row: 3; }
.ds-lst-c--tkautor { grid-column: 1; grid-row: 4; }
.ds-lst-c--tkdata { grid-column: 2; grid-row: 4; text-align: right; }

/* O assunto é o herói do cartão logo a seguir ao id: dispensa eyebrow. */
.ds-lst-c--tknome[data-rot]::before { content: none; }

/* --- tabela (>= 1024 px): larguras declaradas, `table-layout: fixed` da moldura --- */
@media (min-width: 1024px) {
    /* O id leva o sinal «há N dias» por baixo: 96 px cortavam-no a meio. */
    .mtk-lista .ds-lst-h--codigo { width: 118px; }
    .ds-lst-h--tknome { width: auto; }
    .ds-lst-h--tkcliente { width: 200px; }
    .ds-lst-h--tkautor { width: 150px; }
    .ds-lst-h--tkdata { width: 112px; text-align: right; }
    .ds-lst-c--tkdata { text-align: right; font-variant-numeric: tabular-nums; }
}

/* A ficha em PÁGINA (só quando o motor está carregado mas o modal não se aplica):
   o motor traz topbar própria, por isso o host não acrescenta nada além do fluxo. */
.mtk-ficha-host { min-width: 0; }

/* células/elementos só num dos modos da tabela responsiva */
.mtk-so-cartao { display: inline-flex; }
.ds-table tbody td.mtk-so-tabela { display: none; }
@media (min-width: 768px) {
    .mtk-so-cartao { display: none; }
    .ds-table tbody td.mtk-so-tabela { display: table-cell; }
}

/* utilidades de visibilidade por breakpoint */
.mtk-so-desktop { display: none; }
.mtk-so-movel { display: block; }
@media (min-width: 640px) {
    .mtk-so-desktop { display: inline-flex; }
    .mtk-so-movel { display: none; }
}

/* nome do evento com pinta de cor */
.mtk-ev-nome {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.mtk-pinta {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

/* ---------- formulários ---------- */
/* realce dos campos auto-preenchidos ao escolher o cliente (11.1) */
@keyframes mtkFlash {
    0% { background-color: var(--primary-50); box-shadow: var(--ds-ring); }
    100% { background-color: var(--neutral-0); box-shadow: none; }
}
.mtk-flash { animation: mtkFlash 1.1s ease-out 1; }

/* multi-combobox: chips dentro do controlo */
.mtk-cb-sel {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    padding: 4px 0;
}
.mtk-cb-multi .ds-combobox-control {
    height: auto;
    min-height: var(--ds-control-h-md);
}
.mtk-cb-pesq {
    position: sticky;
    top: 0;
    background: var(--neutral-0);
    padding: 4px 4px 8px;
    z-index: 1;
}
.mtk-cb-pesq .ds-combobox-input {
    width: 100%;
    height: var(--ds-control-h-sm);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: 0 10px;
}
.mtk-cb-pesq .ds-combobox-input:focus {
    border-color: var(--primary-400);
    box-shadow: var(--ds-ring);
}

/* ---------- seletor de cor acessível (evento) ---------- */
.mtk-cor { position: relative; min-width: 0; }
.mtk-cor-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--ds-control-h-md);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--ds-font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    transition: var(--transition-fast);
}
.mtk-cor-btn:hover { filter: brightness(0.96); }
.mtk-cor-btn:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}
.mtk-cor-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--ds-z-dropdown);
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    min-width: 230px;
}
.mtk-cor-grelha {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.mtk-cor-preset {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}
.mtk-cor-preset:hover { transform: scale(1.06); }
.mtk-cor-preset:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}
.mtk-cor-preset.is-sel { box-shadow: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--primary-500); }
.mtk-cor-livre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-500);
}
.mtk-cor-livre input[type="color"] {
    width: 52px;
    height: 36px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: 2px;
    background: var(--neutral-0);
    cursor: pointer;
}

/* ---------- datepicker pt (dd-mm-aaaa + mini-calendário) ---------- */
.mtk-dp {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}
.mtk-dp-input { flex: 1; min-width: 0; }
.mtk-dp-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ds-control-h-md);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    color: var(--neutral-500);
    cursor: pointer;
    transition: var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.mtk-dp-btn:hover { border-color: var(--neutral-300); color: var(--neutral-700); }
.mtk-dp-btn:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}
.mtk-dp-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--ds-z-dropdown);
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    width: min(300px, calc(100vw - 32px));
}
.mtk-dp-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
}
.mtk-dp-mes {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-800);
    text-transform: capitalize;
}
.mtk-dp-nav {
    appearance: none;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border-radius: var(--radius-sm);
    color: var(--neutral-500);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mtk-dp-nav:hover { background: var(--neutral-100); color: var(--neutral-700); }
.mtk-dp-nav:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}
.mtk-dp-sem,
.mtk-dp-grelha {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}
.mtk-dp-sem span {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--neutral-400);
    padding: 2px 0 4px;
}
.mtk-dp-dia {
    appearance: none;
    border: none;
    background: transparent;
    min-height: 34px;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-700);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mtk-dp-dia:hover { background: var(--neutral-100); }
.mtk-dp-dia:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: -2px;
}
.mtk-dp-dia.is-fora { color: var(--neutral-300); }
.mtk-dp-dia.is-hoje { box-shadow: inset 0 0 0 1px var(--primary-400); }
.mtk-dp-dia.is-sel {
    background: var(--primary-600);
    color: #fff;
}
.mtk-dp-pe {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
}
@media (max-width: 767px) {
    .mtk-dp-dia { min-height: 44px; }
    .mtk-dp-nav { min-width: 44px; min-height: 44px; }
}

/* ---------- detalhe ---------- */
.mtk-link-btn {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mtk-link-toque {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;         /* + padding do fieldlist ≈ alvo de toque confortável */
}
.mtk-swatch {
    display: inline-block;
    width: 64px;
    height: 30px;
    border-radius: 8px;
    vertical-align: middle;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.15);
}
.mtk-bool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.mtk-bool--sim { background: rgba(0, 128, 0, 0.1); color: #008000; }
.mtk-bool--nao { background: rgba(255, 0, 0, 0.08); color: #ff0000; }
.mtk-descricao { max-width: 860px; overflow-wrap: anywhere; }
.mtk-descricao h1 { font-size: var(--text-xl); margin: 0 0 8px; }
.mtk-descricao h2 { font-size: var(--text-lg); margin: 0 0 8px; }

/* ===================================================================
   CALENDÁRIO
   =================================================================== */
.mtk-cal {
    padding: var(--ds-card-pad);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* toolbar: Hoje ‹ › + rótulo do período + seletor de vista */
.mtk-cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.mtk-cal-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.mtk-cal-label {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--neutral-900);
    margin: 0 0 0 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.mtk-cal-vistas { min-width: 0; }
.mtk-cal-vistas .ds-select { width: auto; min-width: 128px; }

/* legenda com toggles por fonte */
.mtk-leg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.mtk-leg-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--ds-control-h-sm);
    padding: 0 12px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-full);
    background: var(--neutral-0);
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-400);
    cursor: pointer;
    transition: var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.mtk-leg-item .mtk-pinta { opacity: 0.35; }
.mtk-leg-item.is-on {
    color: var(--neutral-700);
    border-color: var(--neutral-300);
    background: var(--neutral-50);
}
.mtk-leg-item.is-on .mtk-pinta { opacity: 1; }
.mtk-leg-item:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* corpo com altura contida (10.4) — a página nunca ganha 79.400px */
.mtk-cal-corpo { min-width: 0; }

/* grelha mensal: 7 colunas iguais */
.mtk-cal-grade {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-width: 0;
    background: var(--neutral-0);
}
.mtk-cal-cab-linha,
.mtk-cal-linha {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 0;
}
.mtk-cal-cab {
    padding: 8px 4px;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500);
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
}
.mtk-cal-cel {
    position: relative;
    min-height: 52px;
    padding: 4px;
    border-right: 1px solid var(--neutral-100);
    border-bottom: 1px solid var(--neutral-100);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.mtk-cal-cel:nth-child(7n) { border-right: none; }
.mtk-cal-linha:last-child .mtk-cal-cel { border-bottom: none; }
.mtk-cal-cel.is-fora { background: var(--neutral-25); }
.mtk-cal-cel.is-fora .mtk-cal-dia-num { color: var(--neutral-300); }
.mtk-cal-dia-num {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-600);
    line-height: 1.4;
}
.mtk-cal-cel.is-hoje .mtk-cal-dia-num {
    background: var(--primary-600);
    color: #fff;
    border-radius: var(--radius-full);
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.mtk-cal-cel.is-sel {
    background: var(--primary-50);
    box-shadow: inset 0 0 0 2px var(--primary-400);
    border-radius: var(--radius-sm);
}
.mtk-cal-cel:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: -2px;
}

/* pintas (modo mobile da grelha mensal) */
.mtk-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    max-width: 100%;
}
.mtk-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mtk-dots-n {
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-400);
    line-height: 1;
}

/* chips de evento (desktop) */
.mtk-cal-evs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
}
.mtk-ev {
    appearance: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    min-width: 0;
    padding: 2px 6px;
    border-radius: 5px;
    /* hairline: define os chips de tom claro (Propostas) sem tocar nos escuros */
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: filter var(--transition-fast), transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.mtk-ev:hover { filter: brightness(1.08); }
.mtk-ev:active { transform: scale(0.98); }
.mtk-ev:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}
.mtk-ev.is-cont-esq { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mtk-ev.is-cont-dir { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mtk-ev-titulo {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mtk-cal-mais {
    appearance: none;
    border: none;
    background: transparent;
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--primary-600);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mtk-cal-mais:hover { background: var(--primary-50); }
.mtk-cal-mais:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}

/* bolas de sigla (tipos 3/4/5) */
.mtk-bolas {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100%;
}
.mtk-bola {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* vista semana (desktop): a coluna acompanha o conteúdo e, no mínimo, enche a
   janela. Com teto fixo (460px, e na prática 172px por causa do teto do mês
   mais abaixo) 4 das 7 colunas rolavam por dentro e escondiam 314px de
   cartões, com 367px de ecrã vazio por baixo da grelha. */
.mtk-cal-grade--semana { min-width: 0; }
.mtk-cal-cel--semana {
    min-height: calc(100vh - 420px);
    max-height: none;
    align-items: stretch;
    overflow: visible;
}
.mtk-cal-cel--semana .mtk-cal-dia-num { text-align: center; }
.mtk-cal-evs--coluna {
    overflow: visible;
    flex: 1;
    min-height: 0;
    padding-bottom: 4px;
}
/* há altura de sobra na Semana: o nome do cliente lê-se inteiro, sem reticências */
.mtk-cal-evs--coluna .mtk-ev-titulo { white-space: normal; overflow-wrap: anywhere; }
.mtk-cal-sem {
    font-size: var(--text-xs);
    color: var(--neutral-300);
    text-align: center;
    margin: 6px 0 0;
}

/* agenda (vistas dia/agenda, semana em mobile, popup "+N", dia selecionado) */
.mtk-ag {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.mtk-ag-dia { min-width: 0; }
.mtk-ag-dia-titulo {
    position: sticky;               /* o dia acompanha a rolagem da lista */
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-700);
    background: var(--neutral-0);
    padding: 6px 0;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--neutral-100);
}
.mtk-ag-dia-titulo::first-letter { text-transform: uppercase; }
.mtk-ag-dia.is-hoje .mtk-ag-dia-titulo { color: var(--primary-600); }
.mtk-ag-dia-n {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--neutral-100);
    color: var(--neutral-500);
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: center;
}
.mtk-ag-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.mtk-ag-item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--ds-touch);
    padding: 8px 10px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    font-family: var(--font-family);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}
.mtk-ag-item:hover { border-color: var(--neutral-300); background: var(--neutral-50); }
.mtk-ag-item:active { transform: scale(0.995); }
.mtk-ag-item:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}
.mtk-ag-cor {
    width: 4px;
    align-self: stretch;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.mtk-ag-corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mtk-ag-titulo {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--neutral-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mtk-ag-meta {
    font-size: var(--text-xs);
    color: var(--neutral-400);
    font-weight: 500;
}
/* o código deixa de ser o título e passa a ser referência, em segundo plano */
.mtk-ag-cod {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.2px;
}
.mtk-ag-chev { color: var(--neutral-300); flex-shrink: 0; display: inline-flex; }

/* abaixo de 768px o item da lista tem ~330px: as siglas de quem é responsável
   são o que menos ajuda a decidir, e a 8,5px nem se leem. Ficam no desktop e
   nos chips do mês (paridade P-114). */
@media (max-width: 767px) {
    .mtk-ag-item .mtk-bolas { display: none; }
}

/* agenda do dia selecionado (mobile, por baixo da grelha) */
.mtk-cal-agenda-dia { min-width: 0; }
.mtk-cal-agenda-dia:empty { display: none; }

/* ---------- responsivo ---------- */
@media (min-width: 768px) {
    /* teto de altura: a grelha do mês não pode crescer com o dia mais cheio —
       é o que mantém as 6 semanas em ~1030px e fixa o `maxChips` em 6 */
    .mtk-cal-cel { min-height: 108px; max-height: 172px; align-items: stretch; padding: 6px; }
    /* … mas a Semana são 7 colunas, não 42 células: reafirmar aqui, senão este
       teto (mais abaixo no ficheiro, mesma especificidade) cortava-as a 172px */
    .mtk-cal-cel--semana { min-height: calc(100vh - 420px); max-height: none; }
    .mtk-cal-cel .mtk-cal-dia-num { align-self: flex-end; }
    .mtk-cal-agenda-dia { display: none; }   /* agenda do dia é padrão mobile */
}

/* paisagem baixa (ex.: 844x390): compactar o calendário para caber */
@media (max-height: 520px) {
    .mtk-cal { gap: 8px; }
    .mtk-cal-cel { min-height: 44px; }
    .mtk-cal-cel--semana { min-height: 180px; }
    .mtk-cal-label { font-size: var(--text-base); }
}

/* impressão: sem interações, grelha limpa */
@media print {
    .mtk-leg, .mtk-cal-vistas, .mtk-cal-nav .ds-btn, .mtk-cal-nav .ds-icon-btn { display: none !important; }
}

/* movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .mtk-flash { animation: none; }
    .mtk-ev, .mtk-ag-item, .mtk-cor-preset { transition: none; }
}