/*
 * Portal SGI — componentes acrescentados pela TAR-2026-08-25-001.
 *
 * Esta folha é ADITIVA. `styles.css` continua byte a byte igual ao arquivo
 * aceito por Bruno em 24/08/2026, e a conformidade visual pode ser conferida
 * por resumo criptográfico, não por leitura.
 *
 * Nada aqui declara cor, raio, sombra, altura de controle ou tamanho de fonte
 * literal: todo valor sai dos tokens já aceitos. Em consequência, os três
 * temas e a escala P/M/G alcançam estes componentes por construção — não por
 * terem sido lembrados um a um.
 *
 * Uma exceção deliberada, e ela é a mesma do protótipo: geometria estrutural
 * — trilho do interruptor, diâmetro de marcador, espessura de borda — não
 * acompanha a escala tipográfica. Escala é tipografia; ícone e controle são
 * reconhecimento.
 */

/* ==========================================================================
   1. Entrada e instalação — telas fora do shell autenticado
   ========================================================================== */

.auth-shell {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    background: var(--bg);
}

.auth-shell__top {
    display: flex;
    min-height: var(--header-h);
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-inline: 1.5rem;
}

.auth-shell__body {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-card {
    display: flex;
    width: min(100%, 26rem);
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.auth-card--wide {
    width: min(100%, 34rem);
}

.auth-card__brand {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.auth-card h1 {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: var(--leading-2xl);
}

.auth-card > p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.auth-footnote {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    text-align: center;
}

/* ==========================================================================
   2. Campos de formulário — geometria do campo de busca já aceito
   ========================================================================== */

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.field__label {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--leading-sm);
}

.field__hint,
.field__error {
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.field__hint {
    color: var(--text-muted);
}

.field__error {
    color: var(--danger);
    font-weight: 500;
}

.input,
.select {
    width: 100%;
    min-height: var(--control-h);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-bottom-color: var(--input-border-b);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-input);
}

.input::placeholder {
    color: var(--text-muted);
}

.input:focus,
.select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
}

.input[aria-invalid="true"] {
    border-color: var(--danger);
}

.select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.05rem center, right 0.8rem center;
    background-repeat: no-repeat;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.form-actions--split {
    justify-content: space-between;
}

.form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ==========================================================================
   3. Botões complementares
   ========================================================================== */

.button--danger {
    border-color: rgb(0 0 0 / 10%);
    background: var(--danger-soft);
    color: var(--danger);
}

.button--danger:hover {
    background: color-mix(in oklab, var(--danger-soft), var(--danger) 12%);
}

.button--ghost {
    background: transparent;
    color: var(--text-muted);
}

.button--ghost:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.button--sm {
    min-height: var(--control-h-sm);
    padding-inline: 0.75rem;
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.button--block {
    width: 100%;
}

/* ==========================================================================
   4. Avisos de resultado
   ========================================================================== */

.flash {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.flash > svg {
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.flash--success {
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.flash--danger {
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.flash--info {
    border-color: transparent;
    background: var(--info-soft);
    color: var(--info);
}

.flash--warning {
    border-color: transparent;
    background: var(--warning-soft);
    color: var(--warning);
}

.flash strong {
    font-weight: 600;
}

.flash[hidden] {
    display: none;
}

/* ==========================================================================
   5. Tabelas de dados
   ========================================================================== */

.table-card {
    /*
     * `contain: paint` acompanha o `overflow: hidden`, e não é redundância.
     *
     * Apurado em navegador, a 375 px: só com o `overflow` a página inteira
     * ganhava rolagem horizontal por causa da tabela larga, mesmo com o
     * contêiner interno rolando certo. `overflow: clip`, `max-width`,
     * `overflow-x` no `main`, no `.view`, no `.app-shell` e no `body` não
     * resolveram; a contenção de pintura resolveu, e a rolagem interna da
     * tabela continua funcionando.
     *
     * Sem isto, o Portal desliza de lado no celular em toda tela com tabela.
     */
    contain: paint;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.table-scroll {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.data-table th,
.data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: middle;
}

.data-table thead th {
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: var(--leading-xs);
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table tbody tr + tr td {
    border-top: 1px solid var(--border-subtle);
}

.data-table tbody tr:hover {
    background: var(--surface-hover);
}

.data-table td.is-numeric {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.data-table td.is-actions {
    text-align: right;
    white-space: nowrap;
}

/*
 * As ações da linha ficam numa linha só, encostadas à direita.
 *
 * Sem isto o agrupamento herda `flex-start` e quebra em duas linhas quando a
 * coluna aperta: a segunda ação desce e fica alinhada à esquerda dentro de uma
 * célula alinhada à direita. O efeito visível é o ícone da ação de baixo
 * parecendo solto, fora do prumo do ícone de cima.
 */
.data-table td.is-actions .cluster {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.cell-identity {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/*
 * A célula de identidade tem duas partes: o disco com as iniciais e a coluna
 * de texto ao lado. Estas regras valem **somente para a coluna de texto**, e o
 * caminho descendente e explícito é o ponto.
 *
 * Antes eram `.cell-identity strong` e `.cell-identity span`. O seletor de
 * span pegava qualquer span dentro da célula — inclusive o `.avatar`, que é
 * span, e o distintivo "você" dentro do nome. Com 0,1,1 contra 0,1,0 ele
 * vencia `.avatar` e trocava `display: grid` por `display: block`: as
 * iniciais perdiam a centralização do grid e iam para o canto do disco. Era
 * esse o defeito visto na matriz de permissões e na lista de contas — e ele
 * não aparecia na barra superior, onde o mesmo avatar vive fora desta célula.
 *
 * Restringir ao filho direto da coluna resolve os dois de uma vez e fecha a
 * armadilha para o próximo elemento acrescentado aqui.
 */
.cell-identity > div > strong {
    display: block;
    font-weight: 500;
}

.cell-identity > div > span {
    display: block;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

/*
 * Disco de iniciais.
 *
 * A centralização é exata por construção, e não por ajuste medido a olho.
 * Com `line-height: 1` a caixa de linha tem 1em, enquanto a caixa de conteúdo
 * da Instrument Sans tem 1,25em (ascendente 1, descendente 0,25). A entrelinha
 * negativa resultante põe a linha de base a 0,875em do topo da caixa; a altura
 * de caixa-alta é 0,75em, e as iniciais são sempre maiúsculas. O centro da
 * mancha fica então a 0,875 − 0,375 = 0,5em do topo — exatamente o meio.
 *
 * Como a conta é toda em `em`, ela vale igual nas três escalas: o disco não
 * acompanha a escala tipográfica (`DEC-SGI-047`), mas a proporção interna sim.
 *
 * **Não acrescente deslocamento em pixel aqui.** Se as iniciais parecerem
 * fora do lugar, o defeito está em outro seletor vencendo este por
 * especificidade — foi o que aconteceu com `.cell-identity span` acima.
 */
.avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--avatar-text);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    place-items: center;
}

.avatar--lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: var(--text-sm);
}

.status--role {
    background: var(--accent-soft);
    color: var(--color-accent-content);
}

.status--suspended {
    background: var(--danger-soft);
    color: var(--danger);
}

.status--sensitive {
    background: var(--warning-soft);
    color: var(--warning);
}

.empty-row td {
    padding-block: 2rem;
    color: var(--text-muted);
    text-align: center;
}

/* ==========================================================================
   6. Interruptor de permissão
   ========================================================================== */

.toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.toggle:hover {
    background: var(--surface-hover);
}

.toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.toggle__control {
    position: relative;
    display: block;
    width: 2.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    /*
     * Desligada, a chavinha não fica cinza (pedido do proprietário de
     * 11/10/2026, `TAR-2026-10-10-003`: "coloca uma corzinha sobria nas
     * chavinhas", "todas as chavinhas de tudo"). O trilho leva a cor de
     * destaque da conta em tom baixo, e o contorno e a bolinha, a mesma cor,
     * sóbria. Ligada, continua preenchida — é o que distingue os dois estados.
     */
    border: 1px solid color-mix(in srgb, var(--color-accent) 50%, var(--border));
    border-radius: 999px;
    background: var(--accent-soft);
    transition: background-color var(--transition), border-color
        var(--transition);
}

.toggle__control::after {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 65%, var(--surface));
    box-shadow: var(--shadow-xs);
    content: "";
    transition: transform var(--transition), background-color var(--transition);
}

.toggle input:checked + .toggle__control {
    border-color: transparent;
    background: var(--accent-fill);
}

.toggle input:checked + .toggle__control::after {
    background: var(--surface);
    transform: translateX(1rem);
}

.toggle input:focus-visible + .toggle__control {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
}

.toggle input:disabled + .toggle__control {
    border-color: var(--border);
    background: var(--disabled-bg);
    cursor: default;
}

/* Travada, a chavinha não promete toque: fica sem a cor. */
.toggle input:disabled + .toggle__control::after {
    background: var(--surface);
}

.toggle input:disabled ~ .toggle__text {
    color: var(--disabled-text);
}

/* Estado ligado sem campo de formulário: leitura da própria conta. */
.toggle__control--on {
    border-color: transparent;
    background: var(--accent-fill);
}

.toggle__control--on::after {
    background: var(--surface);
    transform: translateX(1rem);
}

.toggle--locked {
    cursor: default;
}

.toggle--locked:hover {
    background: transparent;
}

.toggle__text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.toggle__text strong {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--leading-sm);
}

.toggle__text span {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

/* ==========================================================================
   7. Matriz de permissões
   ========================================================================== */

.matrix {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.matrix__module {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.matrix__module-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.matrix__module-head h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-base);
}

.matrix__module-head p {
    margin: 0.125rem 0 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.matrix__area {
    padding: 0.75rem 1rem 1rem;
}

.matrix__area + .matrix__area {
    border-top: 1px solid var(--border-subtle);
}

.matrix__area-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline: 0.75rem;
}

.matrix__area-head h4 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-sm);
}

.matrix__area-head p {
    margin: 0;
    flex: 1 1 14rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.matrix__actions {
    display: flex;
    flex-direction: column;
    margin-top: 0.375rem;
}

.matrix__bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.matrix__count {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-sm);
}

.matrix__count strong {
    color: var(--text);
    font-weight: 600;
}

.readonly-note {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.readonly-note > svg {
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

/*
 * Visão geral: contas nas linhas, permissões nas colunas.
 *
 * O cabeçalho era escrito na vertical (`writing-mode: vertical-rl`), o que
 * economiza largura e cobra a leitura em troca: obriga a inclinar a cabeça,
 * quebra a busca visual e piora muito no telefone. Aqui ele volta ao
 * horizontal, com largura fixa e quebra de linha; a largura que isso custa é
 * paga com rolagem horizontal, e a coluna da conta fica fixa para a linha
 * nunca perder a referência de quem é.
 */
/*
 * `separate` porque `collapse` e `position: sticky` brigam: com as bordas
 * fundidas, parte dos navegadores deixa de posicionar a célula fixa. As bordas
 * daqui são de um lado só, então separar não duplica nada.
 */
.overview-table {
    border-collapse: separate;
    border-spacing: 0;
}

/*
 * Cabeçalho de coluna em dois níveis — TAR-2026-08-26-001.
 *
 * Antes, área e ação saíam no mesmo corpo (`--text-2xs`) e quase no mesmo
 * peso, e `overflow-wrap: anywhere` quebrava palavra no meio da sílaba. O
 * resultado era uma parede de texto em que nada se destacava e tudo pedia
 * esforço: era esse o cansaço relatado, não a densidade em si.
 *
 * Agora a área é sobrescrito — miúda, espaçada, em caixa alta e apagada — e a
 * ação é o rótulo que se lê. Duas informações de pesos claramente diferentes
 * se separam sozinhas; duas de pesos parecidos disputam.
 */
/*
 * Cabeçalho centrado na coluna, nos dois eixos — TAR-2026-08-26-002.
 *
 * A hierarquia de dois níveis fica; o que muda é o alinhamento. Alinhado à
 * esquerda e ao rodapé, o rótulo ficava visualmente descolado da coluna de
 * marcas — que é centrada — e o olho precisava corrigir a cada varredura.
 *
 * `vertical-align` não centra o conteúdo interno de uma célula com dois blocos
 * empilhados de alturas diferentes; quem faz isso é o `flex` em coluna com
 * `justify-content: center`. A altura mínima nivela os cabeçalhos entre si, para
 * que áreas com rótulo de uma linha e de duas não desalinhem a fileira.
 */
.overview-table th.is-column {
    min-width: 8.5rem;
    max-width: 8.5rem;
    padding-block: 0.75rem;
    text-transform: none;
    white-space: normal;
}

.overview-table th.is-column > .is-column__conteudo {
    display: flex;
    min-height: 3.5rem;
    flex-direction: column;
    /*
     * `stretch`, e **não** `center`, e a diferença não é estética.
     *
     * Com `align-items: center`, cada filho passa a ser dimensionado pelo
     * conteúdo — largura de conteúdo máximo — e um rótulo de duas palavras
     * simplesmente transborda a coluna em vez de quebrar. Medido a 375 px:
     * quatro colunas estouravam, "Ver as contas" pedindo 89 px numa caixa de
     * 71 px.
     *
     * Esticando os filhos à largura da coluna, a quebra volta a funcionar, e a
     * centralização horizontal fica por conta do `text-align` — que centra o
     * texto **dentro** da largura disponível, sem aumentar a caixa.
     */
    align-items: stretch;
    justify-content: center;
    gap: 0.125rem;
    text-align: center;
}

.overview-table th.is-column > .is-column__conteudo > span {
    display: block;
    /*
     * Sem `anywhere`: partir "administradores" ao meio para caber economiza
     * pixel e cobra leitura. A coluna ficou um pouco mais larga em troca.
     */
    overflow-wrap: break-word;
}

.overview-table .is-column__area {
    /*
     * Altura reservada mesmo quando vazio: só a primeira coluna de cada área
     * escreve o rótulo, e sem a reserva as ações das demais subiriam,
     * desalinhando a linha de base ao longo da tabela.
     */
    min-height: var(--leading-xs);
    /*
     * Hifenização de verdade, e não corte arbitrário. "ADMINISTRADORES" não
     * cabe na coluna estreita do telefone, e a quebra crua produzia
     * "ADMINIST / RADORES" — que é ilegível. Com `hyphens: auto` e o
     * `lang="pt-BR"` do documento, sai "ADMINISTRA-DORES", que se lê.
     */
    hyphens: auto;
    color: var(--text-muted);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: var(--leading-xs);
    text-transform: uppercase;
}

.overview-table .is-column__action {
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: var(--leading-xs);
}

/*
 * Separação vertical em dois níveis, e nenhuma grade.
 *
 * O traço fino separa ação de ação; o traço de área separa bloco de bloco. É
 * a mesma hierarquia que o cabeçalho anuncia, agora desenhada — e é o que
 * permite seguir uma coluna com o olho numa tabela larga. Não há borda
 * horizontal nova: a linha já é separada pelo que a tabela tinha.
 */
.overview-table th.is-column,
.overview-table td.is-mark {
    border-left: 1px solid var(--border-subtle);
}

.overview-table th.is-column--group,
.overview-table td.is-mark--group {
    border-left-color: var(--border);
}

/*
 * Coluna da conta fixa na rolagem horizontal.
 *
 * O fundo opaco não é enfeite: sem ele as marcas passam por baixo da coluna
 * fixa enquanto a tabela rola, e a primeira coluna vira uma sopa ilegível.
 */
.overview-table th:first-child,
.overview-table td:first-child {
    position: sticky;
    z-index: 1;
    left: 0;
    min-width: 13rem;
    background: var(--surface);
}

.overview-table thead th:first-child {
    z-index: 2;
}

.overview-table th:first-child::after,
.overview-table td:first-child::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: var(--border-subtle);
    content: "";
}

/*
 * O realce da linha precisa alcançar a coluna fixa.
 *
 * O tom de destaque é translúcido e a célula fixa é opaca por necessidade, de
 * modo que pintar um sobre o outro exige empilhar: o destaque entra como
 * camada, e o fundo opaco continua embaixo segurando a legibilidade.
 */
.overview-table tbody tr:hover td:first-child {
    background:
        linear-gradient(var(--surface-hover), var(--surface-hover)),
        var(--surface);
}

@media (max-width: 48rem) {
    /*
     * A coluna **não** encolhe no telefone, e a medição é a razão.
     *
     * "ADMINISTRADORES", em caixa alta com espaçamento, pede 105,8 px. Numa
     * coluna de 6,5 rem sobravam 71,2 px de conteúdo: a palavra não cabia nem
     * com hifenização, e quebrava ao meio sem hífen — "ADMINISTRA/DORES".
     *
     * As saídas seriam truncar com reticências, encolher a letra abaixo do
     * legível, ou dar largura à coluna. A rolagem horizontal desta tabela é
     * **intencional e já existia**; gastar um pouco mais dela é o preço mais
     * barato dos três. Por isso a largura de 8,5 rem vale em qualquer viewport,
     * e este bloco só ajusta a coluna fixa da conta.
     */

    /*
     * E o espaçamento entre letras sai no estreito.
     *
     * Com ele, a palavra pedia 105,8 px numa coluna que oferece 103,2 — dois
     * pixels e meio de falta, e a quebra voltava. Sem ele, pede 96,8 e cabe. O
     * sobrescrito continua sendo sobrescrito pela caixa alta, pelo corpo miúdo
     * e pela cor apagada; o espaçamento era o único dos quatro sinais que
     * custava largura.
     */
    .overview-table .is-column__area {
        letter-spacing: normal;
    }

    .overview-table th:first-child,
    .overview-table td:first-child {
        min-width: 9.5rem;
    }
}

.overview-table td.is-mark {
    text-align: center;
}

.mark {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    place-items: center;
}

.mark--yes {
    background: var(--success-soft);
    color: var(--success);
}

/*
 * Negada é "x" vermelho, e não um ponto apagado — TAR-2026-08-26-001.
 *
 * O ponto cinza dizia "nada aqui", quando o que a célula afirma é uma decisão:
 * esta conta **não** alcança esta ação. Numa matriz que se lê varrendo com o
 * olho, ausência e negação precisam de sinais diferentes, e o par verde/vermelho
 * já é o vocabulário do resto do Portal.
 *
 * Os tokens são os mesmos do `.mark--yes`, trocando sucesso por perigo: a marca
 * acompanha os três temas sem nenhuma cor literal.
 */
.mark--no {
    background: var(--danger-soft);
    color: var(--danger);
}

.mark--all {
    background: var(--accent-soft);
    color: var(--color-accent-content);
}

/* ==========================================================================
   8. Conta ativa no cabeçalho
   ========================================================================== */

.account {
    position: relative;
}

.account > summary {
    display: flex;
    min-height: var(--control-h-sm);
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-lg);
    cursor: pointer;
    list-style: none;
}

.account > summary::-webkit-details-marker {
    display: none;
}

.account > summary:hover {
    background: var(--surface-hover);
}

.account > summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
}

.account__copy {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.account__copy strong {
    font-size: var(--text-sm);
    font-weight: 500;
}

.account__copy span {
    color: var(--text-muted);
    font-size: var(--text-2xs);
}

@media (min-width: 640px) {
    .account__copy {
        display: flex;
    }
}

.account__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.375rem);
    right: 0;
    display: flex;
    width: max(14rem, 100%);
    max-width: calc(100vw - 2rem);
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.account__panel > p {
    margin: 0;
    padding: 0.375rem 0.5rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    word-break: break-word;
}

.account__panel a,
.account__panel button {
    display: flex;
    min-height: var(--nav-item-h);
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    text-align: left;
    text-decoration: none;
    width: 100%;
}

.account__panel a:hover,
.account__panel button:hover {
    background: var(--surface-hover);
}

/* ==========================================================================
   9. Registro de auditoria
   ========================================================================== */

.audit-line {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.audit-line__dot {
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.4375rem;
    border-radius: 50%;
    background: var(--success);
}

.audit-line__dot--restrictive {
    background: var(--danger);
}

.audit-detail {
    display: block;
    max-width: 32rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.pagination__links {
    display: flex;
    gap: 0.5rem;
}

/* ==========================================================================
   10. Blocos utilitários e página de recusa
   ========================================================================== */

.stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stack--tight {
    gap: 0.75rem;
}

/* Caminho de volta no topo do cabeçalho: ocupa só a largura do texto. */
.voltar {
    align-self: flex-start;
    margin-bottom: 0.375rem;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.panel__head h2 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--leading-lg);
}

.panel__head p {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.denied {
    display: flex;
    max-width: 34rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.denied h1 {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: var(--leading-2xl);
}

.denied p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.denied code {
    border-radius: var(--radius-md);
    background: var(--filled-bg);
    color: var(--text);
    font-size: var(--text-xs);
    padding: 0.0625rem 0.375rem;
}

/* ==========================================================================
   11. Correção decidida pelo proprietário sobre a folha aceita

   Bruno decidiu, em 25/08/2026, que os rótulos P, M e G permanecem em tamanho
   tipográfico estável em todos os níveis, como os ícones.

   A correção vive aqui, e não em `styles.css`, por um motivo de governança: a
   folha aceita continua byte a byte igual à que foi aprovada em 24/08/2026, e
   é essa identidade que permite provar a conformidade visual por resumo
   criptográfico em vez de por leitura. Corrigir lá apagaria a prova para
   ganhar uma linha.

   Isto encerra a divergência registrada na seção 13.4 da TAR-2026-08-25-001:
   o `README` do protótipo aceito descrevia este comportamento, e a folha
   aceita fazia o contrário. O proprietário decidiu a favor do `README`.
   ========================================================================== */

/*
 * Por que um valor literal, e não um token.
 *
 * Todo token `--text-*` carrega o multiplicador da escala por construção —
 * é justamente disso que este controle precisa escapar. `0.75rem` é o valor
 * que `--text-xs` assume no nível P, que é a escala harmonizada com o CRM.
 *
 * O mesmo padrão já vale para os ícones na folha aceita, que também declaram
 * medida literal por ficarem fora da escala. Escala é tipografia de leitura;
 * um controle que se redimensiona enquanto está sendo usado atrapalha quem o
 * está usando.
 *
 * O diâmetro do círculo continua vindo de `--pill-size` e continua
 * acompanhando a escala, de propósito: é o que mantém os dois controles
 * globais exatamente da mesma altura em qualquer nível.
 */
.type-scale button {
    font-size: 0.75rem;
}

/* ==========================================================================
   12. Armazenamento global — TAR-2026-08-25-002
   ========================================================================== */

/*
 * Duas bases de medição, dois blocos, nunca somados.
 *
 * A cota da conta mede o sistema de arquivos e NÃO inclui os bancos — apurado
 * por comando: o `megabytes_used` da UAPI é exatamente igual ao `du` do
 * diretório da conta. Por isso os dois vivem em caixas visualmente distintas,
 * com o motivo escrito na tela: um total somado seria um número que não
 * existe em lugar nenhum, e quem lesse não teria como desconfiar.
 */
.base-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.base-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.base-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.base-card__top h2 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-base);
}

.base-card__value {
    font-size: var(--text-2xl);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: var(--leading-2xl);
}

.base-card__value small {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 400;
}

.base-card__note {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.base-card__rows {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.base-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.base-card__row span:first-child {
    color: var(--text-muted);
}

.base-card__row strong {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Medidor de ocupação. */
.meter {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--filled-bg);
}

.meter__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--success);
    transition: width var(--transition);
}

.meter__fill--atencao {
    background: var(--warning);
}

.meter__fill--critico {
    background: var(--danger);
}

/* Barra composta das categorias dentro de um módulo. */
.stack-bar {
    display: flex;
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--filled-bg);
}

.stack-bar__part {
    height: 100%;
}

.stack-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
}

.stack-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.stack-legend__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
}

.stack-legend__item strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Cada categoria tem cor própria, toda ela derivada dos tokens aceitos. */
.cat--videos {
    background: var(--purple);
}
.cat--imagens {
    background: var(--info);
}
.cat--documentos {
    background: var(--success);
}
.cat--logs {
    background: var(--warning);
}
.cat--backups {
    background: var(--color-accent);
}
.cat--temporarios {
    background: var(--text-muted);
}
.cat--codigo {
    background: var(--zinc-400);
}
.cat--outros {
    background: var(--border);
}

.growth-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.growth-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.growth-card__label {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.growth-card__value {
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: var(--leading-lg);
}

.growth-card__value--sobe {
    color: var(--warning);
}
.growth-card__value--desce {
    color: var(--success);
}
.growth-card__value--vazio {
    color: var(--text-muted);
    font-weight: 400;
}

.path-cell {
    display: block;
    max-width: 34rem;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
    overflow-wrap: anywhere;
}

.module-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.module-block > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

.module-block > summary::-webkit-details-marker {
    display: none;
}

.module-block > summary:hover {
    background: var(--surface-hover);
}

.module-block > summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.module-block__identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.module-block__identity strong {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-base);
}

.module-block__identity span {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.module-block__figures {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
}

.module-block__figure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.module-block__figure strong {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-sm);
}

.module-block__figure span {
    color: var(--text-muted);
    font-size: var(--text-2xs);
}

.module-block__body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border-subtle);
}

/* ==========================================================================
   10. Segundo fator — configuração, desafio e recuperação
   ========================================================================== */

.setup-steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-left: 1.25rem;
    gap: 1rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.setup-steps strong {
    color: var(--text);
    font-weight: 600;
}

/*
 * O QR precisa de fundo claro fixo mesmo no tema escuro.
 *
 * É a única exceção de cor literal desta folha, e ela não é estética: leitor
 * de QR espera módulos escuros sobre fundo claro. Inverter no tema escuro
 * deixaria o código ilegível para boa parte dos aparelhos, e um QR que não
 * lê não é decisão de tema — é defeito.
 */
.qr-box {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #ffffff;
}

.qr-box svg {
    display: block;
    width: 100%;
    max-width: 16.5rem;
    height: auto;
}

.qr-secret {
    display: flex;
    flex-direction: column;
    margin: 0.75rem 0 0;
    gap: 0.25rem;
    text-align: center;
}

.qr-secret__label {
    color: var(--text-muted);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qr-secret code {
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    word-break: break-all;
}

.recovery-codes {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    list-style: none;
}

.recovery-codes code {
    display: block;
    padding: 0.5rem;
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-align: center;
}

.auth-card__aside {
    display: flex;
    justify-content: center;
    width: min(100%, 34rem);
    margin-top: 1rem;
}

/* ==========================================================================
   11. Dispositivos confiáveis
   ========================================================================== */

.device-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    list-style: none;
}

.device-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.device-list__what {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.device-list__what strong {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-sm);
}

.device-list__what span {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

/* ==========================================================================
   12. Grade de filtros
   ========================================================================== */

/*
 * `auto-fit` com mínimo de 13rem: no desktop os seis recortes ocupam duas
 * linhas confortáveis, e no telefone a grade vira uma coluna sozinha, sem
 * media query e sem campo espremido.
 */
.filter-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

/* ==========================================================================
   13. Lixeira
   ========================================================================== */

.data-table th.is-check,
.data-table td.is-check {
    width: 2.75rem;
    padding-right: 0;
    text-align: center;
}

.retention-note {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

/* ==========================================================================
   14. Configurações — escolha entre estados
   ========================================================================== */

/*
 * O padrão de escolha desta rodada.
 *
 * Um `radio` nativo dentro de um alvo grande e clicável: a marca do navegador
 * continua sendo a marca do navegador — que é o que leitor de tela e navegação
 * por teclado já sabem anunciar — e o cartão em volta existe só para dar área
 * de toque e espaço à explicação. Trocar o controle nativo por um desenho
 * próprio custaria acessibilidade para ganhar aparência.
 *
 * `:has()` pinta o cartão selecionado. Onde ele não existir, a marca do rádio
 * continua dizendo qual é a escolha: a degradação é de destaque, não de
 * informação.
 */
.choice-set {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.choice-set--row {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.choice-set > .field__label {
    padding: 0;
    margin-bottom: 0.25rem;
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.choice:hover {
    background: var(--surface-hover);
}

.choice:has(input:checked) {
    border-color: var(--color-accent-content);
    background: var(--selected-bg);
}

.choice:has(input:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
}

.choice input {
    /* Alinha o controle com a primeira linha do rótulo em qualquer escala. */
    margin-top: calc((var(--leading-sm) - 1rem) / 2);
    accent-color: var(--color-accent-content);
}

.choice__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/*
 * Cor de destaque: seis cartões, cada um pintado na própria cor.
 *
 * `data-accent-sample` no cartão troca as variáveis de cor só ali dentro
 * (styles.css, seção 3A). A amostra mostra as duas formas em que a cor
 * aparece no Portal: o preenchimento de um botão e o texto de um link.
 */
.choice-set--accent {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 639px) {
    .choice-set--accent {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.choice--accent {
    --selected-bg: color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.choice--accent .choice__text {
    flex: 1;
    gap: 0.5rem;
}

.choice--accent .accent-sample {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
}

/* Dois seletores de classe: vencem `.choice__text span`, que é do texto de apoio. */
.choice--accent .accent-sample__fill {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--radius-lg);
    background: var(--accent-fill);
    box-shadow: inset 0 1px rgb(255 255 255 / 20%);
    color: var(--color-accent-foreground);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--leading-sm);
}

.choice--accent .accent-sample__text {
    color: var(--color-accent-content);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--leading-sm);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.choice__text strong {
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--leading-sm);
}

.choice__text span {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
}

.choice--inline {
    margin-bottom: 1.25rem;
}

/* ==========================================================================
   15. Cabeçalho de painel com estado à direita
   ========================================================================== */

.panel__head--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/*
 * A faixa superior do cartão pode carregar mais de um distintivo: estado
 * operacional, "oculto" e estado de construção respondem perguntas diferentes
 * e não se substituem. `wrap` mantém isso legível a 375px, onde os três não
 * cabem lado a lado.
 */
.catalog-card__badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* ==========================================================================
   16. Cabecalhos de grupo do menu lateral — TAR-2026-08-26-001
   ========================================================================== */

/*
 * "Navegacao", "Administracao" e "Configuracoes" separam grupos, e estavam
 * lidos como texto de apoio: cinza e peso 500, iguais em hierarquia aos
 * proprios itens que deveriam encabecar.
 *
 * A folha aceita (`styles.css`) e imutavel byte a byte, entao a correcao vive
 * aqui, como sobreposicao. Nao e um valor novo: `--color-accent-content` e o
 * token de acento **para texto**, ja usado no distintivo de papel e no anel de
 * foco, e definido nos tres temas — inclusive na variante de alto contraste.
 * Usa-lo aqui e adotar a cor da casa, nao inventar uma.
 *
 * Sem seta, sem sanfona e sem borda: o pedido era hierarquia, e hierarquia se
 * resolve com cor, peso e respiro.
 */
.nav-heading {
    margin-top: 0.75rem;
    color: var(--color-accent-content);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.nav-heading:first-child {
    margin-top: 0;
}

/* ==========================================================================
   17. Lista suspensa com marca de selecao — TAR-2026-08-26-002
   ========================================================================== */

/*
 * A bolinha mora dentro da lista, e nao espalhada pela pagina.
 *
 * Construida sobre `details` + `input[type=radio]`: o navegador ja sabe abrir,
 * fechar, dar foco, andar entre opcoes com as setas e anunciar "opcao 2 de 7".
 * Nada disso e reimplementado aqui — o CSS so veste o que ja funciona.
 */
.listbox {
    position: relative;
}

/*
 * O `summary` conserva o proprio `display`.
 *
 * Apurado em navegador: trocar o display do summary por `flex` faz o elemento
 * perder a ativacao nativa — `Enter` e `Espaco` param de abrir a lista, e so o
 * clique continua funcionando. `list-style: none` tira o triangulo sem tocar no
 * display, e o layout vai para o involucro interno.
 */
.listbox__control {
    min-height: var(--control-h);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-bottom-color: var(--input-border-b);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: var(--text);
    cursor: pointer;
    font-size: var(--text-base);
    line-height: var(--leading-input);
    list-style: none;
}

.listbox__control-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* O triangulo nativo do `summary` sai; a seta e a do proprio Portal. */
.listbox__control::-webkit-details-marker {
    display: none;
}

.listbox__control::marker {
    content: "";
}

.listbox__control:hover {
    background: var(--surface-hover);
}

.listbox__control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
}

.listbox__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listbox__seta {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--transition);
}

.listbox[open] .listbox__seta {
    transform: rotate(180deg);
}

/*
 * O painel flutua sobre o conteudo para nao empurrar a grade de filtros ao
 * abrir — uma lista que reposiciona a pagina inteira faz a pessoa perder o
 * lugar onde estava.
 *
 * `max-height` com rolagem propria: "Quem fez" cresce com o historico, e uma
 * lista de cem nomes nao pode ocupar a tela toda.
 */
.listbox__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    right: 0;
    left: 0;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.listbox__set {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 0.125rem;
}

.listbox__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
}

.listbox__option:hover {
    background: var(--surface-hover);
}

.listbox__option input {
    flex-shrink: 0;
    accent-color: var(--color-accent-content);
}

/* A opcao escolhida se enxerga sem depender so do desenho do radio. */
.listbox__option:has(input:checked) {
    background: var(--selected-bg);
    font-weight: 500;
}

.listbox__option:has(input:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);
}

.listbox__option span {
    overflow-wrap: anywhere;
}

/*
 * Dedo nao e cursor.
 *
 * Medido no telefone: a opcao ficava com 39 px de altura, abaixo do alvo
 * confortavel de toque. O acrescimo vale so onde o ponteiro e grosso — no
 * mouse, linhas mais altas so afastariam as opcoes umas das outras sem ganho.
 */
@media (pointer: coarse) {
    .listbox__option {
        min-height: 2.75rem;
        padding-block: 0.625rem;
    }

    .listbox__option input {
        width: 1.125rem;
        height: 1.125rem;
    }
}

/*
 * No telefone o painel vira folha inferior: lista suspensa presa a um campo de
 * 4 rem no alto da tela obriga a mirar com o polegar num alvo pequeno, e a
 * rolagem interna disputa com a da pagina.
 */
@media (max-width: 40rem) {
    .listbox[open] .listbox__panel {
        position: fixed;
        top: auto;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        max-height: 60dvh;
    }
}
/* Ajuste do cabeçalho real do Portal. A folha do protótipo aceito permanece intacta. */
@media (max-width: 80rem) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .topbar .account__copy { display: none; }
}

@media (max-width: 1023px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .menu-button { grid-column: 1; grid-row: 1; }
  .mobile-brand { grid-column: 2; grid-row: 1; }
  .account { grid-column: 3; grid-row: 1; justify-self: end; }
  .type-scale { grid-column: 3; grid-row: 2; justify-self: end; }
  .search { grid-column: 1 / -1; grid-row: 3; }
  .theme-switcher { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
}

/*
 * Em tela estreita o cabeçalho tem três linhas. Preso ao alto, ele tomava
 * boa parte da tela do celular o tempo todo. Abaixo de 1024 px ele fica no
 * alto da página e sai com a rolagem. O menu lateral e o véu dele continuam
 * presos à janela. Pedido do proprietário em 07/10/2026 (TAR-2026-10-07-005).
 * A faixa de aviso, que a regra também soltava, deixou de existir (seção 18).
 */
@media (max-width: 1023px) {
  .topbar { position: static; }
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar--profile { width: 6rem; height: 6rem; font-size: var(--text-2xl); flex-shrink: 0; }
.profile-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: start; }
.profile-editor__portrait { display: grid; justify-items: center; gap: 0.75rem; color: var(--text-muted); font-size: var(--text-xs); text-align: center; max-width: 10rem; }
.profile-editor form { display: grid; gap: 1.25rem; }
.profile-editor input[type="file"]::file-selector-button { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.35rem 0.65rem; margin-right: 0.65rem; cursor: pointer; }
.profile-editor__remove { margin-top: 1rem; }
@media (max-width: 40rem) { .profile-editor { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   18. Ajustes de tela pedidos pelo proprietário em 07/10/2026 — TAR-2026-10-08-001
   ========================================================================== */

/*
 * 18.1 A faixa de aviso do alto saiu.
 *
 * "A barra superior escrita Portal do SGI é desnecessária e só ocupa espaço."
 * A marcação foi retirada do Portal; a folha aceita ainda reserva a altura
 * dela para o menu lateral, o cabeçalho e a gaveta do celular, e é essa
 * reserva que se zera aqui. `html:root` vence o `:root` da folha aceita em
 * qualquer largura, inclusive dentro das consultas de mídia dela.
 */
html:root { --banner-height: 0px; }

/*
 * 18.2 Duas cores a mais na lista de `data-cor`.
 *
 * As outras — info, success, warning, danger, purple, turquesa e neutro —
 * já existem na folha de Reuniões e valem para o Portal inteiro. Cada módulo
 * tem a sua (`App\Support\ModuleColors`), e sete programas pedem sete tons.
 */
/* Os valores de rosa e índigo estão na paleta, seção 24.1. */

/*
 * Cobre — o Painel do Cliente, desde que o dourado passou a ser de Pessoas 360º
 * (`DEC-SGI-074`, item 22; `TAR-2026-10-11-002`, fatia 3). Alaranjado fechado,
 * longe do ouro e do rosa, fosco como as outras.
 */
/* O valor do cobre está na paleta, seção 24.1. */

/*
 * 18.3 Cartão de módulo com a cor do módulo: ícone, nome e botão.
 *
 * Fosco, fechado e sóbrio, por ordem do proprietário ao ver a prévia: primeiro
 * "coloque as cores dos módulos de modo mais fosco e sóbrias", depois "pode
 * ser um pouquinho mais fechada, mais forte, porém, fosco". A cor do módulo
 * não entra pura: mistura-se com um cinza escuro do tema, o que tira o brilho
 * e fecha o tom sem apagar a tonalidade. A cor aparece na faixa, no ícone, no
 * nome e no botão, e num sombreado que desce do canto superior esquerdo do
 * cartão — nasceu no dourado do Painel do Cliente, e o proprietário mandou
 * repetir nos outros, cada um na sua cor.
 *
 *   --cinza-fosco ...... o cinza que fecha o tom — mais escuro no tema Escuro,
 *                        onde as cores de origem são claras e brilhantes
 *   --cor-fosca ........ a tonalidade, sem brilho — faixa, ícone e borda
 *   --cor-fosca-suave .. um véu dela sobre a superfície — fundo do ícone e do botão
 *   --cor-texto ........ a tonalidade puxada para a cor do texto — nome e botão,
 *                        para ler bem nos três temas
 */
.catalog-card[data-cor],
.resumo__item[data-cor] {
  --cinza-fosco: color-mix(in srgb, var(--text-muted) 60%, var(--text));
  --cor-fosca: color-mix(in srgb, var(--cor) 72%, var(--cinza-fosco));
  --cor-fosca-suave: color-mix(in srgb, var(--cor-fosca) 22%, var(--surface));
  --cor-texto: color-mix(in srgb, var(--cor-fosca) 80%, var(--text));
}
html[data-theme="escuro"] .catalog-card[data-cor],
html[data-theme="escuro"] .resumo__item[data-cor] { --cinza-fosco: #4b535c; }
.catalog-card[data-cor] {
  border-top: 0.1875rem solid var(--cor-fosca);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor-fosca) 13%, var(--surface)) 0%, var(--surface) 58%);
}
.catalog-card[data-cor]:hover {
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor-fosca) 20%, var(--surface)) 0%, color-mix(in srgb, var(--cor-fosca) 6%, var(--surface)) 58%);
}
.catalog-card[data-cor] .module-symbol { border: 0; background: var(--cor-fosca-suave); box-shadow: none; color: var(--cor-fosca); }
.catalog-card[data-cor] h2 { color: var(--cor-texto); font-weight: 600; }

/*
 * Dourado metalizado — só o Painel do Cliente, o Armazenamento global e
 * Minhas preferências, por ordem do proprietário ao ver a prévia ("painel do
 * cliente, dourado metalizado"; "armazenamento global pode ser o dourado
 * metalizado"; "dourado metalizado em minhas preferencias"). É o ouro
 * escovado do Portal, com o mesmo brilho de cinco faixas do botão principal,
 * e não segue a cor de destaque que cada pessoa escolhe: é a cor do cartão.
 * Aqui o brilho é de propósito — as outras cores continuam foscas.
 */
.catalog-card[data-cor="ouro"] {
  --cor-fosca: var(--gold);
  --cor-texto: var(--gold-content);
}
.catalog-card[data-cor="ouro"] .module-symbol,
.catalog-card[data-cor="ouro"] .button--modulo {
  border: 1px solid rgb(0 0 0 / 10%);
  background: var(--gold-fill);
  box-shadow: inset 0 1px rgb(255 255 255 / 25%);
  color: #171a1f;
}
.catalog-card[data-cor="ouro"] .button--modulo:hover {
  background: linear-gradient(rgb(255 255 255 / 10%), rgb(255 255 255 / 10%)), var(--gold-fill);
}

/* Botões e avisos de cartões vizinhos ficam na mesma linha, no pé do cartão. */
.catalog-card > .button,
.catalog-card > .status:last-child { margin-top: auto; }

.button--modulo {
  min-width: 7rem;
  border-color: color-mix(in srgb, var(--cor-fosca) 60%, var(--border));
  background: color-mix(in srgb, var(--cor-fosca) 28%, var(--surface));
  /* Mais perto da cor do texto que o nome: a letra fica sobre fundo tingido. Medido: 5,0 ou mais nos três temas. */
  color: color-mix(in srgb, var(--cor-fosca) 62%, var(--text));
  font-weight: 600;
}
.button--modulo:hover {
  border-color: var(--cor-fosca);
  background: color-mix(in srgb, var(--cor-fosca) 40%, var(--surface));
}

/*
 * 18.4 Quadro de números com vida.
 *
 * Substitui a fileira de números soltos (`.catalog-summary`, da folha aceita)
 * nas telas Módulos do SGI, Contas, Permissões e Lixeira. Cada número tem o
 * seu quadro, com ícone e cor fixa — a cor não muda quando o número é zero.
 */
.resumo { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.resumo__item {
  display: flex;
  flex: 1 1 13rem;
  max-width: 20rem;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-left: 0.25rem solid var(--cor-fosca);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.resumo__icone {
  display: grid;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  background: var(--cor-fosca-suave);
  color: var(--cor-fosca);
  place-items: center;
}
.resumo__icone svg { width: 1.375rem; height: 1.375rem; }
.resumo__rotulo {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: var(--leading-xs);
  text-transform: uppercase;
}
.resumo__numero {
  display: block;
  color: var(--text);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 40rem) {
  .resumo__item { max-width: none; }
}

/* ==========================================================================
   19. Botões com cor — padrão de tela do SGI
   ========================================================================== */

/*
 * Não existe botão cinza (`docs/designs/PADRAO_DE_TELA_SGI.md`, § 1; ordem do
 * proprietário de 10/10/2026, `TAR-2026-10-09-004`). Fora o botão principal,
 * todo botão é contorno e letra na cor do que ele faz, com o fundo
 * transparente; ao passar o ponteiro, o fundo ganha a mesma cor em tom baixo.
 *
 * A cor vem do `data-cor` do próprio botão — azul para abrir e ir, roxo para
 * permissões, laranja para cancelar e desfazer, âmbar para sair, vermelho para
 * desligar e apagar. Sem `data-cor`, o botão nasce no verde da ação neutra.
 *
 *   --botao-cor ..... a cor do botão; nunca herda a cor do quadro em volta
 *   --botao-suave ... a mesma cor em tom baixo, para o ponteiro em cima
 *   --botao-borda ... quanto da cor entra no contorno: mais nos temas claros,
 *                     onde o contorno precisa aparecer sobre o branco
 *
 * Os botões em tom baixo que já tinham cor por pedido anterior
 * (`.button--sobrio`, na folha de Reuniões) ficam como estão: as regras daqui
 * não os alcançam. Botão desligado continua cinza: não se aperta.
 */
:root { --botao-borda: 82%; }
html[data-theme="escuro"] { --botao-borda: 58%; }

/* Laranja puxado para o vermelho, do "Cancelar": entre o âmbar e o vermelho, sem se confundir com nenhum dos dois. O
   valor está na paleta, seção 24.1. */

.button--secondary:where(:not(.button--sobrio)),
.button--ghost:where(:not(.button--sobrio)) {
  --botao-cor: var(--success);
  --botao-suave: var(--success-soft);
  border-color: color-mix(in srgb, var(--botao-cor) var(--botao-borda), var(--border));
  background: transparent;
  color: color-mix(in srgb, var(--botao-cor) 62%, var(--text));
}
.button--secondary[data-cor]:where(:not(.button--sobrio)),
.button--ghost[data-cor]:where(:not(.button--sobrio)) { --botao-cor: var(--cor); --botao-suave: var(--cor-suave); }
.button--secondary:hover:where(:not(.button--sobrio)),
.button--ghost:hover:where(:not(.button--sobrio)) {
  border-color: var(--botao-cor);
  background: var(--botao-suave);
  color: color-mix(in srgb, var(--botao-cor) 62%, var(--text));
}
.button--secondary:where(:not(.button--sobrio)) .icon,
.button--ghost:where(:not(.button--sobrio)) .icon { color: var(--botao-cor); }
.button[disabled] .icon { color: inherit; }

/* ==========================================================================
   20. Celular — padrão de tela do SGI
   ========================================================================== */

/*
 * O que o proprietário decidiu olhando o Portal no celular
 * (`docs/designs/PADRAO_DE_TELA_SGI.md`, §§ 3 a 6; `TAR-2026-10-09-004`), e
 * com o limite que ele mesmo pôs: "só pra mobile, nada disso vc muda no PC".
 * Tudo aqui vale até 40 rem de largura. No computador as telas ficam como são.
 */

/*
 * Peça que só existe numa das duas larguras: fora da sua, some; na sua, fica como é.
 * As duas regras são a MESMA condição, uma negada: até 40 rem some a peça do
 * computador; acima de 40 rem, a do celular. Assim não há largura — nem as
 * quebradas, entre um pixel e o seguinte — em que as duas apareçam juntas ou
 * em que as duas sumam.
 */
@media not all and (max-width: 40rem) { .so-celular { display: none !important; } }
@media (max-width: 40rem) { .so-computador { display: none !important; } }

/* "Em preparação": etiqueta em vermelho de tom baixo. Não é botão — não se aperta. */
.em-preparacao {
  display: inline-flex;
  min-height: var(--control-h-sm);
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.625rem;
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-xs);
  white-space: nowrap;
}

/*
 * A entrada de uma área, em linhas: ícone na cor da área, nome, resumo curto e,
 * à direita, o botão "Abrir" — ou a etiqueta "Em preparação". A cor é fosca,
 * pela mesma conta dos cartões de módulo.
 */
.areas { display: none; }
.area[data-cor] {
  --cinza-fosco: color-mix(in srgb, var(--text-muted) 60%, var(--text));
  --cor-fosca: color-mix(in srgb, var(--cor) 72%, var(--cinza-fosco));
  --cor-fosca-suave: color-mix(in srgb, var(--cor-fosca) 22%, var(--surface));
}
html[data-theme="escuro"] .area[data-cor] { --cinza-fosco: #4b535c; }

@media (max-width: 40rem) {
  .areas { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-soft); }
  .area { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; }
  .area + .area { border-top: 1px solid var(--border-subtle); }
  .area__icone { display: grid; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: var(--cor-fosca-suave); color: var(--cor-fosca); place-items: center; }
  .area__nome { margin: 0; color: var(--text); font-size: var(--text-base); font-weight: 600; line-height: 1.35; }
  .area__resumo { display: -webkit-box; overflow: hidden; margin: 0.125rem 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .area .button { width: auto; }
  .area--preparacao .area__nome { color: var(--text-muted); }

  /* Os números do alto viram etiquetas pequenas: ícone, número e o que ele conta. Apoio, não destaque. */
  .resumo { gap: 0.375rem; }
  .resumo__item { flex: 0 0 auto; max-width: none; gap: 0.3125rem; padding: 0.1875rem 0.625rem 0.1875rem 0.4375rem; border: 1px solid color-mix(in srgb, var(--cor-fosca) 35%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--cor-fosca) 10%, var(--surface)); box-shadow: none; }
  .resumo__icone { flex: 0 0 1rem; width: 1rem; height: 1rem; background: none; }
  .resumo__icone svg { width: 1rem; height: 1rem; }
  .resumo__item > div { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 0.3125rem; }
  .resumo__numero { color: var(--cor-texto); font-size: var(--text-xs); line-height: var(--leading-xs); }
  .resumo__rotulo { font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; line-height: var(--leading-xs); text-transform: none; }

  /*
   * Cartão de módulo enxuto: ícone, nome, resumo em duas linhas e o botão ao
   * lado. A cor do módulo aparece na faixa grossa à esquerda, no sombreado que
   * desce dela e no botão "Abrir" preenchido — a junção que ele escolheu.
   */
  .catalog-grid { gap: 0.5rem; }
  .catalog-card.module-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.125rem 0.75rem; min-height: 0; padding: 0.75rem 0.875rem; }
  .catalog-card.module-card[data-cor] { border-top: 1px solid color-mix(in srgb, var(--cor-fosca) 40%, var(--border)); border-right-color: color-mix(in srgb, var(--cor-fosca) 40%, var(--border)); border-bottom-color: color-mix(in srgb, var(--cor-fosca) 40%, var(--border)); border-left: 0.375rem solid var(--cor-fosca); background: linear-gradient(100deg, color-mix(in srgb, var(--cor-fosca) 26%, var(--surface)), var(--surface) 64%); }
  .catalog-card.module-card .catalog-card__top { display: contents; }
  .catalog-card.module-card .module-symbol { grid-row: 1 / span 2; grid-column: 1; width: 2.25rem; height: 2.25rem; }
  .catalog-card.module-card h2 { grid-row: 1; grid-column: 2; margin: 0; font-size: var(--text-base); line-height: 1.35; }
  .catalog-card.module-card > p { display: -webkit-box; overflow: hidden; grid-row: 2; grid-column: 2; margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .catalog-card.module-card > .button { grid-row: 1 / span 2; grid-column: 3; width: auto; min-width: 0; margin-top: 0; }
  .catalog-card.module-card[data-cor]:not([data-cor="ouro"]) > .button--modulo { border-color: transparent; background: var(--cor-fosca); color: var(--surface); }
  /* Sem botão, o lugar dele é do estado do módulo; o aviso comprido do pé sai. */
  .catalog-card.module-card > .status:last-child { display: none; }
  .catalog-card.module-card .catalog-card__badges { display: none; }
  .catalog-card.module-card:not(:has(> .button)) .catalog-card__badges { display: inline-flex; grid-row: 1 / span 2; grid-column: 3; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
}

/* ==========================================================================
   21. Excluir em linha — padrão de tela do SGI
   --------------------------------------------------------------------------
   A lixeira de cada item de uma lista (`TAR-2026-10-09-004`; padrão de tela
   do SGI, § 2). É só contorno e traço em vermelho, sem preencher — "ícone
   mais sóbrio da lixeira, apenas contornando o vermelho". O primeiro toque
   troca a lixeira pelo "Excluir", vermelho cheio; o segundo envia. Nada sai
   com um toque só. Vale no celular e no computador.
   ========================================================================== */

.linha-excluir { flex: 0 0 auto; }
.linha-excluir > summary { display: inline-flex; list-style: none; cursor: pointer; }
.linha-excluir > summary::-webkit-details-marker { display: none; }
.linha-excluir[open] > summary { display: none; }
.linha-excluir .button { width: auto; }
.linha-excluir > summary { border-color: color-mix(in srgb, var(--danger) 70%, var(--border)); background: transparent; color: var(--danger); }
.linha-excluir > summary:hover { border-color: var(--danger); background: var(--danger-soft); }
.linha-excluir__confirma { border-color: var(--danger); background: var(--danger); color: var(--surface); font-weight: 600; }
.linha-excluir__confirma:hover { background: var(--danger); filter: brightness(0.92); }

/* ==========================================================================
   22. Aviso com hora marcada
   --------------------------------------------------------------------------
   "Hora do disparo" e a lista do que está programado (`TAR-2026-10-09-004`),
   iguais em "Disparar aviso", das reuniões, e em "Enviar lembrete", das
   tarefas. A lista usa as linhas de sempre; aqui fica só o que é dela.
   ========================================================================== */

.disparo__hora { max-width: 9rem; }
.disparo__dia { max-width: 11rem; }
.programados { display: grid; gap: 0.5rem; margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.programados h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-sm); }
.programados h3 .icon { color: var(--success); }
/* Lembretes em hora escolhida (TAR-2026-10-10-003, item 8): dia, hora e o botão numa linha; em tela estreita, um embaixo do outro. */
.lembretes-escolhidos__novo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.lembretes-escolhidos__novo .field { flex: 0 1 11rem; min-width: 9rem; }
.lembretes-escolhidos__dica { flex: 1 1 100%; }

/* ==========================================================================
   23. Assistentes
   --------------------------------------------------------------------------
   Gestão do SGI → Assistentes e a tela de conectar (`TAR-2026-10-11-003`).
   Quase tudo vem das regras de sempre; aqui fica só o que é destas telas: o
   identificador do cliente numa linha só, a lista do alcance e os dados que
   se copiam uma vez, na admissão.
   ========================================================================== */

.assistente-id code { white-space: nowrap; font-size: var(--text-xs); }
.assistente-quando { display: block; margin-top: 0.25rem; color: var(--text-muted); font-size: var(--text-xs); }
.assistente-alcance { display: grid; gap: 0.25rem; margin: 0; padding-left: 1.1rem; font-size: var(--text-sm); }
.assistente-copiar { display: block; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-hover); overflow-wrap: anywhere; user-select: all; }
.assistente-grupo { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.assistente-grupo > legend { margin-bottom: 0.5rem; padding: 0; }
.assistente-proposta { display: grid; gap: 0.75rem; margin: 0; }
.assistente-proposta > div { display: grid; gap: 0.15rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-subtle); }
.assistente-proposta > div:last-child { padding-bottom: 0; border-bottom: 0; }
.assistente-proposta dt { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.assistente-proposta dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
/* Os blocos da proposta: dados gerais, metas, cada etapa com as tarefas dela (TAR-2026-10-14-003, Entrega 2). */
.assistente-proposta__grupo { margin: 1.25rem 0 0.6rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); font-size: var(--text-base); }
.assistente-proposta__grupo:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.page-heading > .text-link + .eyebrow { display: block; margin-top: 0.75rem; }

/* ==========================================================================
   24. Quadros com a cor do cartão de módulo — padrão de tela do SGI
   ========================================================================== */

/*
 * 24.1 A paleta: os tokens de cor do SGI, num lugar só.
 *
 * Cada chave de `data-cor` dá ao elemento a sua cor (`--cor`) e um véu dela
 * (`--cor-suave`). As que nascem das cores do tema seguem o tema sozinhas; as
 * de valor próprio — rosa, índigo e cobre — têm um valor por tema aqui. A
 * lista das chaves, do lado do código, é `App\Support\ModuleColors::PALETA`.
 * Cor nova entra aqui e lá, e em nenhum outro lugar.
 */
:root {
  --paleta-rosa: #be185d; --paleta-rosa-suave: #fce7f3;
  --paleta-indigo: #4338ca; --paleta-indigo-suave: #e0e7ff;
  --paleta-cobre: #b4541f; --paleta-cobre-suave: #fbe6d8;
}
html[data-theme="escuro"] {
  --paleta-rosa: #f472b6; --paleta-rosa-suave: rgb(219 39 119 / 22%);
  --paleta-indigo: #818cf8; --paleta-indigo-suave: rgb(79 70 229 / 26%);
  --paleta-cobre: #e8905a; --paleta-cobre-suave: rgb(194 87 32 / 24%);
}
[data-cor="info"] { --cor: var(--info); --cor-suave: var(--info-soft); }
[data-cor="success"] { --cor: var(--success); --cor-suave: var(--success-soft); }
[data-cor="turquesa"] { --cor: color-mix(in srgb, var(--success) 60%, var(--info)); --cor-suave: color-mix(in srgb, var(--success) 9%, var(--info-soft)); }
[data-cor="purple"] { --cor: var(--purple); --cor-suave: var(--purple-soft); }
[data-cor="rosa"] { --cor: var(--paleta-rosa); --cor-suave: var(--paleta-rosa-suave); }
[data-cor="indigo"] { --cor: var(--paleta-indigo); --cor-suave: var(--paleta-indigo-suave); }
[data-cor="cobre"] { --cor: var(--paleta-cobre); --cor-suave: var(--paleta-cobre-suave); }
[data-cor="warning"] { --cor: var(--warning); --cor-suave: var(--warning-soft); }
[data-cor="danger"] { --cor: var(--danger); --cor-suave: var(--danger-soft); }
[data-cor="laranja"] { --cor: color-mix(in srgb, var(--warning) 42%, var(--danger)); --cor-suave: color-mix(in srgb, var(--cor) 16%, transparent); }
[data-cor="ouro"] { --cor: var(--gold); --cor-suave: color-mix(in srgb, var(--gold) 16%, transparent); }
[data-cor="accent"] { --cor: var(--color-accent-content); --cor-suave: var(--accent-soft); }
/* A cor de destaque que a conta escolheu: a do Cliente 360º (`DEC-SGI-074`, item 22). */
[data-cor="destaque"] { --cor: var(--color-accent); --cor-suave: color-mix(in srgb, var(--color-accent) 16%, transparent); }
[data-cor="neutro"] { --cor: var(--text-muted); --cor-suave: var(--filled-bg); }

/*
 * 24.2 A receita do cartão de módulo em todo quadro.
 *
 * Todo quadro, cartão e bloco do SGI segue a receita do cartão de módulo
 * (§ 18.3): a cor do próprio quadro, fosca, numa faixa no topo, num sombreado
 * que desce do canto superior esquerdo e some antes do meio, no quadrinho do
 * ícone e no título. Ordem do proprietário de 15/10/2026, olhando as telas do
 * Planejamento e Metas nesse desenho: "agora sim ficou muito bom, pode aplicar
 * esse padrão para todas as telas do sgi. TUDO. TODOS OS MÓDULOS", e "salve o
 * padrão como padrão de aplicação do sistema" (`TAR-2026-10-15-004`;
 * `docs/designs/PADRAO_DE_TELA_SGI.md`, § 9).
 *
 *   - A cor vem do `data-cor` do quadro — as chaves de `App\Support\ModuleColors`
 *     —, ou da cor própria de um número ou de um setor (`--indicador-cor`). Dois
 *     quadros vizinhos não têm a mesma cor. O teste `QuadrosComCorTest` recusa
 *     quadro de tela sem `data-cor`; sem ele, o quadro fica no cinza fosco, e
 *     nunca no fundo chapado da tela.
 *   - Quadro dentro de quadro, sem cor própria, é quadrinho: leva o véu da cor
 *     do texto, sem faixa nem sombreado.
 *   - No celular, os números do alto continuam etiquetas pequenas (§ 20).
 *
 * O `[class]` só dá força à regra: as folhas dos módulos entram depois desta e
 * redesenham borda e fundo de alguns quadros com a mesma força de uma classe.
 */
:is(.panel, .table-card, .base-card, .module-block, .indicador, .historico__bloco, .bloco, .quadro, .faixa, .metric-card, .auth-card, .denied, .health-panel, .modelo-cartao)[class] {
  --cinza-fosco: color-mix(in srgb, var(--text-muted) 60%, var(--text));
  --cor-fosca: color-mix(in srgb, var(--cor, var(--indicador-cor, var(--text-muted))) 72%, var(--cinza-fosco));
  --cor-fosca-suave: color-mix(in srgb, var(--cor-fosca) 22%, var(--surface));
  --cor-texto: color-mix(in srgb, var(--cor-fosca) 80%, var(--text));
  border: 1px solid color-mix(in srgb, var(--cor-fosca) 30%, var(--border));
  border-top: 0.1875rem solid var(--cor-fosca);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor-fosca) var(--mistura, 13%), var(--surface)) 0%, var(--surface) 58%);
  box-shadow: none;
}
html[data-theme="escuro"] :is(.panel, .table-card, .base-card, .module-block, .indicador, .historico__bloco, .bloco, .quadro, .faixa, .metric-card, .auth-card, .denied, .health-panel, .modelo-cartao, .resumo__item)[class] { --cinza-fosco: #4b535c; }
/*
 * O dourado e a cor de destaque são claros de origem: o título deles usa o tom de texto que cada uma já tem — como o
 * cartão de módulo dourado (§ 18.3) e a área Cliente 360º —, para ler bem também nos temas Claro e Creme.
 */
:is(.panel, .table-card, .base-card, .module-block, .indicador, .bloco, .quadro, .faixa, .metric-card, .auth-card, .denied, .health-panel, .modelo-cartao)[data-cor="ouro"],
:is(.panel, .indicador)[class].setor-visual--dourado { --cor-texto: var(--gold-content); }
:is(.panel, .table-card, .base-card, .module-block, .indicador, .bloco, .quadro, .faixa, .metric-card, .auth-card, .denied, .health-panel, .modelo-cartao)[data-cor="destaque"],
.indicador[class].indicador--pessoas { --cor-texto: var(--color-accent-content); }
/* A página de recusa — sem permissão, módulo indisponível — é sempre de atenção: a cor vem da própria classe. */
.denied[class] { --cor: var(--warning); --cor-suave: var(--warning-soft); }
/* O número leva a cor dele mesmo dentro de um quadro de outra cor: a de um número de atraso continua a do atraso. */
.indicador[class] { --cor-fosca: color-mix(in srgb, var(--indicador-cor, var(--cor, var(--text-muted))) 72%, var(--cinza-fosco)); }

/* O quadrinho: quadro dentro de quadro, sem cor própria. */
:is(.panel, .table-card, .base-card, .module-block, .indicador, .historico__bloco, .bloco, .quadro, .faixa, .metric-card, .auth-card, .denied, .health-panel, .modelo-cartao) :is(.panel, .table-card, .base-card, .module-block, .indicador, .metric-card, .growth-card, .ent-quadro):not([data-cor]) {
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

/* Os números do alto (§ 18.4) no computador: a mesma receita, com a faixa no topo. No celular ficam etiquetas (§ 20). */
@media not all and (max-width: 40rem) {
  .resumo__item[data-cor] {
    border: 1px solid color-mix(in srgb, var(--cor-fosca) 30%, var(--border));
    border-top: 0.1875rem solid var(--cor-fosca);
    background: linear-gradient(160deg, color-mix(in srgb, var(--cor-fosca) var(--mistura, 13%), var(--surface)) 0%, var(--surface) 58%);
    box-shadow: none;
  }
  .resumo__item[data-cor] .resumo__rotulo { color: var(--cor-texto); }
}

/* O título na cor fosca do quadro, e o ícone no quadrinho tingido, ao lado dele. */
:is(.panel, .table-card, .base-card, .health-panel)[data-cor] > :is(.panel__head, .base-card__top, .list-heading) :is(h2, h3),
.bloco[data-cor] > .bloco__topo h2,
:is(.auth-card, .denied)[data-cor] h1 { color: var(--cor-texto); }
:is(.panel__head, .base-card__top, .list-heading) :is(h2, h3):has(> .panel__icone) { display: flex; align-items: center; gap: 0.625rem; }
/* O bloco do roteiro da reunião já tinha o quadrinho do ícone: ele toma as cores do padrão. */
.bloco[data-cor] > .bloco__topo > .bloco__icone { background: var(--cor-fosca-suave); box-shadow: none; color: var(--cor-fosca); }
.panel__icone {
  display: grid;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--cor-fosca-suave, var(--surface-hover));
  color: var(--cor-fosca, var(--text-muted));
  place-items: center;
}
/* O ícone dentro do quadrinho segue o quadrinho, mesmo onde a folha de um módulo pinta ou aumenta o ícone do título. */
:is(.panel__head, .base-card__top) :is(h2, h3) > .panel__icone[class] > .icon[class],
.list-heading > .panel__icone[class] > .icon[class] { width: 1.125rem; height: 1.125rem; color: inherit; }
/* Na Saúde, o título muda com a seção, pelo script da tela: o quadrinho do ícone fica ao lado dele, e não dentro. */
.list-heading > .panel__icone + div { margin-right: auto; }
.indicador .indicador__icone { background: var(--cor-fosca-suave); color: var(--cor-fosca); }
.indicador .indicador__titulo { color: var(--cor-texto); }