/* ============================================================================================= FRS — versao web Paleta do ManualdaMarca.pdf: PRETO, GRAFITE, BEGE, OFF-WHITE, BRANCO. DOIS TEMAS, e o CLARO e o padrao. Razao dada pelo usuario em 2026-09-01: no gerador o fundo escuro faz sentido (ambiente de desenho, como o model space do AutoCAD), mas num ERP cheio de formulario e tabela ele "fica carregado". A logica se inverte em relacao ao gerador. Como o tema e escolhido, em ordem: 1. o que a pessoa escolheu no botao (fica no localStorage) 2. a preferencia do sistema operacional (prefers-color-scheme) 3. claro O atributo data-tema no e aplicado por um script no , ANTES de pintar a tela — senao a pagina pisca no tema errado a cada carregamento. LAYOUT: barra lateral recolhivel + topo com busca. Pensado para funcionar igual em computador, tablet e celular (inclusive iOS) — pedido do usuario. Nao ha duas interfaces: a MESMA estrutura se adapta, e no celular a barra vira gaveta. A OSKAR ONE vem do Adobe Fonts (Creative Cloud) e so existe nas maquinas com a fonte ativada; onde faltar, cai em Century Gothic, que e geometrica como ela e existe no Windows. ============================================================================================= */ /* ---------- TEMA CLARO (padrao) ---------- */ :root { --bg: #D7D2C8; /* OFF-WHITE — manual */ --panel: #FFFFFF; /* BRANCO — manual */ --panel-2: #F0EDE6; --line: #C0BAAA; --line-soft: #DAD5CA; --text: #232323; /* GRAFITE — manual */ --dim: #6E6A5E; --accent: #232323; /* no claro, o destaque e o GRAFITE */ --accent-txt: #D7D2C8; --accent-fraco: rgba(35,35,35,.07); --campo-bg: #FFFFFF; --ok: #2f7a3f; --erro: #a8422c; --aviso: #8a6a1f; --sombra: 0 1px 3px rgba(0,0,0,.10); --sombra-forte: 0 10px 40px rgba(0,0,0,.20); --f-tit: 'Oskar One', 'Century Gothic', sans-serif; --f-txt: system-ui, 'Segoe UI', sans-serif; --f-mono: 'Cascadia Mono', Consolas, monospace; --w-lateral: 244px; --w-lateral-min: 58px; } /* ---------- TEMA ESCURO ---------- */ :root[data-tema="escuro"] { --bg: #000000; /* PRETO — manual */ --panel: #232323; /* GRAFITE — manual */ --panel-2: #2e2e2e; --line: #3a3a3a; --line-soft: #262626; --text: #D7D2C8; /* OFF-WHITE — manual */ --dim: #979183; --accent: #AAA591; /* no escuro, o destaque e o BEGE */ --accent-txt: #000000; --accent-fraco: rgba(170,165,145,.13); --campo-bg: #000000; --ok: #7fbf7f; --erro: #d98b7a; --aviso: #ddc07a; --sombra: 0 1px 3px rgba(0,0,0,.45); --sombra-forte: 0 10px 40px rgba(0,0,0,.6); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-txt); font-size: 14px; line-height: 1.6; -webkit-text-size-adjust: 100%; /* iOS nao aumenta a fonte sozinho ao girar a tela */ } h1 { font-family: var(--f-tit); font-weight: 600; font-size: 24px; letter-spacing: .03em; margin: 0 0 6px; } h2 { font-family: var(--f-tit); font-weight: 600; font-size: 13px; letter-spacing: .12em; color: var(--dim); margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .sub { color: var(--dim); margin: 0 0 18px; } .nota { color: var(--dim); font-size: 13px; } .ok { color: var(--ok); } .erro { color: var(--erro); } .aviso { color: var(--aviso); } /* ============================================================================================= TELAS DE ENTRADA (login, empresa) ============================================================================================= */ body.entrada { display: flex; align-items: center; justify-content: center; min-height: 100vh; } body.entrada main { width: min(390px, 92vw); } .marca-topo { text-align: center; margin-bottom: 22px; } .marca-topo .logo { display: block; width: 62px; height: auto; margin: 0 auto 12px; opacity: .92; } /* O PNG do logo tem o traco CLARO (feito para o tema escuro). No claro ele precisa ser invertido — o mesmo truque que os mockups do gerador usaram. */ :root:not([data-tema="escuro"]) .logo { filter: invert(1) brightness(.15); } .marca-grande { font-family: var(--f-tit); font-weight: 600; font-size: 21px; letter-spacing: .16em; text-align: center; color: var(--text); } .cartao-login, .cartao { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 26px 28px; box-shadow: var(--sombra); } .cartao-login label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 14px 0 5px; } .cartao-login select, .cartao-login input { width: 100%; background: var(--campo-bg); border: 1px solid var(--line); border-radius: 4px; color: var(--text); font: inherit; padding: 9px 11px; } .cartao-login select:focus, .cartao-login input:focus { outline: none; border-color: var(--accent); } /* "Salvar e-mail neste computador" — a caixinha e o texto na MESMA linha. Sem isto a regra de cima (label em bloco, input com width 100%) empilharia os dois e a caixa sairia do tamanho do campo de texto. */ .cartao-login label.lembrar { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; font-size: 12.5px; margin: 16px 0 0; cursor: pointer; } .cartao-login label.lembrar input[type="checkbox"] { width: auto; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; } button, .botao { display: block; width: 100%; margin-top: 22px; background: var(--accent); color: var(--accent-txt); border: none; border-radius: 4px; font-family: var(--f-tit); font-weight: 600; font-size: 14px; letter-spacing: .05em; padding: 11px; cursor: pointer; text-align: center; text-decoration: none; } button:hover, .botao:hover { filter: brightness(1.15); } /* O contador de tentativas, na tela de login (2026-09-14). Sai na cor de AVISO, e nao de erro: ele nao e uma falha nova, e a contagem do que ainda resta. */ .cartao-login .tentativas { color: var(--aviso); font-size: 12.5px; margin: -6px 0 0; } .erro-campo { color: var(--erro); font-size: 12px; } .empresas { list-style: none; margin: 6px 0 0; padding: 0; } .empresas li { margin-bottom: 8px; } .empresas button { margin: 0; background: var(--panel-2); color: var(--text); text-align: left; font-family: var(--f-txt); font-weight: 400; letter-spacing: 0; border: 1px solid var(--line); /* UMA LINHA por empresa: nomes longos quebravam em duas e deixavam a lista irregular (pedido do usuario). Passando do espaco, corta com reticencias. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 12px; } .empresas button:hover { border-color: var(--accent); filter: none; } /* ============================================================================================= APLICACAO — barra lateral + topo + conteudo ============================================================================================= */ body.app { display: grid; grid-template-columns: var(--w-lateral) 1fr; min-height: 100vh; transition: grid-template-columns .24s cubic-bezier(.4, 0, .2, 1); } body.app.lateral-recolhida { grid-template-columns: var(--w-lateral-min) 1fr; } /* Quem prefere menos movimento nao ve animacao nenhuma — vale para as tres transicoes daqui. */ @media (prefers-reduced-motion: reduce) { body.app, .lateral, .menu-cab .tx, .marca, .lateral-pe .busca-abrir .txt { transition: none !important; } } .lateral { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } /* Recolhida a barra de rolagem come 11px dos 58 e joga TODOS os icones para a esquerda (medido: centro em 23,5 onde deveria ser 29). Some a barra, fica a rolagem pela roda. */ body.app.lateral-recolhida .lateral { scrollbar-width: none; } body.app.lateral-recolhida .lateral::-webkit-scrollbar { width: 0; height: 0; } .lateral-topo { display: flex; align-items: center; gap: 8px; padding: 11px 12px 11px 16px; border-bottom: 1px solid var(--line); } .marca-link { flex: 1; min-width: 0; overflow: hidden; } .marca-link { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); transition: gap .24s cubic-bezier(.4,0,.2,1); } .lateral-topo .logo { height: 24px; width: auto; opacity: .92; flex: 0 0 auto; } .lateral-topo .marca { font-family: var(--f-tit); font-weight: 600; font-size: 16px; letter-spacing: .14em; white-space: nowrap; opacity: 1; max-width: 200px; overflow: hidden; transition: opacity .18s ease, max-width .24s cubic-bezier(.4,0,.2,1); } .lateral nav { padding: 8px 0; flex: 1; } /* ---- um MENU (o equivalente a um item de primeiro nivel do MDIPrincipal) ---- */ .menu-cab { display: flex; align-items: center; gap: 10px; transition: gap .24s cubic-bezier(.4,0,.2,1); width: 100%; margin: 0; padding: 7px 14px; /* compacto: eram 9 px (11/10) */ background: transparent; color: var(--text); border: none; border-radius: 0; font-family: var(--f-tit); font-weight: 600; font-size: 13.5px; letter-spacing: .03em; text-align: left; cursor: pointer; } .menu-cab:hover { background: var(--accent-fraco); filter: none; } .menu-cab .ic { width: 18px; text-align: center; color: var(--dim); flex: 0 0 auto; } .menu-cab .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; max-width: 300px; transition: opacity .18s ease, max-width .24s cubic-bezier(.4,0,.2,1); } .menu-cab .conta { font-size: 10px; font-family: var(--f-mono); color: var(--accent-txt); background: var(--accent); border-radius: 9px; padding: 1px 6px; flex: 0 0 auto; } .menu-cab .seta { color: var(--dim); transition: transform .15s ease; flex: 0 0 auto; } .menu.aberto .menu-cab .seta { transform: rotate(90deg); } .menu.aberto .menu-cab { color: var(--text); font-weight: 600; } .menu-itens { display: none; padding-bottom: 4px; } .menu.aberto .menu-itens { display: block; } .item { display: block; padding: 5px 12px 5px 32px; /* compacto: eram 7 px (11/10) */ color: var(--text); text-decoration: none; font-family: var(--f-tit); font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid transparent; } a.item:hover { background: var(--accent-fraco); } .item.ativo { background: var(--accent-fraco); border-left-color: var(--accent); font-weight: 600; } /* Tela ainda NAO migrada: aparece, mas apagada e sem clique — e o mapa do que falta. */ .item.vindo { color: var(--dim); opacity: .55; cursor: default; } .lateral-pe { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--line); } .lateral-pe .busca-abrir { width: 100%; min-width: 0;; transition: gap .24s cubic-bezier(.4,0,.2,1); } .lateral-pe .busca-abrir .txt { opacity: 1; max-width: 200px; overflow: hidden; white-space: nowrap; transition: opacity .18s ease, max-width .24s cubic-bezier(.4,0,.2,1); } .lateral-pe .progresso { opacity: 1; max-width: 200px; overflow: hidden; transition: opacity .18s ease, max-width .24s cubic-bezier(.4,0,.2,1); } .progresso { font-size: 11px; color: var(--dim); white-space: nowrap; } /* ---- RECOLHIDA: a faixa de icones ---- Pedido do usuario: *"manter uma faixa com largura minima de um icone e, quando o menu ficar retratil, vc exibe os icones ao inves de mostrar somente os nomes"*. Aqui o icone e a UNICA informacao, entao ele ganha a cor do TEXTO (nao a --dim de quando ha um nome ao lado) e o menu da tela aberta fica marcado — senao a faixa nao diz onde se esta. */ body.app.lateral-recolhida .menu-itens { display: none; } /* O texto sai por OPACIDADE, nao por display — display nao anima, e a barra pularia. Ele e espremido pela coluna do grid (flex:1 + min-width:0) enquanto desaparece. */ body.app.lateral-recolhida .menu-cab .tx, body.app.lateral-recolhida .lateral-topo .marca, body.app.lateral-recolhida .lateral-pe .busca-abrir .txt, body.app.lateral-recolhida .lateral-pe .progresso { opacity: 0; max-width: 0; } body.app.lateral-recolhida .lateral-pe kbd { display: none; } body.app.lateral-recolhida .menu-cab .seta { display: none; } body.app.lateral-recolhida .menu-cab { padding: 11px 0; justify-content: center; position: relative; gap: 0; } body.app.lateral-recolhida .menu-cab .ic { color: var(--text); font-size: 16px; width: auto; } /* O cabecalho EMPILHA: em 58px o losango e o ☰ nao cabem lado a lado, e os dois precisam continuar clicaveis — um leva ao inicio, o outro reabre a barra. */ body.app.lateral-recolhida .lateral-topo { flex-direction: column; gap: 8px; padding: 12px 0; } body.app.lateral-recolhida .marca-link { justify-content: center; gap: 0; } body.app.lateral-recolhida .lateral-pe { padding: 10px 8px; align-items: stretch; } body.app.lateral-recolhida .lateral-pe .busca-abrir { justify-content: center; padding: 8px 0; gap: 0; } body.app.lateral-recolhida .lateral-pe .progresso { height: 0; margin: 0; } /* A contagem vira um PONTO no canto do icone: o numero nao cabe em 58px, mas "tem tela aqui" e justamente o que orienta durante a migracao. */ body.app.lateral-recolhida .menu-cab .conta { position: absolute; top: 7px; right: 12px; width: 6px; height: 6px; padding: 0; border-radius: 50%; font-size: 0; overflow: hidden; } /* O menu da tela ATUAL fica marcado — recolhida, e o unico jeito de saber onde se esta. */ body.app.lateral-recolhida .menu.aberto .menu-cab { background: var(--accent-fraco); box-shadow: inset 2px 0 0 var(--accent); } .area { display: flex; flex-direction: column; min-width: 0; } header.topo { display: flex; align-items: center; gap: 12px; padding: 11px 20px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } /* O ☰ e o UNICO controle da barra, nos dois tamanhos: no computador recolhe para icones, no celular abre a gaveta. Antes havia um ‹ no rodape da barra, que o usuario nao achou — *"ele nao esta retratil e esta sem os 3 tracos de identificacao de menu"*. */ .hamburguer { width: auto; margin: 0; padding: 6px 10px; flex: 0 0 auto; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 4px; font-size: 16px; line-height: 1; } .hamburguer:hover { border-color: var(--accent); filter: none; } /* No computador a barra esta na tela e o ☰ dela basta; no celular ela e uma gaveta fora da tela, e o botao dela nao alcanca — dai o segundo, no topo. */ .so-celular { display: none; } /* O topo perdeu a busca (foi para o rodape da barra) e ganhou o nome da tela aberta. */ .onde-estou { flex: 0 0 auto; font-family: var(--f-tit); font-size: 14px; letter-spacing: .06em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* FECHAR A TELA (2026-09-20) — devolve o comportamento do desktop, onde toda tela fecha e volta ao inicio. Fica colado ao NOME DA TELA, longe do botao de sair: sao acoes opostas. */ .fechar-tela { flex: 0 0 auto; margin-left: 2px; color: var(--dim); text-decoration: none; font-size: 13px; line-height: 1; border: 1px solid transparent; border-radius: 4px; padding: 3px 6px; } .fechar-tela:hover { color: var(--text); border-color: var(--line); background: var(--accent-fraco); } /* O SELO DE AMBIENTE. So aparece fora de producao, e nao pode ser discreto: a tela de teste e IDENTICA a de verdade, e trabalhar horas na errada e o tipo de erro que so se descobre tarde. Por isso ele usa o vermelho de alerta, e nao a paleta da marca. */ .selo-ambiente { flex: 0 0 auto; padding: 3px 9px; border-radius: 4px; background: var(--erro); color: #fff; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; } /* Na tela de ENTRADA o aviso e uma FAIXA, nao um selo: ali ha espaco, e e o momento em que a confusao custa mais caro — quem digita a senha achando que esta no sistema de verdade so descobre depois. */ .faixa-ambiente { margin: 0 auto 18px; padding: 7px 16px; border-radius: 6px; max-width: 380px; background: var(--erro); color: #fff; text-align: center; font-family: var(--f-txt); font-size: 12.5px; } .faixa-ambiente b { font-family: var(--f-mono); letter-spacing: .1em; } /* Uma borda em volta da janela inteira, para nao restar duvida nem de relance. */ body.eh-teste { box-shadow: inset 0 0 0 3px var(--erro); } /* O CONTEXTO da tela aberta — hoje a C.L. que o gerador mandou por postMessage. Ele fica ao lado do titulo porque e isso que uma barra de titulo faz: dizer QUAL documento esta aberto. Antes essa informacao vivia numa segunda barra, dentro do gerador, que repetia o logo e o nome da empresa — 190px de barras empilhadas para mostrar duas vezes a mesma coisa. */ .contexto { flex: 1; min-width: 0; margin: 0; padding: 5px 12px; text-align: left; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-family: var(--f-txt); font-weight: 400; font-size: 12.5px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contexto:hover { border-color: var(--accent); filter: none; } .contexto b { font-family: var(--f-tit); font-weight: 600; letter-spacing: .03em; } .contexto .ct-sub { color: var(--dim); margin-left: 6px; } .contexto.vazio b { color: var(--dim); font-weight: 500; } .contexto[hidden] { display: none; } .busca-abrir { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; margin: 0; padding: 7px 12px; background: var(--bg); color: var(--dim); border: 1px solid var(--line); border-radius: 6px; font-family: var(--f-txt); font-weight: 400; font-size: 13px; letter-spacing: 0; text-align: left; } .busca-abrir:hover { border-color: var(--accent); filter: none; } .busca-abrir .lupa { font-size: 15px; } .busca-abrir .txt { flex: 1; } .busca-abrir kbd { font-family: var(--f-mono); font-size: 10.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; } header.topo .quem { margin-left: auto; text-align: right; font-size: 11.5px; line-height: 1.35; color: var(--dim); } header.topo .quem b { color: var(--text); font-weight: 600; } .sair { color: var(--dim); text-decoration: none; font-size: 16px; border: 1px solid var(--line); border-radius: 4px; padding: 5px 9px; line-height: 1; display: inline-flex; align-items: center; } .sair:hover { color: var(--erro); border-color: var(--erro); } .tema { width: auto; margin: 0; padding: 6px 10px; background: transparent; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; font-family: var(--f-txt); font-size: 15px; line-height: 1; letter-spacing: 0; } .tema:hover { border-color: var(--accent); color: var(--text); filter: none; } body.entrada .tema { position: fixed; top: 16px; right: 18px; margin: 0; } main.conteudo { padding: 28px 24px; flex: 1; } .centro { max-width: 820px; } /* ============================================================================================= O GERADOR DE PLANTAS ============================================================================================= Ele ocupa a area de conteudo INTEIRA: sem o respiro do .conteudo e sem rolagem propria — quem rola e faz zoom e o gerador, por dentro. A altura sai de 100dvh menos o topo. DVH e nao VH: no iOS a barra do Safari entra e sai, o vh nao acompanha, e um pedaco do desenho ficaria debaixo dela. */ /* A altura do iframe sai do LAYOUT, nao de uma conta com a altura do topo: escrito a mao, o numero errou por 1px (contei o padding e o conteudo e esqueci a BORDA de 1px do topo), o documento ficou 961px numa janela de 960 e apareceu uma barra de rolagem na direita. Com o main crescendo (flex:1) e o iframe a 100% dele, qualquer mudanca no topo e absorvida. */ body.app:has(#gerador) { height: 100dvh; overflow: hidden; } body:has(#gerador) main.conteudo { padding: 0; overflow: hidden; flex: 1; min-height: 0; } #gerador { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); } /* ============================================================================================= BUSCA (Ctrl+K) ============================================================================================= */ .busca { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } /* O atributo hidden aplica display:none com especificidade BAIXA — o display:flex acima vencia e a busca nascia aberta. */ .busca[hidden] { display: none; } .busca-caixa { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--sombra-forte); overflow: hidden; } .busca-caixa input { width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 16px; padding: 15px 18px; } .busca-caixa input:focus { outline: none; } .busca-caixa ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; } .busca-caixa li { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 5px; cursor: pointer; } .busca-caixa li .ic { color: var(--dim); width: 18px; text-align: center; } .busca-caixa li.sel { background: var(--accent-fraco); } .busca-caixa li.vazio { color: var(--dim); cursor: default; } /* O item e um LINK ocupando a linha inteira: e ele que da o Ctrl+clique e o botao do meio de graca. O
  • vira so a moldura. */ .busca-caixa li { padding: 0; } .busca-caixa li > a, .busca-caixa li.vindo, .busca-caixa li.vazio { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; color: inherit; text-decoration: none; } .busca-dica { padding: 8px 14px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; text-align: center; } .busca-dica kbd { font-family: var(--f-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); } /* Tela ainda NAO migrada: aparece na busca, apagada e sem clique — a busca tambem e mapa do que falta, senao "nada encontrado" nao distingue "nao existe" de "ainda nao veio". */ .busca-caixa li.vindo { color: var(--dim); opacity: .55; cursor: default; } .busca-caixa li.vindo:hover { background: transparent; } .busca-caixa li .onde { margin-left: auto; font-size: 11px; color: var(--dim); font-family: var(--f-mono); white-space: nowrap; flex: 0 0 auto; } /* ============================================================================================= CONTEUDO ============================================================================================= */ dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; margin: 0; } dt { color: var(--dim); } dd { margin: 0; font-family: var(--f-mono); font-size: 13px; word-break: break-word; } pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 12px; overflow-x: auto; font-family: var(--f-mono); font-size: 12.5px; white-space: pre-wrap; color: var(--dim); } /* OS AVISOS DA TELA INICIAL (2026-09-24 — Servicos/AvisosInicio.cs): uma faixa por aviso, com a barra da cor do nível à esquerda. `aviso` = chegando; `erro` = já passou. */ .avisos-inicio { margin: 22px 0 6px; display: flex; flex-direction: column; gap: 8px; } .aviso-inicio { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); border-left: 4px solid var(--aviso); background: var(--panel); } .aviso-inicio b { color: var(--aviso); font-size: 13.5px; } .aviso-inicio span { font-size: 13px; color: var(--text); } .aviso-inicio.aviso-erro { border-left-color: var(--erro); } .aviso-inicio.aviso-erro b { color: var(--erro); } /* OS ANIVERSARIANTES (2026-09-24): o de HOJE em destaque (cartão com a cor da casa), os da semana numa lista compacta, com o dia à esquerda. Os que já passaram ficam um tom abaixo. */ .niver { margin: 22px 0 6px; } .niver-hoje { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 8px; border-radius: 10px; background: var(--accent-fraco, var(--panel)); border: 1px solid var(--accent); } .niver-bolo { font-size: 30px; line-height: 1; } .niver-hoje b { font-size: 16px; } .niver-hoje span { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; } .niver-hoje span b { font-size: inherit; color: var(--accent); } .niver-semana { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); } .niver-semana li { display: flex; align-items: baseline; gap: 12px; padding: 7px 14px; font-size: 13px; border-bottom: 1px solid var(--line-soft); } .niver-semana li:last-child { border-bottom: none; } .niver-semana .niver-dia { flex: 0 0 170px; color: var(--dim); font-size: 12px; } .niver-semana .niver-nome { font-weight: 600; } .niver-semana li.passou { opacity: .7; } @media (max-width: 560px) { .niver-semana li { flex-wrap: wrap; gap: 2px 10px; } .niver-semana .niver-dia { flex-basis: 100%; } } .modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; } .modulo { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; text-decoration: none; color: var(--text); box-shadow: var(--sombra); } .modulo:hover { border-color: var(--accent); } .modulo .nome { font-family: var(--f-tit); font-weight: 600; letter-spacing: .04em; font-size: 15px; } .modulo .desc { color: var(--dim); font-size: 12.5px; margin-top: 3px; } /* "Comercial · 5 min" — de que menu a tela e, e ha quanto tempo foi aberta. */ .modulo .quando { color: var(--dim); font-size: 11.5px; margin-top: 4px; font-family: var(--f-mono); } footer.rodape { padding: 0 24px 26px; color: var(--dim); font-size: 12px; } .fundo-gaveta { display: none; } /* ============================================================================================= CELULAR E TABLET — a barra lateral vira GAVETA ============================================================================================= */ @media (max-width: 860px) { body.app, body.app.lateral-recolhida { grid-template-columns: 1fr; } .lateral { position: fixed; top: 0; left: 0; z-index: 50; width: min(280px, 84vw); height: 100dvh; /* dvh: no iOS a barra do Safari nao corta */ transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--sombra-forte); } body.app.gaveta-aberta .lateral { transform: none; } /* Em gaveta a barra e sempre INTEIRA: recolher para icones nao faz sentido num overlay — ele ja cobre o conteudo, entao ou esta aberto ou nao esta na tela. */ body.app.lateral-recolhida .lateral-topo .marca, body.app.lateral-recolhida .menu-cab .tx, body.app.lateral-recolhida .lateral-pe .busca-abrir .txt, body.app.lateral-recolhida .lateral-pe .progresso { opacity: 1; } body.app.lateral-recolhida .menu-cab .seta, body.app.lateral-recolhida .menu-cab .conta { display: revert; } body.app.lateral-recolhida .menu.aberto .menu-itens { display: block; } body.app.lateral-recolhida .menu-cab { justify-content: flex-start; padding: 9px 14px; } body.app.lateral-recolhida .lateral-topo { flex-direction: row; gap: 8px; padding: 11px 12px 11px 16px; } body.app.lateral-recolhida .lateral-pe { padding: 10px 12px; align-items: stretch; } body.app.lateral-recolhida .lateral-pe .busca-abrir { justify-content: flex-start; padding: 9px 12px; } body.app.lateral-recolhida .lateral-pe .progresso { height: auto; } body.app.lateral-recolhida .marca-link { justify-content: flex-start; } .so-celular { display: block; } /* o ☰ do topo, que alcanca a gaveta */ .fundo-gaveta { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); } .fundo-gaveta[hidden] { display: none; } /* A BARRA DO TOPO TEM DE CABER EM 375px (2026-09-22). O nome da tela nao encolhia (`flex: 0 0 auto`), e "Climatizacoes ADC" empurrava o botao de sair 13px para fora. Pior que o botao cortado: com a pagina mais larga que a tela, o celular REDUZ O ZOOM para caber, a area util vira 388x840 — e tudo o que e preso ao pe da tela (o "Anotar" das Climatizacoes, os rodapes das fichas) passava da borda de baixo. Agora o nome encolhe com reticencias. */ header.topo { gap: 8px; padding: 9px 12px; } .onde-estou { flex: 0 1 auto; min-width: 0; font-size: 13px; } /* Encolhe mas nao estica — o ✕ fica colado ao nome. Quem empurra os botoes para a direita e o tema, ja que o `.quem` (que fazia isso no computador) some no celular. */ header.topo .tema { margin-left: auto; } .selo-ambiente { padding: 3px 7px; } .busca-abrir kbd { display: none; } /* nao ha Ctrl+K no celular */ header.topo .quem { display: none; } /* o nome fica na gaveta, nao no topo apertado */ .contexto .ct-sub { display: none; } /* o numero da C.L. cabe; o cliente nao */ main.conteudo { padding: 20px 16px; } .busca { padding: 8vh 12px 12px; } .modulos { grid-template-columns: 1fr; } dl { grid-template-columns: 1fr; gap: 2px 0; } dt { margin-top: 8px; } } /* AVISOS FLUTUANTES (28/09 — wwwroot/js/avisos.js): fixos no pé da tela, sempre visíveis. */ .frs-avisos { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; gap: 8px; max-width: min(460px, calc(100vw - 36px)); pointer-events: none; } .frs-aviso { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px 11px 13px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: frs-aviso-entra .18s ease-out; transition: opacity .3s, transform .3s; } .frs-aviso.ok { background: #2f7a3f; } .frs-aviso.erro { background: #b3261e; } .frs-aviso.aviso { background: #8a6a1f; } .frs-aviso.saindo { opacity: 0; transform: translateY(6px); } .frs-aviso-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; margin-top: 1px; } .frs-aviso-tx { flex: 1; } .frs-aviso-x { flex: none; border: none; background: transparent; color: #fff; opacity: .8; cursor: pointer; font-size: 13px; padding: 0 2px; margin: 0; width: auto; } .frs-aviso-x:hover { opacity: 1; } @keyframes frs-aviso-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .frs-avisos { left: 12px; right: 12px; bottom: 12px; max-width: none; } } /* faixa "sua sessão expirou" da tela do gerador (gerador-sessao.js, 2026-09-29) */ .ger-sessao { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: min(640px, calc(100vw - 32px)); background: var(--erro); color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: var(--sombra-forte); font-size: 13.5px; line-height: 1.45; } .ger-sessao a { color: #fff; text-decoration: underline; font-weight: 600; } /* ============================================================================================ JANELAS MODAIS — A FAIXA DE TÍTULO (2026-10-10) Pedido dele, comparando o aviso "Já existe OSP pronta no estoque" com a janela "Selecionar OSP": *"gostaria que vc padronizasse esse modelo com a faixa acima simulando o titulo em todas as mensagens modais do sistema"*. A faixa escura era só das janelas do pedido (`.pe-m-cab`, pedidos.css); as outras cinco famílias traziam o título como texto solto no corpo. FICA AQUI, no frs.css, porque é a única folha que TODA tela carrega — cada família mora na folha da sua tela (usuarios.css, climatizacoes.css, solicitacao.css, produtos.css). E por isso os seletores vêm com o elemento (`div.x > b.y`): a folha da tela é carregada DEPOIS e, com a mesma força, ganharia. Só CSS: nenhuma marcação mudou, então toda janela nova que usar uma destas classes já nasce com a faixa. As cores são as do cabeçalho do pedido (`--ped-cab-*`), repetidas aqui porque aquelas só existem lá. ============================================================================================ */ :root { --modal-cab-bg: #232323; --modal-cab-tx: #D7D2C8; } :root[data-tema="escuro"] { --modal-cab-bg: #3a3a3a; --modal-cab-tx: #D7D2C8; } /* Ficha.confirma / Ficha.aviso e as que reusam a caixa (copiar estrutura, histórico de preços, OSP em estoque) · SEFAZ */ div.fi-caixa > b.fi-titulo, div.fi-caixa > div.pro-hist-topo, div.sefaz-caixa > div.sefaz-topo { margin: -14px -16px 2px; padding: 9px 12px; border-radius: 11px 11px 0 0; background: var(--modal-cab-bg); color: var(--modal-cab-tx); font-size: 14px; } div.fi-caixa > b.fi-titulo { display: block; } div.fi-caixa > div.pro-hist-topo { align-items: center; } div.fi-caixa > div.pro-hist-topo .fi-titulo, div.sefaz-caixa > div.sefaz-topo b { font-size: 14px; } div.fi-caixa > div.pro-hist-topo .nota { color: inherit; opacity: .8; margin: 0; } div.fi-caixa > div.pro-hist-topo button, div.sefaz-caixa > div.sefaz-topo .sefaz-x { color: inherit; background: transparent; border-color: transparent; } /* Climatizações (perguntas com campos) */ div.modal > h2 { margin: -20px -20px 14px; padding: 9px 12px; border-radius: 12px 12px 0 0; background: var(--modal-cab-bg); color: var(--modal-cab-tx); font-size: 14px; /* o

    herda a fonte de título do sistema (maiúsculas espaçadas); na faixa o título é texto comum, como nas outras */ font-family: var(--f-txt); text-transform: none; letter-spacing: normal; font-weight: 700; } /* Solicitação: o título sobe para a faixa mesmo quando a marcação traz o selo antes dele */ div.sol-modal { display: flex; flex-direction: column; } div.sol-modal > h2 { order: -1; margin: -22px -24px 14px; padding: 9px 12px; border-radius: 12px 12px 0 0; background: var(--modal-cab-bg); color: var(--modal-cab-tx); font-size: 14px; font-weight: 700; } div.sol-modal > .sol-selo-ok { align-self: flex-start; margin-bottom: 8px; } /* ============================================================================================ MENU DE AÇÕES — O PADRÃO DO SISTEMA (2026-10-11) Todo menu suspenso de ações (o "⋯" de uma linha, um botão que abre opções) usa a classe `.menu-acoes`: botões como itens, `.sep` como separador. É COMPACTO por pedido dele — *"tente compactar um pouco a altura do menu, temos muito espaço entre os itens"* e, em seguida, *"pode aplicar isso para todos os menus do sistema"*. O espaço vinha do estilo geral de