/* --------------------------------------------------- tela Plataforma
     Só existe com PLATAFORMA=1. Reaproveita .bloco, .cta-banner, .aviso e
     .ent-tab; o que há aqui é o selo de situação da licença e a grade de
     preços — o resto já era padrão. */
  .plt-selo { display: inline-flex; align-items: center; gap: 6px; height: 24px;
              padding: 0 9px; border-radius: 99px; white-space: nowrap;
              font: 700 11.5px/1 var(--brand); }
  .plt-selo.ativa       { background: var(--good-bg); color: var(--good); }
  .plt-selo.vencendo    { background: var(--warn-bg); color: var(--warn); }
  .plt-selo.vencida     { background: var(--bad-bg);  color: var(--bad); }
  /* `leitura` — item 379: vencida ha mais que a carencia de 3 dias, escrita travada
     ate o registrar renovacao. Mesmo vermelho da vencida: e a MESMA divida, mais velha
     — um terceiro tom diria que sao problemas diferentes. */
  .plt-selo.leitura     { background: var(--bad-bg);  color: var(--bad); }
  /* ---------------------------------------------- item 82: arquivos que saíram
     Bloco de LEITURA dentro de Configurações. Anatomia do print aprovado: faixa navy com ícone
     circular, filtros em chip, tabela e um pé com a explicação à esquerda e o CSV à direita.

     ZERO LARANJA, de propósito: o laranja é a ação primária da tela, e aqui não há ação primária
     nenhuma — é um registro para ler. Botão laranja num bloco de auditoria convidaria a clicar
     justamente no que leva o dado embora. O CSV usa o `btn-p` neutro, como o "Verificar
     serviços" do bloco de cima. */
  .sai-banner { display: flex; align-items: center; gap: 14px; background: var(--navy);
                color: #fff; border-radius: 12px; padding: 16px 20px; margin-top: var(--s3); }
  .sai-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
             background: rgba(255,255,255,.10); display: grid; place-items: center; }
  .sai-tit { flex: 1 1 auto; min-width: 0; }
  .sai-tit h3 { margin: 0; font-family: var(--brand); font-weight: 700; font-size: 16px;
                color: #fff; letter-spacing: .1px; }
  .sai-tit p { margin: 3px 0 0; font-size: 12px; color: rgba(255,255,255,.72); }
  /* A conta alinha à direita por `text-align`, e a largura é fixa. `margin-left:auto` alinharia
     pela largura do próprio texto, e aí "1.284" e "37" ficariam em colunas diferentes — foi o
     defeito de 2,0 px que ele pegou na lixeira, em 25/08. */
  .sai-conta { flex: 0 0 auto; min-width: 132px; text-align: right; }
  .sai-conta b { display: block; font-family: var(--brand); font-weight: 800; font-size: 21px;
                 line-height: 1.1; font-variant-numeric: tabular-nums; }
  .sai-conta span { font-size: 11px; color: rgba(255,255,255,.66); }

  .sai-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
  .sai-filtros button.ativo { background: var(--navy); color: #fff; border-color: var(--navy); }

  .sai-tabela { margin-top: var(--s3); border: 1px solid var(--border); border-radius: 12px;
                overflow: hidden; background: var(--surface); }
  .sai-tabela.carregando { opacity: .55; pointer-events: none; }
  /* `table-layout: fixed` + largura em cada coluna. Sem isso o nome do arquivo — que é o campo
     mais longo — empurra as vizinhas e o cabeçalho sai de registro com o corpo. Foi exatamente o
     defeito que ele pegou na tabela de links da aba Entregar. */
  .sai-grade { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
  .sai-grade th { text-align: left; font-size: 10.5px; letter-spacing: .5px;
                  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
                  padding: 10px 14px; border-bottom: 1px solid var(--border);
                  background: var(--surface-2); }
  .sai-grade td { padding: 9px 14px; border-bottom: 1px solid var(--hair);
                  vertical-align: middle; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
  .sai-grade tr:last-child td { border-bottom: 0; }
  .sai-grade th.num, .sai-grade td.num { text-align: right; }
  /* 120 px, e os 104 que estavam aqui CORTAVAM — defeito de 28/08 que só apareceu em
     10/08/2026, medindo a tabela nova. Só "hoje 22:54" cabia (74,8 px de 76 úteis);
     "ontem 22:54" precisa de 90 e "18/08 09:15" de 85,2. Ou seja: **a coluna cabia no caso de
     hoje e cortava em todos os outros**, que é o pior jeito de errar largura — quem escreve o
     código olha a tela no dia em que fez e vê tudo certo.
     90 + 28 de padding = 118; 120 deixa 2 px de folga. A regra é da `.sai-grade`, então vale
     para as DUAS tabelas: a de Configurações e a da Plataforma. */
  .sai-grade th:nth-child(1), .sai-grade td:nth-child(1) { width: 120px; }
  /* 138 px, e o número é MEDIDO, não escolhido. Renderizei os nove rótulos e o maior que aparece
     na tabela é "Lista de assinantes", com 110,4 px; a célula tem 14 px de padding de cada lado,
     então 110,4 + 28 = 138,4. Com os 132 que eu tinha posto primeiro, "Backup do banco" já saía
     cortado — foi o que a medição no DOM acusou. ("Histórico de downloads" tem 135,8 px e não
     entra na conta: ele nunca aparece nesta coluna, porque o download DESTA lista não se lista.) */
  .sai-grade th:nth-child(2), .sai-grade td:nth-child(2) { width: 138px; }
  .sai-grade th:nth-child(4), .sai-grade td:nth-child(4) { width: 172px; }
  .sai-grade th:nth-child(5), .sai-grade td:nth-child(5) { width: 92px; }
  .sai-grade th:nth-child(6), .sai-grade td:nth-child(6) { width: 148px; }
  /* A SETIMA COLUNA, so na Plataforma. Item 162.
     As larguras acima sao por `nth-child`, entao a coluna nova entra sem mexer em nenhuma
     delas — e por isso ela ficou por ULTIMO e nao em primeiro, que seria o lugar natural de
     um qualificador: pos em primeiro, "Assinante" herdaria os 104 px pensados para "Quando" e
     empurraria as outras seis de lugar. Quem procura por assinante usa o seletor do filtro,
     que responde no servidor; a coluna e a confirmacao do que a busca trouxe. */
  .sai-grade.com-assinante th:nth-child(7),
  .sai-grade.com-assinante td:nth-child(7) { width: 160px; }
  /* O DIARIO tem QUATRO colunas, e a quarta e "Quem" — que na tabela de seis e a sexta.
     Sem esta linha ela herdaria os 172 px pensados para "Projeto", e o e-mail de quem
     entrou sairia cortado numa coluna larga demais para o texto que ela guarda. */
  .sai-grade.diario th:nth-child(4),
  .sai-grade.diario td:nth-child(4) { width: 172px; }
  .sai-assin { color: var(--ink-2); font-weight: 600; }
  /* O seletor de assinante mora na MESMA barra dos chips de tipo, e por isso acompanha a
     altura deles — 32 px, que e a do `btn-p`. Um `select` com a altura padrao de 38 deixaria
     a barra irregular, e barra irregular e das coisas que ele pega a olho. */
  .sai-sel { height: 32px; padding: 0 26px 0 10px; font-size: 12.5px; font-weight: 600;
             border-radius: 9px; margin-right: var(--s3);
             /* `width: auto` e `flex: none`, e NENHUM DOS DOIS E OPCIONAL. A regra generica
                de campo deste arquivo da `width: 100%` a todo `select`, e numa barra
                `flex-wrap` isso o joga sozinho numa linha de 1.358 px — foi o que apareceu no
                primeiro print, um seletor atravessando a tela acima dos chips. */
             width: auto; flex: none; min-width: 190px;
             background-position: right 9px center; }
  /* O SELO DA CASA. Item 166: a linha do proprio proprietario nao tem vencimento nem
     cobranca, entao ela nao usa nenhuma das cinco cores de situacao — usa a neutra, que diz
     "isto aqui e outra coisa" sem competir com os estados que pedem acao. */
  .plt-selo.casa { background: var(--surface-2); color: var(--ink-2);
                  border: 1px solid var(--border); }
  .sai-quando { color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .sai-arq { color: var(--ink); }
  .sai-proj, .sai-quem { color: var(--ink-2); }
  .sai-tam { font-variant-numeric: tabular-nums; color: var(--ink-2); }

  .sai-tipo { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px;
              font-weight: 600; background: var(--surface-2); color: var(--ink-2);
              white-space: nowrap; }
  /* O vermelho é só das DUAS que levam dado sensível — ZIP de fotos e backup do banco. Pintar
     tudo faria o vermelho não distinguir nada, e a pessoa aprenderia a ignorá-lo. */
  .sai-tipo.sens { background: var(--bad-bg); color: var(--bad); }

  .sai-pe { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s3); }
  .sai-pe p { margin: 0; flex: 1 1 auto; font-size: 11.5px; color: var(--ink-3); }
  .sai-pe button { flex: 0 0 auto; }

  .plt-selo.sem_licenca { background: var(--bg);      color: var(--ink-3); }
  /* `sem_conta` usa o vermelho do `vencida`, e não o cinza do `sem_licenca`, de propósito:
     "sem licença" é um estado comercial normal (cadastrou, ainda não emitiu) e "sem conta" é
     cadastro incompleto — pede providência de quem administra, não do cliente. Item 28. */
  .plt-selo.sem_conta   { background: var(--bad-bg);  color: var(--bad); }
  .plt-nome { font-family: var(--brand); font-weight: 600; font-size: 13.5px; }
  .plt-nome small { display: block; font-family: var(--ui); font-weight: 400;
                    font-size: 11.5px; color: var(--ink-3); }
  .plt-inativo .plt-nome, .plt-inativo td { opacity: .55; }
  /* BOTAO PRINCIPAL DESLIGADO NAO USA A COR DE ACAO PRINCIPAL. Regra global, e ela nasceu
     de um defeito que ele viu no print da Plataforma: "Emitir licenca" estava DESLIGADO e
     pintado de `rgb(255,101,1)` — laranja cheio, ao lado de outro botao laranja que
     funcionava. Medido: 75x32 px, `disabled`, cor de acao primaria.

     A skill do painel diz que o laranja e gasto num lugar so, a acao primaria da tela. Um
     desligado laranja gasta o laranja em algo que nao faz nada, e ainda faz o olho hesitar
     entre dois.

     E global de proposito: nenhuma tela quer um principal desligado com cara de ligado. As
     telas que hoje resolvem isso com `opacity` propria continuam funcionando — esta regra
     so tira a cor, e opacidade por cima nao briga. */
  button.principal:disabled, .principal:disabled {
    background: var(--surface-2); color: var(--ink-3);
    border: 1px solid var(--border); box-shadow: none; cursor: not-allowed;
  }

  /* A COLUNA DE ACOES DA PLATAFORMA NAO QUEBRA. Medido: ela tem 245 px e os quatro botoes
     pedem 311 — entao "Emitir licenca" e "Criar acesso" partiam em duas linhas cada. A
     celula passa a nao encolher, e o texto de cada botao fica numa linha so. */
  /* Cinco ícones numa linha (06/11/2026): os botões com texto quebravam em duas linhas e, numa só,
     passavam por cima de "Assinatura até" e "Estado". Largura fixa: nada empurra a coluna. */
  .plt-acoes { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; margin-left: auto; }
  .plt-filtros-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 var(--s3); }
  .plt-filtros-linha .plt-filtros { margin: 0; align-items: center; }
  .plt-filtros-linha .plt-origens { padding-left: 16px; border-left: 1px solid var(--border); }
  .plt-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 32px; height: 32px; padding: 0; border-radius: 8px; }
  .plt-ic svg { width: 16px; height: 16px; }
  .plt-ic.vago { visibility: hidden; }
  /* Para cima: a tabela corta o que passa da borda de baixo, e a última linha perderia o nome. */
  .plt-ic[data-dica]::after { content: attr(data-dica); position: absolute; bottom: calc(100% + 5px); right: 0; z-index: 3;
                              padding: 3px 8px; border-radius: 6px; background: var(--navy); color: #fff;
                              font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none;
                              opacity: 0; transition: opacity var(--t); }
  .plt-ic[data-dica]:hover::after, .plt-ic[data-dica]:focus-visible::after { opacity: 1; }
  /* O `width: 1%` que eu tinha posto aqui DESALINHOU o cabecalho do corpo — a coluna
     Acesso esticou e o rotulo dela foi parar em cima dos botoes, com os numeros sumindo da
     vista. E era extra: quem consertava a quebra dos botoes e o `nowrap` acima. Tirei.
     A licao e a de sempre: resolvi um defeito e acrescentei outro na mesma linha, e so a
     foto em escala 1:1 mostrou — a reduzida escondeu. */
  .plt-tab td:last-child { white-space: normal; }
  /* AS CONTAS ELEGIVEIS PARA EXCLUSAO, item 380: acima da tabela, em vermelho claro, uma
     linha por conta. Aparecem so do dia 90 em diante, e o botao e a unica porta. */
  .plt-eleicao-bloco { margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
                       border: 1px solid #f3b4ab; border-radius: 10px; background: #fff5f3; }
  .plt-eleicao-tit { margin: 0 0 var(--s2); font-weight: 700; color: #9f1d10; }
  .plt-eleicao-tit span { font-weight: 400; color: #6b7280; margin-left: 6px; }
  .plt-eleicao { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0;
                 border-top: 1px solid #f6d3cd; }
  .plt-eleicao-quem { flex: 1; min-width: 0; }
  .plt-eleicao-quem small { display: block; color: #6b7280; }
  .plt-eleicao-gb { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
  .plt-eleicao-apagar { white-space: nowrap; color: #b42318; border-color: #f3b4ab; }
  /* `.plt-nome small` e classe MAIS elemento e vence `.plt-acesso`, que e so classe — a
     cor nao pegava e o texto saia cinza como o e-mail. E a armadilha de especificidade que
     a skill do painel registra para hover de menu, aqui em outra roupa: ao pintar algo que
     ja tem regra generica, conte a especificidade contra ela. */
  .plt-nome small.plt-acesso { color: var(--good); font-weight: 600; }
  .plt-nome small.plt-sem-acesso { color: var(--warn); font-weight: 600; }
  /* Endereço da instalação: fonte de largura fixa porque é endereço, e endereço
     se confere caractere a caractere. */
  .plt-end { font: 12.5px ui-monospace, Consolas, monospace; color: var(--ink-2);
             max-width: 230px; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; display: block; }
  .plt-planos { display: grid; grid-template-columns: 1.15fr 140px 1.5fr 150px 170px;
                gap: var(--s3) var(--s4); align-items: end; }
  .plt-planos .plt-cabg { font: 700 10.5px/1 var(--brand); text-transform: uppercase;
                          letter-spacing: .04em; color: var(--ink-3); padding-bottom: 2px; }
  .plt-planos .plt-pl { font-family: var(--brand); font-weight: 600; font-size: 13.5px;
                        padding-bottom: 9px; }
  .plt-planos .plt-pl small { display: block; font-family: var(--ui); font-weight: 400;
                              font-size: 11.5px; color: var(--ink-3); }
  .plt-risca { grid-column: 1 / -1; height: 1px; background: var(--hair); margin: 2px 0; }
  /* A ORIGEM DO ASSINANTE (02/10/2026): a segunda linha de chips e a etiqueta da linha. */
  .plt-origens { margin-top: -4px; align-items: center; }
  .plt-origens .plt-rot { font: 700 10.5px var(--brand); letter-spacing: .04em; text-transform: uppercase;
                          color: var(--ink-3); margin-right: 4px; }
  .plt-origens .cta-chip.sel { background: var(--orange); border-color: var(--orange); color: #fff; }
  .plt-nome .plt-org { display: table; margin: 3px 0 2px; font: 700 9.5px var(--brand); letter-spacing: .04em;
                       text-transform: uppercase; padding: 2px 7px; border-radius: 9px;
                       background: #e8eefc; color: #2e4f9b; }
  .plt-nome .plt-org.vazia { background: var(--surface-2); color: var(--ink-3); }
  /* A FICHA DO ASSINANTE (02/10/2026). Prefixo fch- de propósito: nome genérico em folha
     compartilhada já colidiu aqui (o .palco da cortina). */
  .plt-abre-ficha { color: inherit; text-decoration: none; }
  .plt-abre-ficha:hover { color: var(--orange); text-decoration: underline; }
  .fch-volta { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
               padding: 0; margin: 0 0 var(--s3); font: 600 13px var(--brand); color: var(--ink-2);
               cursor: pointer; height: auto; }
  .fch-volta:hover { color: var(--orange); }
  .fch-ban { background: var(--navy); color: #fff; border-radius: 14px; padding: 20px 24px;
             display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  .fch-av { width: 54px; height: 54px; border-radius: 50%; background: #22314d; flex: none;
            display: grid; place-items: center; font: 700 19px var(--brand); color: #fff;
            border: 2px solid var(--orange); }
  .fch-quem { min-width: 0; }
  .fch-ban h1 { font: 700 20px var(--brand); margin: 0 0 4px; color: #fff; }
  .fch-sub { font-size: 13px; color: #b9c3d4; overflow-wrap: anywhere; }
  .fch-sub a { color: #6ee7a5; font-weight: 600; text-decoration: none; }
  .fch-chips { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
  .fch-esp { flex: 1; }
  .fch-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .fch-acoes button { height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer;
                      border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff;
                      font: 600 12.5px var(--ui); }
  .fch-acoes button:hover { border-color: rgba(255,255,255,.5); }
  .fch-acoes button.lar { background: var(--orange); border-color: var(--orange); }
  .fch-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
               gap: var(--s4); margin-top: var(--s4); }
  .fch-grade > section.bloco { margin: 0; }
  .fch-lin { display: flex; justify-content: space-between; gap: 8px; font-size: 13px;
             padding: 6px 0; border-top: 1px solid var(--hair); }
  .fch-grade h2 + .fch-lin { border-top: 0; }
  .fch-lin span { color: var(--ink-3); }
  .fch-lin b { font-weight: 600; text-align: right; }
  .fch-bar { height: 6px; background: var(--hair); border-radius: 3px; margin: 2px 0 8px; }
  .fch-bar i { display: block; height: 100%; border-radius: 3px; background: var(--good); }
  .fch-bar i.quase { background: var(--warn); }
  .fch-bar i.cheio { background: var(--bad); }
  .fch-nota { width: 100%; min-height: 104px; border: 1px solid var(--border); border-radius: 8px;
              padding: 8px 10px; font: 13px var(--ui); resize: vertical; box-sizing: border-box;
              background: var(--surface-2); }
  .fch-nota-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px;
                 margin-top: 6px; font-size: 11.5px; }
  .fch-tl { margin-top: var(--s4); }
  .ent-tab.fch-t { margin-top: var(--s3); }
  .ent-tab.fch-t td { vertical-align: top; }
  .ent-tab.fch-t td:nth-child(1) { width: 150px; white-space: nowrap; }
  .ent-tab.fch-t td:nth-child(2) { width: 120px; text-align: left; }
  .ent-tab.fch-t td:nth-child(3) { width: auto; overflow-wrap: anywhere; }
  .ent-tab.fch-t small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
  .fch-fam { display: inline-block; font: 700 10px var(--brand); letter-spacing: .04em;
             text-transform: uppercase; padding: 3px 8px; border-radius: 10px;
             background: var(--surface-2); color: var(--ink-2); }
  .fch-fam.pagamento { background: var(--good-bg); color: var(--good); }
  .fch-fam.suporte { background: #e8eefc; color: #2e4f9b; }
  .fch-fam.plano { background: var(--warn-bg); color: var(--warn); }
  .fch-mais { margin-top: var(--s4); display: flex; gap: var(--s3); align-items: center;
              flex-wrap: wrap; font-size: 12.5px; }
  /* A aba Pagamentos (item 385): o cartão da ligação com a Greenn em cima, a lista embaixo. */
  .pgt-ligacao { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4);
                 padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: 10px;
                 background: var(--surface-2); }
  .pgt-ligacao .aviso, .pgt-ligacao p.vazio { margin: 0; }
  .pgt-cab { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
  .pgt-esp { flex: 1; }
  .pgt-end { font: 12px ui-monospace, Consolas, monospace; color: var(--ink-2); min-width: 0;
             max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pgt-novo { display: flex; flex-direction: column; gap: 6px; padding: var(--s3);
              border: 1px solid var(--orange); border-radius: 8px; background: var(--surface); }
  .pgt-novo label { margin: 6px 0 0; }
  .pgt-linha { display: flex; gap: var(--s3); align-items: center; }
  .pgt-linha code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 12.5px ui-monospace, Consolas, monospace;
                    background: var(--surface-2); padding: 6px 8px; border-radius: 6px; }
  .pgt-falta { margin: 0; font-size: 13px; color: var(--warn); }
  .pgt-sub { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
  .pgt-tab td { vertical-align: top; }
  /* A .ent-tab é de largura FIXA, com as colunas 2 a 4 medidas para a Equipe (92, 104 e 116 px)
     e o resto para a primeira: aqui a data ficava com metade da tabela e o e-mail invadia a
     situação. Cada coluna desta lista diz a própria largura. */
  .ent-tab.pgt-tab th:nth-child(1), .ent-tab.pgt-tab td:nth-child(1) { width: 140px; }
  .ent-tab.pgt-tab th:nth-child(2), .ent-tab.pgt-tab td:nth-child(2) { width: 24%; }
  .ent-tab.pgt-tab th:nth-child(3), .ent-tab.pgt-tab td:nth-child(3) { width: 130px; }
  .ent-tab.pgt-tab th:nth-child(4), .ent-tab.pgt-tab td:nth-child(4) { width: 170px; text-align: left; }
  .ent-tab.pgt-tab td { overflow-wrap: anywhere; }
  .plt-nao-vende { padding-bottom: 9px; }
  /* A regra .aviso.faixa-solta morava aqui e saiu no item 379: o unico uso era a
     faixa da chave privada da licenca de instalacao, que morreu — e a guarda de
     classes fantasmas acusou o CSS orfao. Se uma faixa solta voltar a existir,
     lembrar que .aviso nao tem margem propria (medido: 0,0px contra os 16px da
     tela) — ela nasceu para viver DENTRO de um bloco. */
  @media (max-width: 900px) { .plt-planos { grid-template-columns: 1fr; }
                              .plt-risca { margin: 8px 0; }
  }