/*
 * 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, cobre, azul-petróleo e verde-oliva — 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;
  --paleta-petroleo: #0e6170; --paleta-petroleo-suave: #d6eef1;
  --paleta-oliva: #587a1c; --paleta-oliva-suave: #ecf3d8;
}
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%);
  --paleta-petroleo: #5bb5c3; --paleta-petroleo-suave: rgb(14 97 112 / 30%);
  --paleta-oliva: #8fbf3f; --paleta-oliva-suave: rgb(88 122 28 / 30%);
}
[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); }
/* O azul-petróleo: Minha evolução, no Meu Cuidado (`TAR-2026-10-29-003`, T12; especificação § 4.8). */
[data-cor="petroleo"] { --cor: var(--paleta-petroleo); --cor-suave: var(--paleta-petroleo-suave); }
/* O verde-oliva: o Fale com a Mari, no Meu Cuidado (`TAR-2026-10-29-005`, T13; especificação § 4.8). Entre o verde e
   o dourado, mais perto do verde, para não se parecer com nenhum dos dois. */
[data-cor="oliva"] { --cor: var(--paleta-oliva); --cor-suave: var(--paleta-oliva-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); }
/* ==========================================================================
   25. Agenda — fatia A1 (TAR-2026-10-26-003). Só desenho de linha e grade:
   as cores vêm da paleta (data-cor), a receita dos quadros é a da seção 24.2. A hora vem primeiro na linha, legível (exceção aprovada só
   na Agenda, TAR-2026-10-26-002, § 4.11, item 1).
   ========================================================================== */
.agenda-modulo .ag-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem; }
.agenda-modulo .ag-filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.agenda-modulo .ag-filtro .field { margin: 0; min-width: 12rem; }
.agenda-modulo .ag-lista { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.agenda-modulo .ag-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
.agenda-modulo .ag-hora { display: grid; min-width: 4.25rem; font-size: var(--text-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.agenda-modulo .ag-hora small { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.agenda-modulo .ag-linha__texto { display: grid; flex: 1 1 14rem; gap: 0.125rem; min-width: 0; }
.agenda-modulo .ag-linha__cliente { color: var(--text); font-weight: 700; text-decoration: none; }
.agenda-modulo .ag-linha__cliente:hover { text-decoration: underline; }
.agenda-modulo .ag-linha__sub { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.agenda-modulo .ag-linha__fim { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-left: auto; }
.agenda-modulo .ag-etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.agenda-modulo .ag-linha--cancelado .ag-hora, .agenda-modulo .ag-linha--cancelado .ag-linha__texto { opacity: 0.6; text-decoration: line-through; }
.agenda-modulo .ag-linha--livre { border-style: dashed; background: transparent; }
.agenda-modulo .ag-livre { flex: 1 1 14rem; color: var(--text-muted); text-decoration: none; }
.agenda-modulo a.ag-livre:hover { color: var(--text); text-decoration: underline; }
.agenda-modulo .ag-encaixe { font-weight: 700; }
.agenda-modulo .ag-semana__dia { display: grid; gap: 0.5rem; margin-top: 0.875rem; }
.agenda-modulo .ag-semana__dia h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--text-base); }
.agenda-modulo .ag-escolhido { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; }
.agenda-modulo .ag-opcoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.agenda-modulo .ag-opcao { display: inline-grid; padding: 0.625rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-weight: 600; text-decoration: none; }
.agenda-modulo .ag-opcao small { color: var(--text-muted); font-weight: 400; }
.agenda-modulo .ag-opcao:hover, .agenda-modulo .ag-opcao--escolhida { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.agenda-modulo .ag-nova { margin-top: 0.75rem; }
.agenda-modulo .ag-nova > summary { list-style: none; cursor: pointer; }
.agenda-modulo .ag-dia-e-hora { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: 1rem 1.5rem; align-items: start; }
@media (max-width: 48rem) { .agenda-modulo .ag-dia-e-hora { grid-template-columns: 1fr; } }
.agenda-modulo .ag-calendario { display: grid; gap: 0.5rem; }
.agenda-modulo .ag-calendario__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.agenda-modulo .ag-calendario__atalhos { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.agenda-modulo .ag-calendario__grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.agenda-modulo .ag-calendario__cab { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; text-align: center; }
.agenda-modulo .ag-dia { display: grid; place-items: center; min-height: 2.5rem; padding: 0.125rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text); font-variant-numeric: tabular-nums; text-decoration: none; }
.agenda-modulo .ag-dia small { max-width: 100%; overflow: hidden; font-size: 0.625rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.agenda-modulo .ag-dia[data-cor] { border-color: var(--cor); background: var(--cor-suave); color: var(--cor); }
.agenda-modulo .ag-dia--vazio { border: 0; }
.agenda-modulo .ag-dia--escolhido { outline: 2px solid var(--color-accent); outline-offset: 1px; font-weight: 700; }
.agenda-modulo .ag-horarios { display: grid; gap: 1rem; }
.agenda-modulo .ag-horarios__grade { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; border: 0; }
.agenda-modulo .ag-horarios__grade legend { margin-bottom: 0.375rem; }
.agenda-modulo .ag-horario input { position: absolute; opacity: 0; }
.agenda-modulo .ag-horario span { display: inline-grid; min-width: 4rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 600; text-align: center; cursor: pointer; }
.agenda-modulo .ag-horario small { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.agenda-modulo .ag-horario input:checked + span { border-color: var(--color-accent); background: var(--color-accent); color: var(--surface); }
.agenda-modulo .ag-horario input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.agenda-modulo .ag-horario--logo span { border-style: dashed; }
.agenda-modulo .ag-encaixar { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--cor); border-radius: var(--radius-md); background: var(--cor-suave); }
.agenda-modulo .ag-encaixar p { margin: 0; font-weight: 600; }
.agenda-modulo .ag-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.agenda-modulo .ag-ficha dt { color: var(--text-muted); font-size: var(--text-xs); }
.agenda-modulo .ag-ficha dd { margin: 0; font-weight: 600; }
.agenda-modulo .ag-cancelar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-top: 1rem; }
.agenda-modulo .ag-cadastro { display: flex; flex: 1 1 18rem; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.agenda-modulo .ag-cadastro .input { width: auto; flex: 1 1 12rem; }
.agenda-modulo .ag-cadastro .ag-minutos, .agenda-modulo .ag-minutos { flex: 0 0 5.5rem; width: 5.5rem; }
.agenda-modulo .ag-marca { display: inline-flex; align-items: center; gap: 0.375rem; }
.agenda-modulo .ag-excluir > summary { list-style: none; cursor: pointer; }
.agenda-modulo .ag-excluir[open] > summary { display: none; }
.agenda-modulo .ag-horario-habitual { display: grid; gap: 0.5rem; }
.agenda-modulo .ag-horario-habitual__dia { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.agenda-modulo .ag-horario-habitual__dia strong { min-width: 5.5rem; }
.agenda-modulo .ag-faixa { display: inline-flex; align-items: center; gap: 0.375rem; }
.agenda-modulo .ag-faixa .input { width: 7.5rem; }
.agenda-modulo .ag-proximo { display: flex; align-items: center; gap: 1rem; }
.agenda-modulo .ag-proximo__hora { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.agenda-modulo .ag-proximo__texto { display: grid; gap: 0.25rem; }
.agenda-modulo .ag-avisos { margin: 0; padding-left: 1.25rem; }
/* Agenda A2 (TAR-2026-10-26-004): a chave "Repetir agendamento?", as opções da série, a conferência das datas e as três opções. */
.agenda-modulo .ag-repetir { display: grid; gap: 0.625rem; margin: 0.75rem 0 0; padding: 0; border: 0; }
.agenda-modulo .ag-repetir__opcoes { display: none; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.agenda-modulo .ag-repetir:has(input[name="repetir"]:checked) .ag-repetir__opcoes { display: grid; }
.agenda-modulo .ag-opcoes-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.agenda-modulo .ag-opcao-radio { display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; }
.agenda-modulo .ag-visitas { width: 5rem; }
.agenda-modulo .ag-escopo { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.75rem 0; padding: 0; border: 0; }
.agenda-modulo .ag-serie { font-weight: 700; }
.agenda-modulo .ag-serie-linha[data-cor] { border-left: 3px solid var(--cor); }
.agenda-modulo .ag-serie-linha .field { margin: 0; min-width: 12rem; }
/* ===================================================================   26. Clube INTRI&CO — a Gestão do Clube, C1-A (TAR-2026-10-29-009, D12). Só desenho de linha, número e gráfico:
   as cores dos quadros vêm da paleta (data-cor) e a receita é a da seção 24.2. Crédito em verde e débito em
   vermelho (D-C38); o aviso de indicação nova é o do protótipo aprovado (D-C47).
   ========================================================================== */
.clube-modulo .clube-numeros { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.clube-modulo .clube-numeros .chip { display: inline-flex; align-items: center; gap: 0.375rem; }
.clube-modulo .clube-lista { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.clube-modulo .clube-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
.clube-modulo .clube-linha__data { min-width: 3.25rem; font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.clube-modulo .clube-linha__texto { display: grid; flex: 1 1 14rem; gap: 0.125rem; min-width: 0; }
.clube-modulo .clube-linha__nome { color: var(--text); font-weight: 700; text-decoration: none; }
.clube-modulo .clube-linha__nome:hover { text-decoration: underline; }
.clube-modulo .clube-linha__sub { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.clube-modulo .clube-linha__fim { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-left: auto; }
.clube-modulo .clube-linha__fim--larga { flex: 1 0 100%; align-items: flex-end; margin-left: 0; }
.clube-modulo .clube-linha__fim--larga > .form-grid { flex: 1 1 100%; }
.clube-modulo .clube-etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.clube-modulo .clube-valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clube-modulo .clube-valor--mais { color: var(--success); }
.clube-modulo .clube-valor--menos { color: var(--danger); }
.clube-modulo .clube-busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.75rem; }
.clube-modulo .clube-busca .field { flex: 1 1 14rem; min-width: 14rem; margin: 0; }
.clube-modulo .clube-escolhida { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.clube-modulo .clube-saldo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0 0 0.75rem; }
.clube-modulo .clube-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.clube-modulo .clube-indicar { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.clube-modulo .clube-avisos { margin: 0; padding-left: 1.25rem; }
.clube-modulo :is(.clube-desfazer, .clube-excluir) > summary { list-style: none; cursor: pointer; }
.clube-modulo :is(.clube-desfazer, .clube-excluir)[open] > summary { display: none; }
/* Lançar: o campo muda com a bolinha (D-C42) — crédito em reais, ponto é só ponto. */
.clube-modulo .clube-lancar:has(input[name="dar"][value="pontos"]:checked) .clube-lancar__creditos,
.clube-modulo .clube-lancar:not(:has(input[name="dar"][value="pontos"]:checked)) .clube-lancar__pontos { display: none; }
/* Membros do Clube (D-C59): os números, o gráfico escolhido por bolinha e os comparativos. */
.clube-modulo .clube-membros__numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.clube-modulo .clube-membros__numeros div { display: flex; flex-direction: column-reverse; gap: 0.125rem; }
.clube-modulo .clube-membros__numeros dt { color: var(--text-muted); font-size: var(--text-xs); }
.clube-modulo .clube-membros__numeros dd { margin: 0; font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.clube-modulo .clube-grafico { display: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-items: end; gap: 0.25rem; height: 11rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.clube-modulo .clube-membros:not(:has(input[name="periodo"][value="semana"]:checked, input[name="periodo"][value="mes"]:checked)) .clube-grafico[data-por="dia"],
.clube-modulo .clube-membros:has(input[name="periodo"][value="semana"]:checked) .clube-grafico[data-por="semana"],
.clube-modulo .clube-membros:has(input[name="periodo"][value="mes"]:checked) .clube-grafico[data-por="mes"] { display: grid; }
.clube-modulo .clube-grafico__coluna { display: grid; grid-template-rows: auto 1fr auto; align-items: end; height: 100%; text-align: center; }
.clube-modulo .clube-grafico__barra { display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--success) 45%, var(--surface)); }
.clube-modulo .clube-grafico__coluna--atual .clube-grafico__barra { background: var(--success); }
.clube-modulo .clube-grafico__valor { font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.clube-modulo .clube-grafico__rotulo { overflow: hidden; color: var(--text-muted); font-size: 0.625rem; white-space: nowrap; }
.clube-modulo .clube-grafico-vazio { display: none; align-items: center; gap: 0.5rem; margin: 0 0 1rem; color: var(--text-muted); font-size: var(--text-sm); }
.clube-modulo .clube-comparativos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.clube-modulo .clube-comparativos > div { display: grid; gap: 0.125rem; }
.clube-modulo .clube-comparativos small { color: var(--text-muted); }
/* Extrato: a Carteira com o saldo e a medalhinha. */
.clube-modulo .clube-carteira { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; }
.clube-modulo .clube-carteira__saldo { display: grid; gap: 0.125rem; }
.clube-modulo .clube-carteira__saldo strong { font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.clube-modulo .clube-carteira__nivel { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Campanhas: a arte pequena na lista, as duas artes da tela e os tipos que ainda não existem. */
.clube-modulo .clube-miniarte { display: grid; flex: 0 0 2.75rem; width: 2.75rem; height: 3.4375rem; border-radius: var(--radius-sm); object-fit: cover; place-items: center; }
.clube-modulo .clube-miniarte--vazia { border: 1px dashed var(--border); color: var(--text-muted); }
.clube-modulo .clube-campanha { display: grid; gap: 1rem; }
.clube-modulo .clube-artes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.clube-modulo .clube-arte__previa { display: block; max-width: 100%; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.clube-modulo .clube-arte__previa--celular { width: 9rem; aspect-ratio: 4 / 5; object-fit: cover; }
.clube-modulo .clube-arte__previa--computador { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.clube-modulo .clube-em-preparacao { cursor: not-allowed; opacity: 0.75; }
.clube-modulo .clube-campanha__acoes { justify-content: flex-start; }
.clube-modulo .clube-chaves { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem 1rem; margin: 0.75rem 0 0; padding: 0; border: 0; }
.clube-medalha { flex: 0 0 auto; vertical-align: middle; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 18%)); }
/* O aviso grande de indicação nova (D-C47): fica no alto até alguém chamar. */
.clube-alerta { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1rem; padding: 0.9rem 1rem; border: 2px solid var(--danger); border-radius: var(--radius-lg); background: var(--danger-soft); color: var(--text); text-decoration: none; }
.clube-alerta:hover { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }
.clube-alerta__icone { display: grid; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--danger); color: #fff; place-items: center; animation: clube-chama 1.4s ease-in-out infinite; }
.clube-alerta__texto { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; min-width: 0; }
.clube-alerta__texto strong { color: color-mix(in srgb, var(--danger) 85%, var(--text)); font-size: var(--text-lg); }
.clube-alerta__texto span { color: var(--text-muted); font-size: var(--text-xs); }
.clube-alerta__botao { flex: none; padding: 0.5rem 0.9rem; border-radius: var(--radius-md); background: var(--danger); color: #fff; font-size: var(--text-sm); font-weight: 600; }
@keyframes clube-chama { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); } 50% { transform: scale(1.06); box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .clube-alerta__icone { animation: none; } }
@media (max-width: 639px) {
  .clube-alerta { flex-wrap: wrap; }
  .clube-alerta__botao { width: 100%; text-align: center; }
  .clube-modulo .clube-linha__fim { margin-left: 0; }
  .clube-modulo .clube-grafico { height: 9rem; gap: 2px; }
  /* Gráfico de entradas no celular (pedido do proprietário de 30/10/2026, "ta feio isso aí"): número só em cima de
     barra com valor; o dia sem entrada fica só com a linha de base discreta; uma cor só, em tom baixo, e o "hoje"
     só no rótulo; sem entrada nenhuma no período, a frase no lugar do gráfico. O computador fica como está. */
  .clube-modulo .clube-grafico__coluna--zero .clube-grafico__valor { visibility: hidden; }
  .clube-modulo .clube-grafico__coluna--zero .clube-grafico__barra { min-height: 1px; height: 1px !important; border-radius: 0; background: color-mix(in srgb, var(--text-muted) 35%, transparent); }
  .clube-modulo .clube-grafico__coluna--atual .clube-grafico__barra { background: color-mix(in srgb, var(--success) 45%, var(--surface)); }
  .clube-modulo .clube-grafico__coluna--zero.clube-grafico__coluna--atual .clube-grafico__barra { background: color-mix(in srgb, var(--text-muted) 35%, transparent); }
  .clube-modulo .clube-grafico__coluna--atual .clube-grafico__rotulo { color: var(--text); font-weight: 700; }
  .clube-modulo .clube-membros:not(:has(input[name="periodo"][value="semana"]:checked, input[name="periodo"][value="mes"]:checked)) .clube-grafico--sem-entradas[data-por="dia"],
  .clube-modulo .clube-membros:has(input[name="periodo"][value="semana"]:checked) .clube-grafico--sem-entradas[data-por="semana"],
  .clube-modulo .clube-membros:has(input[name="periodo"][value="mes"]:checked) .clube-grafico--sem-entradas[data-por="mes"] { display: none; }
  .clube-modulo .clube-membros:not(:has(input[name="periodo"][value="semana"]:checked, input[name="periodo"][value="mes"]:checked)) .clube-grafico-vazio[data-por="dia"],
  .clube-modulo .clube-membros:has(input[name="periodo"][value="semana"]:checked) .clube-grafico-vazio[data-por="semana"],
  .clube-modulo .clube-membros:has(input[name="periodo"][value="mes"]:checked) .clube-grafico-vazio[data-por="mes"] { display: flex; }
}

/* O link do Meu Cuidado, que aparece uma vez no agendamento aberto (TAR-2026-10-29-002, T3″). */
.agenda-modulo .ag-mc-link { display: grid; gap: 0.5rem; margin-bottom: 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border)); background: color-mix(in srgb, var(--success-soft) 55%, var(--surface)); }
.agenda-modulo .ag-mc-link p { margin: 0; }
.agenda-modulo .ag-mc-link .input { width: 100%; font-size: var(--text-sm); }

/* ==========================================================================
   27. Meu Cuidado — o Painel do Cliente, fatia P1 (TAR-2026-10-29-002, T10).
   A tela da cliente, separada das telas da equipe: tudo vive dentro de `.mc`.
   Referência: o protótipo aceito `docs/designs/prototipos/painel-do-cliente-v1/`,
   Opção A (D6) — cada cartão na sua cor da paleta (§ 24.1), com o ícone e o
   botão na forma do Cliente 360º; o topo escuro nos três temas (D8); o título
   de cada tela na cor de destaque que a cliente escolhe (D11). Só o que a P1
   usa: o banner do Clube, os botões da Tricologia e a conversa entram com as
   fatias deles.
   ========================================================================== */
.mc { min-height: 100dvh; background: var(--bg); color: var(--text); }
.mc a { color: inherit; text-decoration: none; }
.mc-palco { position: relative; width: 100%; max-width: 30rem; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

/* O topo escuro e a marca (D8, e o ajuste de 26/10: a marca grande, com brilho e traço fino). */
.mc { --topo-fill: linear-gradient(180deg, #f3e8c4 0%, #d6c28b 25%, #bda66c 52%, #9a8450 86%, #cdb983 100%); --topo-cor: #bda66c; }
html[data-accent="laranja"] .mc { --topo-fill: linear-gradient(180deg, #fbdec8 0%, #f9c49c 25%, #f6ad75 52%, #c58a5e 86%, #f7b888 100%); --topo-cor: #f6ad75; }
html[data-accent="branco"] .mc { --topo-fill: linear-gradient(180deg, #ffffff 0%, #f8fafb 25%, #f2f4f7 52%, #bdbec1 86%, #e3e5e8 100%); --topo-cor: #f2f4f7; }
html[data-accent="azul"] .mc { --topo-fill: linear-gradient(180deg, #d7e9fd 0%, #b8d7fc 25%, #9cc8fb 52%, #7da0c9 86%, #aad0fc 100%); --topo-cor: #9cc8fb; }
html[data-accent="verde"] .mc { --topo-fill: linear-gradient(180deg, #d7f4e1 0%, #b7ebc9 25%, #9be3b4 52%, #7cb690 86%, #a9e7be 100%); --topo-cor: #9be3b4; }
html[data-accent="rosa"] .mc { --topo-fill: linear-gradient(180deg, #fbdcec 0%, #f9c0dc 25%, #f6a8cf 52%, #c586a6 86%, #f7b4d6 100%); --topo-cor: #f6a8cf; }
.mc-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 1rem 0.9rem;
  background: radial-gradient(90% 160% at 0% 0%, rgb(189 166 108 / 16%) 0%, transparent 60%), linear-gradient(160deg, #1b1f24 0%, #0e1114 75%);
  border-bottom: 1px solid rgb(189 166 108 / 35%);
}
.mc-marca { display: flex; flex-direction: column; line-height: 1.1; }
.mc-marca__nome { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.24em; color: #aab1ba; }
.mc-marca__nome span { color: var(--topo-cor); }
.mc-marca__area {
  margin-top: 0.15rem; font-family: Georgia, "Times New Roman", serif; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em;
  background: var(--topo-fill); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mc-marca__area::after { content: ""; display: block; width: 3rem; height: 2px; margin-top: 0.3rem; border-radius: 2px; background: linear-gradient(90deg, var(--topo-cor), transparent); }
/* A marca INTRI&CO no topo, no padrão do Portal (TAR-2026-10-29-007, T39): o mesmo `.brand__intrico` do cabeçalho e do
   /entrar — Instrument Sans, o peso e o espaçamento dele —, em claro sobre o topo escuro e o "&" na cor de destaque
   dela (D11). O logo da Mari continua o desenho do PDF (T23 e T34). */
.mc-logo { display: block; height: auto; }
.mc-marca .mc-marca__intrico { font-size: 1.625rem; color: #f4f6f8; }
.mc-marca .mc-marca__intrico span { color: var(--topo-cor); }
/* A Tricologia com a identidade da Mari Camargo (T34): o logo dela e, acima, o INTRI&CO pequeno e discreto, que
   leva ao Início — o menu de baixo também mostra o Início o tempo todo. */
.mc-marca--mari { gap: 0.45rem; align-items: flex-start; }
.mc .mc-marca__casa { display: inline-flex; color: #aab1ba; }
.mc-marca .mc-marca__casa .mc-marca__intrico { font-size: var(--text-sm); color: currentColor; }
.mc-marca--mari .mc-logo--mari-camargo { width: 12.5rem; max-width: 100%; color: var(--topo-cor); }
.mc-erro { margin-top: 1rem; }
.mc-erro p { margin: 0.5rem 0 1rem; }
.mc-avatar {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; overflow: hidden; flex: none;
  background: color-mix(in srgb, var(--topo-cor) 18%, transparent); border: 1px solid color-mix(in srgb, var(--topo-cor) 50%, transparent);
  color: var(--topo-cor); font-size: var(--text-sm); font-weight: 600;
}
.mc-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* O conteúdo e os títulos. */
.mc-conteudo { flex: 1; padding: 0.35rem 1rem 6rem; }
.mc-saudacao { margin: 0.75rem 0 0; font-size: 1.75rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.mc-saudacao span, .mc-titulo { color: var(--gold-content); }
.mc-sub { margin: 0.2rem 0 1rem; color: var(--text-muted); font-size: var(--text-sm); }
.mc-titulo { margin: 0.5rem 0 0.15rem; font-size: var(--text-2xl); line-height: 1.2; }
.mc-secao { margin: 1.4rem 0 0.6rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.mc .flash { margin-top: 0.75rem; }

/* A receita do cartão de módulo (§ 24.2) nos quadros da cliente. */
.mc-quadro, .mc-destaque, .mc-cartao {
  --cinza-fosco: color-mix(in srgb, var(--text-muted) 60%, var(--text));
  --cor-fosca: color-mix(in srgb, var(--cor, var(--text-muted)) 72%, var(--cinza-fosco));
  --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);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor-fosca) 13%, var(--surface)) 0%, var(--surface) 58%);
}
html[data-theme="escuro"] :is(.mc-quadro, .mc-destaque, .mc-cartao) { --cinza-fosco: #4b535c; }
/* Opção A no Escuro: cor contida, nada de neon (D6). O dourado do destaque não muda. */
html[data-theme="escuro"] .mc :is(.mc-quadro, .mc-cartao):not([data-cor="ouro"]) {
  --cor-fosca: color-mix(in srgb, var(--cor, var(--text-muted)) 50%, #6b7280);
  --cor-texto: color-mix(in srgb, var(--cor, var(--text-muted)) 45%, #aab1ba);
}
html[data-theme="escuro"] .mc :is(.mc-quadro, .mc-cartao)[data-cor="rosa"] { --cor-fosca: #c57a8f; --cor-texto: #e6a2b4; }
[data-cor="ouro"]:is(.mc-quadro, .mc-destaque, .mc-cartao) { --cor-texto: var(--gold-content); }

/* O quadro grande do celular: o próximo atendimento (PADRAO_DE_TELA_SGI § 3, item 1). */
.mc-destaque { --cor: var(--gold); --cor-texto: var(--gold-content); display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.1rem; }
.mc-destaque__rotulo { display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-xs); font-weight: 600; color: var(--gold-content); }
.mc-destaque__dia { margin-top: 0.3rem; font-size: 1.25rem; font-weight: 600; }
.mc-destaque__linha { color: var(--text-muted); font-size: var(--text-sm); }

/* Os cartões das áreas (D3), com o ícone na forma do Cliente 360º (D6). */
.mc-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.mc-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.9rem; min-height: 7.4rem; transition: transform 0.12s ease, border-color 0.12s ease; }
.mc-cartao:hover { border-color: color-mix(in srgb, var(--cor-fosca) 55%, var(--border)); border-top-color: var(--cor-fosca); }
.mc-cartao:active { transform: scale(0.98); }
.mc-cartao__nome { font-weight: 600; font-size: var(--text-base); line-height: 1.25; color: var(--cor-texto); }
.mc-cartao__resumo { font-size: var(--text-xs); color: var(--text-muted); }
.mc-icone, .mc-botao {
  --cor-metal: color-mix(in srgb, var(--cor, var(--success)) 58%, #fff);
  --metal-fill: linear-gradient(180deg, color-mix(in srgb, var(--cor-metal) 40%, #fff) 0%, color-mix(in srgb, var(--cor-metal) 70%, #fff) 25%, var(--cor-metal) 52%, color-mix(in srgb, var(--cor-metal) 78%, #000) 86%, color-mix(in srgb, var(--cor-metal) 82%, #fff) 100%);
  border: 1px solid rgb(0 0 0 / 10%);
  background: var(--metal-fill);
  box-shadow: inset 0 1px rgb(255 255 255 / 25%);
  color: #171a1f;
}
html[data-theme="escuro"] :is(.mc-icone, .mc-botao) { --cor-metal: color-mix(in srgb, var(--cor, var(--success)) 50%, #6b7280); }
html[data-theme="escuro"] .mc [data-cor="rosa"] :is(.mc-icone, .mc-botao) { --cor-metal: #d98da2; }
.mc-icone { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-lg); margin-bottom: 0.35rem; flex: none; }

/* Botões: nunca cinza (PADRAO_DE_TELA_SGI § 1). O principal é o do Portal (`.button--primary`, o único com o
   brilho da cor de destaque); os outros, na forma do Cliente 360º; Voltar e Sair em laranja. */
.mc-botao { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.5rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.mc-botao:hover { background: linear-gradient(rgb(255 255 255 / 10%), rgb(255 255 255 / 10%)), var(--metal-fill); }
.mc .mc-botao--bloco { width: 100%; justify-content: center; }
.mc-voltar, .mc-sair {
  --cor: color-mix(in srgb, var(--warning) 42%, var(--danger));
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--cor) var(--botao-borda, 45%), var(--border));
  background: transparent; color: color-mix(in srgb, var(--cor) 62%, var(--text)); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
}

/* Quadros internos e linhas (§ 3: blocos irmãos com o mesmo desenho de linha). */
.mc-quadro { margin-top: 0.9rem; padding: 0.9rem 1rem; }
.mc-quadro h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--text-base); color: var(--cor-texto); }
.mc-quadro__texto { margin: 0.3rem 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.mc-quadro--vazio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.6rem 1rem; }
.mc-linhas { list-style: none; margin: 0.55rem 0 0; padding: 0; }
.mc-linhas li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; padding: 0.55rem 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.mc-linhas li:first-child { border-top: 0; }
.mc-linhas__data { font-size: var(--text-xs); font-weight: 600; padding: 0.1rem 0.45rem; border-radius: var(--radius-md); background: var(--cor-suave, var(--filled-bg)); color: var(--cor-texto, var(--text-muted)); }
.mc-linhas__texto { flex: 1; min-width: 10rem; }
.mc-etiqueta { display: inline-flex; align-items: center; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; background: var(--cor-suave, var(--filled-bg)); color: color-mix(in srgb, var(--cor, var(--text-muted)) 80%, var(--text)); }
.mc-saldos { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.mc-saldos li { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.5rem; font-size: var(--text-sm); }
.mc-saldos strong { font-weight: 600; color: color-mix(in srgb, var(--success) 80%, var(--text)); }
.mc-saldos progress { grid-column: 1 / -1; width: 100%; height: 0.4rem; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: var(--success-soft); }
.mc-saldos progress::-webkit-progress-bar { background: var(--success-soft); border-radius: 999px; }
.mc-saldos progress::-webkit-progress-value { background: var(--success); border-radius: 999px; }
.mc-saldos progress::-moz-progress-bar { background: var(--success); border-radius: 999px; }

/* A entrada: e-mail e senha, o código das duas etapas e a página do link (§ 3.4 da TAR). */
.mc-entrada { margin-top: 1.25rem; }
.mc .mc-lembrar { margin-top: 0.9rem; }
.mc-campo { display: grid; gap: 0.35rem; margin-top: 0.9rem; font-size: var(--text-sm); font-weight: 500; }
.mc-campo input { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.8rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-base); }
.mc-campo input[inputmode="numeric"] { letter-spacing: 0.35em; font-size: 1.35rem; text-align: center; }
.mc-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* Perfil: a foto (D10). */
.mc-foto { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 0.7rem; }
.mc-foto__imagem { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 999px; overflow: hidden; flex: none; background: var(--accent-soft); color: var(--gold-content); font-weight: 600; font-size: var(--text-lg); border: 2px solid color-mix(in srgb, var(--gold) 55%, var(--border)); }
.mc-foto__imagem img { width: 100%; height: 100%; object-fit: cover; }
/*
 * Desde a P4e (TAR-2026-10-29-007, T42 e T43; D-C43 e D-C44 do Clube): a foto tem dois botões, cada um com o seu campo
 * escondido, e a frase só embaixo; a cor de destaque, o tema e o tamanho do texto são o radio em cartão de Minhas
 * preferências (§ 14), dentro do quadro.
 */
/* Ao lado da foto, os dois botões um embaixo do outro; sem espaço, descem juntos. */
.mc-foto__botoes { flex: 1 1 11rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.mc-foto__botoes form { display: contents; }
.mc-foto__botoes .mc-botao:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mc-regrinha { margin: 0.75rem 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.mc-regrinha--erro { margin-top: 0.4rem; font-weight: 500; color: color-mix(in srgb, var(--danger) 78%, var(--text)); }
.mc .choice-set { margin: 0.75rem 0 0; }

/* Perfil → Segurança: o interruptor redondo do SGI como botão (o molde da Minha Rotina), a leitura dele ligado, o
   QR do cadastro no app e os códigos de recuperação (T13). */
.mc-chave { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; margin-top: 0.7rem; padding: 0.55rem 0.6rem; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mc-chave:hover { background: var(--surface-hover); }
.mc-chave:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mc :is(.mc-chave, .mc-chave-lida) .toggle__control { flex: none; margin-top: 0.15rem; }
.mc .mc-chave-lida { margin-top: 0.7rem; }
.mc-desligar { display: grid; justify-items: start; gap: 0.4rem; margin-top: 0.4rem; }
.mc-desligar .mc-campo { width: 100%; }
.mc-qr { display: grid; place-items: center; width: fit-content; margin: 0.9rem auto 0.4rem; padding: 0.75rem; border-radius: var(--radius-lg); background: #fff; }
.mc-qr svg { display: block; width: 13rem; height: 13rem; }
.mc-segredo { font-size: var(--text-sm); letter-spacing: 0.08em; word-break: break-all; }
.mc-codigos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0.8rem 0 0; padding: 0; }
.mc-codigos code { display: block; padding: 0.4rem 0.5rem; border-radius: var(--radius-md); background: var(--filled-bg); text-align: center; font-size: var(--text-sm); letter-spacing: 0.06em; }

/* O menu de baixo; no computador, à esquerda. Cada item só aparece com a fatia que o faz funcionar (§ 4.8). */
.mc-menu {
  position: sticky; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 94%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(8px);
}
.mc-menu a { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.35rem 0; border-radius: var(--radius-lg); font-size: var(--text-2xs); font-weight: 500; color: var(--text-muted); }
.mc-menu a[aria-current="page"] { color: var(--gold-content); font-weight: 600; }
/* O WhatsApp do menu (P4e, T41): o verde do SGI em tom contido, sem o verde puro da marca, que no Escuro brilharia. */
.mc-menu .mc-menu__whatsapp { color: color-mix(in srgb, var(--success) 62%, var(--text)); }
@media (min-width: 960px) {
  .mc-palco:not(.mc-palco--entrada) { max-width: none; display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "topo topo" "menu conteudo"; }
  .mc-palco:not(.mc-palco--entrada) .mc-topo { grid-area: topo; padding: 1rem 2.5rem; }
  .mc-marca__area { font-size: 1.875rem; }
  .mc-menu { grid-area: menu; position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 0.25rem; padding: 1.5rem 1rem; border-top: 0; background: transparent; backdrop-filter: none; }
  .mc-menu a { flex-direction: row; gap: 0.75rem; padding: 0.6rem 0.85rem; font-size: var(--text-sm); }
  .mc-menu a[aria-current="page"] { background: var(--accent-soft); }
  .mc-palco:not(.mc-palco--entrada) .mc-conteudo { grid-area: conteudo; padding: 1.75rem 2.5rem 3rem; max-width: 66rem; }
  .mc-saudacao { font-size: 2.25rem; margin-top: 0; }
  .mc-destaque { max-width: 40rem; }
  .mc-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .mc-cartao { min-height: 8.5rem; padding: 1.1rem; }
  .mc-tela { max-width: 46rem; }
}

/*
 * 26.1 Meu Cuidado — fatia P2, a Tricologia completa (TAR-2026-10-29-003, T8, T9 e T12). As cores vêm da paleta
 * (data-cor, § 24.1); a receita dos quadros e dos cartões é a da P1, acima.
 */
.mc-menu__sino { position: relative; }
.mc-menu__ponto { position: absolute; top: 0.3rem; left: calc(50% + 0.45rem); width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
.mc-termo { margin-top: 0.6rem; font-size: var(--text-sm); }
.mc-termo summary { cursor: pointer; font-weight: 600; color: var(--cor-texto, var(--text)); }
.mc-termo p { margin: 0.5rem 0 0; color: var(--text-muted); }
.mc-registros { display: grid; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.mc-registros > li { padding: 0.85rem 0; border-top: 1px solid color-mix(in srgb, var(--cor-fosca, var(--border)) 25%, var(--border)); }
.mc-registros > li:first-child { border-top: 0; padding-top: 0.25rem; }
.mc-registros h3 { margin: 0 0 0.2rem; font-size: var(--text-base); color: var(--cor-texto, var(--text)); }
.mc-texto { margin-top: 0.5rem; font-size: var(--text-sm); line-height: 1.6; }
.mc-baixar { display: grid; justify-items: start; gap: 0.4rem; margin-top: 1.1rem; }
.mc-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.9rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.mc-fotos__item { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.mc-fotos__item .mc-etiqueta { white-space: normal; }
.mc-fotos__item :is(.mc-botao, .mc-sair) { width: 100%; white-space: normal; text-align: center; }
.mc-fotos__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--filled-bg); }
.mc-fotos__selos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; }
@media (min-width: 960px) {
  .mc-menu__ponto { top: 0.55rem; left: 1.75rem; }
}

/* A ficha da Tricologia, do lado da Mari, e a lista das fichas no Painel do Cliente (P2, T7). */
.painel-lista { display: grid; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.painel-lista > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.painel-ficha__novo { display: grid; gap: 0.75rem; justify-items: start; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.painel-ficha__novo .field, .painel-ficha__item .field { width: 100%; max-width: 40rem; }
.painel-ficha__texto { width: 100%; min-height: 7rem; resize: vertical; font: inherit; }
.painel-ficha__item { display: grid; gap: 0.4rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border-subtle); }
.painel-ficha__item h3 { margin: 0; font-size: var(--text-base); }
.painel-ficha__item p { margin: 0; }
.painel-ficha__conteudo { font-size: var(--text-sm); line-height: 1.6; }
.painel-ficha__versao { margin-top: 0.5rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-md); background: var(--filled-bg); font-size: var(--text-sm); }
.painel-ficha__fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.painel-ficha__fotos > li { display: grid; gap: 0.45rem; align-content: start; }
.painel-ficha__fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--filled-bg); }
.painel-ficha__fotos p { margin: 0; }
/* O botão nativo do arquivo nunca fica cinza (PADRAO_DE_TELA_SGI, § 1): contorno e letra na cor do quadro, como no Perfil da P1. */
:is(.painel-ficha__novo, .painel-ficha__item) input[type="file"]::file-selector-button { margin-right: 0.6rem; padding: 0.35rem 0.8rem; border: 1px solid var(--cor-fosca, var(--warning)); border-radius: var(--radius-md); background: transparent; color: var(--cor-texto, var(--text)); font: inherit; font-weight: 600; cursor: pointer; }
.agenda-modulo .ag-mc-termo { display: grid; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border-subtle); }
.agenda-modulo .ag-mc-termo p { margin: 0; }

/*
 * 26.2 Meu Cuidado — fatia P3, a comunicação (TAR-2026-10-29-005, T5, T6 e T13): os Comunicados da Mari. O Fale
 * com a Mari saiu na P4d (TAR-2026-10-29-007, T35), e o estilo da conversa com ele. As cores vêm da paleta (data-cor, § 24.1); a receita dos quadros é a da P1.
 */
/* O aviso fixo (R7.1), hoje no link e na tela de instalar: um véu da cor do texto, sem faixa nem cor própria (§ 9.1, item 5). */
.mc-aviso-fixo { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0.6rem 0 0; padding: 0.55rem 0.7rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 6%, transparent); font-size: var(--text-sm); }
.mc-aviso-fixo svg { flex: none; margin-top: 0.1rem; color: var(--cor-texto, var(--text)); }
.mc-campo textarea { width: 100%; min-height: 6rem; padding: 0.55rem 0.8rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-base); resize: vertical; }
/* O vídeo do comunicado (D14): em pé no celular e deitado no computador, pela quebra do próprio Meu Cuidado. */
.mc-video { margin-top: 0.75rem; }
.mc-video video { display: block; width: 100%; border-radius: var(--radius-lg); background: #000; }
.mc-video--pe video { aspect-ratio: 9 / 16; max-height: 78vh; object-fit: contain; }
.mc-video--deitado video { aspect-ratio: 16 / 9; }
.mc-so-computador { display: none; }
@media (min-width: 960px) {
  .mc-so-celular { display: none; }
  .mc-so-computador { display: block; }
}
/* O YouTube (cenário 20): a capa é do Painel, sem nada do YouTube, até o toque. */
.mc-youtube { margin-top: 0.75rem; }
.mc-youtube__capa { display: grid; place-items: center; align-content: center; gap: 0.4rem; width: 100%; aspect-ratio: 16 / 9; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(160deg, color-mix(in srgb, var(--cor-fosca, var(--text)) 35%, #111) 0%, #111 80%); color: #fff; font: inherit; text-align: center; cursor: pointer; }
.mc-youtube__play { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 999px; background: rgb(255 255 255 / 16%); }
.mc-youtube__titulo { font-weight: 600; }
.mc-youtube__nota { font-size: var(--text-xs); color: rgb(255 255 255 / 75%); }
.mc-youtube iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); background: #000; }
.mc-imagens { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.mc-imagens img { display: block; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--filled-bg); }
.mc-linhas li .mc-botao { margin-left: auto; }

/* O lado da Mari: o aviso do limite do vídeo (P3, T5). */
.painel-comunicado__aviso { margin: 0; color: var(--danger); font-size: var(--text-sm); font-weight: 600; }

/*
 * 26.3 Meu Cuidado — fatia P4, a porta de entrada e o app instalável (TAR-2026-10-29-007, T1 a T6): a página de
 * boas-vindas do link, a tela de instalar com o passo a passo do iPhone e do Android, desenhado em SVG na própria
 * página, e a linha fina do Início. As cores vêm da paleta (data-cor, § 24.1); a receita dos quadros é a da P1.
 */
.mc-boas-vindas { margin-top: 1rem; }
.mc-boas-vindas__lista { display: grid; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.mc-boas-vindas__lista li { display: flex; align-items: flex-start; gap: 0.5rem; }
.mc-boas-vindas__lista svg { flex: none; margin-top: 0.15rem; color: var(--cor-texto); }
.mc .mc-termo-cadastro { margin-top: 1rem; }
.mc-termo-cadastro details { margin-top: 0.45rem; font-size: var(--text-sm); }
.mc-termo-cadastro summary { cursor: pointer; font-weight: 600; color: var(--cor-texto, var(--text)); }
.mc-termo-cadastro details p { margin: 0.45rem 0 0; color: var(--text-muted); line-height: 1.55; }

/* A linha fina do Início: a oferta para quem pulou a instalação. Não é um segundo quadro grande (§ 3, item 1). */
.mc-instalar-linha {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border));
  color: var(--gold-content); font-size: var(--text-sm); font-weight: 600;
}
.mc-instalar-linha span { flex: 1; }

/* O seletor iPhone · Android: só aparece com o trecho; sem ele, os dois passos a passos ficam um embaixo do outro. */
.mc-abas { display: inline-flex; gap: 0.25rem; margin-top: 0.75rem; padding: 0.2rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.mc-abas button { border: 0; background: transparent; padding: 0.4rem 1rem; border-radius: 999px; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--cor-texto); cursor: pointer; }
.mc-abas button[aria-selected="true"] { background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor-fosca) 50%, var(--border)); }
.mc-passos-bloco + .mc-passos-bloco { margin-top: 1rem; }
.mc-passos__titulo { margin: 0.9rem 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--cor-texto); }
.mc-passos { counter-reset: passo; display: grid; gap: 0.85rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.mc-passos li { counter-increment: passo; display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.8rem; align-items: center; font-size: var(--text-sm); line-height: 1.5; }
.mc-passos li p { margin: 0; }
.mc-passos li p::before { content: counter(passo) ". "; font-weight: 700; color: var(--cor-texto); }

/* As figuras: o aparelho no traço do texto, o que se toca em dourado, com um halo. */
.mc-passo__figura { display: block; width: 100%; height: auto; color: color-mix(in srgb, var(--text-muted) 75%, var(--text)); }
.mc-fig__aparelho { fill: none; stroke: currentColor; stroke-width: 2; }
.mc-fig__tela, .mc-fig__barra { fill: color-mix(in srgb, var(--text) 7%, transparent); }
.mc-fig__barra { stroke: color-mix(in srgb, currentColor 40%, transparent); stroke-width: 1; }
.mc-fig__linha { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-fig__app { fill: color-mix(in srgb, var(--text) 14%, transparent); }
.mc-fig__halo { fill: color-mix(in srgb, var(--gold) 26%, transparent); stroke: var(--gold-content); stroke-width: 1.5; }
.mc-fig__marca { stroke: var(--gold-content); }
.mc-fig__icone { fill: #0e1114; stroke: var(--gold-content); stroke-width: 1.5; }

/* Na Agenda, o link gerado (E2): a mensagem pronta para qualquer canal e o QR para quem está na recepção. O QR fica
   sobre o branco do próprio desenho, para a câmera ler também no tema Escuro. */
.agenda-modulo .ag-mc-mensagem { width: 100%; min-height: 5.5rem; resize: vertical; font: inherit; font-size: var(--text-sm); }
.agenda-modulo .ag-mc-qr { margin-top: 0.75rem; }
.agenda-modulo .ag-mc-qr summary { list-style: none; display: inline-flex; cursor: pointer; }
.agenda-modulo .ag-mc-qr summary::-webkit-details-marker { display: none; }
.agenda-modulo .ag-mc-qr p { margin: 0.6rem 0 0; font-size: var(--text-sm); }
.agenda-modulo .ag-mc-qr__imagem { display: inline-block; margin-top: 0.6rem; padding: 0.6rem; border-radius: var(--radius-lg); background: #fff; }
.agenda-modulo .ag-mc-qr__imagem svg { display: block; width: 13rem; height: 13rem; }

/*
 * 26.4 Meu Cuidado — fatia P4b, a ficha de anamnese (TAR-2026-10-29-007, T13, T18, T30 e T32): as opções grandes de
 * toque, o "qual?" que só abre com a resposta que o pede, a barra de andamento, a revisão e a linha fina da
 * Tricologia. Um quadro só por tela, em turquesa, a cor dos formulários (§ 9.2); a receita é a da P1.
 */
.mc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mc-anamnese__parte { margin: 0.4rem 0 0.3rem; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.mc-anamnese__barra { display: block; width: 100%; height: 0.4rem; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: color-mix(in srgb, var(--success) 12%, var(--info-soft)); }
.mc-anamnese__barra::-webkit-progress-bar { background: color-mix(in srgb, var(--success) 12%, var(--info-soft)); border-radius: 999px; }
.mc-anamnese__barra::-webkit-progress-value { background: color-mix(in srgb, var(--success) 60%, var(--info)); border-radius: 999px; }
.mc-anamnese__barra::-moz-progress-bar { background: color-mix(in srgb, var(--success) 60%, var(--info)); border-radius: 999px; }
.mc-pergunta { margin: 0; padding: 0.9rem 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--cor-fosca, var(--border)) 25%, var(--border)); min-width: 0; }
.mc-pergunta:first-of-type { border-top: 0; padding-top: 0.2rem; }
.mc-pergunta legend { float: left; width: 100%; padding: 0; font-size: var(--text-base); font-weight: 600; color: var(--text); }
.mc-pergunta > :not(legend) { clear: both; }
.mc-pergunta .mc-campo { margin-top: 0.5rem; }
.mc-escolhas { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.mc-escolha { position: relative; display: block; cursor: pointer; }
.mc-escolha input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mc-escolha span {
  display: flex; align-items: center; min-height: 3rem; padding: 0.6rem 1rem; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--cor-fosca, var(--border)) 45%, var(--border)); background: var(--surface);
  font-size: var(--text-base); font-weight: 500; color: var(--text);
}
.mc-escolha input:checked + span { border-color: var(--cor-fosca); background: color-mix(in srgb, var(--cor-fosca) 16%, var(--surface)); color: var(--cor-texto); font-weight: 600; box-shadow: inset 0 0 0 1px var(--cor-fosca); }
.mc-escolha input:focus-visible + span { outline: 2px solid var(--cor-fosca); outline-offset: 2px; }
.mc-numero { display: flex; align-items: center; gap: 0.5rem; }
.mc-numero input { max-width: 7rem; }
.mc-numero span { color: var(--text-muted); font-size: var(--text-sm); }
.mc-campo input[type="date"], .mc-campo input[type="tel"], .mc-campo input[type="email"] { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.8rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-base); }
/* O "qual?" só com a resposta que o abre. Sem o seletor :has, ele fica à vista, e o servidor ignora o que não vale. */
@supports selector(:has(*)) {
  .mc-qual { display: none; }
  .mc-pergunta:has([data-mc-abre]:checked) .mc-qual { display: block; }
}
.mc-anamnese__acoes { justify-content: space-between; align-items: center; }
.mc-anamnese__salvo { margin: 0.6rem 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.mc-revisao h3 { margin: 1.1rem 0 0.45rem; font-size: var(--text-sm); color: var(--cor-texto, var(--text)); }
/* Cada pergunta e resposta num bloco (§ 10.11): quadrinho dentro do quadro, só com o véu da cor do texto e a borda
   fina (PADRAO_DE_TELA_SGI § 9.1, item 5). A pergunta pequena e apagada; a resposta, a que se lê. */
.mc-revisao__lista { display: grid; gap: 0.5rem; margin: 0; }
.mc-revisao__item {
  padding: 0.55rem 0.8rem 0.6rem; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--cor-fosca, var(--border)) 26%, var(--border));
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
}
.mc-revisao__item dt { font-size: var(--text-xs); line-height: 1.4; color: var(--text-muted); }
.mc-revisao__item dd { margin: 0.2rem 0 0; font-size: var(--text-base); font-weight: 600; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.mc-revisao__item dd.mc-revisao__vazia { font-size: var(--text-sm); font-weight: 400; font-style: italic; color: var(--text-muted); }
.mc-revisao__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mc-revisao__cabeca h3 { margin-bottom: 0.45rem; }
.mc-revisao__cabeca .mc-alterar { margin-top: 0.65rem; }
/* "Alterar" é editar: contorno e letra em âmbar, sem preencher (PADRAO_DE_TELA_SGI § 1). */
.mc-alterar {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--warning) var(--botao-borda, 45%), var(--border)); background: transparent;
  color: color-mix(in srgb, var(--warning) 62%, var(--text)); font-size: var(--text-sm); font-weight: 500;
}
.mc-alterar:hover { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.mc .mc-declaro { margin-top: 1.1rem; }
.mc-anamnese__declarada { margin: 0.6rem 0 0; }
/* A linha fina da ficha, na Tricologia: não é um oitavo cartão. */
.mc-linha-fina {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cor) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 35%, var(--border));
  color: color-mix(in srgb, var(--cor) 72%, var(--text)); font-size: var(--text-sm); font-weight: 600;
}
.mc-linha-fina span { flex: 1; }
/* O cartão da ficha no Início (§ 10.9): o mesmo cartão de "Seus cuidados", deitado, na largura inteira — o ícone no
   quadrado colorido, o nome e o apoio, e a seta. A cor vem do data-cor da tela; a receita é a da P1. */
.mc .mc-cartao--largo { flex-direction: row; align-items: center; gap: 0.8rem; min-height: 0; margin: 0 0 0.75rem; padding: 0.8rem 0.9rem; }
.mc-cartao--largo .mc-icone { margin-bottom: 0; }
.mc-cartao__texto { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mc-cartao--largo > svg { flex: none; color: var(--cor-texto); }
.mc .mc-cartao--enviada { margin-top: 0.75rem; }
/* "Falar com a INTRI&CO" no Início (TAR-2026-10-29-007, T36): uma ação abaixo dos cartões, com respiro, e não um quadro. */
.mc-falar { margin-top: 1.25rem; }
.mc-falar .mc-quadro__texto { margin: 0.5rem 0 0; }
/* O cartão que é um bloco, e não um link (a oferta de instalar, § 10.13): o link do título cobre o cartão inteiro, e
   o "Agora não" fica por cima dele, em laranja, a cor de desistir (PADRAO_DE_TELA_SGI § 1). */
.mc .mc-cartao--largo:has(.mc-cartao__alvo) { position: relative; cursor: pointer; }
.mc-cartao__alvo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mc-cartao__alvo:focus-visible { outline: none; }
.mc-cartao__alvo:focus-visible::after { outline: 2px solid var(--cor-fosca); outline-offset: 2px; }
.mc-cartao__agora-nao {
  position: relative; z-index: 1; align-self: flex-start; margin-top: 0.3rem; padding: 0.15rem 0.6rem; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--warning) 42%, var(--danger)) 45%, var(--border)); background: transparent;
  color: color-mix(in srgb, color-mix(in srgb, var(--warning) 42%, var(--danger)) 72%, var(--text)); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer;
}
@media (min-width: 960px) { .mc .mc-cartao--largo { max-width: 40rem; min-height: 0; } }
/* Na ficha da Mari, a anamnese: as respostas da cliente e a parte dela. */
.painel-anamnese__lista { display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 0.2rem 1rem; margin: 0 0 0.75rem; font-size: var(--text-sm); }
.painel-anamnese__lista dt { color: var(--text-muted); }
.painel-anamnese__lista dd { margin: 0; }
.painel-anamnese__grupo { margin: 0.75rem 0; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.painel-anamnese__grupo legend { padding: 0 0.35rem; font-weight: 600; }
.painel-anamnese__opcao { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-sm); }
@media (max-width: 640px) { .painel-anamnese__lista { grid-template-columns: 1fr; } }

/*
 * 26.5 Meu Cuidado — fatia P5, o Meu ritual diário (TAR-2026-10-30-001, T3, T4, T5 e T9). Um quadro só, em verde-oliva,
 * a cor do ritual no app inteiro, com os rituais dentro, sem cor própria: o ícone do tema num quadrinho na cor do
 * quadro, o nome e a etiqueta do tema, o "Feito hoje" e o alerta — a chavinha e a hora. O cartão do celular é um
 * cartão largo; quando ele é o botão de pedir a permissão, a moldura é a mesma, e o botão do navegador sai.
 */
.mc-ritual { display: grid; gap: 0.15rem; }
.mc-ritual__cabeca { display: flex; align-items: flex-start; gap: 0.7rem; }
.mc-ritual__icone {
  display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--cor-fosca, var(--cor)) 16%, transparent); color: var(--cor-texto, var(--text));
}
.mc-ritual__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; min-width: 0; }
.mc-ritual__nome h3 { flex-basis: 100%; overflow-wrap: anywhere; }
.mc .mc-ritual__hoje { margin-top: 0.6rem; }
.mc-ritual__alerta { margin-top: 0.75rem; padding: 0.7rem 0.75rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--text) 4%, transparent); }
.mc-ritual__alerta .toggle { margin: 0; }
.mc-ritual__hora { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.mc-ritual__hora .mc-campo { flex: 1 1 9rem; margin-top: 0.6rem; }
.mc-campo input[type="time"] { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.8rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-base); }
.mc-rituais__passo { margin-top: 0.8rem; }
/* "Desfazer" é voltar atrás: contorno e letra em laranja, como o Voltar (PADRAO_DE_TELA_SGI § 1). */
.mc-desfazer {
  --cor: color-mix(in srgb, var(--warning) 42%, var(--danger));
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.5rem; padding: 0.45rem 0.9rem; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--cor) var(--botao-borda, 45%), var(--border)); background: transparent;
  color: color-mix(in srgb, var(--cor) 62%, var(--text)); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer;
}
.mc-desfazer:hover { background: color-mix(in srgb, var(--cor) 12%, transparent); }
/* O cartão do celular que é o próprio botão (T7): sem o desenho do botão do navegador. */
button.mc-cartao { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mc-celular-pronto { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem; color: color-mix(in srgb, var(--success) 80%, var(--text)); font-size: var(--text-sm); font-weight: 600; }
/* Na ficha da Mari, os temas em bolinha, com o ícone de cada um. */
.painel-ritual__temas .choice__text strong { display: inline-flex; align-items: center; gap: 0.35rem; }
.painel-rituais__numeros strong { font-size: var(--text-lg, 1.125rem); }

/* ==========================================================================
   28. Clube INTRI&CO no app (TAR-2026-10-30-002, D7). Só o desenho que é do Clube, tirado do protótipo aprovado
   (clube-intrico-v1): os quadros seguem a receita da seção 24.2 pelo data-cor, e os botões, a seção 19. Crédito em
   verde e débito em vermelho (D-C38); o saldo em verde sobre faixa verde (D-C53); a medalhinha sempre à vista (D-C48).
   ========================================================================== */
.mc-avatar-caixa { position: relative; display: inline-flex; flex: none; }
/* A regra `.mc a` ganha da classe sozinha: sem isto, a inicial do avatar sai escura sobre o topo escuro no tema Claro. */
.mc .mc-avatar { color: var(--topo-cor); }
.mc-avatar__medalha { position: absolute; right: -0.5rem; bottom: -0.5rem; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 45%)); }
.mc-clube__titulo { margin: 0.5rem 0 0; font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.mc-clube__titulo span { color: var(--gold-content); }
.mc-clube-abas { display: flex; gap: 0.4rem; margin: 0.7rem 0 0; overflow-x: auto; scrollbar-width: none; }
.mc-clube-abas::-webkit-scrollbar { display: none; }
.mc-clube-abas a { flex: none; min-height: 2.25rem; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; }
.mc-clube-abas a[aria-current="page"] { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); background: var(--accent-soft); color: var(--gold-content); font-weight: 600; }
.mc .mc-clube-link { color: var(--gold-content); font-size: var(--text-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mc-clube-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mc-clube-largo { width: 100%; justify-content: center; }
.mc-valor-mais { color: color-mix(in srgb, var(--success) 85%, var(--text)); font-weight: 600; white-space: nowrap; }
.mc-valor-menos { color: color-mix(in srgb, var(--danger) 85%, var(--text)); font-weight: 600; white-space: nowrap; }

/* A Carteira. */
.mc-carteira { display: flex; flex-direction: column; align-items: flex-start; padding: 1.1rem 1.15rem; color: var(--text); }
a.mc-carteira { text-decoration: none; }
.mc-carteira__rotulo { font-size: var(--text-base); font-weight: 600; color: var(--gold-content); }
.mc-carteira__valor {
  display: inline-block; margin-top: 0.45rem; padding: 0.2rem 0.75rem; border-radius: var(--radius-lg);
  background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border));
  color: color-mix(in srgb, var(--success) 85%, var(--text)); font-size: 2.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
.mc-carteira__nome { margin-top: 0.3rem; font-size: var(--text-sm); font-weight: 500; color: var(--gold-content); }
.mc-carteira__uso { margin-top: 0.35rem; font-size: var(--text-xs); color: var(--text-muted); }
.mc-carteira__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; margin-top: 0.8rem; }
.mc-carteira__rodape .mc-etiqueta { gap: 0.3rem; }
.mc-nivel { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--text-base); font-weight: 600; color: var(--text); }
.mc-nivel small { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }
.mc-progresso { height: 0.4rem; margin-top: 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.mc-progresso span { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.mc-faixas { display: grid; gap: 0.45rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.mc-faixas li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--text-sm); }
.mc-clube-onde summary { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; list-style: none; cursor: pointer; }
.mc-clube-onde summary::-webkit-details-marker { display: none; }
.mc-clube-onde p { margin: 0.5rem 0 0; font-size: var(--text-xs); color: var(--text-muted); }

/* O extrato. */
.mc-mov { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.mc-mov li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.15rem 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--border-subtle); }
.mc-mov li:first-child { border-top: 0; }
.mc-mov__seta { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; grid-row: span 2; }
.mc-mov--entra .mc-mov__seta { background: var(--success-soft); color: var(--success); }
.mc-mov--sai .mc-mov__seta { background: var(--danger-soft); color: var(--danger); }
.mc-mov__titulo { font-size: var(--text-sm); }
.mc-mov__valor { font-weight: 600; white-space: nowrap; }
.mc-mov--entra .mc-mov__valor { color: color-mix(in srgb, var(--success) 85%, var(--text)); }
.mc-mov--sai .mc-mov__valor { color: color-mix(in srgb, var(--danger) 80%, var(--text)); }
.mc-mov__data { font-size: var(--text-xs); color: var(--text-muted); text-align: right; white-space: nowrap; }
.mc-mov__nota { grid-column: 2; font-size: var(--text-xs); color: var(--text-muted); }

/* A campanha: a arte e um botão só (D-C45). */
.mc-campanha { margin: 1rem 0 0; }
.mc-campanha img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.mc .mc-campanha__botao { width: 100%; justify-content: center; margin-top: 0.6rem; color: var(--color-accent-foreground); }

/* Indique e Ganhe. */
.mc-clube-chave { margin-top: 0.9rem; }
.mc-indicacoes { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.mc-indicacoes li { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0; border-top: 1px solid var(--border-subtle); }
.mc-indicacoes li:first-child { border-top: 0; }
.mc-indicacoes__texto { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: var(--text-sm); }
.mc-indicacoes__texto small { font-size: var(--text-xs); color: var(--text-muted); }
.mc-passo__icone { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 999px; background: var(--cor-suave, var(--filled-bg)); color: color-mix(in srgb, var(--cor, var(--text-muted)) 85%, var(--text)); }
.mc-passos-clube { display: grid; gap: 0.9rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.mc-passos-clube li { display: flex; align-items: center; gap: 0.75rem; font-size: var(--text-sm); }
.mc-passos-clube li > span:last-child { display: flex; flex-direction: column; }
.mc-passos-clube small { font-size: var(--text-xs); color: var(--text-muted); }

/* O aceite, o regulamento e o "Sair do Clube", pequeno e no canto (D-C54). */
.mc-clube-aceite ul { margin: 0.7rem 0 0.8rem; padding-left: 1.15rem; display: grid; gap: 0.4rem; font-size: var(--text-sm); }
.mc-regulamento { font-size: var(--text-sm); line-height: 1.55; }
.mc-regulamento h2 { margin: 1.1rem 0 0.3rem; font-size: var(--text-base); }
.mc-regulamento p { margin: 0.45rem 0 0; }
.mc-regulamento ul { margin: 0.35rem 0 0; padding-left: 1.15rem; display: grid; gap: 0.25rem; }
.mc-clube-sair { margin-top: 1.4rem; padding-top: 0.7rem; border-top: 1px solid var(--border-subtle); }
.mc-clube-sair summary { width: fit-content; margin-left: auto; list-style: none; cursor: pointer; font-size: var(--text-xs); font-weight: 500; color: color-mix(in srgb, var(--warning) 70%, var(--text)); text-decoration: underline; text-underline-offset: 2px; }
.mc-clube-sair summary::-webkit-details-marker { display: none; }
.mc-clube-sair__confirma { margin-top: 0.6rem; padding: 0.75rem; border-radius: var(--radius-lg); background: var(--warning-soft); }
.mc-clube-sair__confirma p { margin: 0; font-size: var(--text-sm); }

/* Os avisos do Clube nas Novidades. */
.mc-avisos-clube { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.mc-avisos-clube li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0; border-top: 1px solid var(--border-subtle); }
.mc-avisos-clube li:first-child { border-top: 0; }
.mc-avisos-clube__icone { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; color: var(--cor-texto); }
.mc-avisos-clube__texto { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: var(--text-sm); }
.mc-avisos-clube__fim { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex: none; }

/* A faixa dourada do Clube no Início do Meu Cuidado: escura nos três temas, como o topo (D8 e D9 do Painel). */
.mc-faixa-clube {
  display: flex; align-items: flex-start; gap: 0.85rem; margin-top: 1.25rem; padding: 1rem; border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background: radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--gold) 18%, transparent) 0%, transparent 55%), linear-gradient(160deg, #1b1f24 0%, #0e1114 70%);
}
.mc .mc-faixa-clube { color: #f4f6f8; }
.mc-faixa-clube__icone { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold); }
.mc-faixa-clube__texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.mc-faixa-clube__nome { font-size: var(--text-lg); font-weight: 600; }
.mc-faixa-clube__nome span { color: var(--gold); }
.mc-faixa-clube__saldo { font-size: var(--text-base); font-weight: 500; }
.mc-faixa-clube__saldo strong { color: var(--gold); }
.mc-faixa-clube__sub { font-size: var(--text-xs); color: #aab1ba; }
.mc-faixa-clube__botao { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.6rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-lg); border: 1px solid var(--gold); color: var(--gold); font-size: var(--text-sm); font-weight: 600; }
@media (min-width: 960px) {
  .mc-clube-abas { flex-wrap: wrap; }
  .mc .mc-campanha__botao { width: auto; }
  .mc-faixa-clube { max-width: 40rem; }
}

/* Clube, a tela Comportamento da Gestão (TAR-2026-10-30-002, D3). O gráfico é um só, sem a escolha de período dos Membros. */
.clube-modulo .clube-grafico--uso { display: grid; }
.clube-modulo .clube-grafico-vazio--uso { display: flex; }
@media (max-width: 767px) {
  .clube-modulo .clube-uso-meses th, .clube-modulo .clube-uso-meses td { padding-inline: 0.3rem; white-space: normal; font-size: var(--text-xs); overflow-wrap: normal; }
  /* O mês a mês do Meu Cuidado tem seis colunas (TAR-2026-10-30-003, § 3): o título encolhe para caber em 390 px. */
  .clube-modulo .clube-uso-meses--seis th, .clube-modulo .clube-uso-meses--seis td { padding-inline: 0.15rem; }
  .clube-modulo .clube-uso-meses--seis thead th { font-size: 0.625rem; letter-spacing: 0; }
}
.clube-modulo .clube-uso-caminho { display: grid; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.clube-modulo .clube-uso-caminho li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.clube-modulo .clube-uso-caminho li:first-child { border-top: 0; }
.clube-modulo .clube-uso-caminho time { min-width: 7.5rem; color: var(--text-muted); font-size: var(--text-xs); }