/* =====================================================================================
   EFICÁCIA CRM — mod-frota.css · SÓ o que o design system (ds-) não cobre
   Prefixo próprio: mf-   ·   Mobile-first (base <768px), tal como o design-system.css
   Exceção deliberada: as classes rc-Day--* replicam os nomes do original (paridade
   visual do calendário de férias) e as cores são as EXATAS da spec §5.9 / §6.2.
   ===================================================================================== */

/* ---------- Toolbar da listagem: pesquisa + contador -------------------------- */
.mf-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    min-width: 0;
}
.mf-toolbar--compacta { margin: 12px 14px 10px; }

/* Barra de contadores da aba "Pedidos" — o conteúdo é o `fc-contadores` do motor
   partilhado das Férias, aqui só se lhe dá a moldura, igual à das outras abas. */
.mf-barra-contadores:not(:empty) {
    margin: var(--sp-4) var(--sp-4) 0;
    padding: var(--sp-3);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    background: var(--surface-alt);
    min-width: 0;
}
.mf-procurar-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.mf-procurar-wrap > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--neutral-400);
    pointer-events: none;
}
.mf-procurar-wrap > .ds-input { padding-left: 38px; padding-right: 44px; }
.mf-procurar-limpar {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--neutral-400);
    cursor: pointer;
}
.mf-procurar-limpar:hover { color: var(--neutral-700); background: var(--neutral-100); }
.mf-procurar-limpar[hidden] { display: none; }
.mf-procurar-wrap input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

@media (min-width: 768px) {
    .mf-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .mf-procurar-wrap { max-width: 420px; }
    .mf-toolbar .ds-results-count { white-space: nowrap; flex: 0 0 auto; }
}

/* ---------- Larguras de coluna (só em modo tabela, >=768px) -------------------
   ⚠️ `.mf-c5` é a coluna «Observações» da tabela de DESLOCAÇÕES e continua viva.
   As `.mf-col-*` eram da tabela de 5 colunas da lista de viaturas, que deixou de
   existir (a lista passou à moldura `ds-lst`, §13) — foram apagadas com ela.
   Separar as duas ANTES de apagar era obrigatório: `.mf-col-id, .mf-c5` era uma
   regra partilhada e apagá-la inteira deixava as 12 colunas das deslocações
   desequilibradas. */
@media (min-width: 768px) {
    .mf-c5 { width: 5%; }
    .mf-c7 { width: 7%; }
    .mf-c10 { width: 10%; }
    .mf-c30 { width: 30%; }
    .mf-c50 { width: 50%; }
}

/* A célula «Ativo» pintada de alto a baixo (`.mf-ativo` / `.mf-td-ativo`) foi
   APAGADA. Era o «look antigo» de que o cliente se queixou: com as 3 viaturas
   ativas, as três células encostavam e desenhavam uma barra verde contínua de
   141 px na margem direita da tabela. Media 2,37:1 de contraste (#fff sobre
   #4dbd74) e 2,86:1 (#fff sobre #f86c6b) — falha AA nas duas contas, e as duas
   cores eram literais fora dos tokens. O estado é agora um `ds-badge` normal. */

/* ---------- Ícones de estado nas deslocações ---------------------------------- */
.mf-sim, .mf-nao { display: inline-flex; align-items: center; justify-content: center; }
.mf-sim { color: #4dbd74; }
.mf-nao { color: #f86c6b; }

.mf-olho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: #20a8d8;                     /* cor exata do original */
    cursor: pointer;
}
.mf-olho:hover { background: var(--neutral-100); }

/* Estado: texto simples na listagem — sem badge (paridade §4.2), inclusive no cartão mobile */
.mf-estado-txt { display: inline; }

/* ---------- Resumo vivo de KMs/custo no formulário de viagem ------------------ */
.mf-resumo:empty { display: none; }
.mf-resumo-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 12px;
    padding: 10px 12px;
    min-height: 46px;
    background: var(--neutral-25, #fafafa);
    border: 1px dashed var(--neutral-200);
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
}
.mf-resumo-rot {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-500);
}

/* ---------- Barra de ações fixa no fundo em mobile (§11.3) -------------------- */
.mf-acoes-fixas {
    position: sticky;
    bottom: 0;
    z-index: var(--ds-z-sticky, 30);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--neutral-0);
    border-top: 1px solid var(--neutral-200);
    box-shadow: 0 -6px 18px -12px rgba(15, 23, 42, 0.4);
}
.mf-acoes-fixas > .ds-btn { flex: 1 1 auto; min-height: 46px; justify-content: center; }
.mf-acoes-fixas .ds-form-actions-spacer { flex: 1 1 100%; height: 0; }
.mf-acoes-fixas .ds-help,
.mf-acoes-fixas .mf-pedido-resumo { flex: 1 1 100%; font-size: var(--text-xs); color: var(--neutral-500); }
.mf-pedido-resumo:empty { display: none; }

@media (min-width: 768px) {
    .mf-acoes-fixas {
        position: static;
        justify-content: flex-end;
        box-shadow: none;
        flex-wrap: nowrap;
    }
    .mf-acoes-fixas > .ds-btn { flex: 0 0 auto; }
    .mf-acoes-fixas .ds-form-actions-spacer { flex: 1 1 auto; height: auto; }
    .mf-acoes-fixas .ds-help,
    .mf-acoes-fixas .mf-pedido-resumo { flex: 0 1 auto; }
}

/* Botão "Obter PDF Geral" / "Editar" — variante warning do original */
.mf-btn-warning {
    border-color: var(--warning-300, #fcd34d);
    background: var(--warning-50, #fffbeb);
    color: var(--warning-700, #b45309);
}
.mf-btn-warning:hover { background: var(--warning-100, #fef3c7); }

/* Variante "success" (verde) — o original usa botões success em Guardar/PDF/Submeter.
   O design system só expõe primary(vermelho)/secondary/danger; esta classe própria
   (prefixo mf-) dá o verde pedido pela spec sem tocar em design-system.css. */
.mf-btn-success {
    background: var(--success-600, #16a34a);
    border-color: var(--success-600, #16a34a);
    color: #fff;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}
.mf-btn-success:hover {
    background: var(--success-700, #15803d);
    border-color: var(--success-700, #15803d);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.mf-btn-success:active {
    background: var(--success-800, #166534);
    border-color: var(--success-800, #166534);
    transform: scale(0.97);
    box-shadow: none;
}

/* ---------- Modais ------------------------------------------------------------ */
body.mf-modal-aberto { overflow: hidden; }
.mf-modal-head-txt { min-width: 0; }

/* ---------- Contadores do mapa de férias -------------------------------------- */
.mf-contadores {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.mf-contador { margin: 0; font-size: var(--text-sm); color: var(--neutral-700); }
.mf-contador--extra { color: var(--neutral-500); font-size: var(--text-xs); }
@media (min-width: 640px) {
    .mf-contadores { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
}

/* =====================================================================================
   CALENDÁRIO ANUAL
   Mobile  : 1 mês por ecrã, navegação com setas (§11.9)
   >=768px : grelha de meses, todos visíveis
   ===================================================================================== */

.mf-calendario { margin: 4px 0 16px; min-width: 0; }

.mf-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.mf-cal-nav .ds-btn { min-width: 44px; min-height: 44px; }
.mf-cal-nav-mes {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 700;
    font-size: var(--text-md, 15px);
    color: var(--neutral-800);
    text-transform: capitalize;
}

.mf-meses {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-width: 0;
}

/* Mobile: só o mês ativo */
.mf-mes { display: none; min-width: 0; }
.mf-mes.is-ativo { display: block; }

/* Em mobile o nome do mês já está na barra de navegação — não duplicar. */
.mf-mes-titulo { display: none; }
@media (min-width: 768px) {
    .mf-mes-titulo {
        display: block;
        margin: 0 0 6px;
        font-size: var(--text-sm);
        font-weight: 700;
        color: var(--neutral-600);
    }
}

.mf-semana {
    display: grid;
    grid-template-columns: 22px repeat(7, minmax(0, 1fr));
    gap: 2px;
    align-items: stretch;
}
.mf-semana + .mf-semana { margin-top: 2px; }

.mf-semana-num {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--neutral-300);
    font-variant-numeric: tabular-nums;
}
.mf-dia-cab {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--neutral-400);
    padding: 4px 0;
}

.mf-dia {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-height: 44px;                 /* alvo de toque (mobile) */
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--neutral-50);
    color: var(--neutral-700);
    font-size: var(--text-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    font-family: inherit;
}
button.mf-dia { cursor: pointer; transition: var(--transition-fast); }
button.mf-dia:hover { border-color: var(--primary-400, #60a5fa); }
button.mf-dia:focus-visible { outline: 2px solid var(--primary-500, #3b82f6); outline-offset: 1px; z-index: 1; }
button.mf-dia:active { transform: scale(0.94); }
span.mf-dia { cursor: default; }

.mf-dia.rc-Day--outside { background: transparent; border-color: transparent; color: transparent; }

.mf-dia-marca {
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    opacity: 0.95;
}

/* ---------- Cores EXATAS do original (spec §5.9 e §6.2) ----------------------- */
.rc-Day--fimdesemana { background: #FFC168; color: #4a2f00; }
.rc-Day--feriado { background: #8DDCD4; color: #0b3b37; }
.rc-Day--ferias { background: #5CB85C; color: #fff; font-weight: 700; }
.rc-Day--feriasMeioDia { background: #FF0000; color: #fff; font-weight: 700; }
.rc-Day--feriasRemovido { background: #C5FCC5; color: #14532d; }
.rc-Day--feriasMeioDiaRemovido { background: #FF9191; color: #4c0519; }
.rc-Day--feriasAdicionado { background: #004B00; color: #fff; font-weight: 700; }
.rc-Day--feriasMeioDiaAdicionado { background: #770000; color: #fff; font-weight: 700; }
.rc-Day--feriasProprioDia { background: #E6E20E; color: #3f3d00; font-weight: 700; }

/* Tablet e desktop: todos os meses visíveis, em grelha.
   `auto-fill` com um mínimo de 330px garante que uma célula NUNCA desce
   abaixo dos 44px de alvo de toque (330 − 20 da coluna de semana) / 7 ≈ 44.
   2 colunas a 768px · 3 a partir de ~1100px · 4 a partir de ~1440px. */
@media (min-width: 768px) {
    .mf-mes { display: block; max-width: 460px; }
    .mf-meses {
        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        gap: 20px 22px;
        justify-content: start;
    }
    .mf-semana { grid-template-columns: 20px repeat(7, minmax(0, 1fr)); }
}

/* ---------- Legenda ----------------------------------------------------------- */
.mf-legenda-titulo {
    margin: 4px 0 8px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-700);
}
.mf-legenda {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    min-width: 0;
}
.mf-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-xs);
    color: var(--neutral-600);
    min-height: 24px;
}
.mf-legenda-cor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

/* ---------- Motivo (rich-text) ------------------------------------------------ */
.mf-motivo { margin-top: 6px; }
.mf-motivo-ro { margin: 4px 0 18px; }
.mf-motivo-corpo {
    min-height: 60px;
    padding: 12px 14px;
    background: var(--neutral-25, #fafafa);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    overflow-wrap: anywhere;
}
.mf-motivo-corpo > :first-child { margin-top: 0; }
.mf-motivo-corpo > :last-child { margin-bottom: 0; }

/* Placeholder do editor rich-text */
.mf-rt .ds-richtext-content:empty::before,
.mf-rt .ds-richtext-content:has(> br:only-child)::before {
    content: attr(data-placeholder);
    color: var(--neutral-400);
    pointer-events: none;
}

/* ---------- Detalhe do pedido ------------------------------------------------- */
.mf-pedido-topo { margin-bottom: 14px; }
.mf-diff-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    min-width: 0;
}
.mf-diff-resumo .ds-tag { display: inline-flex; align-items: center; gap: 5px; }
.mf-diff-resumo .ds-tag svg { width: 14px; height: 14px; }

/* ---------- Barra do editor rich-text ----------------------------------------
   Em toque mantemos TODOS os controlos (paridade §5.3) com alvos de 44px:
   a barra passa a rolar horizontalmente DENTRO de si própria — nunca na página. */
.mf-rt .ds-richtext-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-width: 100%;
}
.mf-rt .ds-richtext-btn { flex: 0 0 auto; }
.mf-rt .ds-richtext-sep { flex: 0 0 auto; }

/* Seletores Font/Size da toolbar rich-text (spec §5.3) */
.mf-rt-select {
    flex: 0 0 auto;
    height: 34px;
    min-height: 34px;
    max-width: 130px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--neutral-200, #e5e7eb);
    border-radius: var(--radius-sm, 6px);
    background: var(--neutral-0, #fff);
    color: var(--neutral-700, #374151);
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    cursor: pointer;
    appearance: auto;
}
.mf-rt-select:hover { border-color: var(--neutral-300, #d1d5db); }
.mf-rt-select:focus-visible { outline: 2px solid var(--primary-500, #ef4444); outline-offset: 1px; }
@media (max-width: 767px) {
    .mf-rt-select { height: 44px; min-height: 44px; }
}
@media (min-width: 900px) {
    .mf-rt .ds-richtext-toolbar { flex-wrap: wrap; overflow-x: visible; }
}

/* ---------- Alvos de toque >= 44px (critério de aceitação, TODOS os viewports) --
   O design system já define --ds-control-h-md: 44px como altura de controlo;
   aqui garantimos o mesmo nos controlos-ícone que por omissão são menores. */
.mf-page .ds-icon-btn,
.mf-page .mf-olho,
.mf-page .mf-procurar-limpar,
.mf-page .ds-combobox-clear,
.mf-modal-overlay .ds-combobox-clear,
.mf-page .ds-richtext-btn,
.mf-modal-overlay .ds-richtext-btn,
.mf-modal-overlay .ds-modal-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}
.mf-page .ds-btn,
.mf-modal-overlay .ds-btn { min-height: 44px; }
.mf-page .ds-combobox-control,
.mf-modal-overlay .ds-combobox-control { min-height: 46px; }
.mf-page .ds-page-btn { min-width: 44px; min-height: 44px; }

/* Telemóvel em paisagem (844x390): o calendário do modo mobile mantém-se
   utilizável e o rodapé fixo não come o ecrã. */
@media (max-height: 460px) and (orientation: landscape) {
    .mf-acoes-fixas { padding-top: 8px; padding-bottom: 8px; }
    .mf-dia { min-height: 34px; }
    .mf-cal-nav .ds-btn { min-height: 40px; }
}

/* ---------- Impedir scroll horizontal do body em qualquer viewport ------------- */
.mf-page { min-width: 0; max-width: 100%; overflow-x: clip; }
.mf-page .ds-table-wrap { max-width: 100%; }

/* =====================================================================================
   LISTA DE VIATURAS — cartão, grelha e tabela          (mod-frota.js §13)
   -------------------------------------------------------------------------------------
   Copiado do `mod-equipamentos.css` §MODO GRELHA, que é a referência visual aprovada
   pelo cliente. Copiar aqui é o certo: são dois inventários com o mesmo problema
   (reconhecem-se pela imagem), e extrair uma primitiva partilhada para os servir aos
   dois seria inventar uma abstração que ninguém pediu.

   ⚠️ ESCOPO OBRIGATÓRIO. Esta folha é GLOBAL e SEM `@layer`. Os slots
   `.ds-lst-c--codigo` e `.ds-lst-c--estado` são da MOLDURA e vivem em contratos,
   propostas, folhas, tickets, ativações, artigos, clientes e entidades. O aviso está
   escrito, literalmente, em mod-equipamentos.css:1024 — «um `.ds-lst-c--codigo
   { grid-row: 2 }` solto empurrava o código de todos os outros módulos para cima do
   que lá está». Por isso TODA a regra que toque numa classe que não é nossa vai
   prefixada por `[data-lista="viaturas"]` (ou por `.mf-page[data-mf-modo=…]`, que é
   igualmente nosso).
   ===================================================================================== */

[data-lista="viaturas"] .ds-lst-linha {
    --mf-cardpad-y: var(--sp-3);
    --mf-cardpad-x: var(--sp-4);
    padding: var(--mf-cardpad-y) var(--mf-cardpad-x);
    padding-left: calc(var(--mf-cardpad-x) + 3px);
}

/* --- cartão (< 1024 px): CHAPA · Matrícula | Estado · Marca · Modelo · Documentos --- */
[data-lista="viaturas"] .ds-lst-c--vtfoto { grid-column: 1 / -1; grid-row: 1; }
[data-lista="viaturas"] .ds-lst-c--codigo { grid-row: 2; }
[data-lista="viaturas"] .ds-lst-c--estado { grid-row: 2; }
[data-lista="viaturas"] .ds-lst-c--vtmarca { grid-column: 1 / -1; grid-row: 3; }
[data-lista="viaturas"] .ds-lst-c--vtmodelo { grid-column: 1 / -1; grid-row: 4; }
[data-lista="viaturas"] .ds-lst-c--vtdocs { grid-column: 1 / -1; grid-row: 5; }

/* A marca é o herói do cartão logo a seguir à matrícula: dispensa eyebrow. E a
   chapa JÁ MOSTRA a matrícula — repetir-lhe o rótulo por cima era dizê-lo duas vezes. */
[data-lista="viaturas"] .ds-lst-c--vtmarca[data-rot]::before,
[data-lista="viaturas"] .ds-lst-c--vtfoto[data-rot]::before { content: none; }

/* A chapa ocupa a largura toda do cartão e encosta aos bordos — é a primeira coisa
   que se vê, antes da matrícula em texto. A margem negativa anula o respiro do
   cartão (a faixa de 3 px do estado continua por cima, é `position:absolute`). */
[data-lista="viaturas"] .ds-lst-c--vtfoto {
    margin: calc(var(--mf-cardpad-y) * -1) calc(var(--mf-cardpad-x) * -1) var(--sp-2)
        calc((var(--mf-cardpad-x) + 3px) * -1);
}

/* A CAIXA da chapa. `aspect-ratio` aqui e não na imagem: o espaço fica reservado
   antes de o `<img>` desenhar, por isso a lista não salta. */
.mf-cel-foto {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-sunken, var(--neutral-100));
}

.mf-cel-foto-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Sem matrícula não há chapa: diz-se, com a mesma caixa. Um retângulo cinzento liso
   lê-se como «está a carregar» ou «partiu-se». */
.mf-cel-foto-vazia {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-3);
    background: repeating-linear-gradient(135deg,
            transparent 0 9px,
            rgba(163, 156, 157, .12) 9px 18px);
}
.mf-cel-foto-vazia-txt {
    font-size: var(--txt-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-caps, .04em);
}

@media (min-width: 640px) and (max-width: 1023.98px) {
    /* Em 2 colunas de cartões, marca e modelo partilham a linha. */
    [data-lista="viaturas"] .ds-lst-c--vtmarca { grid-column: 1; grid-row: 3; }
    [data-lista="viaturas"] .ds-lst-c--vtmodelo { grid-column: 2; grid-row: 3; text-align: right; }
}

/* --- tabela (>= 1024 px): larguras declaradas, `table-layout: fixed` da moldura --- */
@media (min-width: 1024px) {
    [data-lista="viaturas"] .ds-lst-h--vtmarca { width: 200px; }
    [data-lista="viaturas"] .ds-lst-h--vtmodelo { width: auto; }
    [data-lista="viaturas"] .ds-lst-h--vtdocs { width: 170px; }
    [data-lista="viaturas"] .ds-lst-c--vtmarca,
    [data-lista="viaturas"] .ds-lst-c--vtmodelo { overflow: hidden; text-overflow: ellipsis; }

    /* As reticências da célula não apanham o valor quando ele vem dentro de um
       `.ds-lst-forte` em `display:block` — `text-overflow` só trata do conteúdo em
       linha do próprio bloco. Aplicadas onde o texto está, o corte anuncia-se. */
    .mf-page[data-mf-modo="tabela"] .ds-lst-c--vtmarca .ds-lst-forte {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Mesmo na tabela a linha ganha miniatura: reconhecer a viatura não pode
       depender do modo de apresentação escolhido. A 68 px lê-se a FORMA da chapa
       (faixa azul + corpo branco), não o texto — é por isso que a coluna
       «Matrícula» continua ao lado: a miniatura orienta, a coluna informa. */
    [data-lista="viaturas"] .ds-lst-h--vtfoto { width: 84px; }
    .mf-page[data-mf-modo="tabela"] .ds-lst-c--vtfoto {
        margin: 0;
        padding: 6px var(--sp-3);
        padding-left: calc(var(--sp-3) - 3px);
        /* A faixa do estado era a borda esquerda da célula do CÓDIGO
           (ds-listagem.css §6). Agora a primeira célula é a chapa — sem isto o fio
           de cor aparecia a meio da linha, que é onde deixa de querer dizer algo. */
        border-left: 3px solid var(--lst-estado);
    }
    .mf-page[data-mf-modo="tabela"] .ds-lst-c--codigo {
        border-left: 0;
        padding-left: var(--sp-3);
    }
    .mf-page[data-mf-modo="tabela"] .mf-cel-foto {
        width: 68px;
        aspect-ratio: 16 / 10;
        border-radius: var(--r-md, 10px);
    }
}

/* =====================================================================================
   MODO GRELHA (>= 1024 px) — o inventário visual
   A moldura transforma cartões em TABELA aos 1024 px. Em `data-mf-modo="grelha"`
   desfaz-se essa transformação e os cartões voltam, agora em várias colunas. É o
   mesmo markup e as mesmas linhas: trocar de modo não repinta nada.
   ===================================================================================== */
@media (min-width: 1024px) {
    .mf-page[data-mf-modo="grelha"] .ds-lst-tabwrap {
        border: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    .mf-page[data-mf-modo="grelha"] .ds-lst-tab { display: block; }
    .mf-page[data-mf-modo="grelha"] .ds-lst-tab thead { display: none; }

    .mf-page[data-mf-modo="grelha"] .ds-lst-tab tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        align-items: stretch;
        gap: var(--sp-4);
    }

    .mf-page[data-mf-modo="grelha"] .ds-lst-linha {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: start;
        gap: var(--sp-1) var(--sp-3);
        position: relative;
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        background: var(--surface);
        box-shadow: var(--sh-1);
        overflow: hidden;
        transition: box-shadow .16s ease, border-color .16s ease;
    }

    .mf-page[data-mf-modo="grelha"] .ds-lst-linha::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 3px;
        background: var(--lst-estado);
        z-index: 1;
    }

    .mf-page[data-mf-modo="grelha"] .ds-lst-tab tbody tr.ds-lst-linha:hover {
        background: var(--surface);
        border-color: var(--border-strong);
        box-shadow: var(--sh-2);
    }

    .mf-page[data-mf-modo="grelha"] .ds-lst-c {
        display: block;
        padding: 0;
        border: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    /* Os eyebrows voltam — em cartão o rótulo da coluna é a única pista do que é
       aquele texto (na tabela era o cabeçalho). */
    .mf-page[data-mf-modo="grelha"] .ds-lst-c[data-rot]::before {
        content: attr(data-rot);
        display: block;
        font-size: var(--txt-2xs);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        letter-spacing: var(--track-caps);
        color: var(--text-3);
    }

    .mf-page[data-mf-modo="grelha"] .ds-lst-c--codigo[data-rot]::before,
    .mf-page[data-mf-modo="grelha"] .ds-lst-c--estado[data-rot]::before,
    .mf-page[data-mf-modo="grelha"] .ds-lst-c--vtmarca[data-rot]::before,
    .mf-page[data-mf-modo="grelha"] .ds-lst-c--vtfoto[data-rot]::before { content: none; }

    .mf-page[data-mf-modo="grelha"] .ds-lst-cod { font-size: var(--txt-lg); }
    .mf-page[data-mf-modo="grelha"] .ds-lst-c--estado { text-align: right; }

    .mf-page[data-mf-modo="grelha"] .ds-lst-c--vtfoto {
        margin: calc(var(--mf-cardpad-y) * -1) calc(var(--mf-cardpad-x) * -1) var(--sp-2)
            calc((var(--mf-cardpad-x) + 3px) * -1);
    }

    /* 3:2 e não 16:9 — a mesma medição do mod-equipamentos.css:1239: num cartão de
       264 px, em 16:9 a imagem dava 149 px e o texto por baixo 160 px (o texto
       ganhava à viatura); em 3:2 são 176 px e a imagem volta a mandar no cartão.
       A chapa está centrada com folga: o corte de 11 % não lhe toca. */
    .mf-page[data-mf-modo="grelha"] .mf-cel-foto { aspect-ratio: 3 / 2; }
}

/* =====================================================================================
   BARRA DE RESULTADOS — ordenar (sempre) e escolher o modo (onde há dois)
   ===================================================================================== */
[data-lista="viaturas"] .ds-lst-barra {
    align-items: center;
    row-gap: var(--sp-2);
}

.mf-barra-dir {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-left: auto;
}

.mf-ordenar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mf-ordenar-sel { min-width: 132px; }

/* Mobile-first: o alvo é 44x44 e `flex:0 0 auto` tira-lhe a licença para encolher
   dentro de um contentor `flex`; só em ecrã grande COM RATO é que aperta. É o
   mínimo que o gate responsivo exige em `pointer: coarse`. */
.mf-ord-dir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md, 10px);
    cursor: pointer;
}
.mf-ord-dir:hover { border-color: var(--border-strong); color: var(--text-1); }
.mf-ord-dir[data-dir="desc"] svg { transform: rotate(180deg); }

@media (min-width: 768px) and (pointer: fine) {
    .mf-ord-dir { width: 34px; height: 34px; }
}

/* Dois modos, um só grupo — a pílula segmentada diz que são alternativas do mesmo
   conteúdo e não duas ações diferentes. */
.mf-modos {
    display: none;
    padding: 2px;
    background: var(--surface-sunken, var(--neutral-100));
    border: 1px solid var(--border);
    border-radius: var(--r-full, 999px);
}

.mf-modo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    font-size: var(--txt-sm);
    font-weight: 600;
    color: var(--text-3);
    background: none;
    border: 0;
    border-radius: var(--r-full, 999px);
    cursor: pointer;
}
.mf-modo-btn:hover { color: var(--text-1); }
.mf-modo-btn[aria-pressed="true"] {
    color: var(--text-1);
    background: var(--surface);
    box-shadow: var(--sh-1);
}

/* A escolha só existe onde existe tabela. Abaixo dos 1024 px há UMA apresentação
   possível (cartão), e um interruptor com uma posição só é um botão morto. */
@media (min-width: 1024px) {
    .mf-modos { display: inline-flex; }

    /* Em tabela quem ordena é o cabeçalho, e ter as duas portas ao mesmo tempo era
       ter duas verdades no ecrã. */
    .mf-page[data-mf-modo="tabela"] .mf-ordenar { display: none; }
}

/* Tablets de 1024 px com toque: o dedo é o mesmo de um telemóvel. */
@media (pointer: coarse) {
    .mf-modo-btn { height: 44px; }
}

/* Não há botão flutuante de criar: o «Registar Viatura» do cabeçalho já está
   visível a 390 px — a moldura só esconde .ds-lst-cab-acoes em @media print,
   por isso um FAB seria o MESMO botão duas vezes, a tapar a faixa de KPIs. */

/* =====================================================================================
   PAINEL «ANÁLISE» DA FROTA — os documentos legais, viatura a viatura
   Com 3 viaturas, gráficos seriam ruído. O que o painel mostra é a única coisa
   urgente que a frota tem: 7 alertas críticos (seguro, inspeção e IUC vencidos)
   que hoje só se viam abrindo a página de detalhe, uma a uma.
   ===================================================================================== */
.mf-painel-docs {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.mf-doc-linha {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 12px);
    background: var(--surface);
}

.mf-doc-viatura {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-1);
    text-align: left;
    cursor: pointer;
}
.mf-doc-viatura:hover { color: var(--primary-600, var(--text-1)); }
.mf-doc-viatura .ds-u-mono { font-weight: 700; }
.mf-doc-viatura-sub { font-size: var(--txt-xs); color: var(--text-3); }

.mf-doc-cels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-2);
}

.mf-doc-cel {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--sp-2);
    border-radius: var(--r-md, 10px);
    background: var(--surface-sunken, var(--neutral-100));
    border-left: 3px solid var(--border);
}
.mf-doc-cel[data-tom="mau"] { border-left-color: var(--danger-600, #DA0A0D); }
.mf-doc-cel[data-tom="aviso"] { border-left-color: var(--warning-600, #f59e0b); }
.mf-doc-cel[data-tom="bom"] { border-left-color: #10b981; }

.mf-doc-rot {
    font-size: var(--txt-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-caps, .04em);
    color: var(--text-3);
}
.mf-doc-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.mf-doc-sub { font-size: var(--txt-xs); color: var(--text-3); }
.mf-doc-cel[data-tom="mau"] .mf-doc-sub { color: var(--danger-600, #DA0A0D); font-weight: 600; }

@media (min-width: 768px) {
    .mf-doc-linha { grid-template-columns: 200px minmax(0, 1fr); align-items: center; }
}

/* =====================================================================================
   FICHA DE VIATURA EM MÓDULO — a secção «Fotografia»    (mod-frota.js §15b/§15c)
   O servidor já guarda e serve a foto (`frota.foto_guid`); a secção existe SEMPRE
   porque a viatura pode não ter nenhuma — e é ela que explica que a capa é a
   matrícula desenhada e não uma imagem que falhou.
   A CAPA não precisa de CSS: a chapa lê-se na caixa por omissão do motor
   (96x54 px). A banda de bordo a bordo do equipamento existe porque uma FOTOGRAFIA
   de 96x54 não diz nada; uma CHAPA de 96x54 diz tudo.
   ===================================================================================== */
.mf-ficha-foto { margin: 0; }
.mf-ficha-foto img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    border-radius: var(--r-lg, 12px);
    border: 1px solid var(--border);
}

.mf-ficha-semfoto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
}
.mf-ficha-placa {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: var(--r-md, 10px);
    border: 1px solid var(--border);
}
.mf-ficha-semfoto-txt { min-width: 0; }
.mf-ficha-semfoto-txt .ds-empty-title { margin: 0 0 4px; }
.mf-ficha-semfoto-txt .ds-empty-text { margin: 0; }

@media (min-width: 640px) {
    .mf-ficha-semfoto { flex-direction: row; align-items: center; gap: var(--sp-4); }
    .mf-ficha-placa { flex: 0 0 auto; width: 220px; }
}

/* As sub-tabelas dentro da ficha: a tabela é a mesma da página, sem a moldura de
   cartão (a secção do motor já é a moldura). */
.mf-sub { min-width: 0; }
.mf-sub .ds-table-wrap { max-width: 100%; }

/* =====================================================================================
   O DEPÓSITO DE DOCUMENTOS DA VIATURA    (mod-frota.js §15c)
   «…os documentos das viaturas como a inspeção, seguro e imposto (IUC) e eles têm de
   estar devidamente separados.» A separação é ESTRUTURAL — três secções do motor, uma
   por obrigação — por isso aqui não há nenhuma coluna «tipo» para desenhar: só o
   estado da obrigação e a lista de comprovativos dela.
   Prefixo `mf-dep-` e não `mf-doc-`: `mf-doc-*` já é o RESUMO das três datas na lista
   de viaturas (§13.3), e são dois objetos diferentes.
   ===================================================================================== */
.mf-dep-estado {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
}
.mf-dep-estado-rot {
    font-size: var(--txt-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-3);
}
.mf-dep-estado-data {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}
.mf-dep-vazio {
    margin: 0;
    font-size: var(--txt-sm);
    color: var(--text-3);
}

.mf-dep-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.mf-dep-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md, 10px);
    background: var(--surface-1, transparent);
}
.mf-dep-ico {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--text-3);
}
.mf-dep-corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mf-dep-nome {
    font-weight: 600;
    color: var(--text-1);
    overflow-wrap: anywhere;
}
.mf-dep-meta {
    font-size: var(--txt-xs);
    color: var(--text-3);
    overflow-wrap: anywhere;
}
.mf-dep-acoes {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 2px;
}

/* =====================================================================================
   §XX  CONTROLOS PRÓPRIOS (MOD.campos) — geometria dentro desta página

   O `MOD.campos` embrulha o `<select>` num `.cp` de `width:100%`. Serve a um campo
   de formulário, que ocupa a coluna toda; NÃO serve a dois controlos de barra que
   antes se mediam pelo conteúdo — o «Ordenar por» e o «Por página» esticavam-se e
   empurravam o resto da barra. Aqui devolve-se-lhes a largura que tinham.
   ===================================================================================== */

.mf-ordenar .cp {
    width: auto;
    min-width: 132px;
}

.ds-pagesize .cp {
    width: auto;
    min-width: 74px;
}
.ds-pagesize .cp .cp-gatilho {
    height: var(--ds-control-h-sm);
    min-height: var(--ds-control-h-sm);
}
.ds-pagesize .cp .cp-txt {
    font-size: var(--text-xs);
}

/* Em toque o alvo tem de continuar a ter 44px, como o botão de inverter a ordem
   ao lado — a regra de cima não pode roubar-lhe altura. */
@media (pointer: coarse) {
    .ds-pagesize .cp .cp-gatilho {
        height: 44px;
        min-height: 44px;
    }
}