/* ===================================================================== * KCORTE — SO O QUE O PRODUTO ACRESCENTA * * Ordem de carga (declarada no index.html): * 1. krigs-tokens.css tokens oficiais da plataforma (nao alterar) * 2. krigs-componentes.css componentes oficiais (nao alterar) * 3. kcorte-tokens.css tokens de navegacao do produto * 4. kcorte.css ESTE arquivo: a moldura * * Aqui vive somente o que o Design System nao entrega pronto: a moldura * (menu lateral, barra superior, area de conteudo), a tela de entrada e * a lampada do Assistente. Botao, campo, tabela, cartao, indicador, * selo, alerta, estado vazio, aviso temporario, modal, responsividade e * impressao ja vem dos componentes oficiais — reescrever qualquer um * deles aqui seria a segunda implementacao do mesmo problema. * * NENHUMA COR LITERAL. Toda cor vem de token (Documento 04 secao 2.1). * ===================================================================== */ /* ===================================================================== * TELA DE ENTRADA — componente oficial, referencia KEPI (secao 21). * Os valores sao os do Documento 05 secao 3.1: cartao de 380px, raio de * 14px, respiro de 34/30 e a sombra propria da entrada. Nao ha * alternador de tema aqui: a entrada e sempre o gradiente. * ===================================================================== */ #tela-entrada{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--grad-entrada); padding:20px; overflow-y:auto; } /* Sessao guardada: a entrada nao chega a ser pintada (ver o script do * ). Sem isto, quem ja esta dentro ve a tela de entrada piscar a * cada F5 — um round-trip inteiro depois. */ html.com-sessao #tela-entrada{ display:none } .entrada-cartao{ background:var(--branco); color:var(--texto); border-radius:14px; box-shadow:var(--entrada-sombra); padding:34px 30px; width:100%; max-width:380px; } .entrada-marca{ text-align:center; margin-bottom:22px } .entrada-marca .placa{ display:inline-flex; align-items:center; justify-content:center; min-width:84px; max-width:290px; min-height:66px; padding:16px 24px; border-radius:18px; background:var(--grad-placa); } /* A marca sobre fundo escuro e SEMPRE a versao branca * (`logo-krigs-login.png`). Nunca `logo-krigs-white.png`: esse arquivo e * byte a byte igual ao navy, e a placa azul-marinho sobre azul-marinho * faz a marca desaparecer. Documento 04 secao 6.1. */ .entrada-marca .placa img{ max-width:100%; max-height:56px; width:auto; display:block } .entrada-marca h1{ font-size:20px; margin:14px 0 2px } .entrada-marca p{ color:var(--cinza); margin:0; font-size:14px } /* Erro da entrada vai NO CARTAO, nao em aviso temporario: a tela de * entrada nao tem a area de avisos montada (Documento 05 secao 3.1). */ .entrada-erro{ color:var(--vermelho); font-size:13px; margin-top:10px; min-height:18px } .entrada-links{ text-align:center; margin-top:14px; font-size:13px } .entrada-rodape{ text-align:center; color:var(--entrada-rodape); font-size:12px; margin:0 } /* ===================================================================== * MOLDURA — menu lateral, barra superior e conteudo. * * Componente OFICIAL da plataforma: a referencia de layout e o KFROTA * (Constituicao secao 20). Muda o que a secao 20 autoriza — quais * modulos existem, quem ve cada um e em que categoria ficam. Estrutura, * largura, espacamento, tipografia, cor, selecao, hover, rolagem, * responsividade e comportamento de gaveta sao COPIA, nao aproximacao. * ===================================================================== */ #app{ display:grid; grid-template-columns:var(--nav-w) 1fr; grid-template-rows:60px 1fr; height:100vh; } #app[hidden]{ display:none } .sidebar{ grid-row:1/3; background:linear-gradient(180deg,var(--nav-fundo-1),var(--nav-fundo-2)); color:var(--nav-texto); display:flex; flex-direction:column; padding:16px 12px; overflow-y:auto; } .sidebar .marca{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:6px 8px 18px; border-bottom:1px solid var(--nav-linha); margin-bottom:12px; } .sidebar .marca img{ width:100%; max-width:176px; height:auto; display:block } .sidebar .marca .empresa{ display:block; font-size:11px; font-weight:700; letter-spacing:2px; color:var(--nav-suave); text-transform:uppercase; padding-left:2px; } .sidebar .marca .empresa:empty{ display:none } .nav-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:var(--nav-texto); font-weight:500; font-size:14px; margin-bottom:3px; cursor:pointer; transition:.12s; background:none; border:0; width:100%; text-align:left; font-family:inherit; } .nav-item .ic{ width:18px; height:18px; display:grid; place-items:center; opacity:.9; flex:none } .nav-item:hover{ background:var(--nav-hover); color:var(--branco); text-decoration:none } .nav-item.ativo{ background:var(--azul); color:var(--branco); box-shadow:0 4px 12px var(--nav-sombra-ativo); } /* Categoria e SO um titulo: nao abre, nao fecha e nao esconde nada. */ .nav-sep{ font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--nav-rotulo); padding:14px 12px 6px; } .sidebar .rodape{ margin-top:auto; font-size:10.5px; color:var(--nav-rotulo); padding:12px 8px 4px; border-top:1px solid var(--nav-linha); } .sidebar .rodape b{ color:var(--nav-suave); letter-spacing:.4px } .topbar{ grid-column:2; display:flex; align-items:center; justify-content:space-between; background:var(--branco); border-bottom:1px solid var(--linha); padding:0 22px; box-shadow:var(--sombra); } .topbar h2{ font-size:17px; font-weight:700 } .topbar .direita{ display:flex; align-items:center; gap:14px } .empresa-switch{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--cinza) } .empresa-switch select{ padding:6px 9px; border:1px solid var(--linha); border-radius:var(--raio-sm); font-family:inherit; font-size:13px; background:var(--branco); color:var(--texto); } /* Cabecalho do usuario (`user-chip`): avatar, nome e — obrigatorio — o * E-MAIL da conta em uso. Responde a pergunta "com qual conta eu estou?", * comum em quem administra varias empresas (Documento 05 secao 3.4). */ .user-chip{ display:flex; align-items:center; gap:10px } .user-chip .avatar{ width:34px; height:34px; border-radius:50%; background:var(--azul-900); color:var(--branco); display:grid; place-items:center; font-weight:700; font-size:13px; } .user-chip .quem{ line-height:1.2; min-width:0 } .user-chip .nome{ font-weight:600; font-size:13px } .user-chip .email{ font-size:11px; color:var(--cinza); max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .btn-icone{ background:var(--branco); color:var(--texto); border:1px solid var(--linha); border-radius:var(--raio-sm); padding:7px 9px; cursor:pointer; display:inline-flex; align-items:center; /* Alvo de toque minimo de 40x40 no celular (Documento 04 secao 12). */ min-width:40px; min-height:36px; justify-content:center; } .btn-icone:hover{ background:var(--azul-claro) } /* A area de conteudo. * * O `width:100%` NAO e redundante, e a falta dele foi um defeito real * visto no navegador: `.conteudo` dos componentes oficiais traz * `max-width:1100px; margin:0 auto`, e margem automatica num ITEM DE * GRADE nao centraliza, ela encolhe o item para a largura do conteudo. * O painel abria com os indicadores empilhados numa coluna de 240px, no * meio da tela. Com a largura explicita, a margem automatica volta a * fazer o que se espera dela: centralizar dentro do limite de 1100px. * * E o motivo de nao consertar isso no arquivo oficial: ele e copia da * plataforma e nao se altera. O ajuste pertence a quem monta a moldura. */ #conteudo{ grid-column:2; overflow-y:auto; width:100% } /* COLISAO DE CLASSE nos componentes oficiais, corrigida aqui. * * O arquivo oficial usa `.num` para duas coisas diferentes: a coluna * NUMERICA de tabela, que e alinhada a direita, e o NUMERO do indicador * do painel, que nao tem alinhamento declarado no Documento 04. As duas * regras casam no mesmo elemento, e o numero do indicador saia colado na * direita do cartao, longe do rotulo dele. Foi visto no navegador, nao * deduzido. * * O arquivo oficial nao se altera, entao o desempate mora aqui. Esta * divergencia vale para TODO produto que usar os dois componentes na * mesma tela: registrada no TODO para subir ao dono da plataforma. */ .stat .num{ text-align:left } /* Cabecalho de pagina: titulo e subtitulo a esquerda, UM botao primario * a direita (Documento 05 secao 3.6). */ .pagina-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; } .pagina-cab .acoes{ display:flex; gap:10px; flex-wrap:wrap } .filtros{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px } .filtros input,.filtros select{ padding:9px 11px; border:1px solid var(--linha); border-radius:var(--raio-sm); font-family:inherit; font-size:14px; background:var(--branco); color:var(--texto); } .filtros input{ min-width:240px } .aviso-limite{ font-size:12px; color:var(--cinza-2); margin-top:8px } /* Bloco de duas colunas que vira uma no notebook (escada oficial). */ .cards-2{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px } /* ===================================================================== * TELA DE CAM — o esqueleto que o NUCLEO preenche. * * A navegacao, a permissao e a chamada de API destas telas funcionam de * verdade; o desenho (editor de geometria, previa do nesting, simulacao * do percurso) e escrito por quem faz o nucleo CAM. O palco existe aqui * para que a moldura nao precise mudar quando o conteudo chegar. * ===================================================================== */ .palco-cam{ border:1px dashed var(--linha); border-radius:var(--raio); background:var(--branco); min-height:320px; display:grid; place-items:center; text-align:center; padding:32px 20px; color:var(--cinza-2); } .palco-cam h3{ color:var(--texto); margin-bottom:6px } .palco-cam p{ max-width:52ch; margin:0 auto } /* ===================================================================== * ASSISTENTE KRIGS — lampada flutuante e painel lateral. * Constituicao secao 22: uma lampada no canto inferior direito, dentro * do sistema, NUNCA na tela de entrada, e nenhuma entrada de menu. * ===================================================================== */ .ak-botao{ position:fixed; right:20px; bottom:20px; z-index:90; width:52px; height:52px; border-radius:50%; background:var(--azul-2); color:var(--branco); border:0; cursor:pointer; display:grid; place-items:center; box-shadow:var(--sombra-lg); } .ak-botao:hover{ background:var(--azul) } .ak-botao[hidden]{ display:none } .ak-painel{ position:fixed; top:0; right:0; bottom:0; z-index:95; width:420px; max-width:100vw; background:var(--branco); color:var(--texto); border-left:1px solid var(--linha); box-shadow:var(--sombra-lg); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease; } .ak-painel.aberto{ transform:none } .ak-painel[hidden]{ display:none } .ak-painel .ak-cab{ background:var(--grad-institucional); color:var(--branco); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; } .ak-painel .ak-cab b{ font-size:15px } .ak-painel .ak-cab button{ background:none; border:0; color:var(--branco); cursor:pointer } .ak-painel .ak-busca{ padding:14px 18px; border-bottom:1px solid var(--linha) } .ak-painel .ak-busca input{ width:100%; padding:10px 12px; border:1px solid var(--linha); border-radius:var(--raio-sm); font-family:inherit; font-size:15px; background:var(--branco); color:var(--texto); } /* Rolagem CONTIDA: nao "vaza" para a pagina (Documento 05 secao 3.14). */ .ak-painel .ak-corpo{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 18px } .ak-artigo{ border-bottom:1px solid var(--linha); padding:12px 0 } .ak-artigo:last-child{ border-bottom:0 } .ak-artigo h4{ font-size:14px; margin-bottom:4px } .ak-artigo .disciplina{ font-size:11px; color:var(--cinza-2); text-transform:uppercase } .ak-artigo ol{ margin:8px 0 0 18px; font-size:13.5px; color:var(--cinza) } .ak-artigo ol li{ margin-bottom:4px } /* A classe que TRAVA a rolagem do fundo com o painel aberto. Ela existe * na folha de estilo de proposito: um sistema da plataforma aplicou esta * classe pelo JavaScript durante duas versoes sem que houvesse regra * nenhuma para ela, e o efeito simplesmente nao acontecia. Classe escrita * e contrato, e um teste de convencao confere que a regra existe. */ body.sem-rolagem{ overflow:hidden } /* Cobertura da gaveta no celular. */ .cobertura{ position:fixed; inset:0; z-index:40; background:var(--cobertura); border:0; padding:0; } .cobertura[hidden]{ display:none } /* Botao de gaveta: some no desktop. */ .hamburguer{ display:none } /* ===================================================================== * RESPONSIVIDADE — a escada oficial. O produto so trata os degraus da * MOLDURA; tabela, formulario, campo e indicador ja sao tratados pelos * componentes oficiais. * ===================================================================== */ @media (max-width:1100px){ .cards-2{ grid-template-columns:1fr } } @media (max-width:860px){ #app{ grid-template-columns:1fr } .sidebar{ position:fixed; top:0; left:0; bottom:0; width:min(82vw,var(--nav-w)); z-index:50; transform:translateX(-100%); transition:transform .22s ease; } .sidebar.aberta{ transform:none; box-shadow:var(--sombra-lg) } .topbar,#conteudo{ grid-column:1 } .hamburguer{ display:inline-flex } .user-chip .quem{ display:none } .ak-painel{ width:100vw } } @media (max-width:560px){ .topbar{ padding:0 12px; gap:8px } .topbar h2{ font-size:15px } .filtros input{ min-width:0; width:100% } } /* ===================================================================== * IMPRESSAO — a moldura some; o conteudo vai ao papel. * O resto do bloco de impressao esta em krigs-componentes.css. * ===================================================================== */ @media print{ #app{ display:block; height:auto } .sidebar,.topbar,.ak-botao,.ak-painel,.cobertura,#tela-entrada, .pagina-cab .acoes,.filtros,.hamburguer,.empresa-switch,.aviso-limite{ display:none !important; } #conteudo{ overflow:visible } }