/* Chapar :: Área do Cliente --------------------------------------------------------------------------- O vocabulário visual (fonte, raios, cards de cabeçalho navy, pílulas, ausência de destaque de foco) vem do Chapar :: Gerenciador de e-mails. A paleta, porém, é escura sempre — e não conforme o tema do sistema operacional, como no projeto irmão. O app roda embutido num iframe no site do usuário, que tem fundo preto sólido: qualquer variação clara viraria uma moldura acesa em volta do conteúdo. Por isso o fundo é preto puro e as cores abaixo são as únicas do projeto. --------------------------------------------------------------------------- */ :root { --bg: #000000; --surface: #0f1116; --border: #23262f; --border-input: #33374a; --text: #eef0f4; --text-muted: #9aa1ae; --navy: #16336f; --navy-2: #1b5fd0; --brand: #4fa0f5; --brand-2: #5fb0ff; --brand-soft: rgba(95, 176, 255, 0.18); --accent: #3cc9c9; --accent-soft: #123333; --error: #f87171; --error-2: #fb8f8f; --error-soft: #3a1c1e; --warning: #fbbf6a; --warning-soft: #3a2c14; --dropdown-hover-bg: #1c2740; --dropdown-hover-text: #6fa4f2; /* Texto sobre fundo sólido --brand/--accent. Nas duas marcas atuais o fundo de marca é escuro (azul, cinza-médio), então branco funciona — existe como variável à parte porque a grmjr também tem --brand branco (botão primário), onde o texto precisa virar escuro. */ --brand-contraste: #ffffff; --accent-contraste: #ffffff; --radius: 16px; --radius-sm: 10px; font-family: "Helvetica Neue", Helvetica, -apple-system, "Segoe UI", Arial, sans-serif; } /* grmjr.com: identidade em preto e branco — as mesmas variáveis de marca da Ancestral Cidadão (azul/teal), só que em tons de cinza. Cores de estado (erro, alerta) continuam iguais nas duas marcas: são semânticas, não de identidade visual. */ .marca-grmjr { --navy: #2a2a2a; --navy-2: #4d4d4d; --brand: #ffffff; --brand-2: #d5d5d5; --brand-soft: rgba(255, 255, 255, 0.14); --accent: #b0b0b0; --accent-soft: #262626; --dropdown-hover-bg: #262626; --dropdown-hover-text: #e5e5e5; /* --brand e --accent viraram claros nesta marca — o texto por cima deles precisa virar escuro para continuar legível. */ --brand-contraste: #0f1116; --accent-contraste: #0f1116; } * { box-sizing: border-box; } html { /* Rolagem sempre ligada, em toda tela, mesmo nas curtas. É isso que impede o solavanco lateral: sem `scroll` fixo, a barra nasce no meio do caminho — ao trocar de aba, ao abrir um contrato mais longo — e, ao aparecer, come a largura da página e empurra alguns pixels para o lado tudo que está centralizado. Com o valor fixo, toda página se comporta igual. */ overflow-y: scroll; scrollbar-gutter: stable; /* ...e a barra em si fica invisível. O comportamento não muda: a página continua rolando com roda, toque, teclado e barra de espaço — some apenas o traço cinza na lateral, que num app preto ficava marcando a moldura. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge legado */ /* A interface é escura sempre. Declarar isso faz o navegador desenhar de escuro o que ele mesmo pinta — a barra de rolagem à direita, o cursor dos campos, o menu de preenchimento automático — em vez de encaixar uma barra branca na lateral de um app preto. */ color-scheme: dark; /* O fundo precisa estar no também: quando o conteúdo é mais baixo que a janela, é ele que aparece atrás, e não o . */ background: var(--bg); /* Altura cheia mesmo quando o conteúdo é curto: é o que faz a tela de acesso ficar centralizada de verdade dentro do iframe, e não colada no topo. */ height: 100%; } /* Chrome, Edge e Safari não entendem `scrollbar-width`; a barra some por aqui. Zerar a largura, em vez de `display: none`, mantém a área de rolagem existindo para o navegador — só não pinta nada nela. */ html::-webkit-scrollbar { width: 0; height: 0; } html::-webkit-scrollbar-track, html::-webkit-scrollbar-thumb { background: transparent; } /* Coluna: a barra superior em cima e o resto ocupando o que sobra. É o que permite centralizar a tela de acesso no espaço abaixo da barra sem precisar descontar a altura dela na mão. */ body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; } /* Decisão explícita do projeto irmão, mantida aqui: nenhum elemento mostra destaque de foco. Onde o foco precisa ser perceptível (os seis campos do código), a pista vem pela cor da borda, que não é outline nem sombra. */ button:focus, input:focus, textarea:focus, select:focus, a:focus { outline: none; box-shadow: none; } a { color: inherit; } /* Etiqueta do modo de diagnóstico (?diag=1). Fica por cima de tudo e não intercepta clique — só informa o tamanho que a moldura entregou. */ .diagnostico { position: fixed; left: 8px; bottom: 8px; z-index: 999; padding: 6px 10px; border-radius: 999px; background: var(--brand); color: var(--brand-contraste); font-size: 11.5px; font-weight: 600; pointer-events: none; } /* =========================================================================== Telas de acesso — entrada por CPF, código de verificação e barreiras =========================================================================== */ /* Ocupa o que sobra abaixo da barra superior e centraliza o cartão nesse espaço. (Houve aqui um teto de 620px, feito para sobreviver a iframe que corta o conteúdo; ele centralizava bem a tela de CPF, curta, e deixava a do código, mais alta que o teto, começando no topo — duas telas irmãs com alinhamentos diferentes. Sem iframe, saiu.) */ .acesso { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; /* `safe` impede o outro efeito colateral da centralização: numa moldura mais baixa que o conteúdo, o começo do cartão fica acima da borda de cima e vira uma parte inalcançável, sem rolagem que chegue lá. */ justify-content: safe center; /* Espaço igual em cima e embaixo: com valores diferentes o conjunto fica alguns pixels fora do meio, e dentro do iframe isso salta aos olhos. */ padding: 36px 20px; gap: 26px; } /* Logo das telas de acesso. Nada de inverter cor como se fazia com a antiga, monocromática: esta é colorida, tem fundo transparente e já foi feita para aparecer sobre escuro. */ .acesso-logo { height: 76px; width: auto; display: block; } /* Caixa de tamanho fixo, igual nas duas telas de acesso: ao passar do CPF para o código muda o texto de dentro, e não a moldura. A altura é a da tela mais alta (a do código); o conteúdo fica centralizado dentro dela, e por isso a tela de CPF, mais curta, não deixa um vão embaixo. Sem sombra: sobre preto ela não aparece, e é a borda que separa o cartão. */ .acesso-card { width: 100%; /* 460px é a largura em que "Enviaremos um código de confirmação para o seu e-mail cadastrado." cabe numa linha só, com folga. */ max-width: 460px; min-height: 396px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 32px 30px; display: flex; flex-direction: column; justify-content: center; text-align: center; } .acesso-titulo { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: var(--brand-2); text-transform: uppercase; } .acesso-texto { margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); } /* Só as telas de barreira (barreira.html) — texto mais longo, fica mais harmônico justificado. A entrada e a verificação continuam com a frase curta e centralizada de sempre. */ .acesso-texto-erro { text-align: justify; } .acesso-texto strong { color: var(--text); font-weight: 600; } .campo-cpf { width: 100%; padding: 14px 12px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 21px; font-weight: 600; letter-spacing: 0.06em; text-align: center; } .campo-cpf::placeholder { color: var(--text-muted); font-weight: 400; letter-spacing: 0.04em; } .campo-cpf:focus { border-color: var(--brand-2); } .botao-primario { width: 100%; margin-top: 14px; padding: 13px 16px; border: none; border-radius: var(--radius-sm); background: var(--brand); color: var(--brand-contraste); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .botao-primario:hover { background: var(--brand-2); } .botao-texto { border: none; background: none; color: var(--brand); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 4px; text-decoration: none; } .botao-texto:hover { text-decoration: underline; } .botao-texto:disabled { color: var(--text-muted); cursor: default; text-decoration: none; } .acesso-rodape { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; /* Meio ponto a menos que o resto do texto de apoio: é o que falta para a frase do e-mail caber numa linha em vez de quebrar no meio. */ font-size: 12px; gap: 10px; color: var(--text-muted); } /* Sem a margem que o navegador dá a todo parágrafo: dentro do flex ela não colapsa e sobra como um vão extra embaixo, deixando a tela do código doze pixels mais baixa que a de CPF. O espaçamento aqui é do `gap` do container. */ .acesso-ajuda { margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); text-align: center; } /* Os seis campos do código. Um input por dígito porque o cliente costuma digitar olhando o e-mail aberto ao lado: campo separado deixa óbvio quantos números faltam, e o salto automático dispensa navegar com Tab. */ .codigo-campos { display: flex; justify-content: center; gap: 8px; margin-bottom: 6px; } .codigo-digito { width: 46px; height: 56px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 23px; font-weight: 700; text-align: center; transition: border-color 0.15s ease; } .codigo-digito:focus { border-color: var(--brand-2); } .codigo-digito.preenchido { border-color: var(--brand-soft); background: var(--dropdown-hover-bg); color: var(--dropdown-hover-text); } .contagem { font-size: 12.5px; color: var(--text-muted); } /* Emblema das telas de barreira: o círculo grande resolve o tom da mensagem antes da leitura — o cliente já sabe se é bloqueio, aviso ou pendência. */ .emblema { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 27px; line-height: 1; } .emblema-erro { background: var(--error-soft); color: var(--error); } .emblema-aviso { background: var(--warning-soft); color: var(--warning); } .emblema-info { background: var(--accent-soft); color: var(--accent); } .alerta { border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; text-align: center; } .alerta-erro { background: var(--error-soft); color: var(--error); } /* =========================================================================== Cabeçalho das telas internas =========================================================================== */ .app-header { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); } .app-header-inner { max-width: 1180px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .app-logo { height: 52px; width: auto; display: block; } /* Reserva enquanto a logo de uma marca ainda não tem arquivo — texto no lugar da imagem, mesma altura de linha, para o cabeçalho não pular. */ .app-logo-texto { height: 52px; display: flex; align-items: center; font-size: 20px; font-weight: 700; color: var(--brand); letter-spacing: 0.02em; } .app-usuario { display: flex; align-items: center; gap: 14px; min-width: 0; } .app-usuario-nome { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-usuario-cpf { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); } .sair-btn { flex-shrink: 0; padding: 8px 14px; border: 1px solid var(--border-input); border-radius: 8px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; } .sair-btn:hover { border-color: var(--error); color: var(--error); } main { max-width: 1180px; margin: 0 auto; padding: 30px 28px 70px; } .pagina-titulo { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--text); } .pagina-subtitulo { margin: 0 0 24px; font-size: 13.5px; color: var(--text-muted); } /* =========================================================================== Escolha do contrato =========================================================================== */ .contratos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; } .contrato-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .contrato-card:hover { transform: translateY(-2px); border-color: var(--brand-soft); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12); } .contrato-card-header { min-height: 104px; padding: 16px 18px; background: var(--navy); display: flex; flex-direction: column; justify-content: center; gap: 8px; } .contrato-card-header h2 { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* O corte em quatro linhas fica no parágrafo de dentro, não no bloco: como o bloco é esticado pelo flex para alinhar os rodapés dos cards da mesma linha, o corte aplicado nele mostraria as reticências no meio e o texto continuaria aparecendo abaixo. */ .contrato-card-corpo { flex: 1; padding: 16px 18px; } .contrato-card-objeto { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .contrato-card-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); } .contrato-card-rodape .abrir { color: var(--brand); font-weight: 600; } /* Pílula de situação. Sobre o azul do cabeçalho ela ganha fundo próprio; nas demais telas (faixa do contrato) ela aparece sobre o fundo claro. */ .pilula { align-self: flex-start; flex-shrink: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .pilula-andamento { background: var(--accent); color: var(--accent-contraste); } .pilula-concluido { background: rgba(255, 255, 255, 0.18); color: #fff; } /* =========================================================================== Área do contrato — faixa de identificação =========================================================================== */ .voltar-link { display: inline-block; margin-top: 14px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; } .voltar-link:hover { text-decoration: underline; } /* Cabeçalho da marca, faixa do contrato e abas: um bloco só, fixo no topo. Só o conteúdo da aba, abaixo, rola por baixo dele. */ .area-fixa { position: sticky; top: 0; z-index: 20; background: var(--bg); } /* Mesma largura e o mesmo respiro lateral do `main` logo abaixo — é o que faz a faixa do contrato, as abas e o conteúdo de qualquer aba alinharem na mesma coluna, sempre, em vez de variar conforme o que está aberto. */ .area-fixa-conteudo { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .contrato-faixa { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); display: grid; grid-template-columns: 1fr 260px; margin: 18px 0; overflow: hidden; } /* Sem o objeto, sobra só o nome do contrato deste lado — e ele fica no meio da coluna nos dois eixos, na mesma altura da vigência que está ao lado. */ .contrato-faixa-principal { padding: 24px 26px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .contrato-faixa h1 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--text); } .contrato-faixa-numero { display: block; margin-bottom: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .rotulo { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } /* Coluna da direita separada por linha, não por caixa: mantém a faixa como um objeto só, mas dá à vigência e à situação o destaque de ficha. */ .contrato-faixa-lateral { padding: 24px 26px; border-left: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .ficha-valor { font-size: 15px; font-weight: 700; } .pilula-clara { align-self: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .pilula-clara.encerrada { background: var(--dropdown-hover-bg); color: var(--dropdown-hover-text); } /* =========================================================================== Abas =========================================================================== */ /* Direto sobre o fundo da página — sem caixa própria. Só o traço azul da aba ativa marca qual está selecionada, sem linha cinza separando do conteúdo. */ .abas { display: flex; gap: 4px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; } .abas::-webkit-scrollbar { display: none; } .aba { position: relative; border: none; background: none; padding: 16px 16px 14px; color: var(--text-muted); font-family: inherit; font-size: 13.5px; font-weight: 600; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color 0.15s ease; } .aba:hover { color: var(--text); } /* O traço fica no ::after e não na borda do botão para não empurrar o texto um pixel para cima quando a aba é ativada. */ .aba::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background 0.15s ease; } .aba.ativa { color: var(--brand); } .aba.ativa::after { background: var(--brand); } .aba-conteudo { padding: 24px 26px 28px; min-height: 320px; } /* Indicador do HTMX: encostado à direita da barra de abas. Fica ali, e não sobre o conteúdo, para que a aba anterior continue legível enquanto a nova carrega — trocar o painel por um spinner faria a tela piscar a cada clique. */ .aba-carregando { display: flex; align-items: center; gap: 9px; margin-left: auto; padding-left: 14px; color: var(--text-muted); font-size: 12.5px; text-transform: uppercase; } .spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--brand-2); border-radius: 50%; animation: girar 0.7s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* Estado vazio das abas: centralizado e discreto, nunca um erro. */ .vazio { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--text-muted); } .vazio-icone { font-size: 30px; opacity: 0.55; } .vazio strong { color: var(--text); font-size: 14.5px; text-transform: uppercase; } /* =========================================================================== Aba — Linha do tempo =========================================================================== */ .tl-item { display: grid; grid-template-columns: 92px 22px 1fr; column-gap: 14px; } .tl-data { padding-top: 1px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } /* O trilho é desenhado no próprio elemento do marcador: a linha é o fundo da coluna e o ponto fica por cima, então nenhum pseudo-elemento precisa saber a altura do item — que varia com o tamanho da descrição. */ .tl-trilho { position: relative; display: flex; justify-content: center; } .tl-trilho::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border); } .tl-item:last-child .tl-trilho::before { bottom: auto; height: 14px; } .tl-ponto { position: relative; margin-top: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); box-sizing: content-box; } .tl-corpo { padding-bottom: 22px; min-width: 0; } .tl-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 3px; } .tl-titulo strong { font-size: 14.5px; font-weight: 600; } .tl-descricao { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); } /* A atualização enviada ao cliente costuma vir em vários parágrafos curtos; sem respiro entre eles o texto vira um bloco só. */ .tl-descricao + .tl-descricao { margin-top: 9px; } .tl-autor { margin-top: 5px; font-size: 12px; color: var(--text-muted); } /* Etiqueta de tipo. As cores dizem a natureza do evento sem depender de ícone, e são as mesmas do ponto no trilho. */ .chip { flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 9px; border-radius: 999px; background: var(--dropdown-hover-bg); color: var(--dropdown-hover-text); } .chip-reuniao, .tl-ponto-reuniao { background: var(--accent-soft); color: var(--accent); } .tl-ponto-reuniao { background: var(--accent); } .chip-documento { background: var(--brand-soft); color: var(--brand); } .tl-ponto-documento { background: var(--navy-2); } .chip-financeiro { background: var(--warning-soft); color: var(--warning); } .tl-ponto-financeiro { background: var(--warning); } .chip-contrato { background: var(--accent-soft); color: var(--accent); } .tl-ponto-contrato { background: var(--accent); } /* =========================================================================== Aba — Solicitações de pagamento =========================================================================== */ /* Linha do tempo menor, dentro da movimentação da solicitação. O traço à esquerda amarra os resultados ao pedido de onde saíram, sem transformar cada solicitação numa caixa fechada. Pontilhado e de um pixel de propósito: sólido como o trilho de fora, os dois traços competiam pela atenção e a leitura ficava pesada. Aqui o de dentro fica claramente subordinado ao de fora. */ .tl-mini { margin: 8px 0 0; padding-left: 16px; border-left: 1px dotted var(--border-input); display: flex; flex-direction: column; gap: 14px; } .mini-item { position: relative; } /* O ponto fica por cima do traço da esquerda, na altura da data. O -22px sai da conta do recuo: 16px de espaçamento, 1px de traço e a metade do ponto. */ .mini-item::before { content: ""; position: absolute; left: -22px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); border: 2px solid var(--surface); box-sizing: content-box; } .mini-data { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } /* =========================================================================== Aba — Drive =========================================================================== */ .arq-lista { display: flex; flex-direction: column; margin-bottom: 6px; } .arq-item { display: flex; align-items: center; gap: 14px; padding: 11px 10px; margin: 0 -10px; border-radius: var(--radius-sm); } /* Linha sem ação nenhuma: o cliente vê que o documento existe, e nada mais. Sem cursor de mão e sem realce de passagem, para a lista não sugerir um clique que não vai acontecer. */ .arq-item-estatico { cursor: default; } /* Selo com a extensão em vez de ícone desenhado: identifica o tipo de longe, não depende de fonte de ícones e continua legível em qualquer tamanho. */ .arq-selo { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; color: #fff; background: var(--text-muted); } .arq-selo-pdf { background: #c0392b; } .arq-info { flex: 1; min-width: 0; } /* Nome de documento aqui passa de cem caracteres. Duas linhas no máximo: mantém a lista escaneável sem esconder o fim do nome numa reticência logo no meio. */ .arq-nome { font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } /* =========================================================================== Aba — Agenda =========================================================================== */ /* Os dois totalizadores abrem a aba: é o número que o cliente procura antes de olhar a lista. Mesma cara das fichas da faixa do contrato. */ /* Fica fixo junto do bloco do topo — só a lista de compromissos, abaixo, rola. --altura-area-fixa vem medida por JS (area.html), porque a altura do bloco fixo varia (nome de contrato longo, tela estreita etc.). */ .totais { position: sticky; top: var(--altura-area-fixa, 0px); z-index: 10; background: var(--bg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 4px; margin-bottom: 26px; } .total { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; text-align: center; } .total-valor { margin: 2px 0 3px; font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--text); } /* O que ainda vai acontecer ganha a cor de destaque, para separar de relance do que já passou. */ .total-valor-futuro { color: var(--accent); } /* Compromisso não tem parágrafos de texto como as movimentações, então o item fica mais baixo e a lista mais compacta. */ .tl-corpo-curto { padding-bottom: 16px; } .ag-horario { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; font-size: 13px; color: var(--text-muted); } .ag-duracao { font-weight: 600; color: var(--accent); } /* =========================================================================== Telas estreitas =========================================================================== */ @media (max-width: 900px) { main { padding: 22px 18px 60px; } .area-fixa-conteudo { padding: 0 18px; } .app-header-inner { padding: 12px 18px; } .app-logo { height: 40px; } .app-logo-texto { height: 40px; font-size: 16px; } .contrato-faixa { grid-template-columns: 1fr; } .contrato-faixa-lateral { border-left: none; border-top: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 26px; } .aba-conteudo { padding: 20px 18px 24px; } } @media (max-width: 560px) { .app-usuario-nome { display: none; } .contratos-grade { grid-template-columns: 1fr; } /* Sem espaço para a coluna de data à esquerda: o trilho vem primeiro e a data passa a ser a primeira linha do próprio evento. */ .tl-item { grid-template-columns: 22px 1fr; } .tl-data { grid-column: 2; grid-row: 1; text-align: left; margin-bottom: 3px; } .tl-trilho { grid-row: 1 / span 2; } .tl-corpo { grid-column: 2; } .codigo-digito { width: 40px; height: 50px; font-size: 20px; } .acesso-card { padding: 28px 20px 24px; } /* Dois totalizadores lado a lado não cabem em 375px sem apertar o número. */ .totais { grid-template-columns: 1fr; gap: 10px; } /* Selo menor: em 375px o nome do documento precisa de toda a largura. */ .arq-selo { width: 32px; height: 32px; } /* Só o anel girando: a palavra "Carregando" alargava a barra de abas e fazia ela rolar de lado mesmo sem carregamento nenhum acontecendo. */ .so-desktop { display: none; } }