/* Tokens de 'Fundação de design v0.1'. O admin vive no claro. */ :root{ --noite:#1B1917; --cal:#F3F2F1; --cal-2:#E7E5E2; --verdete:#3E5C60; --terra:#C4623A; --nevoa:#6E6A66; --linha:rgba(27,25,23,.12); --f-display:'Archivo',system-ui,sans-serif; --f-corpo:'IBM Plex Sans',system-ui,sans-serif; --f-dado:'IBM Plex Mono',ui-monospace,monospace; } *{box-sizing:border-box;margin:0;padding:0} body{display:grid;grid-template-columns:186px 1fr;min-height:100vh; background:var(--cal);color:var(--noite);font-family:var(--f-corpo);font-size:13.5px} .rail{border-right:1px solid var(--linha);padding:20px 0} .marca{padding:0 18px 20px;border-bottom:1px solid var(--linha)} /* Largura fixa e altura automatica: a arte tem proporcao propria e esticar logo e a forma mais rapida de uma marca parecer amadora. 150px cabe na rail de 190 com a folga do padding. */ .marca img{width:150px;height:auto;display:block} .marca b{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:13px} .rail nav{padding:16px 0} .rail nav a{display:block;padding:9px 18px;color:var(--nevoa);text-decoration:none; font-family:var(--f-dado);font-size:11px;letter-spacing:.10em;text-transform:uppercase; border-left:2px solid transparent} .rail nav a:hover,.rail nav a.on{color:var(--verdete);border-left-color:var(--verdete)} /* Item de menu sem pagina: mesma metrica do , sem cursor de link e sem hover. O ponto e parecer previsto, nao parecer quebrado. */ .rail nav .futuro{display:block;padding:9px 18px;color:var(--nevoa);opacity:.38; font-family:var(--f-dado);font-size:11px;letter-spacing:.10em;text-transform:uppercase; border-left:2px solid transparent;cursor:default} .rail nav .futuro::after{content:" ·";opacity:.7} main{padding:24px 26px} .cab{display:flex;justify-content:space-between;align-items:flex-end; border-bottom:1px solid var(--linha);padding-bottom:16px} .cab h1{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:22px} .cab .sub{font-family:var(--f-dado);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--nevoa);margin-top:5px} .btn{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em; font-size:12px;padding:11px 20px;border:0;border-radius:2px;cursor:pointer;text-decoration:none} .btn-1{background:var(--verdete);color:var(--cal)} .kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linha); border:1px solid var(--linha);margin:20px 0 24px} .kpi>div{background:var(--cal);padding:14px 15px;display:flex;flex-direction:column} .kpi .r{font-family:var(--f-dado);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--nevoa)} .kpi .v{font-family:var(--f-dado);font-weight:500;font-size:24px; font-variant-numeric:tabular-nums;margin-top:6px} table.registro{width:100%;border-collapse:collapse} table.registro th{font-family:var(--f-dado);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--nevoa);text-align:left;font-weight:500; padding:8px 10px 8px 0;border-bottom:1px solid var(--linha)} table.registro td{padding:11px 10px 11px 0;border-bottom:1px solid var(--linha)} table.registro tr:hover td{background:rgba(62,92,96,.045)} .num{font-family:var(--f-dado);font-variant-numeric:tabular-nums;text-align:right;padding-right:0} /* `table.registro th` tem especificidade (0,1,2) e vence `.num` (0,1,0): sem esta linha o CABECALHO de uma coluna numerica fica a esquerda e a coluna a direita. Ja acontecia em Aluno, Tarefas, Painel e Faturas. */ table.registro th.num{text-align:right} .pil{font-family:var(--f-dado);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase; padding:3px 8px;border:1px solid currentColor;color:var(--nevoa)} .pil.ok{color:var(--verdete)} .pil.at{color:var(--terra)} .nota{margin-top:16px;font-size:12.5px;color:var(--nevoa);max-width:70ch} /* Detalhe da tarefa: segunda linha dentro da celula, nao paragrafo solto. */ .registro .nota{display:block;margin-top:3px;font-size:11.5px} /* Grade de campos: campo x meio periodo. Celula grande de proposito — a recepcao le de longe, em pe, com o telefone no ouvido. */ .navdia{display:flex;gap:8px} .btn-2{background:transparent;color:var(--nevoa);border:1px solid var(--linha)} .btn-2:hover{color:var(--verdete);border-color:var(--verdete)} .grade{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);margin:20px 0 4px} .grade .gh{background:var(--cal);padding:10px 12px;font-family:var(--f-dado);font-size:9.5px; letter-spacing:.13em;text-transform:uppercase;color:var(--nevoa)} .grade .gc{background:var(--cal);padding:16px 12px;font-family:var(--f-display); font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em; display:flex;align-items:center} .cel{background:var(--cal);padding:16px 12px;display:flex;flex-direction:column;gap:4px;min-height:66px} .cel .orig{font-family:var(--f-dado);font-size:10px;letter-spacing:.11em;text-transform:uppercase} .cel .quem{font-size:13px} /* Celula LIVRE nao tem o que mostrar: fica no fundo da pagina, discreta. O peso visual vai para o que esta ocupado — a grade responde "quem esta no campo", e o numero de vagas livres ja esta no KPI acima. */ .cel.livre{background:var(--cal)} .cel.livre .orig{color:var(--nevoa);opacity:.55} .cel.ocupado{background:rgba(196,98,58,.10)} .cel.ocupado .orig{color:var(--terra)} .cel.cedido{background:rgba(62,92,96,.10)} .cel.cedido .orig{color:var(--verdete)} .cel.bloq .orig{color:var(--nevoa)} .cel.bloq{background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(27,25,23,.05) 6px,rgba(27,25,23,.05) 12px)} /* Acesso ao app */ .aviso{padding:14px 16px;border:1px solid var(--linha);margin:18px 0} .aviso.ok{border-left:3px solid var(--verdete)} .aviso.erro{border-left:3px solid var(--terra)} .token{display:inline-block;font-family:var(--f-dado);font-size:15px;letter-spacing:.04em; background:var(--cal-2);padding:8px 12px;margin:8px 0;user-select:all;word-break:break-all} form.inline{display:flex;gap:8px;justify-content:flex-end;align-items:center} .inp{font-family:var(--f-corpo);font-size:13px;padding:9px 10px;border:1px solid var(--linha); background:var(--cal);color:var(--noite);min-width:220px} .inp:focus{outline:none;border-color:var(--verdete)} /* Matricula */ .form{max-width:960px;margin-top:20px} .form fieldset{border:0;border-top:1px solid var(--linha);padding:16px 0 6px; display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px} .form legend{font-family:var(--f-dado);font-size:9.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--nevoa);padding-right:12px} .form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--nevoa)} .form label.check{flex-direction:row;align-items:center;gap:8px;color:var(--noite)} .form .w{grid-column:span 2} .form .inp{width:100%} .form .nota{grid-column:1/-1;margin:0} .dica{text-transform:none;letter-spacing:0;font-family:var(--f-corpo);font-size:11px} .form>button{margin-top:18px} /* Uma fila de caixas de marcar que ocupa a grade inteira. Nasceu para os sete dias da semana e ja serve unidades e modalidades — daí o nome generico. */ .filacheck{display:flex;flex-wrap:wrap;gap:14px;grid-column:1/-1} /* Cada plano e um bloco fechado: sem a separacao, cinco planos viram uma parede de tabela e ninguem acha onde um acaba. */ .plano{margin:26px 0;padding-top:6px} .plano h2{margin-bottom:4px} .plano details{margin-top:10px} .plano summary{font-family:var(--f-dado);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--verdete);cursor:pointer;padding:6px 0} .registro.chave th{width:190px} .form.estreito{max-width:420px} .form.estreito label{margin-bottom:12px} .busca{display:flex;gap:10px;align-items:center;margin:18px 0 6px;flex-wrap:wrap} .busca .w{min-width:420px} .selecionada{grid-column:1/-1;background:rgba(62,92,96,.08);padding:12px 14px;color:var(--noite)} .selecionada a{margin-left:10px;color:var(--verdete);font-size:12px} /* Ficha do aluno. Uma pagina longa com muitas secoes precisa de marco visual, senao as tabelas viram uma so. */ .secao{font-family:var(--f-dado);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--nevoa);font-weight:500; margin:30px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--linha)} .registro a{color:var(--verdete)} /* Nome clicavel nas listas: o buraco de navegacao que a ficha veio fechar era justamente este — o nome aparecia em toda tela e em nenhuma levava a lugar nenhum. */ a.pessoa{color:inherit;text-decoration:none;border-bottom:1px solid transparent} a.pessoa:hover{color:var(--verdete);border-bottom-color:var(--verdete)} /* Campo dentro de linha de tabela: o .inp padrao tem min-width 220px, que estoura a celula da baixa de pagamento. */ .inp.curto{min-width:0;width:96px;padding:7px 8px} select.inp.curto{width:120px} .registro form.inline .btn{padding:7px 12px} /* Fila de graduacao: cada proposta e um bloco, nao uma linha de tabela. O mestre decide um aluno por vez, olhando os requisitos daquele aluno — linha de tabela empurraria a decisao para o modo "varrer a lista". */ .proposta{border:1px solid var(--linha);padding:16px 18px;margin:18px 0} .cabproposta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .cabproposta .nota{display:inline;margin:0 0 0 8px} .travessia{margin-top:6px;font-size:15px} .travessia .seta{color:var(--nevoa);margin:0 4px} .travessia .nota{display:block;margin:4px 0 0} table.compacta{margin-top:12px;max-width:720px} table.compacta td{padding:6px 10px 6px 0;font-size:12.5px} .acaoproposta{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap} .acaoproposta .inp{min-width:150px} .inp.curto2{min-width:0;width:150px} /* Quem esta logado, no pe do menu */ .quem{padding:14px 18px;margin-top:22px;border-top:1px solid var(--linha)} .quem .nome{display:block;font-size:12.5px} .quem .papeis{display:block;font-family:var(--f-dado);font-size:9.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--nevoa);margin-top:3px} .quem .sair{background:none;border:0;padding:0;margin-top:8px;cursor:pointer; font-family:var(--f-dado);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--nevoa);text-decoration:underline} .quem .sair:hover{color:var(--terra)} /* Portao: entrada e ativacao. Sem menu, sem nada — a pagina existe para uma decisao so, e qualquer outra coisa na tela seria caminho para quem ainda nao deveria ter caminho. */ /* body.semrail nao tem a coluna do menu: o portao ocupa a tela inteira. */ body.semrail{display:block} .portao{display:flex;align-items:center;justify-content:center; min-height:100vh;background:var(--cal)} .portaocaixa{width:340px;border:1px solid var(--linha);padding:28px 26px 24px;background:var(--cal)} .portaocaixa .marca{padding:0 0 16px;border-bottom:1px solid var(--linha)} /* Maior que na rail: o cartao tem 340px e o logo e a unica marca que esta tela mostra — quem ainda nao entrou precisa reconhecer onde esta. */ .portaocaixa .marca img{width:190px} .portaocaixa .sub{font-family:var(--f-dado);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--nevoa);margin-top:12px} .portaoform{display:flex;flex-direction:column;gap:12px;margin-top:18px} .portaoform label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--nevoa)} .portaoform .inp{width:100%;min-width:0} .portaoform button{margin-top:6px} /* --------------------------------------------------------------------- Estreito. O admin nasceu para o computador do balcão, mas quem gerencia também abre no tablet e no celular — e a grade de 186px + conteúdo empurrava a tabela para fora da tela, sem barra de rolagem visível. Duas quebras: 900px o trilho vira faixa horizontal; 560px as tabelas ganham rolagem própria em vez de esticar a página. --------------------------------------------------------------------- */ @media (max-width: 900px) { /* minmax(0,1fr), e não 1fr: a faixa `1fr` sozinha carrega um mínimo automático igual ao min-content do conteúdo, então uma tabela larga esticava a COLUNA — e com ela o trilho e a página inteira. Com o mínimo zerado, quem rola é a tabela, dentro do próprio quadro. */ body { grid-template-columns: minmax(0, 1fr); } .rail { border-right: 0; border-bottom: 1px solid var(--linha); display: flex; align-items: center; gap: 14px; padding: 12px 16px; flex-wrap: wrap; } .marca { padding: 0 12px 0 0; border-bottom: 0; } /* O menu ocupa a linha inteira. Como item de flex ele não encolhe abaixo do próprio max-content, e numa linha compartilhada o último item saía pela direita — cortado, não rolável. */ .rail nav { flex: 1 1 100%; min-width: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; } .rail nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 10px; } .rail nav a:hover, .rail nav a.on { border-left-color: transparent; border-bottom-color: var(--verdete); } /* Quem está no turno continua visível — é o único aviso de que o turno anterior não saiu — mas em uma linha só. Empilhado, o bloco comia meia tela antes de a página começar. */ .rail .quem { margin-left: auto; margin-top: 0; padding: 0; min-width: 0; border-top: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .quem .nome { display: inline; } .quem .papeis { display: inline; } .quem form { display: inline; } .quem .sair { margin-top: 0; } main { padding: 20px 16px; } .busca .w { min-width: 0; width: 100%; } .form { max-width: none; } /* Título e navegação de dia deixam de disputar a mesma linha. */ .cab { flex-wrap: wrap; gap: 10px; } .navdia { flex-wrap: wrap; } } @media (max-width: 560px) { /* Tabela não encolhe além de um ponto: rola dentro do próprio quadro, e a página inteira continua sem rolagem horizontal. */ .rolavel, table.registro, table.compacta { display: block; overflow-x: auto; } .cartoes { grid-template-columns: 1fr 1fr; } /* Quatro números lado a lado viram quatro números espremidos. Dois e dois mantêm o valor legível — que é a única razão de o KPI existir. */ .kpi { grid-template-columns: 1fr 1fr; } .portaocaixa { width: 100%; } .inp, select.inp, .inp.curto, select.inp.curto, .inp.curto2 { width: 100%; min-width: 0; } /* Tabela com coluna de PROSA nao rola bem: rolar de lado para ler uma frase e pior do que empilhar. A de exclusoes vira lista, com rotulo antes do valor. */ table.lista, table.lista thead, table.lista tbody, table.lista tr, table.lista td { display: block; width: 100%; } table.lista thead { display: none; } table.lista tr { border-bottom: 1px solid var(--linha); padding: 12px 0; } table.lista td { border: 0; padding: 3px 0; } table.lista td[data-r]::before { content: attr(data-r) " "; font-family: var(--f-dado); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--nevoa); } } /* A grade de 3 colunas do formulario nunca era relaxada: num celular de 320px cada campo ficava com ~85px, e o