/* ===================================================================
   EFICÁCIA CRM — mod-contratos.css
   Só o que o design system (design-system.css) NÃO cobre:
     · timeline / Gantt de ocupação de suportes
     · cabeçalho premium do detalhe + resumo financeiro
     · cronologia de atividades, dropzone, typeahead
     · barra de ações fixa no fundo (mobile)
     · variante de badge "dark" (estado Anulado) que falta ao DS

   MOBILE-FIRST: o base é telemóvel; os @media (min-width) fazem
   crescer. Zero scroll horizontal no body — o Gantt tem o seu
   próprio contentor com overflow-x.

   Prefixo obrigatório: .mc-  (não colide com ds-, mui- nem com o
   style.css legado).
   =================================================================== */

/* ===================================================================
   0. PÁGINA
   =================================================================== */
.mc,
.mc *,
.mc *::before,
.mc *::after { box-sizing: border-box; }

.mc {
    display: flex;
    flex-direction: column;
    gap: var(--ds-page-gap, 18px);
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

/* O atributo [hidden] tem de ganhar aos `display` das classes do DS
   (senão o × de limpar aparece sempre e os avisos condicionais também). */
.mc [hidden],
.ds-modal-overlay [hidden] { display: none !important; }

/* Cabeçalho de card com título + vários botões: em ecrãs estreitos os
   botões passam para a linha de baixo (senão o título é espremido a
   zero e quebra letra a letra). */
.mc .ds-card-header { flex-wrap: wrap; row-gap: 10px; }
.mc .ds-card-header > .ds-card-title { flex: 1 1 auto; min-width: 60%; }
.mc .ds-card-header-actions { flex-wrap: wrap; }
@media (max-width: 767px) {
    .mc .ds-card-header-actions { width: 100%; }
    .mc .ds-card-header-actions > .ds-btn { flex: 1 1 auto; min-width: 0; }
    .mc .ds-card-header-actions > .ds-card-toggle { flex: 0 0 auto; }
}

.mc-contador { font-weight: 600; color: var(--neutral-600); }

.mc-pad { padding: var(--ds-card-pad, 16px); }

.mc-ro {
    display: flex;
    align-items: center;
    min-height: var(--ds-control-h-md, 44px);
    padding: 0 12px;
    border: 1px dashed var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-25, #fafafa);
    color: var(--neutral-600);
    font-size: var(--text-sm);
}

.mc-help-aviso {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
}
.mc-help-aviso svg { flex-shrink: 0; margin-top: 2px; }

/* Badge do estado Anulado (o DS não tem variante escura) */
.ds-badge.mc-badge--dark {
    background: #22272e;
    color: #ffffff;
    border-color: #22272e;
}
.ds-badge.mc-badge--dark.ds-badge--dot::before { background: #cbd5e1; }

/* Chips de estado com a cor do respetivo badge (ponto colorido) */
.ds-chip.mc-chip--red::before,
.ds-chip.mc-chip--blue::before,
.ds-chip.mc-chip--gray::before,
.ds-chip.mc-chip--amber::before,
.ds-chip.mc-chip--indigo::before,
.ds-chip.mc-chip--green::before,
.ds-chip.mc-chip--dark::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    margin-right: 6px;
    flex-shrink: 0;
}
.ds-chip.mc-chip--red::before { background: #d9534f; }
.ds-chip.mc-chip--blue::before { background: #5bc0de; }
.ds-chip.mc-chip--gray::before { background: #6c757d; }
.ds-chip.mc-chip--amber::before { background: #ffc107; }
.ds-chip.mc-chip--indigo::before { background: #20a8d8; }
.ds-chip.mc-chip--green::before { background: #4dbd74; }
.ds-chip.mc-chip--dark::before { background: #212529; }

/* Chips de filtros ativos */
.mc-chips-ativos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
    min-width: 0;
}
.mc-chips-ativos:empty { display: none; }
.mc-chips-ativos > * { flex: 0 0 auto; }
@media (min-width: 768px) {
    .mc-chips-ativos { flex-wrap: wrap; overflow: visible; }
}

.mc-aviso-inline {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: var(--warning-600, #d97706);
    vertical-align: middle;
}

/* ===================================================================
   1. BARRA DE AÇÕES FIXA NO FUNDO (mobile)
   =================================================================== */
.mc-barra-fixa {
    position: sticky;
    bottom: 0;
    z-index: var(--ds-z-sticky, 40);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--ds-page-pad, 16px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    margin: 0 calc(-1 * var(--ds-page-pad, 16px));
    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);
}
.mc-barra-fixa > .ds-btn { flex: 1 1 auto; min-width: 0; }
.mc-barra-fixa > .ds-btn[aria-label] { flex: 0 0 auto; min-width: var(--ds-touch, 44px); }

body.mc-modal-aberto { overflow: hidden; }

/* ===================================================================
   2. TIMELINE — controlos
   =================================================================== */
.mc-tl-barra {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    min-width: 0;
}
.mc-tl-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.mc-tl-range {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--neutral-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-tl-barra .ds-btn-group { overflow-x: auto; scrollbar-width: none; }
.mc-tl-barra .ds-btn-group::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
    .mc-tl-barra {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }
    .mc-tl-nav { flex: 1 1 320px; justify-content: center; }
}

.mc-tl-legenda {
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--neutral-25, #fafafa);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    min-width: 0;
}
.mc-tl-leg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--neutral-600);
    font-weight: 500;
    white-space: nowrap;
}
.mc-tl-leg i {
    width: 14px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}
/* Três itens, não oito. A legenda antiga anunciava os 7 estados e no
   ecrã só apareciam 3 — seis chips a explicar cores que ninguém via.
   Aqui explica-se a única distinção que a barra transporta: livre ou
   ocupado. O estado do contrato lê-se em texto, onde passa AA. */
.mc-tl-leg em {
    font-style: normal;
    color: var(--neutral-400);
    font-weight: 400;
}
.mc-tl-leg--livre i { background: var(--success-100); border: 1px solid var(--success-200); }
.mc-tl-leg--ocupado i { background: var(--ink-300); border: 1px solid var(--ink-500); }
.mc-tl-leg--hoje i {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--primary-500, #cc1616);
}

/* Substitui a antiga `.mc-tl-dica` («Expanda uma categoria…»), que
   deixou de existir porque o ecrã já nasce expandido. */
.mc-tl-nota-vazias {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px var(--ds-card-pad, 16px);
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

/* ===================================================================
   3. TIMELINE — Gantt
   O scroll (X e Y) vive DENTRO deste contentor: nunca mexe no
   scroll global da aplicação (corrige o hack .app-body do original).
   =================================================================== */
.mc-tl {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-width: 100%;
    max-height: min(68vh, 620px);
    background: var(--neutral-0);
    border-top: 1px solid var(--neutral-200);
    scrollbar-width: thin;
}
.mc-tl:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; }

.mc-tl-inner { position: relative; min-width: 100%; }

/* ---- cabeçalho do tempo (sticky no topo do próprio contentor) ---- */
.mc-tl-head {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
}
.mc-tl-head-corner {
    position: sticky;
    left: 0;
    z-index: 6;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding: 6px 10px;
    background: var(--neutral-50);
    border-right: 1px solid var(--neutral-200);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--neutral-500);
}
.mc-tl-head-escala { flex-shrink: 0; }

.mc-tl-meses { display: flex; height: 26px; }
.mc-tl-mes {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--neutral-200);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--neutral-700);
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
}
.mc-tl-dias { display: flex; height: 22px; position: relative; }
.mc-tl-dias--sem { display: block; }
.mc-tl-dia {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--neutral-500);
    border-right: 1px solid var(--neutral-100);
    white-space: nowrap;
    overflow: hidden;
}
.mc-tl-dia.is-fds { background: rgba(250, 246, 225, 0.65); color: var(--neutral-400); }
.mc-tl-dia--sem {
    position: absolute;
    top: 0;
    height: 100%;
    justify-content: flex-start;
    padding-left: 4px;
    border-right: 1px solid var(--neutral-200);
}

/* ---- corpo ---- */
.mc-tl-body { position: relative; }

.mc-tl-fundo {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}
.mc-tl-fundo--topo { z-index: 4; }
.mc-tl-fds {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(250, 246, 225, 0.55);
}
.mc-tl-hoje {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-500, #cc1616);
    opacity: 0.85;
}

/* grupos (categorias) */
.mc-tl-grupo-cab {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--neutral-100);
    cursor: pointer;
    min-height: var(--ds-touch, 44px);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.mc-tl-grupo-cab:hover { background: var(--neutral-200); }
.mc-tl-grupo-fix {
    position: sticky;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    max-width: 100vw;
    min-width: 0;
}
.mc-tl-grupo-chev { display: inline-flex; color: var(--neutral-500); flex-shrink: 0; }
.mc-tl-grupo-nome {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-tl-grupo-meta {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-tl-vazio-grupo {
    position: relative;
    z-index: 2;
    padding: 0;
    border-bottom: 1px solid var(--neutral-100);
    background: var(--neutral-0);
}
.mc-tl-vazio-grupo > span {
    position: sticky;
    left: 0;
    display: block;
    padding: 14px 16px;
    font-size: var(--text-sm);
    color: var(--neutral-400);
    max-width: 100vw;
}

/* linhas (equipamentos) */
.mc-tl-linha {
    position: relative;
    z-index: 1;
    display: flex;
    border-bottom: 1px solid var(--neutral-100);
}
.mc-tl-linha:hover { background: rgba(15, 23, 42, 0.02); }

.mc-tl-label {
    position: sticky;
    left: 0;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 4px 10px;
    background: var(--neutral-0);
    border-right: 1px solid var(--neutral-200);
    min-width: 0;
}
.mc-tl-label-cod {
    font-family: var(--ds-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-900);
}
.mc-tl-label-nome {
    font-size: 11.5px;
    color: var(--neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-tl-label-cont {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--neutral-400);
    background: var(--neutral-100);
    border-radius: var(--radius-full);
    padding: 1px 6px;
}
/* «livre desde 12/03» — a resposta que se vem cá buscar, escrita dentro
   da pista, encostada ao verde que descreve. --success-700 sobre a pista
   dá 4,84:1 (AA). */
.mc-tl-livre {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--success-700);
    white-space: nowrap;
    pointer-events: none;
}

/* FIGURA E FUNDO TROCADOS: a pista nasce VERDE (= livre) e a ocupação
   é o bloco desenhado por cima. Antes o livre era o mesmo branco do
   cartão, da página e da zona sem dados — três significados, um pixel. */
.mc-tl-track {
    position: relative;
    flex-shrink: 0;
    background: var(--success-100);
}

/* UMA cor de ocupação, não sete. Quatro dos sete fundos de estado
   ficavam abaixo dos 3:1 da WCAG 1.4.11 e vários eram indistinguíveis
   entre si (Reserva vs Finalizado: 1,13). Medido nesta combinação:
   contorno --ink-500 sobre a pista 4,92:1 (o preenchimento sozinho dava
   1,44 — o contorno não é decoração, é o que faz o limite existir) e
   texto --ink-800 sobre o bloco 8,97:1. */
.mc-tl-barra-item {
    position: absolute;
    height: 22px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid var(--ink-500);
    border-radius: 5px;
    background: var(--ink-300);
    color: var(--ink-800);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
/* Anulado não é ocupação: continua a poder aparecer (interruptor
   «Incluir anulados») mas não se confunde com o que está vendido. */
.mc-tl-barra-item.is-anulado {
    background: repeating-linear-gradient(135deg,
        var(--ink-100) 0 5px, var(--ink-200) 5px 10px);
    color: var(--ink-600);
    border-style: dashed;
}
.mc-tl-barra-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mc-tl-barra-item:hover { background: var(--ink-200); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); }
.mc-tl-barra-item:active { transform: translateY(1px); }
.mc-tl-barra-item:focus-visible { outline: 2px solid var(--neutral-900); outline-offset: 1px; z-index: 4; }
.mc-tl-barra-item.corta-esq { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mc-tl-barra-item.corta-esq::before {
    content: '‹';
    margin-right: 3px;
    opacity: 0.8;
    font-weight: 700;
}
.mc-tl-barra-item.corta-dir { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mc-tl-barra-item.corta-dir::after {
    content: '›';
    margin-left: auto;
    padding-left: 3px;
    opacity: 0.8;
    font-weight: 700;
}

/* tooltip próprio (substitui o title nativo e o data-tip morto) */
.mc-tl-tip {
    position: fixed;
    z-index: 960;
    display: none;
    max-width: 320px;
    padding: 8px 11px;
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.96);
    color: #fff;
    font-size: var(--text-xs);
    line-height: 1.45;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}
.mc-tl-tip strong { display: block; font-size: var(--text-sm); }
.mc-tl-tip span { display: block; opacity: 0.86; }
.mc-tl-tip em { display: block; margin-top: 3px; opacity: 0.7; font-style: normal; }

/* ===================================================================
   4. TIMELINE — vista de ocupação em lista (default em mobile)
   =================================================================== */
.mc-ocup { display: flex; flex-direction: column; }

.mc-ocup-cab {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    width: 100%;
    min-height: var(--ds-touch, 44px);
    padding: 12px var(--ds-card-pad, 16px);
    border: none;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--neutral-50);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-800);
    text-align: left;
    cursor: pointer;
}
.mc-ocup-cab:hover { background: var(--neutral-100); }
.mc-ocup-chev { display: inline-flex; color: var(--neutral-500); }
.mc-ocup-nome { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mc-ocup-meta {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--neutral-500);
    white-space: nowrap;
}
.mc-ocup-livre {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--success-700);
    white-space: nowrap;
}

.mc-ocup-vazio {
    margin: 0;
    padding: 14px var(--ds-card-pad, 16px);
    font-size: var(--text-sm);
    color: var(--neutral-400);
}

.mc-ocup-eq { padding: 10px var(--ds-card-pad, 16px) 4px; }
.mc-ocup-eq-cab {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.mc-ocup-eq-nome { font-size: var(--text-xs); color: var(--neutral-500); min-width: 0; }

.mc-ocup-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--neutral-200);
    border-left: 4px solid var(--mc-cor, var(--neutral-300));
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    min-height: var(--ds-touch, 44px);
    transition: var(--transition-fast);
}
.mc-ocup-item:hover { background: var(--neutral-50); box-shadow: var(--shadow-xs); }
.mc-ocup-item:active { transform: scale(0.995); }
.mc-ocup-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
/* Duas linhas reservadas para o nome do cliente: com 1 ou 2 linhas o
   cartão mede o mesmo. Sem isto, dois cartões lado a lado na mesma
   categoria diferiam 20,8px a 320px (12 avisos do gate, check 9). */
.mc-ocup-item-cli {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.7em;
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--neutral-800);
    overflow-wrap: anywhere;
}
.mc-ocup-item-datas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--neutral-500);
    font-variant-numeric: tabular-nums;
}
.mc-ocup-item-datas em { font-style: normal; color: var(--neutral-400); }

/* ===================================================================
   5. DETALHE — cabeçalho premium
   =================================================================== */
.mc-det-topo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.mc-det-ident { min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.mc-det-codigo {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--neutral-500);
    line-height: 1.15;
}
.mc-det-codigo span {
    font-family: var(--ds-font-mono);
    font-size: var(--text-2xl);
    color: var(--neutral-900);
    letter-spacing: -0.02em;
}
.mc-det-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.mc-det-cliente {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--neutral-700);
    overflow-wrap: anywhere;
}
.mc-det-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mc-det-alerta { margin-top: 4px; }

.mc-det-financeiro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--neutral-25, #fafafa);
    min-width: 0;
}
.mc-fin-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--text-sm);
    color: var(--neutral-600);
}
.mc-fin-linha--total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-200);
    font-size: var(--text-base);
    color: var(--neutral-900);
    font-weight: 600;
}
.mc-fin-linha--total strong { font-size: var(--text-xl); font-weight: 800; }

@media (min-width: 900px) {
    .mc-det-topo { flex-direction: row; align-items: flex-start; justify-content: space-between; }
    .mc-det-financeiro { flex: 0 0 300px; }
    .mc-det-codigo span { font-size: var(--text-3xl); }
}

/* micro-cronologia do período */
.mc-det-periodo { margin-top: 16px; }
.mc-per-barra {
    position: relative;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--neutral-100);
    overflow: hidden;
}
.mc-per-barra i {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--neutral-300);
}
.mc-per-vigente i { background: var(--success-500, #22c55e); }
.mc-per-futuro i { background: var(--primary-300, #f4a3a3); }
.mc-per-expirado i { background: var(--neutral-400); }

.mc-per-txt {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: var(--text-sm);
    color: var(--neutral-600);
    font-variant-numeric: tabular-nums;
}
.mc-per-txt > span { display: inline-flex; align-items: center; gap: 5px; }
.mc-per-etiqueta {
    padding: 2px 9px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    background: var(--neutral-100);
    color: var(--neutral-600);
}
.mc-per-etiqueta--vigente { background: var(--success-50, #ecfdf5); color: var(--success-700, #15803d); }
.mc-per-etiqueta--futuro { background: var(--primary-50, #fef2f2); color: var(--primary-700, #b91c1c); }
.mc-per-etiqueta--expirado { background: var(--neutral-100); color: var(--neutral-600); }

.mc-det-ficha { margin-top: 18px; }

.mc-det-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* blocos de texto */
.mc-blocos { display: flex; flex-direction: column; gap: 18px; }
.mc-bloco { min-width: 0; }
.mc-bloco .ds-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* tabela de artigos */
.mc-linha-total { font-weight: 700; color: var(--neutral-900); }
.mc-linha-obs { overflow-wrap: anywhere; }
.mc-oferta { color: var(--success-600, #16a34a); font-weight: 700; }

.mc-totais {
    padding: 14px var(--ds-card-pad, 16px);
    border-top: 1px solid var(--neutral-200);
    background: var(--neutral-25, #fafafa);
}
@media (min-width: 768px) {
    .mc-totais { margin-left: auto; max-width: 380px; }
}
.mc-info {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--neutral-400);
    cursor: pointer;
}
.mc-info:hover { color: var(--primary-600); }

/* cronologia de atividades */
.mc-crono { list-style: none; margin: 0; padding: 0; }
.mc-crono-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}
.mc-crono-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--neutral-200);
}
.mc-crono-ponto {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: var(--radius-full);
    background: var(--neutral-0);
    border: 3px solid var(--primary-400, #ef4444);
    z-index: 1;
}
.mc-crono-corpo { flex: 1; min-width: 0; }
.mc-crono-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mc-crono-data { font-size: var(--text-xs); font-weight: 700; color: var(--neutral-500); }
.mc-crono-acoes { margin-left: auto; }
.mc-crono-desc {
    margin: 4px 0 0;
    font-size: var(--text-sm);
    color: var(--neutral-800);
    overflow-wrap: anywhere;
}
.mc-crono-quem {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 0;
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

/* ===================================================================
   6. FORMULÁRIO
   =================================================================== */
.mc-form-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--neutral-25, #fafafa);
}
.mc-form-topo > div { display: flex; flex-direction: column; }
.mc-form-codigo { font-size: var(--text-lg); }
.mc-form-nota { flex: 1; min-width: 0; text-align: right; font-size: var(--text-xs); }

.mc-duracao {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.mc-duracao-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: var(--neutral-100);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--neutral-700);
    font-variant-numeric: tabular-nums;
}
.mc-duracao-aviso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--warning-600, #d97706);
}

/* ===================================================================
   7. MODAIS — typeahead, resultado calculado, dropzone, estados
   =================================================================== */
.mc-modal-form { min-width: 0; }

.mc-ta { position: relative; }
.mc-ta .ds-combobox-menu { top: calc(100% + 4px); }
.mc-ta.is-open .ds-combobox-menu { display: block; }

.mc-cb-off { opacity: 0.65; pointer-events: none; }

.mc-rt-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.mc-rt-toolbar::-webkit-scrollbar { display: none; }

.mc-resultado {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
}
.mc-resultado-rot {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500);
}
.mc-resultado-val {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--neutral-900);
}
.mc-resultado-formula {
    font-size: var(--text-xs);
    color: var(--neutral-400);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.mc-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 22px 16px;
    border: 2px dashed var(--neutral-300);
    border-radius: var(--radius-lg);
    background: var(--neutral-25, #fafafa);
    color: var(--neutral-500);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
    min-height: 120px;
}
.mc-dropzone strong { font-size: var(--text-sm); color: var(--neutral-700); }
.mc-dropzone span { font-size: var(--text-xs); }
.mc-dropzone:hover,
.mc-dropzone:focus-visible,
.mc-dropzone.is-over {
    border-color: var(--primary-400, #ef4444);
    background: var(--primary-50, #fef2f2);
    color: var(--primary-700, #b91c1c);
}

.mc-ficheiros-sel { list-style: none; margin: 10px 0 0; padding: 0; }
.mc-ficheiros-sel li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    font-size: var(--text-sm);
    min-width: 0;
}
.mc-fs-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-fs-tam { font-size: var(--text-xs); color: var(--neutral-400); flex-shrink: 0; }

.mc-estados { display: flex; flex-direction: column; gap: 8px; }
.mc-estado-op {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: var(--ds-touch, 44px);
    padding: 10px 12px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition-fast);
}
.mc-estado-op:hover { background: var(--neutral-50); border-color: var(--neutral-300); }
.mc-estado-op.is-active { border-color: var(--primary-400, #ef4444); background: var(--primary-50, #fef2f2); }

/* ===================================================================
   8. AJUSTES RESPONSIVOS FINAIS
   =================================================================== */

/* Alvos de toque: em ecrã pequeno tudo o que é clicável tem 44x44 px
   (o design system usa 36px nos tamanhos "sm" e nos botões de ícone).
   Critério de aceitação do projeto — verificação 4 da auditoria. */
@media (max-width: 767px) {
    .mc .ds-btn--sm,
    .mc .ds-icon-btn,
    .mc .ds-card-toggle,
    .mc .ds-page-btn,
    .mc .ds-chip,
    .mc .ds-tag-x,
    .mc .mc-info,
    .mc .ds-combobox-clear,
    .mc .ds-richtext-btn,
    .ds-modal-overlay .ds-btn--sm,
    .ds-modal-overlay .ds-icon-btn,
    .ds-modal-overlay .ds-modal-close,
    .ds-modal-overlay .ds-combobox-clear,
    .ds-modal-overlay .ds-richtext-btn {
        min-height: 44px;
        min-width: 44px;
    }
    /* o × das etiquetas cresce sem desalinhar o texto da etiqueta */
    .mc .ds-tag { align-items: center; }

    /* ligações de texto (migalhas) com alvo de toque completo */
    .mc .ds-breadcrumb a.ds-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .mc .ds-breadcrumb { align-items: center; }

    /* nenhum texto abaixo de 12px em ecrã pequeno (verificação 8) */
    .mc .ds-tag,
    .mc .ds-card-title .ds-card-count,
    .mc .ds-chip .ds-chip-count,
    .mc .mc-tl-leg,
    .ds-modal-overlay .ds-tag { font-size: 12px; }

    /* rótulo do seletor de tamanho de página (o gatilho é tratado acima) */
    .mc .ds-pagesize label { display: inline-flex; align-items: center; min-height: 44px; }

    /* em toque não há hover: as ações da linha estão SEMPRE visíveis */
    .mc .ds-table tbody tr .ds-row-actions { opacity: 1; }
    .mc .ds-table td.ds-td-actions { justify-content: flex-end; padding-top: 6px; }
}

/* Telemóvel em paisagem (ex.: 844x390): o Gantt não pode comer o ecrã */
@media (max-height: 520px) {
    .mc-tl { max-height: 46vh; }
    .mc-tl-legenda { padding: 6px 10px; gap: 4px 10px; }
}

/* Ecrãs muito estreitos (320px): nada pode transbordar */
@media (max-width: 360px) {
    .mc-det-codigo span { font-size: var(--text-xl); }
    .mc-resultado-formula { margin-left: 0; width: 100%; }
    .mc-form-nota { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-tl-barra-item,
    .mc-ocup-item,
    .mc-estado-op,
    .mc-dropzone { transition: none; }
}

/* Coluna Proposta vazia (item 15): célula sem conteúdo. Em cartão mobile,
   esconde-se a linha rotulada vazia; no desktop mantém-se para alinhar. */
@media (max-width: 767px) {
    .mc-td-proposta:empty { display: none; }
}

/* ===================================================================
   Estado desconhecido na coluna Estado — fallback SEM badge (item 29).
   Texto simples, visualmente distinto dos badges reais (nunca um pill).
   =================================================================== */
.mc-estado-desc {
    display: inline-block;
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--neutral-500);
}

/* ===================================================================
   MOD.campos — blindagem de especificidade
   ------------------------------------------------------------------
   O campo nativo que o MOD.campos esconde continua a ser um
   `.ds-select`, e o design-system dá-lhe tamanho por seletores com
   MAIS especificidade do que `.cp-nativo` (0-1-0) — por exemplo
   `.ds-pagesize .ds-select` (0-2-0), que lhe devolvia 74px e fazia o
   campo aparecer DUAS vezes na paginação. Estas regras repõem o 1px.
   Sem `!important`: ganham por especificidade e por ordem de ficheiro.
   =================================================================== */
.cp .cp-nativo,
.ds-modal-overlay .cp .cp-nativo {
    width: 1px;
    min-width: 0;
    height: 1px;
    min-height: 0;
    padding: 0;
}

/* «Por página»: o MOD.campos embrulha o `<select>` num `.cp` de `width:100%`,
   que serve um campo de formulário mas não um controlo de barra — esticava-se
   e empurrava a paginação. Devolve-se-lhe a medida que o `<select>` tinha.
   Escopado ao módulo (e não a `.ds-pagesize` solto) para não competir com a
   mesma regra que o mod-frota.css também precisou de escrever. */
.ds-lst[data-lista="contratos"] .ds-pagesize .cp { width: 118px; flex: 0 0 auto; min-width: 0; }
.ds-lst[data-lista="contratos"] .ds-pagesize .cp .cp-txt { font-size: var(--text-xs); }
/* «10 / 25 / 50» não tem valor vazio: o botão de limpar não faz sentido aqui e
   roubava 44px ao texto (o número deixava de caber e o campo colapsava a 0). */
.ds-lst[data-lista="contratos"] .ds-pagesize .cp .cp-acao--limpar { display: none; }
.ds-lst[data-lista="contratos"] .ds-pagesize .cp .cp-gatilho {
    /* só min-height: em toque o .cp-txt do MOD.campos já pede 44px e é ele
       que manda; fixar a altura fazia o texto transbordar do gatilho. */
    min-height: var(--ds-control-h-sm);
    padding-left: 10px;
}

/* Em ecrã pequeno o alvo volta aos 44px, como os botões de página ao lado.
   O `height` explícito tem de cair para `auto`: o mod-frota.css escreve
   `height: var(--ds-control-h-sm)` (36px) em `.ds-pagesize .cp .cp-gatilho`
   e, sendo carregado depois deste ficheiro, ganhava-lhe a altura. */
@media (max-width: 768px) {
    .ds-lst[data-lista="contratos"] .ds-pagesize .cp { width: 140px; }
    .ds-lst[data-lista="contratos"] .ds-pagesize .cp .cp-gatilho { height: auto; min-height: 44px; }
    .ds-lst[data-lista="contratos"] .ds-pagesize .cp .cp-txt { min-height: 44px; }
}

/* ===================================================================
   Filtros em mobile — BOTTOM SHEET (item 205; era um drawer lateral)
   Sobe do fundo, com backdrop e bloqueio de scroll. O contador de
   filtros ativos continua no botão (.ds-filters-badge do design
   system) e o JS (`_sincDrawerFiltros`) é o mesmo: só muda a folha.

   Porquê a mudança de lado: o checklist pede bottom sheet e a
   ergonomia dá-lhe razão — num telemóvel a mão chega ao fundo do ecrã,
   não à borda direita. O sheet pára a 88 % da altura para o utilizador
   continuar a ver que a lista está lá por trás.
   =================================================================== */
.mc-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1190;
    animation: mc-drawer-fade 0.2s ease;
}
body.mc-drawer-lock { overflow: hidden; }

@media (max-width: 767px) {
    #mcFiltros.mc-drawer .ds-filters-body {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 88vh;
        margin: 0;
        padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        background: var(--neutral-0);
        border-top: 1px solid var(--neutral-200);
        border-radius: 20px 20px 0 0;
        box-shadow: var(--shadow-xl);
        z-index: 1200;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: mc-drawer-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* Pega do sheet: diz "isto arrasta-se para baixo" sem uma palavra. */
    #mcFiltros.mc-drawer .ds-filters-body::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--neutral-300);
    }
    #mcFiltros.mc-drawer .ds-filters-actions {
        position: sticky;
        bottom: 0;
        margin-top: auto;
        padding-top: 12px;
        background: var(--neutral-0);
    }
}
@keyframes mc-drawer-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mc-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    #mcFiltros.mc-drawer .ds-filters-body,
    .mc-drawer-backdrop { animation: none; }
}

/* ===================================================================
   Host da ficha (motor MOD.ficha) dentro da página do módulo.
   A ficha traz a sua própria topbar sticky, por isso o host não pode
   criar contexto de empilhamento nem cortar o `position: sticky` de
   quem está lá dentro — daí não ter overflow nem transform.
   =================================================================== */
.mc-ficha-host {
    min-width: 0;
    display: block;
}

/* ===================================================================
   PAINEL «ANÁLISE» — o interior (§4.2b · mod-contratos.js)
   ===================================================================
   A CASCA (botão, chevron, corpo colapsável, linha de resumo) é a
   partilhada: `.ds-analise*` no ds-listagem.css, igual nos dez
   módulos. Aqui só vive o que os contratos põem lá DENTRO — a
   distribuição por estado e as duas filas de trabalho.

   Mobile-first: uma coluna até aos 1024 px, três a partir daí.
   =================================================================== */
.mc-an-grelha {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3, 12px);
    align-items: start;
    min-width: 0;
}

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

.mc-an-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2, 8px);
    margin: 0;
    font-size: var(--txt-sm, 13px);
    font-weight: var(--fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--track-caps, .04em);
    color: var(--text-2, #554E50);
}

.mc-an-conta {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-alt, #F7F5F5);
    color: var(--text-1, #1B1618);
    font-size: var(--txt-sm, 13px);
    font-variant-numeric: var(--num-tabular, tabular-nums);
    letter-spacing: normal;
}

/* ---------- distribuição por estado ---------- */
.mc-an-barras {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada barra é um alvo de toque a sério (44 px) porque É um filtro:
   clicar leva à lista já filtrada por esse estado. */
.mc-an-barra-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--sp-2, 8px);
    width: 100%;
    min-height: 44px;
    padding: 4px var(--sp-2, 8px);
    border: 0;
    border-radius: var(--r-md, 10px);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mc-an-barra-btn:hover { background: var(--surface-alt, #F7F5F5); }

.mc-an-barra-rot {
    grid-column: 1;
    font-size: var(--txt-sm, 13px);
    color: var(--text-2, #554E50);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-an-barra-n {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--txt-sm, 13px);
    font-weight: var(--fw-bold, 700);
    color: var(--text-1, #1B1618);
    font-variant-numeric: var(--num-tabular, tabular-nums);
    white-space: nowrap;
}

.mc-an-barra-pc { font-weight: 400; color: var(--text-3, #8A8283); }

.mc-an-barra-trilho {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-alt, #F7F5F5);
    overflow: hidden;
}

.mc-an-barra-preenche {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ink-400, #A39C9D);
    min-width: 2px;
}

/* As cores são as mesmas dos crachás de estado: um estado, uma cor,
   em toda a app. */
.mc-an-barra-preenche[data-cor="red"] { background: var(--brand-500, #DA0A0D); }
.mc-an-barra-preenche[data-cor="green"] { background: var(--success-500, #10B981); }
.mc-an-barra-preenche[data-cor="amber"] { background: var(--warning-500, #F59E0B); }
.mc-an-barra-preenche[data-cor="blue"] { background: #3B82F6; }
.mc-an-barra-preenche[data-cor="indigo"] { background: #6366F1; }

.mc-an-rodape {
    margin: 0;
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #8A8283);
    font-variant-numeric: var(--num-tabular, tabular-nums);
}

/* ---------- filas de trabalho ---------- */
.mc-an-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mc-an-linha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2, 8px);
    width: 100%;
    min-height: 44px;
    padding: 4px var(--sp-2, 8px);
    border: 0;
    border-radius: var(--r-md, 10px);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mc-an-linha:hover { background: var(--surface-alt, #F7F5F5); }

.mc-an-linha-cod {
    font-size: var(--txt-sm, 13px);
    font-weight: var(--fw-bold, 700);
    color: var(--text-1, #1B1618);
    font-variant-numeric: var(--num-tabular, tabular-nums);
    white-space: nowrap;
}

.mc-an-linha-cli {
    font-size: var(--txt-sm, 13px);
    color: var(--text-2, #554E50);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-an-linha-data {
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #8A8283);
    font-variant-numeric: var(--num-tabular, tabular-nums);
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .mc-an-grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mc-an-card { padding: var(--sp-4, 16px); }
}

/* O painel não vai para o papel — a lista vai. */
@media print {
    .ds-lst[data-lista="contratos"] .ds-analise { display: none !important; }
}