/* =====================================================================================
   EFICÁCIA CRM — mod-tempo.css · Extras do módulo Gestão de Tempo
   Só o que o design-system.css / ds-listagem.css NÃO cobrem. Prefixo: mt-
   Mobile-first: as regras base servem <768 px; @media (min-width:…) acrescenta desktop.

   ⚠️ REGRA DA CASA
   `ds-listagem.css` é global e sem @layer. Tudo o que toque numa classe que não é
   nossa (`.ds-lst-linha`, `.ds-lst-c`, `.ds-tabs`…) vive escopado por
   `[data-lista="tempo"]` — sem isso partem-se as outras dez listagens da app.
   As classes `mt-*` são nossas e não precisam de escopo.
   Zero `!important`.
   ===================================================================================== */

/* ---------- página ---------- */
.mt-page { min-width: 0; }

/* ---------- abas: fila com scroll próprio e snap (a página nunca abana) ---------- */
.mt-tabs {
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.mt-tabs > .ds-tab { scroll-snap-align: start; }

/* ---------- KPI que não filtra: mesma pílula, sem afordância de clique ---------- */
.mt-kpi--estatico { cursor: default; }

/* ---------- faixas (aviso / info / bloqueio) ----------
   O 409 do servidor deixou de ser uma surpresa depois de gravar: aparece aqui,
   ANTES de preencher. --------------------------------------------------------- */
.mt-faixa {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2, 8px);
    padding: 10px 12px;
    margin: 0 0 var(--sp-3, 12px);
    border: 1px solid var(--border, #e5e7eb);
    border-left-width: 3px;
    border-radius: var(--r-lg, 10px);
    background: var(--surface, #fff);
    font-size: var(--txt-sm, .875rem);
    line-height: 1.45;
    color: var(--text-2, #374151);
}
.mt-faixa-ico { flex: 0 0 auto; margin-top: 1px; }
.mt-faixa-txt { min-width: 0; flex: 1 1 auto; }
.mt-faixa-txt strong { color: var(--text-1, #111827); }
.mt-faixa .ds-btn { flex: 0 0 auto; }

.mt-faixa--aviso { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 7%, var(--surface, #fff)); }
.mt-faixa--aviso .mt-faixa-ico { color: #b45309; }
.mt-faixa--info { border-left-color: #3b82f6; background: color-mix(in srgb, #3b82f6 6%, var(--surface, #fff)); }
.mt-faixa--info .mt-faixa-ico { color: #1d4ed8; }
.mt-faixa--bloqueio { border-left-color: #DA0A0D; background: color-mix(in srgb, #DA0A0D 6%, var(--surface, #fff)); }
.mt-faixa--bloqueio .mt-faixa-ico { color: #b91c1c; }

@media (max-width: 639.98px) {
    .mt-faixa { flex-wrap: wrap; }
    .mt-faixa .ds-btn { width: 100%; justify-content: center; }
}

/* =====================================================================================
   FORMULÁRIO DE REGISTAR — o gesto diário
   Um dia normal marca-se com 1 clique: a linha nasce preenchida 08:00–17:00.
   ===================================================================================== */

.mt-cartao {
    padding: var(--sp-4, 16px);
    margin-bottom: var(--sp-4, 16px);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-xl, 14px);
    background: var(--surface, #fff);
    box-shadow: var(--sh-1, 0 1px 2px rgba(0, 0, 0, .05));
}

.mt-form-topo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3, 12px);
    margin-bottom: var(--sp-3, 12px);
}
@media (min-width: 640px) {
    .mt-form-topo { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.mt-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mt-campo--largo { grid-column: 1 / -1; }
.mt-campo--calc { justify-content: flex-end; }
.mt-campo--horario { justify-content: center; }

.mt-horario {
    font-size: var(--txt-sm, .875rem);
    color: var(--text-2, #374151);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt-horario em { color: var(--text-3, #6b7280); font-style: normal; }

.mt-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3, 12px);
}
@media (min-width: 768px) {
    .mt-campos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* O ALMOÇO nunca se pergunta — mostra-se ao lado do número, que assim se explica
   a si próprio: «8h00 ⟨−1h almoço⟩». */
.mt-calc {
    display: block;
    padding: 8px 0;
    font-size: var(--txt-base, 1rem);
    font-weight: var(--fw-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--text-1, #111827);
}
.mt-calc--extra { color: #b45309; }
.mt-nota-almoco {
    display: inline-block;
    font-size: var(--txt-2xs, .6875rem);
    font-weight: var(--fw-medium, 500);
    color: var(--text-3, #6b7280);
    white-space: nowrap;
}

/* ---------- presets ---------- */
.mt-presets { margin-bottom: var(--sp-3, 12px); }
.mt-presets .ds-chip { border-style: dashed; }

/* ---------- linha/período: cartão colapsável (o padrão do Shoperfil) ---------- */
.mt-linhas { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }

.mt-linha {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    background: var(--surface-sunken, #fafafa);
    overflow: hidden;
}
.mt-linha.is-aberta { background: var(--surface, #fff); border-color: var(--border-strong, #d1d5db); }

.mt-linha-cab {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--sp-2, 8px);
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--text-1, #111827);
}
.mt-linha-n {
    font-size: var(--txt-2xs, .6875rem);
    font-weight: var(--fw-bold, 700);
    color: var(--text-3, #6b7280);
}
.mt-linha-resumo {
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold, 600);
    white-space: nowrap;
}
.mt-linha-h {
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-bold, 700);
    white-space: nowrap;
}
.mt-linha-h em { color: #b45309; font-style: normal; }
/* A folha de obra é o campo mais comprido do resumo: corta-se COM reticências.
   Era este o defeito medido em `registar-horas` — 134 px escondidos sem qualquer
   sinal de que faltava lá conteúdo. */
.mt-linha-folha {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--txt-xs, .75rem);
    color: var(--text-3, #6b7280);
}
.mt-linha-chev {
    grid-column: 4;
    grid-row: 1;
    display: inline-flex;
    transition: transform .16s ease;
    color: var(--text-3, #6b7280);
}
.mt-linha.is-aberta .mt-linha-chev { transform: rotate(180deg); }

.mt-linha-corpo {
    padding: 0 12px 12px;
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: 12px;
}
/* «Remover período» é um botão de largura total DENTRO do cartão aberto — não um
   ícone de 32 px espremido na 8.ª coluna de uma tabela (era o que fazia o auditor
   responsivo acusar 4 sobreposições a 320/375/390/414 px). */
.mt-linha-remover {
    width: 100%;
    justify-content: center;
    margin-top: var(--sp-3, 12px);
    min-height: 44px;
    color: #b91c1c;
}
@media (min-width: 768px) {
    .mt-linha-cab { grid-template-columns: auto auto 1fr auto auto; }
    .mt-linha-folha { grid-column: 3; grid-row: 1; }
    .mt-linha-chev { grid-column: 5; }
    .mt-linha-remover { width: auto; margin-left: auto; }
}

.mt-form-acoes {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
    margin-top: var(--sp-4, 16px);
}
.mt-form-acoes .ds-btn { width: 100%; justify-content: center; min-height: 44px; }
@media (min-width: 640px) {
    .mt-form-acoes { flex-direction: row; justify-content: space-between; }
    .mt-form-acoes .ds-btn { width: auto; }
}

/* =====================================================================================
   NÚMEROS, BADGES E ESTADOS
   ===================================================================================== */

.mt-num {
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold, 600);
    white-space: nowrap;
}
.mt-num--extra { color: #b45309; }
.mt-num--neg { color: #b91c1c; }
.mt-num--pos { color: #047857; }
.mt-sem-tarifa { font-style: normal; font-size: var(--txt-xs, .75rem); color: var(--text-3, #6b7280); }
.mt-npic { font-style: normal; font-size: var(--txt-2xs, .6875rem); color: var(--text-3, #6b7280); }
.mt-dia-semana {
    display: block;
    font-size: var(--txt-2xs, .6875rem);
    color: var(--text-3, #6b7280);
}
.mt-falta {
    display: block;
    font-size: var(--txt-2xs, .6875rem);
    color: #b91c1c;
    white-space: nowrap;
}

.mt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--txt-2xs, .6875rem);
    font-weight: var(--fw-bold, 700);
    line-height: 1.6;
    white-space: nowrap;
    background: color-mix(in srgb, var(--mt-badge-cor, #A39C9D) 14%, transparent);
    color: var(--mt-badge-cor, #6b7280);
    border: 1px solid color-mix(in srgb, var(--mt-badge-cor, #A39C9D) 32%, transparent);
}
.mt-badge[data-estado="completo"] { --mt-badge-cor: #047857; }
.mt-badge[data-estado="incompleto"] { --mt-badge-cor: #b45309; }
.mt-badge[data-estado="ausencia"] { --mt-badge-cor: #b91c1c; }
.mt-badge[data-estado="ferias"] { --mt-badge-cor: #1d4ed8; }
.mt-badge[data-estado="feriado"] { --mt-badge-cor: #6d28d9; }
.mt-badge[data-estado="fds"] { --mt-badge-cor: #6b7280; }
/* «Por justificar» é a AUSÊNCIA DE REGISTO, não um tipo de ausência: o dia está
   por preencher, não há nada de errado com ele. Partilhava o vermelho da
   «Ausência» e passa a neutro, como já era a risca da linha (`COR_ESTADO`). */
.mt-badge[data-estado="sem-registo"] { --mt-badge-cor: #6b7280; }

.mt-badge-motivo {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--txt-2xs, .6875rem);
    font-weight: var(--fw-bold, 700);
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: color-mix(in srgb, var(--mt-cor, #A39C9D) 12%, transparent);
    color: var(--mt-cor, #6b7280);
}

.mt-btn-registar { min-height: 32px; }
.mt-barra-dir { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.mt-mes-rot {
    min-width: 120px;
    text-align: center;
    font-weight: var(--fw-semibold, 600);
    font-size: var(--txt-sm, .875rem);
}

/* =====================================================================================
   TABELA → CARTÕES (a troca é aos 1024 px, da moldura)
   Tudo escopado por [data-lista="tempo"] e ainda por aba: a mesma coluna ocupa
   posições diferentes em cada uma.
   ===================================================================================== */

[data-lista="tempo"] .ds-lst-linha {
    grid-template-columns: minmax(0, 1fr) auto;
}
[data-lista="tempo"] .ds-lst-c { overflow: hidden; text-overflow: ellipsis; }

/* ---- aba «Registar»: Período | Horas · Folha | Extra · Observações ---- */
[data-mt-aba="registar"] .mt-c--periodo { grid-column: 1; grid-row: 1; }
[data-mt-aba="registar"] .mt-c--norm { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
[data-mt-aba="registar"] .mt-c--folha { grid-column: 1; grid-row: 2; }
[data-mt-aba="registar"] .mt-c--extra { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; }
[data-mt-aba="registar"] .mt-c--obs { grid-column: 1 / -1; grid-row: 3; }
[data-mt-aba="registar"] .mt-c--periodo[data-rot]::before { content: none; }

/* ---- aba «Folha de Ponto»: Dia | Estado · Período · Normais | Extra · Motivo ---- */
[data-mt-aba="folha"] .mt-c--dia { grid-column: 1; grid-row: 1; }
[data-mt-aba="folha"] .mt-c--estado { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
[data-mt-aba="folha"] .mt-c--periodo { grid-column: 1 / -1; grid-row: 2; }
[data-mt-aba="folha"] .mt-c--norm { grid-column: 1; grid-row: 3; }
[data-mt-aba="folha"] .mt-c--extra { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; }
[data-mt-aba="folha"] .mt-c--motivo { grid-column: 1 / -1; grid-row: 4; }
[data-mt-aba="folha"] .mt-c--dia[data-rot]::before,
[data-mt-aba="folha"] .mt-c--estado[data-rot]::before { content: none; }
[data-mt-aba="folha"] .mt-c--dia .ds-lst-forte { font-size: var(--txt-lg, 1.125rem); }

/* ---- aba «Mapa»: Colaborador | Saldo · Prev/Norm/Extra · Comp/Desc · Valor ---- */
[data-mt-aba="mapa"] .mt-c--colab { grid-column: 1; grid-row: 1; }
[data-mt-aba="mapa"] .mt-c--saldo { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
[data-mt-aba="mapa"] .mt-c--prev { grid-column: 1; grid-row: 2; }
[data-mt-aba="mapa"] .mt-c--norm { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; }
[data-mt-aba="mapa"] .mt-c--extra { grid-column: 1; grid-row: 3; }
[data-mt-aba="mapa"] .mt-c--comp { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; }
[data-mt-aba="mapa"] .mt-c--desc { grid-column: 1; grid-row: 4; }
[data-mt-aba="mapa"] .mt-c--valor { grid-column: 2; grid-row: 4; justify-self: end; text-align: right; }
[data-mt-aba="mapa"] .mt-c--colab[data-rot]::before { content: none; }

/* ---- aba «Ausências»: Colaborador | Motivo · Período · Tipo | Liquidação ---- */
[data-mt-aba="ausencias"] .mt-c--colab { grid-column: 1; grid-row: 1; }
[data-mt-aba="ausencias"] .mt-c--motivo { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
[data-mt-aba="ausencias"] .mt-c--periodo { grid-column: 1 / -1; grid-row: 2; }
[data-mt-aba="ausencias"] .mt-c--tipo { grid-column: 1; grid-row: 3; }
[data-mt-aba="ausencias"] .mt-c--liq { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; }
[data-mt-aba="ausencias"] .mt-c--colab[data-rot]::before,
[data-mt-aba="ausencias"] .mt-c--motivo[data-rot]::before { content: none; }

/* ---- 2 colunas de cartões entre 640 e 1023,98 px (regra da moldura) ---- */
@media (min-width: 640px) and (max-width: 1023.98px) {
    [data-mt-aba="registar"] .mt-c--obs,
    [data-mt-aba="folha"] .mt-c--motivo { font-size: var(--txt-xs, .75rem); }
}

/* ---- tabela a partir dos 1024 px: larguras declaradas (table-layout: fixed) ---- */
@media (min-width: 1024px) {
    [data-lista="tempo"] .mt-h--periodo { width: 190px; }
    [data-lista="tempo"] .mt-h--folha { width: 190px; }
    [data-lista="tempo"] .mt-h--obs { width: auto; }
    [data-lista="tempo"] .mt-h--norm,
    [data-lista="tempo"] .mt-h--extra,
    [data-lista="tempo"] .mt-h--prev,
    [data-lista="tempo"] .mt-h--comp,
    [data-lista="tempo"] .mt-h--desc { width: 116px; }
    [data-lista="tempo"] .mt-h--saldo { width: 116px; }
    [data-lista="tempo"] .mt-h--valor { width: 130px; }
    [data-lista="tempo"] .mt-h--dia { width: 108px; }
    [data-lista="tempo"] .mt-h--estado { width: 150px; }
    [data-lista="tempo"] .mt-h--motivo { width: auto; }
    [data-lista="tempo"] .mt-h--colab { width: auto; }
    [data-lista="tempo"] .mt-h--tipo { width: 120px; }
    [data-lista="tempo"] .mt-h--liq { width: 190px; }

    /* Números encostados à direita e alinhados na vertical — uma coluna de horas
       lê-se de relance ou não serve para nada. */
    [data-lista="tempo"] .mt-c--norm,
    [data-lista="tempo"] .mt-c--extra,
    [data-lista="tempo"] .mt-c--prev,
    [data-lista="tempo"] .mt-c--comp,
    [data-lista="tempo"] .mt-c--desc,
    [data-lista="tempo"] .mt-c--saldo,
    [data-lista="tempo"] .mt-c--valor,
    [data-lista="tempo"] .mt-h--norm,
    [data-lista="tempo"] .mt-h--extra,
    [data-lista="tempo"] .mt-h--prev,
    [data-lista="tempo"] .mt-h--comp,
    [data-lista="tempo"] .mt-h--desc,
    [data-lista="tempo"] .mt-h--saldo,
    [data-lista="tempo"] .mt-h--valor { text-align: right; }

    /* O eyebrow `data-rot` é do cartão: na tabela há cabeçalho. */
    [data-lista="tempo"] .ds-lst-c[data-rot]::before { content: none; }

    [data-lista="tempo"] .mt-c--obs,
    [data-lista="tempo"] .mt-c--motivo,
    [data-lista="tempo"] .mt-c--folha,
    [data-lista="tempo"] .mt-c--colab,
    [data-lista="tempo"] .mt-c--liq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    [data-lista="tempo"] .mt-c--obs .ds-lst-forte,
    [data-lista="tempo"] .mt-c--colab .ds-lst-forte { overflow: hidden; text-overflow: ellipsis; }

    [data-lista="tempo"] .mt-c--dia .mt-dia-semana { display: inline; margin-left: 6px; }
    .mt-falta { display: inline; margin-left: 6px; }
}

.mt-pago { opacity: .72; }

/* =====================================================================================
   PAINEL «ANÁLISE»
   ===================================================================================== */

.mt-analise {
    display: block;
    min-width: 0;
}
.mt-analise-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4, 16px);
}
@media (min-width: 768px) {
    .mt-analise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mt-bloco--largo { grid-column: 1 / -1; }
}

.mt-bloco { min-width: 0; }
.mt-bloco-tit {
    margin: 0 0 var(--sp-2, 8px);
    font-size: var(--txt-xs, .75rem);
    font-weight: var(--fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--track-caps, .04em);
    color: var(--text-3, #6b7280);
}
.mt-vazio-inline {
    margin: 0;
    font-size: var(--txt-sm, .875rem);
    color: var(--text-3, #6b7280);
}

/* ---------- barras CSS: o gráfico que nunca depende de um CDN ---------- */
.mt-barras { display: flex; flex-direction: column; gap: 6px; }
.mt-barra {
    display: grid;
    grid-template-columns: minmax(70px, 1.1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: var(--sp-2, 8px);
    min-height: 26px;
}
.mt-barra[role="button"] { cursor: pointer; }
.mt-barra-rot {
    font-size: var(--txt-xs, .75rem);
    color: var(--text-2, #374151);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt-barra-trilho {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-sunken, #f3f4f6);
    overflow: hidden;
}
.mt-barra-fill {
    display: block;
    height: 100%;
    width: var(--mt-w, 0%);
    border-radius: 999px;
    background: #3b82f6;
    transition: width .2s ease;
}
.mt-barra-fill[data-cor="green"] { background: #10b981; }
.mt-barra-fill[data-cor="amber"] { background: #f59e0b; }
.mt-barra-fill[data-cor="red"] { background: #DA0A0D; }
.mt-barra-val {
    font-size: var(--txt-xs, .75rem);
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold, 600);
    white-space: nowrap;
}
.mt-barras--compacto .mt-barra { min-height: 22px; }

/* ---------- sparkline das 4 semanas ---------- */
.mt-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 76px;
    padding: 4px 0;
}
.mt-spark-col {
    flex: 1 1 0;
    min-width: 3px;
    height: var(--mt-h, 2%);
    min-height: 3px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(to top, #10b981 calc(100% - var(--mt-extra, 0%)), #f59e0b 0);
}
.mt-spark-col[data-fds="1"] { opacity: .45; }
.mt-spark-col[style*="--mt-h:0%"] { background: var(--surface-sunken, #e5e7eb); }

.mt-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin: var(--sp-2, 8px) 0 0;
    font-size: var(--txt-2xs, .6875rem);
    color: var(--text-3, #6b7280);
}
.mt-ponto {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-radius: 50%;
    background: var(--mt-cor, #A39C9D);
}
.mt-ponto[data-cor="green"] { --mt-cor: #10b981; }
.mt-ponto[data-cor="amber"] { --mt-cor: #f59e0b; }
.mt-ponto[data-cor="gray"] { --mt-cor: #d1d5db; }
.mt-ponto[data-estado="completo"] { --mt-cor: #10b981; }
.mt-ponto[data-estado="incompleto"] { --mt-cor: #f59e0b; }
.mt-ponto[data-estado="ausencia"] { --mt-cor: #DA0A0D; }
.mt-ponto[data-estado="ferias"] { --mt-cor: #3b82f6; }
.mt-ponto[data-estado="feriado"] { --mt-cor: #8b5cf6; }
.mt-ponto[data-estado="fds"] { --mt-cor: #A39C9D; }
/* «Por justificar» é um ANEL VAZIO, não um ponto cheio: a distinção passa a ler-se
   pela forma e não só pela cor (a legenda tem de repetir o que o calendário faz). */
.mt-ponto[data-estado="sem-registo"] {
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    background: transparent;
    border: 2px dashed #9ca3af;
}

/* ---------- mini-calendário: o elemento-assinatura do módulo ----------
   É a versão-tempo da fotografia dos Equipamentos: identifica o período num
   relance, como a foto identifica o suporte. ------------------------------- */
.mt-cal { min-width: 0; }
.mt-cal-cab,
.mt-cal-grelha {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.mt-cal-cab {
    margin-bottom: 4px;
    font-size: var(--txt-2xs, .6875rem);
    font-weight: var(--fw-bold, 700);
    color: var(--text-3, #6b7280);
    text-align: center;
}
.mt-cal-vazio { aspect-ratio: 1; }
.mt-cal-dia {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm, 6px);
    font: inherit;
    font-size: var(--txt-2xs, .6875rem);
    font-weight: var(--fw-bold, 700);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    background: color-mix(in srgb, var(--mt-cor, #e5e7eb) 20%, transparent);
    color: var(--text-1, #111827);
    transition: transform .12s ease, box-shadow .12s ease;
}
.mt-cal-dia:hover,
.mt-cal-dia:focus-visible { transform: translateY(-1px); box-shadow: var(--sh-2, 0 4px 8px rgba(0, 0, 0, .08)); }
.mt-cal-dia[data-estado="completo"] { --mt-cor: #10b981; }
.mt-cal-dia[data-estado="incompleto"] { --mt-cor: #f59e0b; }
.mt-cal-dia[data-estado="ausencia"] { --mt-cor: #DA0A0D; }
.mt-cal-dia[data-estado="ferias"] { --mt-cor: #3b82f6; }
.mt-cal-dia[data-estado="feriado"] { --mt-cor: #8b5cf6; }
.mt-cal-dia[data-estado="fds"] { --mt-cor: #A39C9D; opacity: .5; }
/* Levava o vermelho da «Ausência» a 55% de opacidade. Como o fundo da célula já é
   uma mistura a 20%, as duas saíam a 11% contra 20% do MESMO tom — indistinguíveis
   a olho, e ainda menos separáveis para quem não distingue vermelhos. Passa a
   contorno tracejado sobre fundo vazio: lê-se «falta aqui alguma coisa» sem
   depender da cor, e devolve o vermelho à «Ausência» em exclusivo. */
.mt-cal-dia[data-estado="sem-registo"] {
    --mt-cor: transparent;
    border-color: #9ca3af;
    border-style: dashed;
    color: var(--text-2, #4b5563);
}
@media (min-width: 480px) {
    .mt-cal-dia { min-height: 34px; font-size: var(--txt-xs, .75rem); }
}

/* ---------- listas acionáveis ---------- */
.mt-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2, 8px);
    min-width: 0;
    font-size: var(--txt-sm, .875rem);
}
.mt-lista-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2, 8px);
    width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--r-sm, 6px);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--text-1, #111827);
}
.mt-lista-btn:hover,
.mt-lista-btn:focus-visible { background: var(--surface-sunken, #f3f4f6); }
.mt-lista-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-lista-n {
    flex: 0 0 auto;
    font-size: var(--txt-xs, .75rem);
    font-variant-numeric: tabular-nums;
    color: var(--text-3, #6b7280);
}
.mt-lista-n em { font-style: normal; color: #b45309; }

/* ---------- Chart.js: caixa de altura fixa (o canvas não pode crescer sozinho) ---------- */
.mt-chart { position: relative; height: 260px; min-width: 0; }
.mt-chart > canvas { max-width: 100%; }

/* =====================================================================================
   FICHAS EM MODAL (dentro da casca do MOD.ficha)
   ===================================================================================== */

.mt-ficha { display: flex; flex-direction: column; gap: var(--sp-4, 16px); }
.mt-ficha .mt-bloco-tit { margin-bottom: 0; }

.mt-ficha-nota {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: var(--txt-xs, .75rem);
    line-height: 1.5;
    color: var(--text-3, #6b7280);
}
.mt-ficha-nota svg { flex: 0 0 auto; margin-top: 2px; }

.mt-resumo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2, 8px);
}
@media (min-width: 640px) {
    .mt-resumo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mt-resumo-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    background: var(--surface-sunken, #fafafa);
    min-width: 0;
}
.mt-resumo-item--destaque { background: var(--surface, #fff); border-color: var(--border-strong, #d1d5db); }
.mt-resumo-rot {
    font-size: var(--txt-2xs, .6875rem);
    font-weight: var(--fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--track-caps, .04em);
    color: var(--text-3, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt-resumo-val {
    font-size: var(--txt-base, 1rem);
    font-weight: var(--fw-bold, 700);
    font-variant-numeric: tabular-nums;
    color: var(--text-1, #111827);
}

.mt-tab-mini { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mt-tab-mini table { width: 100%; border-collapse: collapse; font-size: var(--txt-xs, .75rem); }
.mt-tab-mini th,
.mt-tab-mini td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border, #e5e7eb);
    white-space: nowrap;
}
.mt-tab-mini th {
    font-size: var(--txt-2xs, .6875rem);
    text-transform: uppercase;
    letter-spacing: var(--track-caps, .04em);
    color: var(--text-3, #6b7280);
}
.mt-tab-mini td { font-variant-numeric: tabular-nums; }

.mt-obs { margin: 0; font-size: var(--txt-sm, .875rem); line-height: 1.55; color: var(--text-2, #374151); }
.mt-liq-efeito {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid #3b82f6;
    border-radius: var(--r-sm, 6px);
    background: color-mix(in srgb, #3b82f6 6%, var(--surface, #fff));
    font-size: var(--txt-sm, .875rem);
    line-height: 1.5;
}

/* ---------- rádios (tipo de ausência e liquidação) ---------- */
.mt-radios { display: flex; flex-wrap: wrap; gap: var(--sp-3, 12px); }
.mt-radios--coluna { flex-direction: column; gap: var(--sp-2, 8px); }
.mt-radio {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 44px;
    padding: 8px 4px;
    cursor: pointer;
    font-size: var(--txt-sm, .875rem);
}
.mt-radio input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; }
.mt-radio--bloco {
    padding: 10px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    background: var(--surface-sunken, #fafafa);
}
.mt-radio--bloco:has(input:checked) {
    border-color: var(--primary-600, #DA0A0D);
    background: color-mix(in srgb, var(--primary-600, #DA0A0D) 5%, var(--surface, #fff));
}
.mt-radio--bloco span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-radio--bloco em {
    font-style: normal;
    font-size: var(--txt-xs, .75rem);
    color: var(--text-3, #6b7280);
}

.mt-liquidacao { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }

/* =====================================================================================
   FAB (só na aba de Ausências, e só em mobile)
   ===================================================================================== */

.mt-fab { display: none; }
@media (max-width: 767.98px) {
    .mt-fab {
        display: inline-flex;
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 40;
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        box-shadow: var(--sh-3, 0 8px 20px rgba(0, 0, 0, .18));
    }
}

/* =====================================================================================
   ACESSIBILIDADE E PREFERÊNCIAS
   ===================================================================================== */

/* ALVOS DE TOQUE — 44×44 px abaixo dos 768 px.
   A regra é por LARGURA e não por `pointer: coarse`: o critério de aceitação é
   medido a redimensionar a janela (tools/responsive-audit.js, verificação 4), e um
   `@media (pointer: coarse)` nunca dispara aí. Fica também a versão por ponteiro,
   para tablets largos com toque. */
@media (max-width: 767.98px) {
    .mt-presets .ds-chip,
    .mt-barra-dir .ds-btn,
    .mt-linha-cab,
    .mt-lista-btn,
    .mt-btn-registar,
    .mt-cal-dia {
        min-height: 44px;
        min-width: 44px;
    }
    .mt-presets .ds-chip { padding-block: 10px; }
    /* O calendário tem 7 colunas: a 320 px cada quadrado tem ~40 px de largura
       disponível. Deixa de ser quadrado e passa a ter a altura mínima do toque —
       melhor um retângulo tocável do que um quadrado que ninguém acerta.
       As células VAZIAS do início do mês perdem o `aspect-ratio` pela mesma razão:
       sendo quadradas, esticavam a primeira linha da grelha (52 px contra 44 px das
       restantes) e a auditoria acusava, com razão, botões assimétricos. */
    .mt-cal-dia,
    .mt-cal-vazio { aspect-ratio: auto; }
    .mt-cal-vazio { min-height: 44px; }
    .mt-mes-rot { min-width: 96px; }
}

@media (pointer: coarse) {
    .mt-presets .ds-chip,
    .mt-barra-dir .ds-btn,
    .mt-linha-cab,
    .mt-lista-btn,
    .mt-cal-dia { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .mt-linha-chev,
    .mt-barra-fill,
    .mt-cal-dia { transition: none; }
}

@media print {
    .mt-fab,
    .mt-presets,
    .mt-form-acoes,
    .mt-linha-remover { display: none; }
    .mt-cartao { box-shadow: none; }
}

/* =====================================================================================
   §XX  CONTROLOS PRÓPRIOS (MOD.campos) — largura mínima dentro de `.mt-campos`

   A caixa de um controlo próprio gasta cerca de 102 px só em moldura, botão de
   limpar e botão de abrir. Numa grelha de 2 colunas (390 px) sobram-lhe 45 px e
   numa de 4 colunas a 768 px sobram 58 px — «08:00» aparecia como «0…».
   Aqui esses campos ficam com espaço a sério até a grelha ter largura para eles.
   Medido nos 9 pontos do gate: a 1100 px uma coluna já dá 175 px, que chega.
   ===================================================================================== */

@media (max-width: 767px) {
    .mt-campos > .mt-campo--controlo {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) and (max-width: 1099px) {
    .mt-campos > .mt-campo--controlo {
        grid-column: span 2;
    }
}