/* =====================================================================================
   EFICÁCIA CRM — Licenciamentos (mod-licenciamentos)
   Prefixo lic-; aproveita ds-* e os modais sup-*.

   ⚠️ O QUE SAIU DAQUI (auditoria de 28/08) E PORQUÊ
   · `.lic-cab-acoes` — a barra de ações do cabeçalho usava esta classe privada, com
     `margin-left:auto` e `flex-shrink:0`. O `.ds-lst-cab` é um GRID: as duas são
     propriedades de flex e não faziam nada; e faltava-lhe o `grid-column:1/-1` que a
     classe do design system tem, que em mobile manda os botões para a linha de baixo.
     Medido a 390px: o título ficava com 7px e o subtítulo com 0. Passou a
     `.ds-lst-cab-acoes` (ds-listagem.css §1) e a regra ficou órfã.
   · `.lic-page { display:flex … }` — é exatamente o que o `.ds-lst` já faz, e é o
     `.ds-lst` que declara o `--lst-ctrl` (44px) de que o `.ds-lst-cab-acoes>*` precisa
     para garantir o alvo de toque. A página passou a `class="ds-lst lic-page"`.
   · `.lic-loading` — o 1.º carregamento era uma linha de texto; agora são os
     skeletons do MOD.ui.
   ===================================================================================== */

.lic-card { padding: 16px; }

/* São SETE KPIs, não seis: a grelha fixa em `repeat(6, …)` deixava o último sozinho
   numa segunda linha com 1/6 da largura — os «botões assimétricos» que o dono viu.
   Com `auto-fit` reparte-se sempre o que couber, e a 390px dá duas colunas certas. */
.lic-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.lic-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(15, 12, 41, 0.08);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.lic-kpi[disabled] { cursor: default; }
.lic-kpi.is-ativo { outline: 2px solid var(--brand-500, #DA0A0D); }
.lic-kpi-rot { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500, #6E6668); }
/* O valor é a única coisa aqui que pode estourar a caixa: «123 456,00 €» a 22px não
   cabe numa coluna de 148px, e o espaço fino do Intl não parte a linha. Encolhe com o
   ecrã e, no pior caso, parte em vez de transbordar. */
.lic-kpi-val { font-size: clamp(17px, 4.4vw, 22px); font-weight: 800; color: var(--ink-900, #1B1618); overflow-wrap: anywhere; }
.lic-kpi--ok .lic-kpi-val { color: var(--success-500, #15803D); }
.lic-kpi--warn .lic-kpi-val { color: var(--warning-500, #F59E0B); }
.lic-kpi--bad .lic-kpi-val { color: var(--brand-500, #DA0A0D); }
.lic-kpi--ilegal { background: var(--brand-500, #DA0A0D); border-color: var(--brand-500, #DA0A0D); }
.lic-kpi--ilegal .lic-kpi-rot, .lic-kpi--ilegal .lic-kpi-val { color: #fff; }

.lic-limpar { margin-bottom: 12px; }

.lic-tabela { width: 100%; }
.lic-tabela tbody tr { cursor: pointer; }
.lic-tabela tbody tr:hover { background: var(--paper-50, #F7F8FA); }
.lic-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lic-sub { font-size: 12px; color: var(--ink-500, #6E6668); }
.lic-vazio { text-align: center; color: var(--ink-500, #6E6668); padding: 22px 0; }
.lic-clip { display: inline-flex; vertical-align: -2px; color: var(--ink-500, #6E6668); }

.lic-ilegais .lic-sec-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--brand-500, #DA0A0D); }
.lic-ilegais-lista { display: flex; flex-wrap: wrap; gap: 6px; }

.lic-fich { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lic-fich a { color: var(--ink-900, #1B1618); font-weight: 600; text-decoration: underline; }

/* --- correspondência entrada/saída (modal do processo) --- */
.lic-corresp { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.lic-corresp-linha { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
    border: 1px solid rgba(15, 12, 41, .08); border-radius: 10px; font-size: 13px; }
.lic-corresp-seta { display: inline-flex; flex: 0 0 auto; }
.lic-corresp-seta.is-entrada { color: #15803D; }
.lic-corresp-seta.is-saida { color: #DA0A0D; }
.lic-corresp-data { color: var(--neutral-500, #64748b); white-space: nowrap; }
.lic-corresp-assunto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lic-corresp-assunto em { color: var(--neutral-500, #64748b); font-style: normal; }
.lic-corresp-linha a { color: inherit; display: inline-flex; }
.lic-corresp-btn { border: 0; background: none; cursor: pointer; color: var(--neutral-500, #64748b);
    line-height: 1; padding: 2px 4px; display: inline-flex; }
.lic-corresp-btn:hover { color: #DA0A0D; }

/* Duas colunas em qualquer largura, com o assunto a ocupar a linha inteira: o dialog
   é estreito (560px) e a antiga grelha `1fr 130px 1fr auto` esmagava o sentido, que
   passou de <select> nu a combobox e tem ícone de limpar e de seta a ocupar espaço. */
.lic-corresp-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; align-items: end; }
.lic-corresp-form > * { min-width: 0; }
.lic-campo-largo { grid-column: 1 / -1; }
/* Dentro da grelha o espaçamento é do `gap`; as margens que o `.sup-input` e o
   `.sup-dialog .ds-combobox` trazem do mod-suporte.css desalinhavam as linhas.
   O `.sup-dialog` no seletor não é enfeite: o mod-suporte.css carrega DEPOIS deste
   (index.html linhas 105 e 115) e a sua regra `.sup-dialog .ds-combobox` empata em
   especificidade — sem o terceiro seletor ganhava por ordem de origem. */
.sup-dialog .lic-corresp-form .sup-input,
.sup-dialog .lic-corresp-form .ds-combobox { margin: 0; }
.lic-corresp-acao { display: flex; }
.lic-corresp-acao .ds-btn { width: 100%; }
@media (max-width: 560px) {
    .lic-corresp-form { grid-template-columns: minmax(0, 1fr); }
    .lic-corresp-acao { grid-column: 1 / -1; }
}

/* chips dos ilegais clicáveis (reunião 21/08: tudo linkável) */
a.lic-chip-link { text-decoration: none; color: inherit; cursor: pointer; }
a.lic-chip-link:hover { border-color: #DA0A0D; color: #DA0A0D; }