/* =====================================================================================
   EFICÁCIA CRM — mod-maquetes.css · Extras do módulo Maquetes
   Só o que o design-system.css NÃO cobre. Prefixo: mmq-
   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 ---------- */
.mmq-page { min-width: 0; overflow-x: clip; }
.mmq-page :where(img, svg, video) { max-width: 100%; }

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

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

/* FAB mobile — criar sempre ao alcance do polegar */
.mmq-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) {
    .mmq-fab { display: none; }
}

/* --- cartão (< 1024 px): Código | Estado · Nome · Cliente · Suportes · Designer · … ---
   ⚠️ `--codigo` e `--estado` são classes da MOLDURA e vivem 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="maquetes"]` é
   obrigatório sempre que se toca numa classe que não é nossa — a mesma lição está escrita
   no mod-equipamentos.css e no mod-posicoes.css. */
[data-lista="maquetes"] .ds-lst-c--codigo { grid-row: 1; }
[data-lista="maquetes"] .ds-lst-c--estado { grid-row: 1; }
.ds-lst-c--mmqnome { grid-column: 1 / -1; grid-row: 2; }
.ds-lst-c--mmqcliente { grid-column: 1 / -1; grid-row: 3; }
.ds-lst-c--mmqsuportes { grid-column: 1 / -1; grid-row: 4; }
.ds-lst-c--mmqdesigner { grid-column: 1 / -1; grid-row: 5; }
.ds-lst-c--mmqresultado { grid-column: 1 / -1; grid-row: 6; }
.ds-lst-c--mmqcriado { grid-column: 1 / -1; grid-row: 7; }

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

@media (min-width: 1024px) {
    .ds-lst-h--mmqnome { width: auto; }
    .ds-lst-h--mmqcliente { width: 160px; }
    .ds-lst-h--mmqsuportes { width: 120px; }
    .ds-lst-h--mmqdesigner { width: 150px; }
    .ds-lst-h--mmqresultado { width: 110px; }
    .ds-lst-h--mmqcriado { width: 110px; }
    .ds-lst-c--mmqnome,
    .ds-lst-c--mmqcliente,
    .ds-lst-c--mmqsuportes,
    .ds-lst-c--mmqdesigner { overflow: hidden; text-overflow: ellipsis; }
}

/* A contagem de suportes tem tooltip com os códigos todos — o `help` diz que há mais
   para ver ali, sem inventar um ícone. */
.mmq-suportes-n { cursor: help; white-space: nowrap; }

/* «Taxa de conversão» — cartão INFORMATIVO ao lado dos KPIs que filtram.
   Empresta a CAIXA e a tipografia do `.ds-lst-kpi` (para não destoar da faixa) mas não a
   classe: `.ds-lst-kpi` é o filtro, e um `<div>` com essa classe seria um número com ar de
   botão que não faz nada — exatamente o erro que o CLAUDE.md nomeia. O fundo levemente
   afundado e a ausência de hover são o que diz, sem legenda, «este não se clica».

   ⚠️ A MOLDURA É SÓLIDA, como a dos irmãos. Era `1px dashed`, e um tracejado no meio de
   uma faixa de caixas sólidas não se lê como «informativo» — lê-se como espaço por
   preencher, campo por definir, coisa a meio. Este projeto já devolveu módulos por
   paridade visual. O que distingue este cartão dos outros continua a ser real e
   suficiente: NÃO tem `cursor: pointer`, NÃO tem hover, NÃO tem `aria-pressed`, e a
   barra inferior fixa diz que é uma leitura e não um botão por carregar. */
.mmq-kpi-taxa {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
    min-width: 96px;
    min-height: var(--lst-ctrl);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface-alt);
    color: var(--text-2);
    text-align: left;
    cursor: default;
    --kpi-cor: var(--ink-700);
    /* A mesma barra do KPI ativo (`inset 0 -2px 0`), aqui SEMPRE: é o sinal de que o
       cartão está no seu estado final e não à espera de um clique. */
    box-shadow: inset 0 -2px 0 var(--kpi-cor);
}

/* ---------- ficha (detalhe) ----------
   Grelha de rótulo/valor, igual à do mod-posicoes.css. Não é o `MOD.ficha`: são uma
   dezena de campos e duas sub-listas curtas (ver o cabeçalho do mod-maquetes.js). */
.mmq-kvs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 20px;
}
@media (min-width: 640px) {
    .mmq-kvs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .mmq-kvs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

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

/* «O que pretende»: texto livre do comercial, com as quebras de linha dele preservadas.
   `pre-wrap` e não `pre` — o texto tem de continuar a dobrar no telemóvel. */
.mmq-obs {
    white-space: pre-wrap;
    font-size: var(--text-sm);
    color: var(--neutral-700);
    overflow-wrap: anywhere;
    margin-top: 4px;
}

.mmq-aviso { margin-bottom: 16px; }
.mmq-modal-nota { margin-bottom: 16px; }

/* ---------- sub-listas (suportes e anexos) ---------- */
.mmq-lista-simples { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.mmq-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md, 8px);
    min-width: 0;
}
.mmq-item-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--neutral-800);
    text-decoration: none;
    overflow-wrap: anywhere;
}
a.mmq-item-nome:hover { text-decoration: underline; }
.mmq-item-meta { font-size: var(--text-xs); color: var(--neutral-500); white-space: nowrap; }
.mmq-item-acoes { display: flex; gap: 4px; margin-left: auto; }

.mmq-anexar { margin-top: 12px; }

/* ---------- formulário: linhas de suporte ---------- */
.mmq-sup-lista { display: grid; gap: 8px; }
.mmq-sup-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}
/* ⚠️ `min-width: 0` obrigatório: a largura intrínseca do input do combobox estoura a
   célula da grelha e empurra o botão para fora do cartão (lição do modal de Suporte,
   27/08). Vale para QUALQUER célula de grelha que contenha um ds-combobox. */
.mmq-sup-campo { min-width: 0; }
.mmq-sup-x { min-width: 44px; min-height: 44px; }
.mmq-sup-acoes { margin-top: 8px; }

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

/* Paisagem baixa (844x390): o modal cabe e faz scroll interno */
@media (max-height: 480px) {
    .mmq-modal-overlay .ds-modal { max-height: 96vh; }
    .mmq-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) {
    .mmq-modal-overlay .ds-modal-close { min-width: 44px; min-height: 44px; }
}