/* Facilita IAC — Plano 23: modo compacto (densidade) compartilhado.
 *
 * O Plano 22 criou o modo compacto só para o painel do gestor: a classe
 * `body.painel-compacto`, a chave `facilita:painel-gestor:compacto` no
 * `localStorage` e as regras que encolhem a tabela ficaram todas em
 * `chamados/css/painel.css`. O Plano 23 estende a MESMA preferência às outras
 * telas do Facilita, e por isso ela precisava de uma folha que toda página
 * carrega.
 *
 * Três decisões deliberadas:
 *
 * 1. **mesma classe e mesma chave** do Plano 22. Um gestor que já deixou o
 *    painel compacto encontra o detalhe compacto sem clicar de novo, e a
 *    preferência dele não é perdida por este plano. As regras do painel
 *    continuam em `painel.css`; aqui só entra o que o painel não cobre;
 * 2. **só espaçamento e tamanho de fonte**. Nada aqui esconde informação que o
 *    servidor mandou. O que some no modo compacto é decoração — no painel, o
 *    gráfico e a categoria repetida; no detalhe, nada;
 * 3. **especificidade acima da folha da tela, nunca ordem de carregamento**.
 *    Esta folha é carregada ANTES de `detalhe.css` (as duas entram no `<head>`,
 *    e a da página vem depois). Empatar em especificidade e perder por ordem
 *    seria uma regra morta; por isso todo seletor daqui leva o prefixo
 *    `body.painel-compacto`, que sozinho já o coloca um grau acima do seletor
 *    equivalente da folha da tela. Onde a folha da tela usa `!important`
 *    (o Plano 18 usa em `.section`, para vencer o Bootstrap), a regra daqui
 *    usa também — `!important` só empata com `!important`, e no empate quem
 *    tem mais especificidade ganha.
 */

/* ── Detalhe do chamado ──────────────────────────────────────────────────────
 * O detalhe confortável do Plano 21 respira 20 px dentro de cada cartão e 20 px
 * entre eles. No modo compacto isso cai para 14/12, que é a mesma proporção que
 * o painel usa entre `.62rem` e `.42rem` de célula. A escala tipográfica NÃO
 * muda: encolher o corpo do texto do detalhe abaixo de 16 px prejudicaria a
 * leitura das descrições longas, que é justamente o conteúdo desta tela. */
body.painel-compacto .chamado-detalhe .section,
body.painel-compacto .chamado-detalhe .sidebar-card {
    padding: 14px !important;
    margin-bottom: 12px;
}

body.painel-compacto .chamado-detalhe .detail-header {
    padding: 16px;
    margin-bottom: 12px;
}

body.painel-compacto .chamado-detalhe .detail-header h1 {
    margin: 8px 0 12px;
}

/* A linha do tempo é o bloco mais alto da tela: é onde o modo compacto rende
 * mais rolagem economizada. */
body.painel-compacto .chamado-detalhe .tl-item {
    padding-bottom: 8px;
}

body.painel-compacto .chamado-detalhe .tl-corpo {
    padding: 7px 10px;
}

body.painel-compacto .chamado-detalhe :is(.items-table, .curadoria-table) td {
    padding: 7px 10px;
}

/* ── Badge de status ─────────────────────────────────────────────────────────
 * Vale em qualquer tela: a badge do mapa único do Plano 23 acompanha a
 * densidade escolhida. */
body.painel-compacto .fac-badge {
    padding: 2px 8px;
}

body.painel-compacto .fac-badge--pilula {
    padding: 3px 10px;
}

/* ── Interruptor de densidade fora do painel ─────────────────────────────────
 * O painel do Plano 22 tem o interruptor desenhado dele (`.painel-g__densidade`,
 * tratado por `chamados/js/painel.js`). Telas que não são o painel usam o
 * gatilho genérico `[data-densidade-alternar]`, tratado por
 * `facilita/js/densidade.js`; estas regras existem para que esse gatilho tenha
 * aparência mesmo em telas sem folha própria.
 *
 * ── Hotfix detalhe 3, item 2 ────────────────────────────────────────────────
 * DEFEITO MEDIDO. Estas regras nasceram com a paleta de texto SOBRE FUNDO
 * ESCURO (`--fac-texto-suave`, `--fac-texto-claro`, `--fac-borda-escura`), que
 * é a paleta dos cartões do detalhe. Só que o interruptor NÃO fica dentro de
 * cartão nenhum: ele fica solto acima do primeiro card, e o fundo real ali é o
 * `<body>` da página, `--iac-bg-light` = `#f8fafc` (`templates/base_site.html`).
 * Medido no navegador em 2026-09-14, em 390/1366/1600/1920 (o resultado não
 * depende da largura):
 *
 * | elemento        | cor do texto        | fundo real | contraste |
 * | ---             | ---                 | ---        | ---       |
 * | rótulo ativo    | #f8fafc             | #f8fafc    | 1,00:1    |
 * | rótulo inativo  | #cbd5e1             | #f8fafc    | 1,42:1    |
 * | ícone do botão  | #cbd5e1             | #f8fafc    | 1,42:1    |
 * | borda do botão  | #6584b5             | #f8fafc    | 3,64:1    |
 *
 * O rótulo ativo era literalmente branco sobre branco — o mesmo defeito que o
 * Plano 05 levou a produção e que `docs/design-system.md` manda medir. O botão
 * ainda media 30 × 22 px, abaixo do alvo de toque de 32 px.
 *
 * A correção troca a paleta ESCURA pela CLARA da mesma escala de
 * `design-tokens.css` (nenhum hexadecimal novo entra no arquivo) e dá corpo ao
 * botão. Nada de comportamento nem de JavaScript muda: `densidade.js` continua
 * trocando `aria-checked` no botão e a classe `is-ativo` no rótulo. O
 * interruptor do painel do gestor (`.painel-g__densidade*`, em `painel.css`)
 * NÃO foi tocado: ele vive sobre o gradiente escuro da própria folha e já foi
 * medido no hotfix "painel 2" (inativo ≈ 6,9:1, ativo ≈ 10,3:1). */
[data-densidade-grupo] {
    display: inline-flex;
    align-items: center;
    gap: var(--fac-esp-2);
    padding: var(--fac-esp-1) var(--fac-esp-3);
    border-radius: var(--fac-raio-pilula);
    font-size: var(--fac-texto-xs);
    font-weight: var(--fac-peso-normal);
    /* #475569 sobre #f8fafc = 7,25:1. */
    color: var(--fac-texto-sobre-claro);
}

[data-densidade-rotulo].is-ativo {
    /* #1e293b sobre #f8fafc = 13,98:1, e em peso maior que o inativo. */
    color: var(--fac-texto-escuro);
    font-weight: var(--fac-peso-forte);
}

button[data-densidade-alternar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fac-esp-1);
    /* Alvo de toque: 44 × 32 px, acima do mínimo de 32 px do briefing. */
    min-width: 44px;
    min-height: 32px;
    padding: var(--fac-esp-1) var(--fac-esp-3);
    /* #64748b sobre #f8fafc = 4,55:1 (o mínimo de componente não textual é
     * 3:1, WCAG 1.4.11). */
    border: 1px solid var(--fac-cinza-500);
    border-radius: var(--fac-raio-pilula);
    background: var(--fac-branco);
    /* #475569 sobre #ffffff = 7,58:1. */
    color: var(--fac-texto-sobre-claro);
    font: inherit;
    cursor: pointer;
}

button[data-densidade-alternar]:hover {
    background: var(--fac-fundo-claro-2);
    border-color: var(--fac-cinza-600);
}

/* `--fac-ambar-300` (#fde68a) é o anel de foco dos cartões ESCUROS do detalhe e
 * mede 1,2:1 contra este fundo claro — invisível justamente onde o foco precisa
 * aparecer. O azul de ação mede 8,0:1 sobre #f8fafc. */
button[data-densidade-alternar]:focus-visible {
    outline: 3px solid var(--fac-azul-600);
    outline-offset: 2px;
}

/* No detalhe o interruptor fica encostado à direita, acima do primeiro cartão,
 * e a margem negativa o encaixa no respiro que o cabeçalho já deixava — ele não
 * empurra nenhum bloco para baixo. */
.chamado-detalhe .detalhe-densidade {
    display: flex;
    justify-content: flex-end;
    margin: -12px 0 8px;
}

/* `display: flex` venceria o `[hidden]` do Bootstrap por especificidade; esta
 * linha devolve a vitória ao atributo, que é quem manda enquanto o JavaScript
 * não tiver rodado. */
.chamado-detalhe .detalhe-densidade[hidden] { display: none; }