/* ==================================================================== Portal Synconsult Pecuária — Design tokens (Manual de Identidade Visual) ==================================================================== */ :root { --verde-escuro: #0A2924; --verde-escuro-2: #0d3830; --dourado: #FFAD00; --dourado-hover: #e69c00; /* O dourado da marca sobre branco dá só 2,3:1 — ilegível, ainda mais no celular sob sol. Este tom escuro mantém a família e chega a 5,9:1. O dourado original segue nos botões, onde o texto é verde-escuro (8:1). */ --dourado-texto: #8a5a00; --areia: #F7F7F7; --preto: #262626; --branco: #FFFFFF; --cinza-borda: #E1E4E3; /* #6B7472 dava 4,49:1 sobre a areia — abaixo do mínimo legível de 4,5:1 */ --cinza-texto: #636B69; --vermelho: #C0392B; --verde-ok: #2E7D32; --amarelo-alerta: #E0A800; --sombra: 0 2px 10px rgba(10, 41, 36, 0.08); --sombra-lg: 0 8px 30px rgba(10, 41, 36, 0.16); --raio: 10px; --fonte: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ---------- Realces e tintas de fundo ---------- Fundos claros escritos à mão (o #FBFBF9 do hover de linha, o creme da linha selecionada, o verde-água do filtro ligado) sobreviviam à troca de tema: no modo escuro o texto continua claro e a linha realçada virava branco no branco — texto sumindo debaixo do mouse. Agora são tokens, e cada modo define os seus. */ --realce-linha: #FBFBF9; --realce-selecao: #FFF6E0; --tinta-verde: #EEF4F1; --tinta-verde-2: #EAF1EE; --tinta-vermelha: #FDECEA; --tinta-amarela: #FFF6E0; --tinta-dourada: #FDF6E6; --superficie-fraca: #FBFCFC; /* Pilha do menu do Portal SynConsult, para os dois portais terem o mesmo menu. A Neo Sans Pro é a fonte do MIV e é paga: entra se estiver instalada na máquina; senão o navegador desce a lista sozinho, sem baixar nada. */ --fonte-menu: 'Neo Sans Pro', 'Poppins', 'Century Gothic', 'Sora', 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--fonte); background: var(--areia); color: var(--preto); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-weight: 700; margin: 0 0 8px; color: var(--verde-escuro); } p { margin: 0 0 12px; line-height: 1.5; } a { color: var(--dourado-texto); text-decoration: none; } button { font-family: var(--fonte); cursor: pointer; border: none; border-radius: 8px; padding: 10px 18px; font-weight: 600; font-size: 14px; transition: all .15s ease; } .btn-primario { background: var(--dourado); color: var(--verde-escuro); } .btn-primario:hover { background: var(--dourado-hover); } .btn-primario:disabled { opacity: .55; cursor: not-allowed; } .btn-secundario { background: transparent; color: var(--verde-escuro); border: 1.5px solid var(--verde-escuro); } .btn-secundario:hover { background: rgba(10,41,36,.06); } .btn-perigo { background: transparent; color: var(--vermelho); border: 1.5px solid var(--vermelho); } .btn-perigo:hover { background: rgba(192,57,43,.08); } .btn-texto { background: transparent; color: var(--verde-escuro); padding: 6px 10px; } .btn-sm { padding: 6px 12px; font-size: 13px; } /* Campo que guarda o texto em maiúsculas (nome do animal, genealogia de fora, fornecedor, origem da transferência). O CSS mostra; quem converte o valor é o listener em js/app.js, e o banco normaliza de novo ao gravar. */ .maiusculo { text-transform: uppercase; } input, select, textarea { font-family: var(--fonte); width: 100%; padding: 10px 12px; border: 1.5px solid var(--cinza-borda); border-radius: 8px; font-size: 14px; background: var(--branco); color: var(--preto); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--dourado); box-shadow: 0 0 0 3px rgba(255,173,0,.18); } label { display: block; font-size: 12.5px; font-weight: 600; color: var(--verde-escuro); margin-bottom: 6px; letter-spacing: .01em; } .campo { margin-bottom: 16px; } .linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; } /* ---------- Faixa de filtros das janelas de relatório ---------- Os filtros ficam lado a lado numa linha só. Cada um cresce para ocupar a sobra, mas nunca encolhe abaixo de 170px (o período pede 260px, porque leva duas datas). Quando não couber mais, o flex-wrap quebra sozinho — é o que mantém a janela usável no celular. */ .faixa-filtros-relatorio { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; margin-bottom: 14px; } .faixa-filtros-relatorio .filtro-relatorio { flex: 1 1 170px; min-width: 170px; margin-bottom: 0; } .faixa-filtros-relatorio .filtro-relatorio-periodo { flex: 1 1 260px; min-width: 260px; } .faixa-filtros-relatorio .filtro-relatorio select, .faixa-filtros-relatorio .filtro-relatorio input { width: 100%; min-width: 0; } /* Nome de categoria longo ("Bovino — Bezerro (Macho)") não pode esticar o select e furar a linha: o texto corta com reticências. */ .faixa-filtros-relatorio .filtro-relatorio select { text-overflow: ellipsis; } .faixa-filtros-relatorio .filtro-relatorio .multiseletor { width: 100%; } /* ---------- Seletor com busca (campos de formulário, escolha única) ---------- O nativo e põe uma casca por cima. A casca é .seletor-busca { width:100% } — medida pensada para o campo dentro de um formulário. Como no cabeçalho ela vira item flex irmão do título, esses 100% faziam a casca disputar a linha inteira e espremer o "Permissões", "Dashboard" etc. até sobrar uma sílaba. Os limites que eram do nativo some por classe (uma fazenda só); a casca precisa sumir junto — o JS espelha a classe, isto apenas garante o display. */ .topo > .seletor-busca.oculto { display: none !important; } /* Título longo encurta com reticências em vez de cortar no meio da palavra. */ .topo h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topo .usuario-topo { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--cinza-texto); margin-left: auto; flex: none; } .avatar-inicial { width: 32px; height: 32px; border-radius: 50%; background: var(--dourado); color: var(--verde-escuro); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } /* Sem `overflow-y: auto` aqui de propósito: quem rola é a PÁGINA (a casca tem min-height, não height, então este bloco cresce com o conteúdo e nunca teve rolagem própria). Com o overflow declarado, o navegador o tratava como contêiner de rolagem mesmo sem rolar, e qualquer `position: sticky` dentro dele — a barra de abas das telas — se ancorava neste bloco parado, ou seja, não congelava coisa nenhuma. */ .conteudo { padding: 26px 28px; flex: 1; } /* ---------- KPI / Dashboard ---------- */ .grade-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 26px; } /* Uma linha só, cartões do mesmo tamanho. Um conjunto FECHADO de cartões (as situações da matriz, o resumo da base demo) é para ser lido de uma olhada: quebrando em duas linhas, o último cartão fica sozinho embaixo e parece outra coisa. Aqui as colunas são implícitas e dividem a largura por igual — `minmax(0, 1fr)`, e não `1fr`, porque `1fr` se recusa a encolher abaixo do conteúdo e voltaria a estourar. No tablet e no celular volta a quebrar: sete cartões de 100px não se leem. */ .grade-kpi-linha { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 14px; } @media (max-width: 1100px) { .grade-kpi-linha { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } .cartao-kpi { background: var(--branco); border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra); border-left: 4px solid var(--dourado); /* Coluna para o rodapé poder ir para o fim do cartão: sem isso, cartão com rótulo de duas linhas empurra tudo e nada se alinha com os vizinhos. */ display: flex; flex-direction: column; min-width: 0; } .cartao-kpi .rotulo-kpi { font-size: 12.5px; color: var(--cinza-texto); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; /* Duas linhas reservadas: "Aguardando diagnóstico" ocupa duas e os demais uma. Sem a reserva, os números saem em alturas diferentes na mesma fila. */ min-height: 2.6em; } .cartao-kpi .valor-kpi { font-size: 30px; font-weight: 800; color: var(--verde-escuro); margin-top: 6px; } .cartao-kpi .rodape-kpi { font-size: 12px; color: var(--cinza-texto); margin-top: auto; padding-top: 4px; } .grade-painel { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; } @media (max-width: 980px) { .grade-painel { grid-template-columns: 1fr; } } .painel { background: var(--branco); border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra); /* Sem min-width:0 o item de grid nunca encolhe abaixo da largura do próprio conteúdo: uma tabela larga dentro de um painel esticava a coluna e fazia o gráfico vizinho ficar mais largo que a tela no celular. */ min-width: 0; } .painel h3 { font-size: 15px; margin-bottom: 14px; } /* ---------- Tabela ---------- */ .barra-ferramentas { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* Os campos dividem a linha e ENCOLHEM: com min-width fixo, oito filtros somavam mais que a largura da tela e a barra quebrava em duas linhas, com o último campo sozinho embaixo. Agora cada um tem uma largura preferida (flex-basis) e um piso pequeno; quando nem assim couberem — janela estreita, tela com dez filtros — a barra volta a quebrar, que é melhor do que espremer tudo até ninguém conseguir ler. */ .filtros > * { min-width: 0; } .filtros select, .filtros input { width: auto; min-width: 118px; flex: 1 1 auto; } /* Do tablet para cima a barra NÃO quebra: os campos encolhem até caberem na mesma linha. Com `wrap`, o navegador nem tenta encolher — ele enche a linha e joga o resto para baixo, que era o que deixava a tela de Animais com oito filtros em três linhas. Se nem encolhendo couber (muitos filtros numa janela estreita), a própria barra rola de lado: melhor do que espremer os campos até ninguém conseguir ler o que está escrito. */ @media (min-width: 761px) { .filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } } /* Data precisa de mais: abaixo disso o dd/mm/aaaa some atrás do ícone. */ .filtros input[type="date"] { min-width: 142px; } /* O multisseletor entra no lugar dos selects das barras de filtro e precisa da mesma largura mínima. As regras abaixo são mais específicas que ".filtros input" de propósito: sem isso o campo de busca do painel herdaria width:auto e ficaria menor que o painel. */ .filtros .multiseletor { min-width: 132px; max-width: 260px; flex: 1 1 auto; } .ms-painel .ms-busca { width: 100%; min-width: 0; } .tabela-cartao { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #C4CBC9 var(--areia); } .tabela-cartao::-webkit-scrollbar { height: 11px; } .tabela-cartao::-webkit-scrollbar-track { background: var(--areia); } .tabela-cartao::-webkit-scrollbar-thumb { background: #C4CBC9; border-radius: 6px; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } thead th { text-align: left; padding: 12px 16px; background: var(--areia); color: var(--verde-escuro); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid var(--cinza-borda); } tbody td { padding: 12px 16px; border-bottom: 1px solid #EEF0EF; color: var(--preto); } tbody tr:hover { background: var(--realce-linha); } /* Linha selecionada. Fundo próprio + uma faixa dourada à esquerda: só a cor de fundo se perde no modo claro e some de vez no alto contraste, e a pessoa precisa enxergar de longe qual animal vai para a pesagem. */ tbody tr[data-sel] { cursor: pointer; } tbody tr.linha-selecionada, tbody tr.linha-selecionada:hover { background: var(--realce-selecao); } tbody tr.linha-selecionada td:first-child { box-shadow: inset 3px 0 0 var(--dourado); } [data-tema="contraste"] tbody tr.linha-selecionada { outline: 2px solid #000; } tbody tr:last-child td { border-bottom: none; } /* ---------- Linha da grade: uma linha só, sempre ---------- Uma célula que quebra em duas linhas desalinha a leitura de toda a grade — e numa lista de 50 animais isso é a diferença entre correr o olho e ter de ler linha a linha. Fonte menor, nada quebra, e o texto longo é cortado com reticências. Nada fica escondido: o texto inteiro aparece ao passar o mouse (o title é posto por prepararTabelasResponsivas, só nas células que realmente foram cortadas) e a tabela continua rolando de lado. Vale só do tablet para cima — no celular a linha vira cartão, com o rótulo ao lado do valor, e cortar ali esconderia justamente o que se foi ver. */ @media (min-width: 761px) { table { font-size: 12.5px; } thead th { padding: 10px 14px; } tbody td { padding: 10px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; } /* A coluna de ações não é texto: cortar um botão pela metade não ajuda. */ tbody td.celula-acoes { max-width: none; overflow: visible; } } .selo { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; } .selo-ativo { background: #E7F5E8; color: var(--verde-ok); } .selo-vendido, .selo-obito, .selo-descartado { background: #FDECEA; color: var(--vermelho); } .selo-transferido { background: #FFF6E0; color: #7a5900; } .selo-matriz { background: #EAF1FE; color: #2255c4; } .selo-reprodutor { background: #F3E9FE; color: #6a2fc4; } .selo-doadoradeovulo { background: #E6F6F4; color: #0f6b60; } .selo-doadordesemen { background: #FDEEF6; color: #9c2667; } .vazio { text-align: center; padding: 44px 20px; color: var(--cinza-texto); } /* ---------- Monitoramento de vacinação ---------- A legenda: vermelho vencida (ou nunca vacinada), amarelo a vencer em até 15 dias, verde acima disso. As mesmas três cores valem no selo da tabela, no ponto da árvore e na legenda do topo — a cor precisa querer dizer a mesma coisa em todo lugar. */ .selo-vac-vermelho { background: #FDECEA; color: var(--vermelho); } .selo-vac-amarelo { background: #FFF6E0; color: #7a5900; } .selo-vac-verde { background: #E7F5E8; color: var(--verde-ok); } .legenda-vacinacao { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 12.5px; color: var(--cinza-texto); margin: 0 0 14px; } .legenda-vacinacao span { display: flex; align-items: center; gap: 6px; } .ponto-vac { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; } .ponto-vac-vermelho { background: var(--vermelho); } .ponto-vac-amarelo { background: var(--amarelo-alerta); } .ponto-vac-verde { background: var(--verde-ok); } /* Aviso calculado dentro dos modais (próxima dose, carência). */ .aviso-vacina { background: var(--tinta-verde); border-left: 4px solid var(--verde-escuro); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.5; color: var(--verde-escuro); } .aviso-vacina[hidden] { display: none; } /* ---------- Árvore de vacinas ---------- */ .arvore-vacinas { display: flex; flex-direction: column; gap: 10px; } .no-vacina { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: var(--raio); overflow: hidden; } .no-vacina-cabecalho { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: none; text-align: left; font-family: var(--fonte); font-size: 14px; font-weight: 600; color: var(--verde-escuro); } .no-vacina-cabecalho:hover { background: var(--areia); } .no-vacina-seta { flex: none; font-size: 11px; color: var(--cinza-texto); transition: transform .15s; } .no-vacina.aberto .no-vacina-seta { transform: rotate(90deg); } .no-vacina-nome { flex: 1; min-width: 0; } .no-vacina-nome small { display: block; font-weight: 400; font-size: 12px; color: var(--cinza-texto); } .no-vacina-contagens { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .no-vacina-corpo { border-top: 1px solid var(--cinza-borda); overflow-x: auto; scrollbar-width: thin; scrollbar-color: #C4CBC9 var(--areia); } .no-vacina-corpo::-webkit-scrollbar { height: 11px; } .no-vacina-corpo::-webkit-scrollbar-track { background: var(--areia); } .no-vacina-corpo::-webkit-scrollbar-thumb { background: #C4CBC9; border-radius: 6px; } .no-vacina-corpo table { font-size: 13px; } .linha-animal-vac { cursor: pointer; } .historico-animal { background: var(--areia); } .historico-animal td { padding: 12px 16px 16px 44px; } .historico-animal h5 { margin: 0 0 8px; font-size: 12.5px; color: var(--verde-escuro); } .historico-animal ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.7; } /* Sino de aviso no topo. Só aparece quando há pendência — botão que nunca faz nada é ruído visual. */ .sino-notificacao { position: relative; background: none; border: none; padding: 6px 8px; font-size: 18px; line-height: 1; cursor: pointer; } .sino-notificacao.oculto { display: none; } .sino-contador { position: absolute; top: 0; right: 0; background: var(--vermelho); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 10px; min-width: 16px; text-align: center; } .grupo-aviso-vacina { margin-bottom: 20px; } .grupo-aviso-vacina h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; } /* ---------- Árvore do aviso de vacinas: protocolo > piquete > animais ---------- O segundo nível tem classes próprias (.no-lote-*) de propósito: a regra `.no-vacina.aberto .no-vacina-seta` alcança QUALQUER seta descendente, então reaproveitar a classe do primeiro nível giraria também as setas dos piquetes fechados assim que a vacina fosse aberta. */ .arvore-aviso .no-vacina-corpo { overflow-x: visible; } .sub-arvore-lotes { display: flex; flex-direction: column; } .no-lote + .no-lote { border-top: 1px solid var(--cinza-borda); } .no-lote-cabecalho { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 16px 11px 36px; background: var(--areia); border: none; text-align: left; font-family: var(--fonte); font-size: 13px; font-weight: 600; color: var(--verde-escuro); } .no-lote-cabecalho:hover { background: var(--tinta-verde-2); } .no-lote-seta { flex: none; font-size: 10px; color: var(--cinza-texto); transition: transform .15s; } .no-lote.aberto > .no-lote-cabecalho .no-lote-seta { transform: rotate(90deg); } .no-lote-datas { display: flex; gap: 16px; flex: none; flex-wrap: wrap; font-size: 12px; font-weight: 400; color: var(--cinza-texto); } .no-lote-datas b { color: var(--verde-escuro); font-weight: 600; } .no-lote-corpo { background: var(--branco); overflow-x: auto; } .no-lote-corpo table { font-size: 13px; } .marca-diverge { color: var(--amarelo-alerta); font-weight: 700; cursor: help; text-decoration: none; border: none; margin-left: 2px; } .titulo-bloco-ficha { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-texto); margin: 22px 0 8px; } .titulo-bloco-ficha:first-child { margin-top: 0; } .rotulo-desligar-aviso { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 500; color: var(--cinza-texto); text-transform: none; letter-spacing: 0; cursor: pointer; } .rotulo-desligar-aviso input[type="checkbox"] { width: auto; min-width: 0; margin: 0; } @media (max-width: 760px) { .no-vacina-cabecalho { flex-wrap: wrap; } .no-vacina-contagens { width: 100%; justify-content: flex-start; } .historico-animal td { padding-left: 16px; } .no-lote-cabecalho { flex-wrap: wrap; padding-left: 22px; } .no-lote-datas { width: 100%; gap: 12px; } } /* ---------- Modal ---------- */ .sobreposicao { position: fixed; inset: 0; background: rgba(10,41,36,.45); display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; z-index: 50; } .sobreposicao.aberta { display: flex; } .modal { background: var(--branco); border-radius: 14px; width: 100%; max-width: 640px; box-shadow: var(--sombra-lg); overflow: hidden; } .modal-cabecalho { padding: 20px 26px; border-bottom: 1px solid var(--cinza-borda); display: flex; justify-content: space-between; align-items: center; } .modal-fechar { background: none; border: none; font-size: 20px; color: var(--cinza-texto); padding: 4px 8px; } .modal-corpo { padding: 22px 26px; max-height: 60vh; overflow-y: auto; } .modal-rodape { padding: 16px 26px; border-top: 1px solid var(--cinza-borda); display: flex; justify-content: flex-end; gap: 10px; } .abas { display: flex; gap: 4px; border-bottom: 1px solid var(--cinza-borda); margin-bottom: 20px; } /* ---------- Barra de abas congelada ao rolar ---------- Formulário de quatro abas com 20 campos: ao chegar no fim da aba, a barra já saiu da tela e não há como trocar de aba sem voltar ao topo. As abas são a navegação da janela — navegação que some não navega. São duas situações, com âncoras diferentes: • Dentro de um modal, quem rola é o .modal-corpo, então a barra gruda no topo DELE (top: 0). O sangramento lateral negativo cobre o padding do corpo: sem ele o conteúdo aparece passando por baixo, nas beiradas. • Numa tela, quem rola é a página, e a barra do topo já está congelada em 64px — as abas param logo abaixo dela. Só do tablet para cima: no celular o cabeçalho quebra em duas linhas e a altura deixa de ser 64px fixos. O fundo é obrigatório nos dois casos: barra transparente deixaria o texto passar por trás enquanto rola. */ @media (min-width: 761px) { .conteudo .abas, .conteudo .abas-topo { position: sticky; top: 64px; z-index: 8; background: var(--areia); padding-top: 10px; } } .modal-corpo .abas { position: sticky; top: 0; z-index: 6; background: var(--branco); margin-left: -26px; margin-right: -26px; padding: 10px 26px 0; /* O corpo do modal tem padding, e o navegador congela a barra logo ABAIXO desse padding — sobra uma faixa de 22px por onde o texto rolando apareceria acima das abas. A sombra sólida pinta essa faixa; o próprio overflow do corpo a recorta, então não vaza para o cabeçalho. */ box-shadow: 0 -24px 0 var(--branco); } @media (max-width: 760px) { .modal-corpo .abas { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; } } .aba-btn { background: none; border: none; padding: 10px 4px; margin-right: 18px; font-size: 13.5px; font-weight: 600; color: var(--cinza-texto); border-bottom: 2.5px solid transparent; border-radius: 0; } .aba-btn.ativa { color: var(--verde-escuro); border-bottom-color: var(--dourado); } .painel-aba { display: none; } .painel-aba.ativa { display: block; } .carregando { text-align: center; padding: 60px 20px; color: var(--cinza-texto); } .oculto { display: none !important; } /* ---------- Ajuda de campo (ícone "?" + F2) ---------- */ .ajuda-campo-icone { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; position: relative; border-radius: 50%; background: var(--cinza-borda); color: var(--verde-escuro); font-size: 10.5px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; user-select: none; } .ajuda-campo-icone::after { /* área de toque de 44px ao redor do ícone, invisível — o "?" desenhado continua pequeno para não poluir o formulário, mas o dedo acerta. */ content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .ajuda-campo-icone:hover, .ajuda-campo-icone:focus { background: var(--dourado); outline: none; } .popover-ajuda { position: absolute; z-index: 90; background: var(--verde-escuro); color: var(--branco); font-size: 12.5px; font-weight: 400; line-height: 1.5; padding: 10px 14px; border-radius: 8px; box-shadow: var(--sombra-lg); letter-spacing: normal; } /* ---------- Relatórios ---------- */ .grupo-relatorios { margin-bottom: 30px; } .grade-relatorios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .cartao-relatorio { background: var(--branco); border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra); border-left: 4px solid var(--dourado); cursor: pointer; transition: box-shadow .15s, transform .1s; } .cartao-relatorio:hover { box-shadow: var(--sombra-lg); transform: translateY(-1px); } .cartao-relatorio h4 { margin: 0 0 6px; font-size: 14.5px; } .cartao-relatorio p { font-size: 12.5px; color: var(--cinza-texto); margin: 0; line-height: 1.4; } .contagem-resultado { font-size: 13px; color: var(--verde-escuro); font-weight: 600; margin: 4px 0 0; } .botoes-exportar { display: flex; gap: 10px; flex-wrap: wrap; } .btn-exportar { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 1.5px solid var(--cinza-borda); background: var(--branco); font-weight: 700; font-size: 13px; color: var(--verde-escuro); cursor: pointer; flex: 1; justify-content: center; min-width: 100px; } .btn-exportar:hover { border-color: var(--dourado); background: #FFFBF0; } .btn-exportar:disabled { opacity: .5; cursor: not-allowed; } .grade-relatorio-scroll { overflow: auto; border: 1px solid var(--cinza-borda); border-radius: 8px; margin-top: 4px; /* Mais alto que os 340px de antes: com a janela larga, sobra tela e o que faltava era ver mais linhas de uma vez. */ max-height: min(52vh, 440px); } .grade-relatorio-scroll table { font-size: 12.5px; white-space: nowrap; } .grade-relatorio-scroll thead th { position: sticky; top: 0; background: var(--branco); z-index: 2; } /* A primeira coluna é o identificador (Número do animal, Nome, Data). Rolar para o lado e perder a referência de qual linha se está lendo torna a grade inútil justamente quando ela tem muitas colunas. */ .grade-relatorio-scroll th:first-child, .grade-relatorio-scroll td:first-child { position: sticky; left: 0; background: var(--branco); box-shadow: 1px 0 0 var(--cinza-borda); z-index: 1; } .grade-relatorio-scroll thead th:first-child { z-index: 3; } .grade-relatorio-scroll tbody tr:hover td:first-child { background: var(--realce-linha); } .aviso-rolagem-lateral { font-size: 12px; color: var(--cinza-texto); margin: 6px 0 0; display: flex; align-items: center; gap: 6px; } /* Sombra na borda direita enquanto houver coluna escondida. Não depende da barra de rolagem aparecer — em macOS e no Chrome ela some sozinha, e foi por isso que a tabela pareceu simplesmente cortada. Sombra INSET não rola junto com o conteúdo: fica colada na borda da caixa. */ .grade-relatorio-scroll.tem-mais-a-direita { box-shadow: inset -18px 0 14px -14px rgba(10, 41, 36, .38); } /* ---------- Janela de relatório: a grade é quem rola ---------- Antes o corpo do modal rolava por fora E a grade rolava por dentro. Como a grade era mais alta que a área visível, a barra horizontal dela ficava ABAIXO da dobra: o usuário via a tabela cortada à direita e nada indicando que dava para rolar — foi exatamente a queixa. Agora o modal é uma coluna flex: cabeçalho e rodapé fixos, e a grade ocupa a sobra. A barra horizontal fica sempre na base da área visível. */ /* Só a partir de tablet: no celular os filtros empilham e o topo do corpo sozinho já passa da altura útil — travar a rolagem vertical ali recortaria a grade em vez de deixar chegar nela. Abaixo de 760px vale o modelo antigo, com o corpo do modal rolando e a grade com altura limitada. */ @media (min-width: 761px) { #sobreposicao-relatorio .modal { display: flex; flex-direction: column; max-height: calc(100vh - 80px); } #sobreposicao-relatorio .modal-corpo { display: flex; flex-direction: column; max-height: none; flex: 1; min-height: 0; overflow: hidden; } #sobreposicao-relatorio #rel-grade { display: flex; flex-direction: column; flex: 1; min-height: 0; } #sobreposicao-relatorio .grade-relatorio-scroll { flex: 1; min-height: 140px; max-height: none; } /* O topo do corpo (descrição, filtros, contagem) não encolhe; só a grade. */ #sobreposicao-relatorio .modal-corpo > :not(#rel-grade) { flex: none; } } /* ---------- Barra de rolagem horizontal sempre visível ---------- Em macOS e no Chrome a barra some quando ninguém está rolando, e o usuário conclui que a tabela acabou ali — foi o que aconteceu na janela de relatórios. Definir ::-webkit-scrollbar força a barra clássica, que fica. */ .rolagem-visivel { scrollbar-width: thin; scrollbar-color: #C4CBC9 var(--areia); } .rolagem-visivel::-webkit-scrollbar { height: 11px; width: 11px; } .rolagem-visivel::-webkit-scrollbar-track { background: var(--areia); border-radius: 6px; } .rolagem-visivel::-webkit-scrollbar-thumb { background: #C4CBC9; border-radius: 6px; } .rolagem-visivel::-webkit-scrollbar-thumb:hover { background: #A9B2B0; } /* Área usada exclusivamente para impressão (visualização/impressão do relatório) */ .area-impressao { display: none; } @media print { body * { visibility: hidden; } .area-impressao, .area-impressao * { visibility: visible; } .area-impressao { display: block !important; position: absolute; top: 0; left: 0; width: 100%; padding: 24px; } .area-impressao h2 { margin: 0 0 4px; color: #000; } .area-impressao .subtitulo-impressao { color: #555; font-size: 12px; margin: 0 0 16px; } .area-impressao table { width: 100%; border-collapse: collapse; font-size: 11px; } .area-impressao th, .area-impressao td { border: 1px solid #999; padding: 5px 8px; text-align: left; } .area-impressao thead th { background: #eee; } } @media (max-width: 760px) { .barra-lateral { position: fixed; z-index: 40; height: 100%; transform: translateX(-100%); transition: transform .2s; } .barra-lateral.aberta { transform: translateX(0); } .area-principal { width: 100%; } .btn-menu-mobile { display: inline-flex; align-items: center; justify-content: center; } .conteudo { padding: 16px 14px; } .modal-corpo, .modal-cabecalho, .modal-rodape { padding-left: 18px; padding-right: 18px; } /* Topo: com mais de uma fazenda, o seletor não cabia na mesma linha e empurrava o cabeçalho para 522px numa tela de 390px. Como isso alarga a página inteira, os modais estouravam junto. Agora o seletor desce para uma linha própria e o cabeçalho cresce em altura, não em largura. */ .topo { height: auto; min-height: 64px; flex-wrap: wrap; padding: 8px 14px; row-gap: 8px; } .topo-esquerda { flex: 1 1 auto; min-width: 0; } .topo h1 { font-size: 16px; } .topo .usuario-topo { flex: 0 0 auto; gap: 6px; margin-left: 0; } #seletor-fazenda-ativa { order: 10; flex: 1 0 100%; width: 100%; min-width: 0; max-width: none; margin: 0; } /* Mesma regra para a casca do seletor com busca (ver comentário no bloco do topo): no celular ela ocupa uma linha inteira, abaixo do cabeçalho. */ .topo > .seletor-busca { order: 10; flex: 1 0 100%; width: 100%; min-width: 0; max-width: none; margin: 0; } /* o avatar já identifica quem está logado; o nome só rouba largura aqui */ #topo-nome-usuario { display: none; } /* O Safari do iPhone dá zoom sozinho ao focar campos com fonte menor que 16px — e não desfaz depois, deixando a tela torta. */ input, select, textarea { font-size: 16px; } /* Alvos de toque: a referência é 44px. Estavam entre 17px e 40px. */ .btn-primario, .btn-secundario, .btn-perigo, .btn-texto, .aba-btn { min-height: 44px; } .btn-sm { min-height: 38px; padding: 8px 12px; } .nav-item { min-height: 44px; } .modal-fechar { min-width: 44px; min-height: 44px; } .btn-menu-mobile { min-width: 44px; min-height: 44px; } } /* ==================================================================== Diálogos do sistema (js/dialogos.js) ==================================================================== */ .modal-dialogo { max-width: 460px; } .dialogo-mensagem { white-space: pre-line; /* preserva as quebras de linha das mensagens */ font-size: 14px; line-height: 1.55; color: var(--preto); margin: 0; } #sobreposicao-dialogo { z-index: 70; } /* acima dos modais das telas */ /* ==================================================================== Tabelas viram cartões no celular. Rolar 9 colunas de lado é inviável de operar no curral, com o celular numa mão. Cada linha vira um cartão e cada célula ganha o rótulo da coluna à esquerda — os rótulos são colocados em data-label pelo JS (prepararTabelasResponsivas), lendo o , então isso vale para todas as telas sem precisar mexer no HTML de cada uma. ==================================================================== */ @media (max-width: 760px) { .tabela-cartao { overflow-x: visible; } .tabela-cartao table { border: none; } /* substituído no bloco de acessibilidade no fim do arquivo: display:none tirava o cabeçalho da árvore de acessibilidade junto (achado BX-09) */ .tabela-cartao table, .tabela-cartao tbody, .tabela-cartao tr, .tabela-cartao td { display: block; width: 100%; } .tabela-cartao tbody tr { border: 1px solid var(--cinza-borda); border-radius: var(--raio); margin: 0 0 10px; padding: 6px 12px; background: var(--branco); } .tabela-cartao tbody tr:last-child { margin-bottom: 4px; } .tabela-cartao tbody td { border: none; padding: 7px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right; font-size: 13.5px; } .tabela-cartao tbody td + td { border-top: 1px solid var(--areia); } .tabela-cartao tbody td[data-label]::before { content: attr(data-label); flex: 0 0 40%; text-align: left; font-weight: 600; font-size: 12.5px; color: var(--cinza-texto); } /* Célula de ações: botões ocupam a linha inteira, lado a lado. */ .tabela-cartao tbody td.celula-acoes { flex-wrap: wrap; justify-content: flex-start; gap: 8px; } .tabela-cartao tbody td.celula-acoes::before { flex-basis: 100%; margin-bottom: 2px; } .tabela-cartao tbody td.celula-acoes .btn-sm { flex: 1 1 auto; } /* Linha de "nenhum registro": ocupa o cartão inteiro, sem rótulo. */ .tabela-cartao tbody tr.linha-vazia { border: none; background: none; padding: 0; } .tabela-cartao tbody td.celula-vazia { justify-content: center; text-align: center; } } /* Rodapé de paginação das listagens (achado PERF-03) */ .rodape-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--cinza-borda); font-size: 13px; color: var(--cinza-texto); background: var(--superficie-fraca); } .controles-paginacao { display: flex; align-items: center; gap: 10px; } .rodape-paginacao button[disabled] { opacity: .45; cursor: not-allowed; } /* --------------------------------------------------------------------------- Acessibilidade (achados UX-02, UX-04, BX-06 da auditoria de 28/07/2026) --------------------------------------------------------------------------- */ /* O menu lateral virou para ser navegável por teclado. */ .nav-item { text-decoration: none; } /* Indicador de foco. O CSS anterior removia o outline nativo e o substituía por uma borda dourada: #FFAD00 sobre branco dá 1,87:1 e contra a borda normal (#E1E4E3) dá 1,46:1 — abaixo do mínimo de 3:1 do WCAG. Quem navega por teclado, num celular sob sol, simplesmente perdia onde estava. O verde escuro sobre branco dá 15,49:1. :focus-visible só aparece na navegação por teclado, então o clique de mouse continua limpo. */ :focus-visible { outline: 2px solid var(--verde-escuro); outline-offset: 2px; border-radius: 4px; } .barra-lateral :focus-visible, .topo .btn-texto:focus-visible { outline: 2px solid var(--dourado); outline-offset: -2px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--verde-escuro); outline-offset: 1px; } /* Respeita "Reduzir movimento" do sistema: sem isso, o menu lateral continua deslizando a tela toda a cada navegação para quem tem sensibilidade vestibular. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* Texto visível só para leitor de tela — usado nos das tabelas. */ .apenas-leitor-tela { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* No celular o cabeçalho da tabela era removido com display:none, o que também o tira da árvore de acessibilidade. Com clip ele some visualmente mas continua anunciável (achado BX-09). */ @media (max-width: 760px) { .tabela-cartao thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Alvos de toque: 44px é o mínimo recomendado. */ .tabela-cartao .btn-texto { padding-top: 10px; padding-bottom: 10px; } .abas { flex-wrap: wrap; } .tabela-cartao select { min-width: 0; width: 100%; } } /* ==================================================================== Campo obrigatório em destaque (25/08/2026) -------------------------------------------------------------------- Pedido do usuário: o rótulo em outra cor e o fundo do campo numa cor clara, para o preenchimento obrigatório saltar aos olhos antes de o usuário tentar salvar. Vale por CSS, não por JS: a regra olha o atributo required no momento, então os campos que só ficam obrigatórios em certas situações (Peso de Saída ao marcar Vendido, Origem da transferência, Resultado do diagnóstico) acendem e apagam sozinhos, sem nenhuma tela precisar avisar. Os que estão desabilitados ou dentro de um bloco .oculto não acendem — são exatamente os que validarCamposModal também ignora. Creme, e não vermelho: vermelho lê-se como "campo com erro", e aqui não há erro nenhum — o campo só precisa ser preenchido. O tom vem do dourado da marca. */ :root { /* 19/09/2026: o creme antigo (#FFF8EA) sumia ao lado do branco depois das linhas mais suaves do layout novo. Tom mais firme + faixa dourada à esquerda, que distingue o campo mesmo para quem enxerga pouca cor. */ --obrigatorio-fundo: #FFF1CC; --obrigatorio-borda: #E2B65C; --obrigatorio-faixa: #FFAD00; } .campo:has(> input[required]:not(:disabled)) > label, .campo:has(> select[required]:not(:disabled)) > label, .campo:has(> textarea[required]:not(:disabled)) > label { color: var(--dourado-texto); } input[required]:not(:disabled), select[required]:not(:disabled), textarea[required]:not(:disabled) { background-color: var(--obrigatorio-fundo); border-color: var(--obrigatorio-borda); } /* Select enfeitado pelo seletor com busca: quem aparece na tela é a casca, o