/* ===================================================================== Talao de Pedidos - folha de estilo unica Pethos Tecnologia Direcao visual: "instrumento de grafica". Cromo escuro cor de tinta, area de trabalho cor de papel, um unico acento ambar queimado. O numero e o protagonista - tudo que e dinheiro usa figuras tabulares para alinhar coluna a coluna. Tipografia: Space Grotesk (titulos, marca, numeros) + IBM Plex Sans (corpo e tabelas densas). Carregadas no , com fallback completo. ===================================================================== */ :root { /* --- tinta: o cromo escuro (topo e menu) --- */ --tinta-900: #0d1117; --tinta-800: #141c26; --tinta-700: #1d2836; --tinta-600: #2b3a4b; /* --- papel: a area de trabalho --- */ --papel: #f1f3f6; --papel-2: #e9edf2; --branco: #fff; /* --- acento: ambar queimado (marca de registro, tinta) --- */ --ambar: #d2751a; --ambar-vivo: #f0a03c; --ambar-fraco: #fdf3e7; /* --- nomes historicos: o PHP referencia var(--acento) e var(--alerta) inline (painel.php, pedidos.php, importacao.php, pedido.php), entao estes precisam continuar existindo com o mesmo nome --- */ --azul: #141c26; --azul-claro: #2f6ea8; --acento: #0d8a63; --acento-fraco:#e8f5f0; --alerta: #b3261e; --alerta-fraco:#fdeceb; --aviso: #8a6100; --aviso-fraco: #fdf5e2; --texto: #16202c; --texto-fraco: #5a6a7c; --linha: #dde3ea; --fundo: #f1f3f6; --raio: 10px; --raio-p: 7px; --sombra: 0 1px 2px rgba(13,17,23,.05), 0 6px 18px -8px rgba(13,17,23,.18); --sombra-alta: 0 18px 48px -14px rgba(13,17,23,.32); --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --corpo: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --transicao: 160ms cubic-bezier(.4, 0, .2, 1); } * { box-sizing: border-box; } body { margin: 0; background: var(--papel); color: var(--texto); font: 400 13.5px/1.5 var(--corpo); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } /* dinheiro e quantidade sempre alinhados coluna a coluna */ .num, .valor, table.grade td, .cartao .valor { font-variant-numeric: tabular-nums; } a { color: var(--azul-claro); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--ambar); color: #fff; } /* ===================================================================== Estrutura ===================================================================== */ .topo { background: var(--tinta-900); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 56px; position: sticky; top: 0; z-index: 30; box-shadow: inset 0 -1px 0 rgba(255,255,255,.07); } .topo .marca { font-family: var(--display); font-weight: 700; letter-spacing: .06em; font-size: 14.5px; white-space: nowrap; display: flex; flex-direction: column; justify-content: center; position: relative; padding-left: 23px; } /* marca de registro (o crosshair de gráfica), desenhada em CSS */ .topo .marca::before { content: ""; position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin-top: -7px; background: linear-gradient(var(--ambar-vivo), var(--ambar-vivo)) no-repeat center / 1.5px 100%, linear-gradient(var(--ambar-vivo), var(--ambar-vivo)) no-repeat center / 100% 1.5px; border: 1.5px solid var(--ambar-vivo); border-radius: 50%; } .topo .marca small { font-family: var(--corpo); font-weight: 400; font-size: 10.5px; opacity: .55; letter-spacing: .04em; margin-top: 1px; } .topo .espaco { flex: 1; } .topo .usuario { font-size: 12.5px; text-align: right; line-height: 1.3; white-space: nowrap; } .topo .usuario b { display: block; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ambar-vivo); } .topo a { color: rgba(255,255,255,.6); display: inline-flex; padding: 6px; border-radius: 6px; transition: color var(--transicao), background var(--transicao); } .topo a:hover { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; } .topo a svg { width: 18px; height: 18px; display: block; } .abrir-menu { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; line-height: 0; border-radius: 6px; } .abrir-menu svg { width: 20px; height: 20px; display: block; } .abrir-menu:hover { background: rgba(255,255,255,.1); } /* 56px do topo + 38px do rodape: em tela curta o rodape encosta embaixo, em tela longa ele vem depois do conteudo */ .corpo { display: flex; min-height: calc(100vh - 56px - 38px); align-items: flex-start; } .rodape-app { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 24px; background: var(--tinta-900); color: rgba(255,255,255,.62); font-size: 11.5px; letter-spacing: .02em; } .rodape-app .ponto { opacity: .4; } .rodape-app .espaco { flex: 1; } .rodape-app .menor { color: rgba(255,255,255,.42); font-size: 11px; } .menu { width: 214px; flex: 0 0 214px; background: var(--tinta-800); padding: 10px 0 20px; position: sticky; top: 56px; max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tinta-600) transparent; } .menu a { display: flex; align-items: center; gap: 10px; padding: 8px 18px; color: rgba(255,255,255,.72); font-size: 13px; position: relative; transition: color var(--transicao), background var(--transicao); } .menu a span { width: 17px; height: 17px; flex: 0 0 17px; display: inline-flex; align-items: center; justify-content: center; opacity: .62; transition: opacity var(--transicao), color var(--transicao); } .menu a span svg { width: 16px; height: 16px; display: block; } .menu a:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; } .menu a:hover span { opacity: 1; } .menu a.ativo { background: rgba(210,117,26,.14); color: #fff; font-weight: 600; } .menu a.ativo span { opacity: 1; color: var(--ambar-vivo); } .menu a.ativo::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ambar-vivo); } .menu .grupo { padding: 16px 18px 6px; font-family: var(--display); font-size: 9.5px; text-transform: uppercase; /* .52 e o minimo que mantem o rotulo discreto e ainda passa no AA (4.5:1) */ letter-spacing: .16em; color: rgba(255,255,255,.55); font-weight: 700; } .conteudo { flex: 1; padding: 22px 24px 48px; min-width: 0; } h1 { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 4px; } h2 { font-family: var(--display); font-size: 15px; font-weight: 600; margin: 26px 0 11px; } .subtitulo { color: var(--texto-fraco); font-size: 13px; margin: 0 0 18px; } /* ===================================================================== Cartoes de indicador ===================================================================== */ .cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 13px; margin-bottom: 22px; } .cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 15px 16px 14px; position: relative; overflow: hidden; transition: border-color var(--transicao), box-shadow var(--transicao); } /* fio superior: neutro por padrao, colorido quando o cartao tem estado */ .cartao::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--linha); } .cartao:hover { border-color: #c6d0dc; box-shadow: var(--sombra); } .cartao .rotulo { font-family: var(--display); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: var(--texto-fraco); font-weight: 600; } .cartao .valor { font-family: var(--display); font-size: 25px; font-weight: 700; margin-top: 7px; letter-spacing: -.03em; line-height: 1.1; } .cartao .nota { font-size: 11.5px; color: var(--texto-fraco); margin-top: 3px; } .cartao.bom::before { background: var(--acento); } .cartao.bom .valor { color: var(--acento); } .cartao.ruim::before { background: var(--alerta); } .cartao.ruim .valor { color: var(--alerta); } /* ===================================================================== Paineis ===================================================================== */ .painel { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 20px; overflow: hidden; } .painel > header { padding: 12px 16px; border-bottom: 1px solid var(--linha); background: linear-gradient(var(--branco), #fbfcfd); font-family: var(--display); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--texto); display: flex; align-items: center; gap: 10px; } .painel > header .espaco { flex: 1; } /* texto auxiliar no cabecalho do painel (ex.: filial emissora) volta ao caixa normal - o versalete do header e so para o titulo */ .painel > header .menor, .painel > header small { font-family: var(--corpo); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11.5px; } .painel .interno { padding: 16px; } /* ===================================================================== Tabelas ===================================================================== */ .tabela-rolagem { overflow-x: auto; } table.grade { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.grade th { background: var(--papel-2); color: var(--texto); text-align: left; font-family: var(--display); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; padding: 9px 11px; border-bottom: 1px solid #cfd7e0; white-space: nowrap; } table.grade td { padding: 8px 11px; border-bottom: 1px solid #eef1f5; vertical-align: middle; } table.grade tbody tr { transition: background var(--transicao); } table.grade tbody tr:nth-child(even) td { background: #fafbfc; } table.grade tbody tr:hover td { background: var(--ambar-fraco); } /* fio de acento na linha sob o cursor */ table.grade tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow var(--transicao); } table.grade tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--ambar); } table.grade tfoot td { background: var(--tinta-800); color: #fff; font-weight: 600; border: 0; font-family: var(--display); } table.grade tfoot td a { color: var(--ambar-vivo); } .num { text-align: right; white-space: nowrap; } .menor { font-size: 11.5px; color: var(--texto-fraco); } .vazio { padding: 34px; text-align: center; color: var(--texto-fraco); font-size: 13px; } /* ===================================================================== Formularios ===================================================================== */ .linha-campos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 13px; } .campo { grid-column: span 3; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .campo.c1 { grid-column: span 1; } .campo.c2 { grid-column: span 2; } .campo.c3 { grid-column: span 3; } .campo.c4 { grid-column: span 4; } .campo.c5 { grid-column: span 5; } .campo.c6 { grid-column: span 6; } .campo.c7 { grid-column: span 7; } .campo.c8 { grid-column: span 8; } .campo.c9 { grid-column: span 9; } .campo.c10 { grid-column: span 10; } .campo.c12 { grid-column: span 12; } .campo label { font-family: var(--display); font-size: 10px; font-weight: 600; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .11em; } input, select, textarea { font: 400 13.5px/1.45 var(--corpo); padding: 8px 10px; border: 1px solid #c7d0db; border-radius: var(--raio-p); background: #fff; color: var(--texto); width: 100%; min-width: 0; transition: border-color var(--transicao), box-shadow var(--transicao); } input:hover, select:hover, textarea:hover { border-color: #aab7c6; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ambar); box-shadow: 0 0 0 3px rgba(210,117,26,.16); } input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--papel-2); color: var(--texto-fraco); border-color: var(--linha); } textarea { resize: vertical; min-height: 66px; } .botao { display: inline-flex; align-items: center; gap: 7px; justify-content: center; background: var(--tinta-800); color: #fff; border: 1px solid transparent; border-radius: var(--raio-p); padding: 9px 16px; font: 600 13px/1 var(--corpo); cursor: pointer; white-space: nowrap; transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao); } .botao:hover { background: var(--tinta-700); text-decoration: none; color: #fff; } .botao:active { transform: translateY(1px); } .botao:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(210,117,26,.35); } .botao.verde { background: var(--acento); } .botao.verde:hover { background: #0a7052; } .botao.claro { background: #fff; color: var(--texto); border-color: #c7d0db; } .botao.claro:hover { background: var(--papel); color: var(--texto); } .botao.perigo { background: var(--alerta); } .botao.perigo:hover { background: #971d17; } .botao.pequeno { padding: 6px 11px; font-size: 12px; } .botao:disabled { opacity: .45; cursor: not-allowed; transform: none; } .acoes { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; } /* ===================================================================== Avisos e etiquetas ===================================================================== */ .aviso { padding: 11px 14px; border-radius: var(--raio-p); margin-bottom: 15px; font-size: 13px; border: 1px solid; border-left-width: 3px; } .aviso.erro { background: var(--alerta-fraco); border-color: #eec3bf; border-left-color: var(--alerta); color: #8c1d17; } .aviso.ok { background: var(--acento-fraco); border-color: #b5ded0; border-left-color: var(--acento); color: #0a5c44; } .aviso.info { background: var(--ambar-fraco); border-color: #f0d9b8; border-left-color: var(--ambar); color: #8a5411; } .etiqueta { display: inline-block; padding: 3px 9px; border-radius: 20px; font-family: var(--display); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; background: var(--papel-2); color: var(--texto-fraco); white-space: nowrap; } .etiqueta.verde { background: var(--acento-fraco); color: #0a5c44; } .etiqueta.vermelha { background: var(--alerta-fraco); color: #8c1d17; } .etiqueta.amarela { background: var(--aviso-fraco); color: var(--aviso); } .etiqueta.azul { background: #e7eef7; color: #23486e; } /* ===================================================================== Busca com sugestoes ===================================================================== */ .busca { position: relative; } .sugestoes { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-p); box-shadow: var(--sombra-alta); max-height: 310px; overflow-y: auto; display: none; } .sugestoes.aberta { display: block; } .sugestoes div { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f2f4f7; font-size: 12.5px; border-left: 3px solid transparent; transition: background var(--transicao), border-color var(--transicao); } .sugestoes div:last-child { border-bottom: 0; } .sugestoes div:hover, .sugestoes div.marcado { background: var(--ambar-fraco); border-left-color: var(--ambar); } .sugestoes .cod { font-family: var(--display); font-weight: 700; color: var(--ambar); margin-right: 8px; font-size: 11.5px; } .sugestoes .extra { color: var(--texto-fraco); font-size: 11px; } /* ===================================================================== Login ===================================================================== */ .tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px 20px 60px; position: relative; /* ancora do .rodape-login */ background-color: var(--tinta-900); /* reticula de meio-tom: a textura da industria grafica */ background-image: radial-gradient(circle at center, rgba(210,117,26,.16) 1px, transparent 1.6px), radial-gradient(1100px 620px at 50% -10%, rgba(210,117,26,.13), transparent 65%); background-size: 22px 22px, 100% 100%; } .caixa-login { background: #fff; border-radius: 14px; box-shadow: var(--sombra-alta); width: 100%; max-width: 382px; padding: 34px 30px 30px; position: relative; } .caixa-login::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--ambar), var(--ambar-vivo)); } .rodape-login { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: rgba(255,255,255,.42); font-size: 11.5px; letter-spacing: .04em; } .caixa-login h1 { font-size: 22px; margin-bottom: 3px; } .caixa-login .subtitulo { margin-bottom: 22px; } .caixa-login .campo { margin-bottom: 14px; grid-column: span 12; } .caixa-login .botao { width: 100%; margin-top: 8px; padding: 11px 16px; } /* ===================================================================== Responsivo ===================================================================== */ @media (max-width: 900px) { .abrir-menu { display: block; } .menu { position: fixed; top: 56px; left: 0; bottom: 0; z-index: 25; transform: translateX(-100%); transition: transform .2s cubic-bezier(.4,0,.2,1); max-height: none; box-shadow: 8px 0 32px rgba(13,17,23,.4); } .menu.aberto { transform: translateX(0); } .conteudo { padding: 16px 13px 44px; } .topo { padding: 0 12px; gap: 10px; } .topo .usuario { font-size: 11.5px; } .campo { grid-column: span 6; } .campo.c1, .campo.c2, .campo.c3 { grid-column: span 6; } .campo.c4, .campo.c5, .campo.c6, .campo.c7, .campo.c8, .campo.c9, .campo.c10 { grid-column: span 12; } .cartoes { grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 10px; } .cartao .valor { font-size: 21px; } } @media (max-width: 560px) { .topo .marca { font-size: 12.5px; } .topo .marca small { display: none; } h1 { font-size: 18px; } .rodape-app { padding: 0 13px; font-size: 10.5px; } .rodape-app .menor { display: none; } } /* respeita quem pediu menos movimento no sistema */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ===================================================================== Impressao ===================================================================== */ @media print { .topo, .menu, .acoes, .nao-imprime, .rodape-app { display: none !important; } body { background: #fff; font-size: 11px; } .conteudo { padding: 0; } .painel { box-shadow: none; border: 1px solid #ccc; } .painel > header { background: #fff; } .cartao { break-inside: avoid; } table.grade tfoot td { background: #fff; color: #000; border-top: 2px solid #000; } }