/* =====================================================================================
   EFICÁCIA CRM — mod-modelos.css · Extras do módulo Modelos de Equipamento
   Só o que o design-system.css NÃO cobre. Prefixo: mme-
   Depende de: design-system.css, ds-listagem.css (`.ds-lst-*`, `.ds-lst-kpi*`)
   Mobile-first: as regras base servem <768px; @media (min-width:…) acrescenta desktop.
   ===================================================================================== */

/* ---------- página / listagem ---------- */
.mme-page { min-width: 0; overflow-x: clip; }
.mme-page :where(img, svg, video) { max-width: 100%; }

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

/* Números de página só a partir de 640px (em mobile fica "x / y") */
.mme-pager-nums { display: none; }
@media (min-width: 640px) {
    .mme-pager-nums { display: inline-flex; gap: 4px; }
}

/* FAB mobile — criar sempre ao alcance do polegar */
.mme-fab {
    position: fixed;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    padding: 0;
    box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
    .mme-fab { display: none; }
}

/* --- cartão (< 1024 px): Referência | Custo · Nome · Sub · Peças · Desenhos ---
   ⚠️ `--codigo` é uma classe da MOLDURA e vive em TODAS as listagens da app. Esta folha
   é global e sem camada, por isso um `.ds-lst-c--codigo { grid-row }` solto empurrava o
   código de todos os outros módulos. O escopo `[data-lista="modelos"]` é obrigatório
   sempre que se toca numa classe que não é nossa — a mesma lição está escrita, com o
   mesmo aviso, no mod-equipamentos.css e no mod-posicoes.css. */
[data-lista="modelos"] .ds-lst-c--codigo { grid-row: 1; }
.ds-lst-c--mmecusto { grid-row: 1; justify-self: end; }
.ds-lst-c--mmenome { grid-column: 1 / -1; grid-row: 2; }
.ds-lst-c--mmesub { grid-column: 1 / -1; grid-row: 3; }
.ds-lst-c--mmepecas { grid-row: 4; }
.ds-lst-c--mmedesenhos { grid-row: 4; }

/* O nome é o herói do cartão logo a seguir à referência: dispensa eyebrow. */
.ds-lst-c--mmenome[data-rot]::before { content: none; }

@media (min-width: 1024px) {
    .ds-lst-h--mmenome { width: auto; }
    .ds-lst-h--mmesub { width: 170px; }
    .ds-lst-h--mmepecas { width: 80px; }
    .ds-lst-h--mmedesenhos { width: 90px; }
    .ds-lst-h--mmecusto { width: 120px; text-align: right; }
    .ds-lst-c--mmecusto { text-align: right; }
    .ds-lst-c--mmenome,
    .ds-lst-c--mmesub { overflow: hidden; text-overflow: ellipsis; }
}

.mme-badge-inline { margin-left: 8px; vertical-align: middle; }

/* «sem peças» na coluna das peças: é um aviso, não um valor. Fica em âmbar e em
   minúsculas para se distinguir de um número à primeira vista. */
.mme-aviso-sempecas {
    font-size: var(--text-xs);
    color: var(--warning-700);
    font-weight: 600;
}

/* ---------- ficha (detalhe) ----------
   Grelha de rótulo/valor. Não é o `MOD.ficha` (ver o cabeçalho do mod-modelos.js), mas o
   desenho segue o das secções da ficha — rótulo pequeno por cima, valor a seguir — para
   não parecer outro produto. */
.mme-kvs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 20px;
}
@media (min-width: 640px) {
    .mme-kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .mme-kvs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mme-kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mme-kv--largo { grid-column: 1 / -1; }

.mme-kv-rot {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--neutral-500);
}
.mme-kv-val {
    font-size: var(--text-sm);
    color: var(--neutral-800);
    overflow-wrap: anywhere;
}

/* Descrição e memória descritiva: texto livre, com as quebras de linha do utilizador
   preservadas. `pre-wrap` e não `pre` — o texto tem de continuar a dobrar no telemóvel,
   e a memória descritiva é precisamente o que se lê no telemóvel, em cima do andaime. */
.mme-texto {
    white-space: pre-wrap;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--neutral-700);
    overflow-wrap: anywhere;
}

.mme-alerta { margin-bottom: 16px; }

/* ---------- tabelas de peças e de ficheiros ---------- */
.mme-c-n { width: 40px; color: var(--neutral-500); }
.mme-c-num { text-align: right; white-space: nowrap; }
.mme-c-un { width: 70px; }
.mme-c-forn { width: 170px; }
.mme-c-fnome { width: 220px; }
.mme-c-acoes { width: 1%; white-space: nowrap; }

.mme-acoes-linha { display: inline-flex; gap: 2px; }

.mme-peca-nome { display: block; font-weight: 600; color: var(--neutral-800); }
.mme-peca-ref,
.mme-peca-obs {
    display: block;
    font-size: var(--text-xs);
    color: var(--neutral-500);
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.mme-fich-nome { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.mme-fich-nome > svg { flex: none; color: var(--neutral-400); }

.mme-tot td { border-top: 2px solid var(--neutral-300); font-weight: 700; }
.mme-tot-rot { text-align: right; }
.mme-tot-val { font-size: var(--text-base); }

/* Em ecrã estreito a `ds-table` vira cartões (regra do design system, via `data-rot`).
   Nesse modo a linha de total não faz sentido como linha de tabela — mostra-se como um
   bloco à largura toda, alinhado à direita, para não parecer mais uma peça. */
@media (max-width: 767px) {
    .mme-c-n { display: none; }
    .mme-c-num { text-align: left; }
    .mme-tot-rot { text-align: left; }
    .mme-tab-pecas tfoot td:empty { display: none; }
}

/* ---------- modal: escolher artigo do catálogo ---------- */
.mme-artigo-atalho {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px dashed var(--neutral-300);
    border-radius: var(--radius-md, 8px);
    background: var(--neutral-50);
}
.mme-artigo-atalho .ds-btn { align-self: flex-start; }

.mme-art-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 46vh;
    overflow-y: auto;
    margin-top: 10px;
}
.mme-art-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md, 8px);
    background: var(--surface, #fff);
    cursor: pointer;
    /* 44 px de alvo de toque: esta lista é para se picar num telemóvel. */
    min-height: 44px;
}
.mme-art-item:hover,
.mme-art-item:focus-visible { border-color: var(--neutral-400); background: var(--neutral-50); }
.mme-art-nome { font-weight: 600; font-size: var(--text-sm); color: var(--neutral-800); }
.mme-art-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--text-xs);
    color: var(--neutral-500);
}
.mme-art-custo { color: var(--neutral-700); font-weight: 600; }

/* ---------- dropzone dos desenhos ---------- */
.mme-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 16px;
    border: 2px dashed var(--neutral-300);
    border-radius: var(--radius-md, 8px);
    background: var(--neutral-50);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.mme-dropzone:hover,
.mme-dropzone:focus-visible { border-color: var(--neutral-400); }
.mme-dropzone.is-drag { border-color: var(--neutral-700); background: var(--neutral-100); }
.mme-dropzone.is-cheia { border-style: solid; }

.mme-dz-estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: var(--neutral-500);
}
.mme-dz-titulo { font-size: var(--text-sm); font-weight: 600; color: var(--neutral-700); }
.mme-dz-sub { font-size: var(--text-xs); }

.mme-dz-ficheiro {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.mme-dz-nome {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mme-dz-tam { flex: none; font-size: var(--text-xs); color: var(--neutral-500); }

/* ---------- checkbox «Modelo em uso» ---------- */
.mme-check-lbl {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* 44 px de alvo de toque, como o resto dos controlos em ecrã tátil. */
    min-height: 44px;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--neutral-800);
}
.mme-check-lbl input { width: 18px; height: 18px; }

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

/* Paisagem baixa (844x390): o modal cabe e faz scroll interno */
@media (max-height: 480px) {
    .mme-modal-overlay .ds-modal { max-height: 96vh; }
    .mme-modal-overlay .ds-modal-body { max-height: calc(96vh - 118px); overflow-y: auto; }
}

/* Alvos de toque de 44 px nos controlos pequenos, também dentro do modal. */
@media (pointer: coarse) {
    .mme-modal-overlay .ds-modal-close { min-width: 44px; min-height: 44px; }
    .mme-acoes-linha .ds-icon-btn { min-width: 40px; min-height: 40px; }
}

/* =====================================================================================
   ARTIGOS DE MODELO — a vista irmã da lista (diretiva A do dono, 27/08/2026)

   ⚠️ MESMO AVISO DE SEMPRE: esta folha é global e sem camada. Um seletor que toque numa
   classe `ds-` que NÃO seja nossa tem de vir escopado — aqui por
   `[data-lista="artigos-modelo"]`, que é o `data-lista` desta vista.
   ===================================================================================== */

/* --- cartão (< 1024 px): Referência | Preço · Artigo · Fornecedor · Un/Modelos --- */
[data-lista="artigos-modelo"] .ds-lst-c--codigo { grid-row: 1; }
[data-lista="artigos-modelo"] .ds-lst-c--mmecusto { grid-row: 1; justify-self: end; }
[data-lista="artigos-modelo"] .ds-lst-c--mmenome { grid-column: 1 / -1; grid-row: 2; }
[data-lista="artigos-modelo"] .ds-lst-c--mmesub { grid-column: 1 / -1; grid-row: 3; }
[data-lista="artigos-modelo"] .ds-lst-c--mmeun { grid-row: 4; }
[data-lista="artigos-modelo"] .ds-lst-c--mmepecas { grid-row: 4; }
[data-lista="artigos-modelo"] .ds-lst-c--mmeacoes { grid-column: 1 / -1; grid-row: 5; }

@media (min-width: 1024px) {
    .ds-lst-h--mmeun { width: 70px; }
    .ds-lst-h--mmeacoes { width: 96px; }
    [data-lista="artigos-modelo"] .ds-lst-c--mmeacoes { text-align: right; }
}

/* =====================================================================================
   TIPO DO DOCUMENTO no dossier (diretiva B). Três badges, e a cor diz o PAPEL: a memória
   descritiva abre o dossier, os desenhos vêm a seguir, «outro» fica de fora da fusão.
   Só tokens do design system — nada de cores à mão.
   ===================================================================================== */
.mme-tipo { white-space: nowrap; }
.mme-tipo--memoria { background: var(--info-bg, var(--neutral-100)); color: var(--info-fg, var(--neutral-800)); }
.mme-tipo--desenho { background: var(--neutral-100); color: var(--neutral-700); }
.mme-tipo--outro { background: transparent; color: var(--neutral-500); border: 1px solid var(--neutral-300); }

.mme-c-ftipo { white-space: nowrap; }

/* =====================================================================================
   «PREÇOS DE» na tabela dos suportes que usam o modelo. O badge âmbar é o mesmo aviso
   que a ficha do suporte dá em grande: este suporte guardou o mapa antes das alterações
   que se fizeram ao modelo. Não é erro — é o comportamento que o dono pediu.
   ===================================================================================== */
.mme-c-congelado { white-space: nowrap; }
.mme-badge-antigo {
    margin-left: 8px;
    background: var(--warning-bg, #fef3c7);
    color: var(--warning-fg, #92400e);
}

/* A barra do «Associar suporte» na aba Suportes — alinhada à direita como as
   ações das outras secções. */
.mme-assoc-barra {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* A modal «Associar suporte» tem UM campo: o corpo saía baixo e o menu do
   combobox (absoluto, max-height 280px) era cortado pelo overflow do corpo —
   via-se 1,5 opções com scroll duplo (dono, 28/08). O corpo garante espaço
   para o menu abrir inteiro por baixo do campo. */
.mme-assoc-corpo { min-height: 390px; align-content: start; }