:root { --azul: #1d3d5c; --azul-claro: #2f7fc1; --vermelho: #e3262d; --cinza: #d9d9d9; --fundo: #f3f5f8; --borda: #cfd6df; --texto: #1f2933; /* cores da tela que mudam no tema escuro */ --painel: #fff; /* fundo de cartões, campos e botões */ --texto-2: #445; /* rótulos */ --texto-3: #667; /* textos de apoio */ --texto-4: #889; /* textos apagados */ --titulo: var(--azul); /* títulos */ --primario-hover: #16304a; --ok: #2b7a3d; --apagado: #9aa5b1; color-scheme: light; } /* ---------- tema escuro (botão no topo; a escolha fica salva no navegador) ---------- */ :root[data-tema="escuro"] { --fundo: #0f1720; --painel: #18222d; --borda: #2e3c4b; --texto: #e4e9ef; --texto-2: #c3ccd6; --texto-3: #98a6b5; --texto-4: #7d8b99; --titulo: #8fc3f0; --azul: #2d5f8f; --azul-claro: #5aa5e6; --primario-hover: #3a72a8; --ok: #6fcf8a; --apagado: #5d6b79; color-scheme: dark; } /* Os ícones do menu (SplitChat roxo, Notion preto, Maxi azul-escuro) somem no fundo escuro: ganham um fundo branco arredondado */ :root[data-tema="escuro"] .opcao-icone { background: #fff; border-radius: 7px; padding: 3px; } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Calibri, Arial, sans-serif; background: var(--fundo); color: var(--texto); } /* ---------- topo ---------- */ .topo { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; padding: 12px 24px; background: var(--painel); border-bottom: 1px solid var(--borda); } .marca { font-weight: 700; font-size: 24px; display: flex; align-items: center; } /* Marca do topo como botão: leva à tela inicial */ .marca-link { font-family: inherit; border: 0; background: none; padding: 4px 8px; margin-left: -8px; border-radius: 8px; cursor: pointer; transition: background .15s; } .marca-link:hover { background: var(--fundo); } .marca-link:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; } .marca-logo { width: 32px; height: 32px; margin-right: 6px; } .marca-maxi { color: var(--titulo); } .marca-ti { color: var(--vermelho); } .marca-sub { font-weight: 400; font-size: 14px; color: var(--texto-3); margin-left: 10px; } .abas { display: flex; gap: 4px; } .aba { border: 0; background: none; padding: 8px 14px; border-radius: 6px; font: inherit; cursor: pointer; color: var(--texto-2); } .aba:hover { background: var(--fundo); } .aba.ativa { background: var(--azul); color: #fff; } #btn-sair:hover { background: var(--vermelho); border-color: var(--vermelho); color: #fff; } #senha-usuario { margin: -10px 0 14px; } /* Linha do tema dentro do menu da engrenagem */ .menu-config-tema { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 10px 10px 6px; border-top: 1px solid var(--borda); font-size: 14px; color: var(--texto); cursor: pointer; } /* Menu da engrenagem (Alterar senha; Usuários para admins) */ .config { position: relative; } .menu-config { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 220px; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; } .menu-config[hidden] { display: none; } .menu-config-usuario { font-size: 12px; color: var(--texto-3); padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); } .menu-config-usuario b { display: block; font-size: 13px; color: var(--texto); } .menu-config > button { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--texto); padding: 8px 10px; border-radius: 6px; } .menu-config > button:hover, .menu-config > button:focus-visible { background: var(--fundo); outline: none; } /* Engrenagem do topo: abre "Alterar senha" */ .btn-engrenagem { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texto-2); } .btn-engrenagem:hover { background: var(--fundo); color: var(--titulo); } .btn-engrenagem:hover svg { transform: rotate(45deg); } .btn-engrenagem:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; } .btn-engrenagem svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: transform .25s; } /* Chave do tema: ligada (claro) = bolinha à direita com sol; desligada (escuro) = à esquerda com lua */ .chave-tema { position: relative; width: 50px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: var(--apagado); cursor: pointer; transition: background .2s; } /* Canto direito do topo: Sair e a chave do tema; o resto fica à esquerda */ .canto-tema { display: flex; align-items: center; gap: 14px; margin-left: auto; } .chave-tema[aria-checked="true"] { background: var(--azul-claro); } .chave-tema:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; } .chave-bolinha { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: transform .2s; } .chave-tema[aria-checked="true"] .chave-bolinha { transform: translateX(24px); } .chave-bolinha svg { width: 14px; height: 14px; } .icone-sol { fill: #111; stroke: #111; stroke-width: 2; stroke-linecap: round; } .icone-lua { fill: #111; } .chave-tema[aria-checked="true"] .icone-lua, .chave-tema[aria-checked="false"] .icone-sol { display: none; } .selo-admin { font-size: 11px; background: var(--azul); color: #fff; border-radius: 10px; padding: 1px 8px; margin-left: 6px; } /* ---------- login ---------- */ .tela-login { display: none; min-height: 100vh; align-items: center; justify-content: center; padding: 16px; } body.deslogado .tela-login { display: flex; } body.deslogado .topo, body.deslogado main { display: none; } body:not(.admin) .so-admin { display: none; } body:not(.com-historico) .so-os { display: none; } body:not(.com-historico-remoto) .so-remota { display: none; } body:not(.com-historico-checklist) .so-checklist { display: none; } body:not(.com-entradas) .so-etiqueta { display: none; } body:not(.na-inicio) .so-inicio { display: none; } .cartao-login { background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 28px; width: 100%; max-width: 360px; box-shadow: 0 4px 20px rgba(0,0,0,.06); } .login-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .login-logo { width: 52px; height: 52px; } .login-marca .marca { font-size: 28px; } .login-marca .marca-sub { margin-left: 0; } .btn.cheio { width: 100%; margin-top: 4px; } .com-botao { display: flex; gap: 6px; } .com-botao input { flex: 1; min-width: 0; } input[readonly] { background: var(--fundo); color: var(--texto-3); } dialog { background: var(--painel); color: var(--texto); border: 1px solid var(--borda); border-radius: 12px; padding: 22px; width: min(360px, calc(100vw - 32px)); } dialog::backdrop { background: rgba(0,0,0,.35); } dialog h2 { margin: 0 0 16px; font-size: 18px; color: var(--titulo); } dialog .campo { display: flex; } main { padding: 20px; } .view { display: none; } .view.ativa { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } /* ---------- formulários ---------- */ .painel { background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 20px; flex: 1 1 380px; max-width: 520px; } .painel.largo { max-width: 1100px; width: 100%; } .painel h2 { margin: 0 0 16px; font-size: 18px; color: var(--titulo); } .linha { display: flex; gap: 12px; flex-wrap: wrap; } .campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--texto-2); } .campo.cresce { flex: 1 1 180px; } .campo.fim { justify-content: flex-end; } .campo.marcar { flex-direction: row; align-items: center; align-self: flex-end; gap: 6px; min-height: 38px; } .campo[hidden] { display: none; } input, select, textarea { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--painel); color: var(--texto); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); outline-offset: -1px; } textarea { resize: vertical; } .grupo { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px 0; margin: 0 0 12px; } .grupo legend { font-size: 13px; font-weight: 600; color: var(--titulo); padding: 0 4px; } /* Caixinhas de marcar (OS remota: meio de contato e status) */ .opcoes-marcar { gap: 8px 18px; padding: 4px 0 12px; } .check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; } .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--azul); } /* Checklist: grade de itens e "Marcar todos" */ .grade-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; padding: 4px 0 8px; } .marcar-todos { margin: 0 0 10px -10px; } .linha.alinhar-base { align-items: flex-end; } .rotulo-opcoes { font-size: 13px; font-weight: 600; color: var(--texto-2); } .acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .btn { font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 6px; cursor: pointer; border: 1px solid var(--borda); background: var(--painel); color: var(--texto); } .btn:hover { background: var(--fundo); } .btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; } .btn.primario:hover { background: var(--primario-hover); } .btn.fantasma { border-color: transparent; } .btn.pequeno { padding: 4px 10px; font-size: 13px; } .btn.perigo { color: var(--vermelho); } .msg { min-height: 1.2em; font-size: 13px; color: var(--ok); margin: 8px 0 0; } .msg.erro { color: var(--vermelho); } /* ---------- tabelas ---------- */ .cabecalho-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .cabecalho-lista h2 { margin: 0; } .cabecalho-lista input { flex: 0 1 320px; } .tabela { width: 100%; border-collapse: collapse; font-size: 14px; } .tabela th, .tabela td { text-align: left; padding: 8px; border-bottom: 1px solid var(--borda); vertical-align: top; } .tabela th { font-size: 12px; text-transform: uppercase; color: var(--texto-3); } .tabela td.botoes { white-space: nowrap; text-align: right; } .tabela td.chamado { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vazio { color: var(--texto-4); font-size: 14px; } /* ---------- documento (OS) ---------- Relatório de Atendimento Técnico no modelo moderno (Exemplo_preenchido_1.pdf). Fontes guardadas no projeto (pasta fonts/) para funcionar sem internet. */ @font-face { font-family: "Manrope"; font-weight: 400; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-weight: 500; src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-weight: 600; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-weight: 700; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-weight: 800; src: url("../fonts/manrope-latin-800-normal.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-weight: 700; src: url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); } .preview-wrap { flex: 1 1 560px; display: flex; justify-content: center; } .documento { /* papel: cores fixas, iguais no tema escuro */ --doc-azul: #17324f; --doc-vermelho: #d0312d; --doc-texto: #1f2a37; --doc-cinza: #5c6373; --doc-borda: #d7dce0; --doc-linha: #c8cfd9; --doc-fundo: #f2f6f9; /* A4 menos as margens da impressão (10 mm): o diagnóstico estica para fechar a folha */ width: 190mm; min-height: 276mm; box-sizing: border-box; display: flex; flex-direction: column; background: #fff; color: var(--doc-texto); font-family: "Manrope", "Segoe UI", Arial, sans-serif; font-size: 9.8pt; line-height: 1.35; } @media screen { .documento { box-sizing: content-box; padding: 10mm; box-shadow: 0 2px 12px rgba(0,0,0,.12); border-radius: 4px; } } .doc-topo { display: flex; justify-content: space-between; align-items: flex-start; } .doc-logo { width: 71mm; height: auto; display: block; } .doc-identificacao { display: flex; flex-direction: column; align-items: flex-end; gap: 3.2mm; padding-top: 1mm; } .doc-titulo { font-size: 14pt; font-weight: 800; color: #111827; letter-spacing: -.01em; } .doc-os { display: flex; align-items: baseline; gap: 2.4mm; background: var(--doc-azul); color: #fff; border-radius: 1.6mm; padding: 1.9mm 4mm; } .doc-os small { font-size: 7pt; font-weight: 700; letter-spacing: .14em; opacity: .75; } .doc-os b { font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5pt; font-weight: 700; letter-spacing: .02em; } .doc-regua { height: .8mm; background: var(--doc-azul); margin: 5mm 0 5.4mm; } .doc-cartao { background: var(--doc-fundo); border-radius: 3mm; padding: 4.4mm 4.8mm 4.6mm; display: grid; grid-template-columns: 2.1fr 1fr 1fr; gap: 3.6mm 4.4mm; } .doc-campo.largo { grid-column: span 2; } .doc-rotulo { display: block; font-size: 7pt; font-weight: 700; letter-spacing: .14em; color: var(--doc-cinza); text-transform: uppercase; } .doc-valor { display: block; min-height: 1.35em; font-size: 10.5pt; font-weight: 500; padding: 1mm 0 1.2mm; border-bottom: 1px solid var(--doc-linha); } .doc-tipo { display: flex; align-items: center; gap: 4.2mm; margin: 5.6mm 0 4.6mm; font-size: 9.8pt; } .doc-tipo .doc-rotulo { margin-right: 1mm; } .doc-check { display: inline-flex; align-items: center; gap: 1.8mm; } .doc-check i { width: 3.1mm; height: 3.1mm; border: 1.3px solid var(--doc-azul); border-radius: .7mm; display: inline-block; } .doc-check.marcado i { background: var(--doc-azul); } .doc-secao { display: flex; align-items: center; gap: 2.6mm; margin-bottom: 2.6mm; } .doc-secao .num { font-family: "JetBrains Mono", Consolas, monospace; font-weight: 700; font-size: 8.5pt; color: var(--doc-vermelho); } .doc-secao .nome { font-size: 10pt; font-weight: 800; color: var(--doc-azul); letter-spacing: .02em; } .doc-secao::after { content: ""; flex: 1; height: 1px; background: var(--doc-linha); margin-left: 1.2mm; } .doc-caixa { border: 1px solid var(--doc-borda); border-radius: 2mm; padding: 3.8mm 4.4mm; white-space: pre-wrap; word-wrap: break-word; line-height: 1.75; margin-bottom: 5.4mm; } .doc-caixa.detalhes { min-height: 27.5mm; } .doc-caixa.diagnostico { min-height: 70mm; flex: 1; } .doc-periodo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.4mm; } .doc-periodo > div { border: 1px solid var(--doc-borda); border-radius: 2mm; padding: 3.4mm 4.4mm; } .doc-periodo .doc-rotulo { margin-bottom: 1.4mm; } .doc-periodo b { font-size: 12pt; font-weight: 800; } .doc-periodo .as { font-size: 12pt; font-weight: 500; color: var(--doc-cinza); } .doc-periodo .total { background: var(--doc-azul); border-color: var(--doc-azul); color: #fff; } .doc-periodo .total .doc-rotulo { color: rgba(255,255,255,.75); } /* Nome do técnico em cima da linha e "Técnico de TI" embaixo */ .doc-assinatura { width: 85mm; margin: 12mm auto 0; text-align: center; } .doc-assinatura b { display: block; min-height: 1.3em; font-size: 11pt; font-weight: 700; padding-bottom: 1.5mm; border-bottom: 1px solid #111; margin-bottom: 1.5mm; } .doc-assinatura span { font-size: 9pt; color: var(--doc-cinza); } /* OS Atendimento Remoto: opções em "pílulas" (marcada = azul com ✓) e técnico em linha */ .doc-cartao.tres { grid-template-columns: repeat(3, 1fr); } .doc-pilulas { display: flex; flex-wrap: wrap; gap: 3mm; margin-bottom: 5.4mm; } .doc-pilula { border: 1px solid var(--doc-linha); border-radius: 99px; padding: 2.2mm 5.2mm; font-size: 10pt; font-weight: 700; color: var(--doc-azul); } .doc-pilula.marcado { background: var(--doc-azul); border-color: var(--doc-azul); color: #fff; } /* Checklist de equipamento */ .doc-check.marcado i { position: relative; } .doc-check.marcado i::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-style: normal; font-weight: 800; font-size: 2.6mm; line-height: 3.1mm; text-align: center; } .doc-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2mm 4mm; margin: 1mm 0 3.8mm; font-size: 9.8pt; } .doc-checks .doc-check i { flex: none; width: 3.6mm; height: 3.6mm; } .doc-check.marcado i::after { line-height: 3.6mm; } .doc-cartao.duas { grid-template-columns: 1fr 1fr; margin-bottom: 4.4mm; gap: 2.6mm 4.4mm; padding-top: 3.6mm; padding-bottom: 3.6mm; } .doc-cartao.duas + .doc-secao, .doc-cartao.tres + .doc-secao { margin-top: 0; } .doc-linha-opcoes { display: flex; align-items: center; gap: 3mm; margin-bottom: 3.4mm; } .doc-linha-opcoes .doc-rotulo { margin-right: 1mm; } .doc-linha-opcoes .doc-pilulas { margin-bottom: 0; } .doc-caixa.observacoes { min-height: 22mm; flex: 1; margin-bottom: 4mm; } .doc-tecnico-linha { display: flex; align-items: baseline; gap: 4mm; margin-top: 2mm; } .doc-tecnico-linha .doc-valor { flex: 1; font-size: 11pt; font-weight: 700; } .doc-rodape { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2mm; border-top: 1px solid var(--doc-borda); margin-top: 6mm; padding-top: 4mm; font-size: 9pt; color: var(--doc-cinza); } .doc-rodape .maxi { color: var(--doc-azul); font-weight: 800; } .doc-rodape .ti { color: var(--doc-vermelho); font-weight: 800; } .doc-rodape strong { color: #111827; font-weight: 700; } /* ---------- menu inicial ---------- */ .menu { width: 100%; max-width: 760px; margin: 12px auto; } .menu h2 { color: var(--titulo); font-size: 20px; margin: 0 0 16px; } .menu-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .opcao { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; font: inherit; color: var(--texto); background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: 18px; cursor: pointer; min-height: 120px; } .opcao:hover { border-color: var(--azul-claro); box-shadow: 0 2px 10px rgba(29,61,92,.1); } .opcao-num { width: 30px; height: 30px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 700; } .opcao-nome { font-weight: 600; font-size: 16px; } a.opcao { text-decoration: none; } .opcao-topo { display: flex; align-items: center; justify-content: space-between; width: 100%; } .opcao-icone { width: 30px; height: 30px; object-fit: contain; } .opcao-externo { font-size: 12px; color: var(--azul-claro); } .opcao-selo { font-size: 12px; color: #8a6d00; background: #fff4cc; border-radius: 10px; padding: 2px 8px; } .opcao:has(.opcao-selo) .opcao-num { background: var(--apagado); } .opcao:has(.opcao-selo) .opcao-icone { opacity: .45; } .voltar { margin: -6px 0 6px -10px; } .em-dev p { color: var(--texto-3); } .painel h3 { margin: 18px 0 8px; font-size: 15px; color: var(--titulo); } .cabecalho-lista.espaco-acima { margin-top: 24px; } .cabecalho-lista h3 { margin: 0; } .filtro-ano { flex-direction: row; align-items: center; gap: 8px; margin: 0; } .resumo-entradas { display: flex; gap: 12px; flex-wrap: wrap; } .cartao-numero { display: flex; flex-direction: column; min-width: 140px; padding: 12px 16px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); } .cartao-numero span { font-size: 28px; font-weight: 700; color: var(--titulo); } .cartao-numero small { font-size: 13px; color: var(--texto-3); } .tabela td.barra-celula { width: 40%; vertical-align: middle; } .barra { display: block; height: 10px; border-radius: 5px; background: var(--azul-claro); } .dica { font-size: 12px; color: var(--texto-3); margin: 12px 0 0; line-height: 1.5; } /* ---------- etiqueta de equipamento ---------- Papel da Zebra GC420t: 8,5 x 3,8 cm. Margens iguais ao antigo ETIQUETA.docx (13 mm no topo, 7,5 mm nas laterais). */ .etiqueta { width: 85mm; height: 38mm; overflow: hidden; background: #fff; color: #000; padding: 13mm 7.5mm 0; font-family: Calibri, Carlito, Arial, sans-serif; font-size: 11pt; font-weight: 700; line-height: 1; } .etiqueta p { margin: 0; white-space: pre-wrap; word-wrap: break-word; } /* 1ª linha: Nº de entrada (DEV26001). Menor e com as linhas mais juntas para as 5 linhas caberem entre o logo e a linha de contatos pré-impressos (máx. 19 mm). */ .etiqueta-codigo { font-size: 9pt; } /* Versão que vai para a Zebra (calibrada em teste real na GC420t): - impressa pelo navegador, a página sai de cabeça para baixo na Zebra, então giramos 180°; - a caixa tem 36 mm (2 mm a menos que o papel) para nunca gerar uma página extra; - com o giro, a folga de 2 mm fica no topo da etiqueta impressa, por isso o texto começa em 11 mm aqui = 13 mm na etiqueta, logo abaixo do logo pré-impresso; - na horizontal o texto começa no limite esquerdo da área impressa (left: 0), alinhado ao canto esquerdo da moldura pré-impressa (3º teste na Zebra). */ #etiquetas-impressao .etiqueta { height: 36mm; position: relative; padding: 0; transform: rotate(180deg); } #etiquetas-impressao .etiqueta-conteudo { position: absolute; left: 0; right: 7.5mm; top: 11mm; } .etiqueta-tela { display: flex; flex-direction: column; align-items: center; gap: 8px; } .etiqueta-legenda { font-size: 12px; color: var(--texto-3); } .etiqueta-escala { zoom: 2; border: 1px dashed var(--apagado); } #etiquetas-impressao { display: none; } /* ---------- impressão ---------- */ /* O tamanho do papel (@page) fica no