/* O painel da rematrícula (Carol, 22/09/2026, redesenhado em 22/09 à tarde). Duas cores e nada mais, a pedido dela: VERDE é o fim da linha — contrato assinado — e AMARELO é tudo que ainda pede alguma coisa de alguém. Antes eram cinco tratamentos diferentes, um por etapa, e a tela virava um semáforo quebrado onde nada saltava. Com dois, bate o olho e sabe. */ :root { --verde: #1B7A3D; --trilho: #F2EFE7; } .estados { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 4px; } .estados button { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; border: 1.5px solid var(--linha); background: #fff; border-radius: 999px; padding: 6px 13px; cursor: pointer; color: var(--cinza); } .estados button:hover { border-color: var(--vermelho); color: var(--vermelho); } .estados button.ligado { background: var(--preto); border-color: var(--preto); color: #fff; } /* "Assinatura pendente" não é uma etapa: é o corte por cima delas. O contorno amarelo diz isso sem precisar de uma palavra a mais. */ .estados button.pendente { border-color: var(--amarelo); color: var(--preto); } .estados button.pendente.ligado { background: var(--preto); border-color: var(--preto); color: #fff; } /* A LEGENDA DA COR (Carol, 22/09/2026). Cada botão de filtro carrega a bolinha da etapa que ele filtra, na mesma cor da etiqueta lá embaixo. Assim a fileira de cima ensina o código sem uma linha de texto explicando, e quem bate o olho na lista já sabe o que cada cor quer dizer. Ligado, o botão se enche da própria cor — o preto de antes apagava justamente a informação que o botão carrega. */ .estados button[data-fase]::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ponto, transparent); display: inline-block; margin-right: 2px; } .estados button[data-fase=""]::before, .estados button.pendente::before { display: none; } .estados button { display: inline-flex; align-items: center; gap: 7px; } .estados button[data-fase="nao_gerado"] { --ponto: var(--f-nao_gerado); } .estados button[data-fase="rascunho"] { --ponto: var(--f-rascunho); } .estados button[data-fase="em_conferencia"] { --ponto: var(--f-em_conferencia); } .estados button[data-fase="conferido"] { --ponto: var(--f-conferido); } .estados button[data-fase="aguardando_assinatura"] { --ponto: var(--f-aguardando_assinatura); } .estados button[data-fase="assinado"] { --ponto: var(--f-assinado); } .estados button[data-fase="correcao"] { --ponto: var(--f-correcao); } .estados button[data-fase="travado"] { --ponto: var(--f-travado); } .estados button[data-fase="nao_volta"] { --ponto: var(--f-nao_volta); } .estados button[data-fase]:not([data-fase=""]):hover { border-color: var(--ponto); color: var(--preto); } .estados button[data-fase]:not([data-fase=""]).ligado { background: var(--ponto); border-color: var(--ponto); color: #fff; } .estados button[data-fase]:not([data-fase=""]).ligado::before { background: #fff; opacity: .85; } /* O amarelo e os claros não sustentam texto branco. */ .estados button[data-fase="em_conferencia"].ligado, .estados button[data-fase="nao_gerado"].ligado, .estados button[data-fase="nao_volta"].ligado { color: var(--preto); } .estados button[data-fase="em_conferencia"].ligado::before, .estados button[data-fase="nao_gerado"].ligado::before, .estados button[data-fase="nao_volta"].ligado::before { background: var(--preto); opacity: .5; } .estados button b { font-weight: 700; } /* ── a barra de filtros: turma × situação (Carol, 29/09/2026) ─────────── "Poder fazer um filtro por contratos pendentes e os que já estão com a assinatura concluída. Filtrar por turma, tendo a opção de colocar todas as turmas juntas ou puxar turma por turma." São DOIS eixos, e por isso duas peças diferentes. A turma é uma escolha entre muitas: vira lista suspensa, que não cresce com a escola. A situação é uma escolha entre poucas e coloridas: continua em botões, que são a legenda da cor. Os dois valem ao mesmo tempo — "K3 Manhã que ainda não fechou" é uma pergunta de todo dia, e até hoje não dava para fazer. O corte grosso (Pendentes / Assinatura concluída) fica na frente, porque é com ele que se decide o dia; as fases finas vêm atrás, para quem quer saber em qual degrau a família parou. */ .filtros-rem { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: flex-end; margin-top: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--linha); } .filtros-rem .campo { flex: 0 1 300px; min-width: 200px; } .filtros-rem .campo > span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--cinza); margin-bottom: 5px; } .filtros-rem select { font-size: 14px; padding: 9px 12px; } .filtros-rem .modo { display: flex; gap: 0; } .filtros-rem .modo button { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; border: 1.5px solid var(--linha); background: #fff; cursor: pointer; color: var(--cinza); padding: 9px 15px; } .filtros-rem .modo button:first-child { border-radius: 10px 0 0 10px; } .filtros-rem .modo button:last-child { border-radius: 0 10px 10px 0; margin-left: -1.5px; } .filtros-rem .modo button.ligado { background: var(--preto); border-color: var(--preto); color: #fff; } .filtros-rem .quantas { flex: 1 1 100%; font-size: 12.5px; color: var(--cinza); margin: 0; } .filtros-rem .quantas b { color: var(--preto); font-weight: 600; } /* O corte grosso, antes das fases: dois botões e o "todas". Eles não levam bolinha de cor porque não são uma etapa — são um monte delas. */ .estados button.grosso { border-width: 2px; } /* O corte grosso não é uma etapa: não carrega a bolinha de cor de nenhuma. */ .estados button.grosso::before { display: none; } .estados button.grosso.pendentes { border-color: #E5801B; color: #8A4A00; } .estados button.grosso.pendentes.ligado { background: #E5801B; border-color: #E5801B; color: #fff; } .estados button.grosso.concluidos { border-color: var(--verde); color: var(--verde); } .estados button.grosso.concluidos.ligado { background: var(--verde); border-color: var(--verde); color: #fff; } .estados .risco { width: 1px; background: var(--linha); margin: 2px 5px; align-self: stretch; } /* ── todas as turmas juntas, numa lista só ────────────────────────────── A grade de cartões responde "como vai cada turma"; esta lista responde "quem falta, na escola inteira". O cabeçalho de cada turma é um botão: bateu o olho numa turma no meio da rolagem, entra nela sem subir. */ .grupo-turma { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; width: 100%; font-family: 'Poppins', sans-serif; text-align: left; cursor: pointer; background: none; border: none; border-bottom: 2px solid var(--preto); padding: 0 4px 6px; margin: 26px 0 2px; } .grupo-turma h3 { font-family: 'Playfair Display', serif; font-size: 19px; margin: 0; color: var(--preto); } .grupo-turma .conta { font-size: 12px; color: var(--cinza); } .grupo-turma:hover h3 { color: var(--vermelho); } /* ── a grade das turmas: a primeira tela ───────────────────────────────── */ .turmas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; } .turma-card { font-family: 'Poppins', sans-serif; text-align: left; cursor: pointer; border: 1px solid var(--linha); border-radius: 14px; background: #fff; padding: 17px 19px 15px; display: block; width: 100%; } .turma-card:hover { border-color: var(--vermelho); } .turma-card h2 { font-family: 'Playfair Display', serif; font-size: 21px; margin: 0 0 2px; color: var(--preto); line-height: 1.2; } .turma-card .quantos { font-size: 12.5px; color: var(--cinza); } .turma-trilho { height: 7px; background: var(--trilho); border-radius: 4px; overflow: hidden; margin: 13px 0 12px; display: flex; } .turma-trilho > i { display: block; height: 100%; border-radius: 4px; } /* Verde ao lado de amarelo virava bandeira do Brasil no cartao (Carol, 22/09/2026). A barra passou para a casa: o vermelho da marca no que ja esta assinado, o mesmo vermelho claro no que ainda anda. O botao verde do "assinados" fica -- ele e o que ela procura de longe. */ .turma-trilho > i.pronto { background: var(--vermelho); } .turma-trilho > i.andando { background: #F3B3C6; } .turma-numeros { display: flex; flex-wrap: wrap; gap: 6px; } .turma-numeros span { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: var(--fundo-suave); color: var(--cinza); border: 1px solid var(--linha); } .turma-numeros span.pronto { background: var(--verde); border-color: var(--verde); color: #fff; } /* ── dentro da turma ──────────────────────────────────────────────────── */ .voltar-turmas { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; border: none; background: none; cursor: pointer; color: var(--cinza); padding: 0; margin-top: 22px; } .voltar-turmas:hover { color: var(--vermelho); } .turma-cabeca { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; border-bottom: 2px solid var(--preto); padding-bottom: 7px; margin-top: 6px; } .turma-cabeca h2 { font-family: 'Playfair Display', serif; font-size: 25px; margin: 0; color: var(--preto); } .turma-cabeca .resumo { font-size: 12.5px; color: var(--cinza); } .turma-cabeca .resumo b { color: var(--preto); font-weight: 600; } /* A linha da criança (Carol, 22/09/2026, à noite). "Não quero que todos os elementos tenham o mesmo peso visual." Então a linha tem três pesos e nada mais: o NOME e o ESTADO chamam, o resto é miúdo. Nome à esquerda, etiqueta e ação à direita — e quando o espaço aperta, a etiqueta desce para baixo do nome em vez de espremer os dois. Quem faz isso é o flex-wrap: cada parte tem uma largura mínima em que ainda se lê, e abaixo dela a linha vira duas. */ .crianca { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 13px 4px; border-bottom: 1px solid var(--linha); } .crianca:hover { background: #FCFBFA; } .crianca .quem { flex: 1 1 250px; min-width: 0; line-height: 1.35; } /* 1. o nome — a informação principal, e a porta da matrícula */ .crianca .nome { font-size: 15.5px; font-weight: 600; color: var(--preto); text-decoration: none; display: inline-block; } a.nome:hover { color: var(--vermelho); text-decoration: underline; } /* 4. as informações complementares — menores e mais discretas */ .crianca .notas { display: block; color: var(--cinza); font-size: 11.5px; margin-top: 3px; } /* 5. a ação rápida — presente, sem disputar atenção */ .crianca .acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .crianca .acoes a, .crianca .acoes button { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; border: 1.5px solid var(--linha); background: #fff; border-radius: 8px; padding: 6px 11px; cursor: pointer; color: var(--cinza); white-space: nowrap; text-decoration: none; } .crianca .acoes a:hover, .crianca .acoes button:hover { border-color: var(--vermelho); color: var(--vermelho); } .crianca .acoes button.copiado { border-color: var(--verde); color: var(--verde); } .crianca .link-a-mao { flex: 1 1 100%; margin: 6px 0 0; padding: 6px 9px; font-size: 12px; border: 1.5px solid var(--vermelho); border-radius: 8px; background: #fff; } /* Telas pequenas: a etiqueta ganha linha própria embaixo do nome, que é o que a Carol desenhou no pedido — e não meia dúzia de colunas espremidas. */ @media (max-width: 620px) { .crianca { display: block; padding: 14px 4px; } .crianca .quem { margin-bottom: 9px; } .crianca .fase { margin-bottom: 9px; } } /* ── 2. o estado: a etiqueta ─────────────────────────────────────────── Ela é um BOTÃO: clicar abre o detalhamento daquele estado — no caso da assinatura, quem já assinou, quando, e quem ainda falta (Carol, 22/09/2026). O progresso mora dentro da própria pílula, depois do ponto, em peso menor: "ENVIADO PARA ASSINATURA · 1 de 2 assinaturas". UMA COR POR ETAPA (Carol, 22/09/2026, à noite: "eu ainda tenho dificuldade de visualizar. Eu acho que cada botão tem que ter uma cor"). A versão anterior tinha duas cores só — verde no fim e amarelo em tudo que andava. Na tela cheia isso juntava as duas maiores filas da escola: 41 "aguardando conferência" e 16 "enviado para assinatura" saíam exatamente iguais, e era impossível separar de longe quem está conferindo de quem está assinando. Agora cada etapa tem a sua, e a cor percorre o caminho da matrícula: começa fria, esquenta quando alguém precisa agir e fecha no verde. cinza não gerado ........ nada aconteceu ainda lilás em rascunho ....... começou, e ainda está aqui dentro amarelo aguardando conferência ... está com a família, conferindo laranja aguardando envio .. voltou para nós: falta MANDAR assinar azul enviado para assinatura .. está com a família, assinando verde assinado .......... fechado, e só com todas as assinaturas vermelho pendência / correção ..... família esperando resposta marrom travada ........... o Portal parou e não segue sozinho branco não rematriculado . saiu da campanha; não é pendência As cores vivem aqui em cima, num lugar só, porque as etiquetas e os botões de filtro têm de usar exatamente as mesmas — o filtro é a legenda da cor, e legenda que discorda do mapa é pior que legenda nenhuma. */ :root { --f-nao_gerado: #B9B1A2; --f-nao_gerado-fundo: #F1EDE4; --f-nao_gerado-txt: #6B6253; --f-rascunho: #8C79C6; --f-rascunho-fundo: #EBE6F8; --f-rascunho-txt: #473682; --f-em_conferencia: #EECA00; --f-em_conferencia-fundo: #EECA00; --f-em_conferencia-txt: #201C15; --f-conferido: #E5801B; --f-conferido-fundo: #E5801B; --f-conferido-txt: #fff; --f-aguardando_assinatura: #1D6FA6; --f-aguardando_assinatura-fundo: #1D6FA6; --f-aguardando_assinatura-txt: #fff; --f-assinado: #1B7A3D; --f-assinado-fundo: #1B7A3D; --f-assinado-txt: #fff; --f-correcao: #CF003D; --f-correcao-fundo: #CF003D; --f-correcao-txt: #fff; --f-travado: #5A4636; --f-travado-fundo: #5A4636; --f-travado-txt: #fff; --f-nao_volta: #D8D2C4; --f-nao_volta-fundo: #fff; --f-nao_volta-txt: #8A8172; } .fase { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; border-radius: 999px; padding: 6px 14px; text-decoration: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 7px; max-width: 100%; background: var(--fundo); color: var(--txt); border: 1.5px solid var(--traco); } .fase b { font-weight: 600; font-size: 11.5px; letter-spacing: 0; text-transform: none; opacity: .78; white-space: nowrap; } .fase b::before { content: '· '; opacity: .6; } /* O contorno preto no hover diz "dá para clicar" sem apagar a cor da etapa. */ .fase:hover { border-color: var(--preto); } .fase.nao_gerado { --fundo: var(--f-nao_gerado-fundo); --txt: var(--f-nao_gerado-txt); --traco: var(--f-nao_gerado); } .fase.rascunho { --fundo: var(--f-rascunho-fundo); --txt: var(--f-rascunho-txt); --traco: var(--f-rascunho); } .fase.em_conferencia { --fundo: var(--f-em_conferencia-fundo); --txt: var(--f-em_conferencia-txt); --traco: var(--f-em_conferencia); } .fase.conferido { --fundo: var(--f-conferido-fundo); --txt: var(--f-conferido-txt); --traco: var(--f-conferido); } .fase.aguardando_assinatura { --fundo: var(--f-aguardando_assinatura-fundo); --txt: var(--f-aguardando_assinatura-txt); --traco: var(--f-aguardando_assinatura); } .fase.assinado { --fundo: var(--f-assinado-fundo); --txt: var(--f-assinado-txt); --traco: var(--f-assinado); } .fase.correcao { --fundo: var(--f-correcao-fundo); --txt: var(--f-correcao-txt); --traco: var(--f-correcao); } .fase.travado { --fundo: var(--f-travado-fundo); --txt: var(--f-travado-txt); --traco: var(--f-travado); } .fase.nao_volta { --fundo: var(--f-nao_volta-fundo); --txt: var(--f-nao_volta-txt); --traco: var(--f-nao_volta); } /* O detalhamento que a etiqueta abre. */ .detalhe-fase { flex: 1 1 100%; margin: 10px 0 2px; background: var(--fundo-suave); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 15px; font-size: 13.5px; line-height: 1.55; color: var(--preto); } .detalhe-fase p { margin: 0; } .detalhe-fase ul { list-style: none; margin: 0; padding: 0; } .detalhe-fase li { display: flex; gap: 10px; padding: 7px 0; align-items: baseline; } .detalhe-fase li + li { border-top: 1px solid var(--linha); } .detalhe-fase li i { font-style: normal; font-size: 13px; width: 14px; flex: none; color: var(--cinza); } .detalhe-fase li.ok i { color: var(--verde); font-weight: 700; } .detalhe-fase li b { font-weight: 600; } .detalhe-fase li small, .detalhe-fase p.qn { display: block; color: var(--cinza); font-size: 11.5px; } .detalhe-fase p.qn { margin-top: 9px; } .detalhe-fase .ir { display: inline-block; margin-top: 11px; font-size: 12px; font-weight: 600; color: var(--preto); text-decoration: none; border-bottom: 1.5px solid var(--vermelho); } .detalhe-fase .ir:hover { color: var(--vermelho); } /* O pedido de correção da família. Não é etiqueta — é o texto que a mãe escreveu, e a linha inteira leva à proposta com um clique. */ .pedido-correcao { flex: 1 1 100%; display: block; text-decoration: none; border-left: 4px solid var(--vermelho); background: #FFF5F7; border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 8px 0 2px; font-size: 13.5px; line-height: 1.55; color: var(--preto); } .pedido-correcao:hover { background: #FFE9EF; } .pedido-correcao b { color: var(--vermelho); } .pedido-correcao em { display: block; margin-top: 5px; font-style: normal; color: var(--cinza); font-size: 11.5px; }