/* ============================================================================ TEMA. Tudo que é cor sai daqui — o modo escuro só troca estas variáveis. Padrão = o do SISTEMA (prefers-color-scheme). O botão ☾/☀ do cabeçalho grava a escolha em localStorage e vira data-tema no , que vence a mídia (ver base.html). ============================================================================ */ :root { --azul: #0b5cad; --grave: #c0392b; --alerta: #d98324; --ok: #2e7d32; --roxo: #6b4fa0; --cinza: #667085; --borda: #e3e6ea; --fundo: #f6f8fa; --papel: #fff; /* cartões, blocos, campos */ --branco-fixo: #fff; /* branco que NÃO muda com o tema (ver .parabens) */ --papel-2: #fbfcfd; /* fundos sutis (listas, hover de tabela) */ --texto: #1a2027; --realce: #eef1f4; /* code, pílulas, barras */ --linha: #f0f2f5; /* divisórias internas */ --alta-bg: #fadbd8; --alta-fg: #a5281b; /* código de alta prioridade */ --baixa-bg: #d6efd6; --baixa-fg: #1e7d32; /* código de baixa prioridade */ --ok-bg: #e6f4ea; --alerta-bg: #fef3e2; --erro-bg: #fdecea; --alvo-bg: #fff8e6; /* regra destacada pela âncora */ --sombra: rgba(0, 0, 0, .18); } :root[data-tema="escuro"] { --azul: #5aa9f0; --grave: #ef6a5c; --alerta: #e8a33d; --ok: #5cc46a; --roxo: #b9a0e8; --cinza: #9aa4b2; --borda: #2b3441; --fundo: #12171e; --papel: #1a212b; --papel-2: #161d26; --texto: #e6eaf0; --realce: #263041; --linha: #232c38; --alta-bg: #4a2320; --alta-fg: #ffb3aa; --baixa-bg: #1e3a24; --baixa-fg: #93e0a0; --ok-bg: #17301d; --alerta-bg: #3a2c15; --erro-bg: #3a1f1c; --alvo-bg: #37301a; --sombra: rgba(0, 0, 0, .55); } /* Sem escolha salva: acompanha o sistema/navegador do usuário. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --azul: #5aa9f0; --grave: #ef6a5c; --alerta: #e8a33d; --ok: #5cc46a; --roxo: #b9a0e8; --cinza: #9aa4b2; --borda: #2b3441; --fundo: #12171e; --papel: #1a212b; --papel-2: #161d26; --texto: #e6eaf0; --realce: #263041; --linha: #232c38; --alta-bg: #4a2320; --alta-fg: #ffb3aa; --baixa-bg: #1e3a24; --baixa-fg: #93e0a0; --ok-bg: #17301d; --alerta-bg: #3a2c15; --erro-bg: #3a1f1c; --alvo-bg: #37301a; --sombra: rgba(0, 0, 0, .55); } } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--fundo); color: var(--texto); } /* Campos e botões nativos seguem o tema (calendário, spinners, scrollbar). */ :root[data-tema="escuro"] { color-scheme: dark; } :root[data-tema="claro"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; } } /* ---- Botão de tema (☾ / ☀) ---- */ .tema-btn { background: transparent; color: var(--cinza); border: 1px solid var(--borda); border-radius: 999px; width: 30px; height: 30px; padding: 0; font-size: .95rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .tema-btn:hover { color: var(--azul); border-color: var(--azul); } .container { max-width: 900px; margin: 0 auto; padding: 24px 16px 64px; } h1 { font-size: 1.4rem; margin: 0; } h2 { font-size: 1.1rem; margin: 0 0 12px; } h2.menor { font-size: .9rem; color: var(--cinza); text-transform: uppercase; letter-spacing: .04em; } code { background: var(--realce); padding: 2px 6px; border-radius: 4px; font-size: .82rem; } /* ---- Login ---- */ .login-box { max-width: 360px; margin: 8vh auto 0; background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; padding: 28px; } .login-box h1 { color: var(--azul); } .login-box .sub { color: var(--cinza); margin: 4px 0 20px; } .login-box label { display: block; margin-bottom: 14px; font-size: .9rem; color: var(--texto); } .login-box input { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 1rem; } button { background: var(--azul); color: var(--papel); border: 0; border-radius: 8px; padding: 10px 18px; font-size: 1rem; cursor: pointer; } button.secundario { background: var(--papel); color: var(--azul); border: 1px solid var(--azul); padding: 7px 12px; font-size: .85rem; } .dica { margin-top: 18px; font-size: .8rem; color: var(--cinza); } .erro { color: var(--grave); background: var(--erro-bg); padding: 10px 12px; border-radius: 8px; } /* ---- Topo do painel ---- */ /* Sticky: acompanha a rolagem em todas as telas. As margens negativas anulam o padding do .container para o fundo do cabeçalho cobrir até a borda da janela. */ .topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 50; background: var(--fundo); margin: -24px -16px 20px; padding: 16px 16px 12px; border-bottom: 1px solid var(--borda); box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .18); } .topo .sub { color: var(--cinza); font-size: .85rem; margin: 6px 0 0; } .acoes { display: flex; align-items: center; gap: 12px; } .acoes form { margin: 0; } .usuario { font-weight: 600; font-size: .9rem; } .sair { color: var(--cinza); text-decoration: none; font-size: .85rem; } .sair:hover { text-decoration: underline; } .tag { padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; } .tag.viva { background: var(--ok-bg); color: var(--ok); } .tag.mock { background: var(--alerta-bg); color: var(--alerta); } /* ---- Busca da ficha do produto ---- */ .busca-produto { display: flex; gap: 8px; margin-bottom: 18px; } .busca-produto input[type="search"] { flex: 1; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 8px; font-size: .95rem; background: var(--papel); } .busca-produto input[type="search"]:focus { border-color: var(--azul); outline: none; } .login-acoes { justify-content: flex-end; } /* ---- Autocomplete da busca ---- */ .busca-produto { position: relative; } .sugestoes { position: absolute; top: calc(100% + 4px); left: 0; right: 92px; z-index: 60; list-style: none; margin: 0; padding: 4px; background: var(--papel); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px -10px var(--sombra); max-height: 320px; overflow-y: auto; } .sugestoes li { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: .88rem; } .sugestoes li:hover, .sugestoes li.marcado { background: var(--realce); } .sug-cod { font-weight: 700; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; } .sug-nome { color: var(--cinza); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sug-pend { font-size: .72rem; font-weight: 600; color: var(--grave); background: var(--alta-bg); padding: 1px 8px; border-radius: 999px; white-space: nowrap; } .sug-ok { font-size: .72rem; font-weight: 600; color: var(--ok); background: var(--ok-bg); padding: 1px 8px; border-radius: 999px; white-space: nowrap; } /* ---- Ficha do produto ---- */ .lista .cod-link { text-decoration: none; } .lista .cod-link code:hover { outline: 2px solid var(--azul); } .ficha-dl { margin: 10px 0 4px; display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: .85rem; } .ficha-dl dt { color: var(--cinza); font-weight: 600; } .ficha-dl dd { margin: 0; } .pend-fiscal { border-left-color: var(--roxo); } /* ---- Blocos ---- */ .bloco { background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; padding: 20px; margin-bottom: 18px; } .tudo-certo { color: var(--ok); font-weight: 600; } /* "Trabalho concluído": brinde quando o painel da coligada fica 100% limpo. O desenho é traço PRETO — o cartão é branco FIXO (não segue o tema) para o traço nunca sumir no modo escuro. Some sozinho quando volta a haver erro. */ .parabens-bloco { text-align: center; } .parabens { background: var(--branco-fixo); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; margin: 2px auto 14px; max-width: 560px; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); animation: parabens-entra .5s ease-out; } .parabens img { width: 100%; height: auto; display: block; border-radius: 6px; } @keyframes parabens-entra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .parabens { animation: none; } } /* Bloco fiscal: mesma anatomia, identidade própria (roxo) para separar à vista. */ .bloco-fiscal { border-top: 4px solid var(--roxo); } .bloco-fiscal h2 { color: var(--roxo); } .bloco-fiscal h2::before { content: "§ "; opacity: .6; } /* ---- Alertas (exception-first) ---- */ .alerta { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; border-left: 4px solid var(--alerta); } .alerta.grave { border-left-color: var(--grave); } .alerta summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; } .alerta summary::-webkit-details-marker { display: none; } .numero { font-size: 1.3rem; font-weight: 700; min-width: 44px; color: var(--grave); } .alerta:not(.grave) .numero { color: var(--alerta); } .rotulo { font-weight: 600; flex: 1; } .pct { color: var(--cinza); font-size: .85rem; } .desc { color: var(--cinza); font-size: .85rem; margin: 8px 0 4px; } .lista { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; margin-top: 10px; max-height: 240px; overflow-y: auto; padding: 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--papel-2); } .lista code { background: var(--realce); } .lista code.alta { background: var(--alta-bg); color: var(--alta-fg); } /* alta prioridade = vermelho */ .lista code.baixa { background: var(--baixa-bg); color: var(--baixa-fg); } /* baixa prioridade = verde */ .lista .item { display: inline-flex; align-items: center; gap: 3px; } .uf-tag { font-size: .7rem; color: var(--cinza); background: var(--realce); padding: 1px 5px; border-radius: 4px; } .mais { color: var(--cinza); font-size: .82rem; align-self: center; } /* ---- Sem problemas ---- */ .ok-grid { display: flex; flex-wrap: wrap; gap: 8px; } .ok { color: var(--ok); background: var(--ok-bg); padding: 4px 10px; border-radius: 8px; font-size: .82rem; text-decoration: none; cursor: help; } a.ok:hover { outline: 1px solid var(--ok); } /* Aviso de exclusão (produtos em amostra fora da conferência). */ .fora-conferencia { margin: 14px 0 0; padding: 10px 12px; font-size: .84rem; color: var(--cinza); background: var(--alerta-bg); border-left: 3px solid var(--alerta); border-radius: 6px; } .vazio { background: var(--papel); border: 1px dashed var(--borda); border-radius: 12px; padding: 32px; text-align: center; color: var(--cinza); } /* ---- Etapas de mídia (barras de progresso) ---- */ .etapa { margin-bottom: 14px; } .etapa:last-child { margin-bottom: 0; } .etapa-topo { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 6px; } .etapa-nome { font-weight: 600; } .etapa-num { color: var(--cinza); } .barra { height: 14px; background: var(--realce); border-radius: 999px; overflow: hidden; } .barra-fill { height: 100%; background: var(--ok); border-radius: 999px; transition: width .3s; } /* ---- Selo de baixa prioridade ---- */ .prio { font-size: .72rem; font-weight: 600; color: var(--cinza); background: var(--realce); padding: 2px 8px; border-radius: 999px; } /* ---- Ações da lista (copiar p/ Excel) ---- */ .lista-acoes { display: flex; align-items: center; gap: 10px; margin-top: 10px; } button.copiar { background: var(--papel); color: var(--azul); border: 1px solid var(--azul); border-radius: 8px; padding: 5px 12px; font-size: .8rem; cursor: pointer; } button.copiar:hover { background: var(--azul); color: var(--papel); } .copiado { font-size: .8rem; color: var(--ok); font-weight: 600; } /* ---- Administração de acesso ---- */ .aviso { color: var(--baixa-fg); background: var(--ok-bg); padding: 10px 12px; border-radius: 8px; } .admin-ferramentas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .admin-ferramentas input[type=search], .admin-ferramentas input[type=text] { flex: 1; min-width: 220px; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: .9rem; } .admin-contagem { color: var(--cinza); font-size: .82rem; } .tabela-rolagem { overflow-x: auto; max-height: 60vh; overflow-y: auto; border: 1px solid var(--borda); border-radius: 8px; } .tabela-admin { border-collapse: collapse; width: 100%; font-size: .88rem; } .tabela-admin thead th { position: sticky; top: 0; background: var(--fundo); text-align: left; z-index: 1; padding: 10px 12px; border-bottom: 1px solid var(--borda); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--cinza); } .tabela-admin td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; } .tabela-admin tbody tr:hover { background: var(--papel-2); } .tabela-admin .centro { text-align: center; } .pessoa-nome { font-weight: 600; } .pessoa-login { margin-top: 2px; } .pessoa-login code { font-size: .75rem; } .selo-fora { font-size: .7rem; background: var(--alerta-bg); color: var(--alerta); padding: 1px 6px; border-radius: 999px; margin-left: 4px; } /* toggle */ .toggle { display: inline-block; cursor: pointer; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-pino { display: block; width: 38px; height: 21px; background: var(--borda); border-radius: 999px; position: relative; transition: background .15s; } .toggle-pino::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; background: var(--papel); border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .toggle input:checked + .toggle-pino { background: var(--azul); } .toggle input:checked + .toggle-pino::after { transform: translateX(17px); } .toggle input:focus-visible + .toggle-pino { outline: 2px solid var(--azul); outline-offset: 2px; } .coligadas-check { display: flex; gap: 12px; flex-wrap: wrap; } .check-inline { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; cursor: pointer; } .check-inline.sem-rm { color: var(--cinza); text-decoration: line-through; cursor: help; } .auditoria { list-style: none; padding: 0; margin: 0; font-size: .85rem; } .auditoria li { padding: 6px 0; border-bottom: 1px solid var(--linha); } .auditoria li:last-child { border-bottom: 0; } .aud-quando { color: var(--cinza); margin-right: 8px; font-variant-numeric: tabular-nums; } /* ---- Cartões de escolha (landing de área e de coligada) ---- */ .escolhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 8px; } .escolha { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--papel); border: 1px solid var(--borda); border-radius: 12px; padding: 24px; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; } .escolha:hover { border-color: var(--azul); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(11,92,173,.10); } .escolha-icone { font-size: 1.8rem; line-height: 1; } .escolha-titulo { font-size: 1.1rem; font-weight: 700; color: var(--azul); } .escolha-desc { font-size: .85rem; color: var(--cinza); } /* ---- Seletor de coligada (só aparece com mais de uma) ---- */ .coligadas { display: flex; gap: 4px; background: var(--realce); padding: 3px; border-radius: 999px; } .coligada { text-decoration: none; color: var(--cinza); font-size: .82rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; } .coligada:hover { color: var(--azul); } .coligada.atual { background: var(--papel); color: var(--azul); box-shadow: 0 1px 2px rgba(0,0,0,.12); } /* ---- Manual das regras (/regras) ---- */ a.info { text-decoration: none; } .regra-coligadas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .regra-coligadas button { margin-left: auto; } .regra-form textarea, .regra dd textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: .85rem; resize: vertical; } .regra { padding: 14px 0; border-bottom: 1px solid var(--linha); scroll-margin-top: 110px; } /* clareia o cabeçalho fixo ao pular pra âncora */ .regra:last-child { border-bottom: 0; } .regra:target { background: var(--alvo-bg); border-radius: 8px; padding: 14px; } .regra h3 { margin: 0 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .regra-tipo { font-size: .7rem; font-weight: 600; color: var(--cinza); background: var(--realce); padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; } .regra-dispensa { font-size: .72rem; color: var(--alerta); background: var(--alerta-bg); padding: 2px 8px; border-radius: 999px; cursor: help; } .regra-desc { color: var(--cinza); font-size: .85rem; margin: 0 0 8px; } .regra dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: .85rem; } .regra dt { color: var(--cinza); font-weight: 600; } .regra dd { margin: 0; } .regra-form { display: flex; gap: 8px; align-items: flex-start; } .regra-form textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: .85rem; resize: vertical; } /* ---- Imagens de tutorial no manual ---- */ .regra-imagens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: flex-start; } .regra-img { position: relative; margin: 0; width: 180px; } .regra-img img { width: 100%; border: 1px solid var(--borda); border-radius: 8px; cursor: zoom-in; display: block; } .regra-img figcaption { font-size: .75rem; color: var(--cinza); margin-top: 3px; } .regra-img .img-legenda { margin: 3px 0 0; } .regra-img .img-legenda input { width: 100%; font-size: .75rem; padding: 3px 6px; border: 1px solid var(--borda); border-radius: 6px; } .regra-img .img-excluir { position: absolute; top: 4px; right: 4px; margin: 0; } .regra-img .img-excluir button { background: rgba(192, 57, 43, .9); color: var(--papel); border: 0; border-radius: 50%; width: 22px; height: 22px; padding: 0; line-height: 1; font-size: .9rem; cursor: pointer; } .colar-print { width: 180px; min-height: 90px; border: 2px dashed var(--borda); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; font-size: .78rem; color: var(--cinza); cursor: pointer; text-align: center; } .colar-print:focus { border-color: var(--azul); color: var(--azul); outline: none; } .colar-print.enviando { opacity: .5; pointer-events: none; } .colar-arquivo { text-decoration: underline; cursor: pointer; font-size: .72rem; } .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .75); z-index: 100; display: flex; align-items: center; justify-content: center; cursor: zoom-out; } .lightbox[hidden] { display: none; } /* o display:flex acima venceria o atributo hidden */ /* Aviso flutuante do "copiar com botão direito" */ .toast-copia { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--papel); padding: 8px 18px; border-radius: 999px; font-size: .85rem; z-index: 120; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); } .lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); } /* ---- Ícone informativo (tooltip com o motivo) ---- */ .info { color: var(--azul); cursor: help; font-size: 1rem; opacity: .65; } .info:hover { opacity: 1; } .ok[title] { cursor: help; }