/* ===================================================================== FAZENDA JEQUITAI - Folha de estilo principal Desktop / tablet (uso principal) + celular (consulta) ===================================================================== */ /* --------------------------------------------------------------------- TEMA CLARO — o padrao, sempre. --------------------------------------------------------------------- `color-scheme: light` NAO e enfeite: e o que impede o navegador de inverter a pagina por conta propria. Sem essa declaracao, o Chrome com o sistema em modo escuro aplica o "Auto Dark Mode for Web Contents" — e foi exatamente o que acontecia aqui: nao havia tema escuro, havia o navegador adivinhando um. O tema real vem do atributo data-tema no , escrito pelo SERVIDOR a partir de usuarios.tema. Nada de prefers-color-scheme: seguir o sistema operacional foi o problema, nao a solucao. --------------------------------------------------------------------- */ :root{ color-scheme:light; --verde:#1f5c34; --verde-esc:#164226; --verde-claro:#e7f2ea; --terra:#8a5a2b; --amarelo:#f0a500; --vermelho:#c0392b; --azul:#1c6ea4; --cinza:#5c6a63; --cinza-claro:#f4f6f4; --borda:#d5ddd7; --texto:#1d2621; --branco:#fff; --superficie:#fff; /* fundo de cartao, tabela, campo, filtro */ --superficie-2:#fbfcfb; /* segundo nivel: sanfona aberta, linha sob o cursor */ /* Cores de ESTADO. Sao trinca (fundo, borda, texto) porque significam algo: verde deu certo, vermelho deu errado, amarelo atencao, azul informacao. Estao aqui, e nao espalhadas nas classes, porque senao cada tema novo vira uma cacada por #fdeceb pelo arquivo inteiro — foi o que aconteceu na primeira versao do tema escuro, e sobraram sete classes para tras. */ --ok-fundo:#e6f6ea; --ok-borda:#a9d9b6; --ok-texto:#17492a; --erro-fundo:#fdeceb; --erro-borda:#eab5af; --erro-texto:#8f2318; --alerta-fundo:#fdf5e2; --alerta-borda:#e8cf95; --alerta-texto:#6f5200; --info-fundo:#e8f2fa; --info-borda:#a9cbe4; --info-texto:#14547f; --neutro-fundo:#e6eae7; --neutro-texto:#465049; --roxo-fundo:#eadff5; --roxo-texto:#5b2d82; --raio:10px; --sombra:0 1px 3px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.05); --fonte:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* --------------------------------------------------------------------- TEMA ESCURO — escolha da pessoa, gravada na conta. --------------------------------------------------------------------- So troca VARIAVEL. Nenhuma regra nova de layout: se o escuro precisasse de regras proprias, cada tela nova teria de ser desenhada duas vezes, e uma das duas ficaria para tras — que e como um tema apodrece. O verde da marca continua o mesmo nos dois temas: identidade nao muda com a luz. O que muda e o fundo, a borda e o texto. --------------------------------------------------------------------- */ html[data-tema="escuro"]{ color-scheme:dark; --verde:#2f7d49; /* clareado: o verde escuro some no fundo escuro */ --verde-esc:#256239; --verde-claro:#1b2f22; --terra:#c08a4e; --amarelo:#f0b429; --vermelho:#e06055; --azul:#5aa9dd; /* link precisa de contraste sobre fundo escuro */ --cinza:#9fb0a6; --cinza-claro:#121714; /* o "fundo da pagina" */ --borda:#2c3a31; --texto:#e6ece8; --superficie:#1a221d; /* cartao, tabela, campo */ --superficie-2:#202a24; /* Mesmo significado, outra luminosidade. Fundo escurece, texto clareia, e o contraste fica onde estava — as versoes claras sobre fundo escuro viram manchas berrantes e perdem a hierarquia justo onde ela mais importa. */ --ok-fundo:#17351f; --ok-borda:#2c5c39; --ok-texto:#a7e6b8; --erro-fundo:#3d1c18; --erro-borda:#7a352c; --erro-texto:#f2b5ab; --alerta-fundo:#3a2f10; --alerta-borda:#6b5620; --alerta-texto:#f0d79a; --info-fundo:#12303f; --info-borda:#2b5f7d; --info-texto:#a8d5ee; --neutro-fundo:#252f29; --neutro-texto:#b9c5be; --roxo-fundo:#2c1f3a; --roxo-texto:#d3b6ee; --sombra:0 1px 3px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--fonte); font-size:16px; color:var(--texto); background:var(--cinza-claro); -webkit-text-size-adjust:100%; } a{color:var(--azul);text-decoration:none} a:hover{text-decoration:underline} h1{font-size:1.5rem;margin:0 0 .2rem} h2{font-size:1.15rem;margin:0 0 .6rem} h3{font-size:1rem;margin:0 0 .4rem} p{margin:.3rem 0} .pular{position:absolute;left:-9999px} .pular:focus{left:8px;top:8px;background:var(--superficie);padding:8px;z-index:999} /* ---------------------------------------------------------- cabecalho */ /* O cabecalho PODE quebrar em duas linhas: nome de fazenda comprido mais o indicador de conexao, o contador de pendencias e o botao de sair nao cabem num celular estreito, e sem quebrar isso empurrava a pagina inteira para o lado — com barra de rolagem horizontal em TODAS as telas. */ .topo{background:var(--verde);color:#fff;position:sticky;top:0;z-index:50} .topo-int{max-width:1500px;margin:0 auto;padding:.5rem .9rem;display:flex;align-items:center; gap:.6rem 1rem;flex-wrap:wrap} .marca{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;min-width:0} .marca:hover{text-decoration:none} .marca-txt{min-width:0} /* Nome comprido corta com reticencias em vez de esticar o cabecalho. */ .marca-txt strong{display:block;font-size:1.05rem;line-height:1.1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .marca-txt small{opacity:.8;font-size:.75rem;display:block; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topo-dir{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-size:.85rem;flex-wrap:wrap} .usuario{opacity:.9} .btn-menu{display:none;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff; font-size:1.2rem;border-radius:8px;padding:.2rem .55rem;cursor:pointer} /* indicador on-line / off-line */ .sync{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.14); padding:.2rem .55rem;border-radius:999px;font-size:.78rem;white-space:nowrap} .sync .bolinha{width:9px;height:9px;border-radius:50%;background:#7ee08a;box-shadow:0 0 0 2px rgba(126,224,138,.25)} .sync.offline{background:var(--vermelho)} .sync.offline .bolinha{background:#ffd9d4;box-shadow:none} .sync.pendente{background:var(--amarelo);color:#3a2b00} .sync.pendente .bolinha{background:#7a5b00} /* Contador de pendencias: a cor vinha do style inline no layout.php e por isso nao acompanhava o tema. Agora e classe, e o amarelo sai da variavel. */ .sync-pendencias{background:var(--amarelo);color:#3a2c00} html[data-tema="escuro"] .sync-pendencias{color:#241a00} /* ---------------------------------------------------------- menu */ /* O topo do menu acompanha a ALTURA REAL do cabecalho, medida pelo assets/js/app.js. Estava cravado em 52px; bastava o cabecalho quebrar em duas linhas — nome de fazenda comprido, celular estreito — para o menu grudado subir por cima dele e tapar o botao de sair. O 52px continua como reserva, para o caso de o JavaScript nao rodar. */ .menu{background:var(--verde-esc);position:sticky;top:var(--alt-topo,52px);z-index:40} .menu-int{max-width:1500px;margin:0 auto;display:flex;gap:.15rem;padding:0 .6rem;overflow-x:auto} .menu-item{color:#dbe9df;padding:.65rem .8rem;font-size:.9rem;white-space:nowrap;border-bottom:3px solid transparent} .menu-item:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff} .menu-item.ativo{color:#fff;border-bottom-color:var(--amarelo);background:rgba(255,255,255,.06)} .menu-sep{flex:1} /* ---------------------------------------------------------- conteudo */ .conteudo{max-width:1500px;margin:0 auto;padding:1rem .9rem 3rem} body.largo .conteudo{max-width:100%} .cab-pagina{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;justify-content:space-between;margin-bottom:.9rem} .cab-pagina .sub{color:var(--cinza);font-size:.9rem;margin:0} .cab-acoes{display:flex;gap:.5rem;flex-wrap:wrap} .cartao{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio); box-shadow:var(--sombra);padding:1rem;margin-bottom:1rem} .cartao h2{border-bottom:1px solid var(--borda);padding-bottom:.45rem;margin-bottom:.7rem} .cartao.compacto{padding:.7rem .8rem} .grade{display:grid;gap:1rem} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}} /* ---------------------------------------------------------- abas */ .abas{display:flex;gap:.2rem;border-bottom:2px solid var(--borda);margin-bottom:1rem;overflow-x:auto} .abas a{padding:.55rem .9rem;color:var(--cinza);font-weight:600;font-size:.92rem;white-space:nowrap; border-bottom:3px solid transparent;margin-bottom:-2px} .abas a:hover{text-decoration:none;color:var(--verde)} .abas a.ativo{color:var(--verde);border-bottom-color:var(--verde)} /* ---------------------------------------------------------- botoes */ .btn{display:inline-flex;align-items:center;gap:.4rem;justify-content:center; background:var(--verde);color:#fff;border:1px solid var(--verde);border-radius:8px; padding:.55rem .95rem;font-size:.95rem;font-family:inherit;font-weight:600;cursor:pointer; text-decoration:none;line-height:1.2} .btn:hover{background:var(--verde-esc);text-decoration:none;color:#fff} .btn:disabled{opacity:.5;cursor:not-allowed} .btn-sec{background:var(--superficie);color:var(--verde);border-color:var(--borda)} .btn-sec:hover{background:var(--verde-claro);color:var(--verde-esc)} .btn-perigo{background:var(--vermelho);border-color:var(--vermelho)} .btn-perigo:hover{background:#9e2d21} .btn-aviso{background:var(--amarelo);border-color:var(--amarelo);color:#3a2b00} .btn-aviso:hover{background:#d69200;color:#3a2b00} .btn-fino{padding:.3rem .6rem;font-size:.82rem;font-weight:500} .btn-grande{padding:.9rem 1.4rem;font-size:1.1rem;min-height:48px} .btn-bloco{width:100%} /* ---------------------------------------------------------- formularios */ label{display:block;font-size:.85rem;font-weight:600;color:var(--cinza);margin-bottom:.2rem} /* CAIXA DE MARCAR E RADIO FICAM DE FORA desta regra. Antes nao ficavam: elas herdavam fundo, borda, padding e border-radius de campo de texto, o navegador pintava por cima do desenho nativo e o resultado no tema escuro era uma caixa escura sem marca visivel. Em claro passava despercebido porque o fundo era branco igual. Sem a regra, o navegador desenha a caixa como ele sabe — e `accent-color` diz a cor da marca. */ input:not([type=checkbox]):not([type=radio]),select,textarea{ width:100%;font-family:inherit;font-size:1rem;padding:.5rem .6rem; border:1px solid var(--borda);border-radius:8px;background:var(--superficie);color:var(--texto)} input:focus,select:focus,textarea:focus{outline:2px solid var(--verde);outline-offset:1px;border-color:var(--verde)} input[type=checkbox],input[type=radio]{ width:auto;margin-right:.4rem; /* 1.25 de escala esticava a caixa e borrava a marca. width/height de verdade dao o mesmo tamanho com desenho nitido. */ inline-size:1.05rem;block-size:1.05rem; accent-color:var(--verde);cursor:pointer;vertical-align:-2px} input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed;opacity:.55} textarea{min-height:70px;resize:vertical} .campo{margin-bottom:.8rem} .campos{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .campos.duas{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .dica{font-size:.78rem;color:var(--cinza);margin-top:.15rem} fieldset{border:1px solid var(--borda);border-radius:var(--raio);padding:.8rem;margin:0 0 1rem} legend{font-weight:700;font-size:.9rem;padding:0 .4rem;color:var(--verde)} .linha-botoes{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem} /* ---------------------------------------------------------- tabelas */ .tabela-rolar{overflow-x:auto;-webkit-overflow-scrolling:touch} table.tab{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--superficie)} table.tab th,table.tab td{padding:.5rem .55rem;border-bottom:1px solid var(--borda);text-align:left;vertical-align:middle} table.tab thead th{background:var(--verde-claro);color:var(--verde-esc);font-size:.8rem; text-transform:uppercase;letter-spacing:.02em;position:sticky;top:0} table.tab tbody tr:hover{background:var(--superficie-2)} table.tab td.num,table.tab th.num{text-align:right;font-variant-numeric:tabular-nums} table.tab td.cen,table.tab th.cen{text-align:center} table.tab tfoot td{font-weight:700;background:var(--cinza-claro)} .vazio{padding:1.4rem;text-align:center;color:var(--cinza);font-style:italic} /* ---------------------------------------------------------- etiquetas */ .etiq{display:inline-block;padding:.13rem .5rem;border-radius:999px;font-size:.76rem;font-weight:700;white-space:nowrap} .etiq-ok{background:var(--ok-fundo);color:var(--ok-texto)} .etiq-aviso{background:var(--alerta-fundo);color:var(--alerta-texto)} .etiq-ruim{background:var(--erro-fundo);color:var(--erro-texto)} .etiq-neutro{background:var(--neutro-fundo);color:var(--neutro-texto)} .etiq-info{background:var(--info-fundo);color:var(--info-texto)} .etiq-roxo{background:var(--roxo-fundo);color:var(--roxo-texto)} /* ---------------------------------------------------------- recados .recado e a faixa FIXA, que fica onde foi escrita: usada por telas que mostram resultado para ser lido com calma (a conferencia da importacao). Para confirmacao de lancamento existe o .aviso, logo abaixo. */ .recado{padding:.7rem .9rem;border-radius:var(--raio);margin-bottom:.9rem;font-size:.93rem;border:1px solid} .recado-ok{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-texto)} .recado-erro{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto)} .recado-aviso{background:var(--alerta-fundo);border-color:var(--alerta-borda);color:var(--alerta-texto)} .recado-info{background:var(--info-fundo);border-color:var(--info-borda);color:var(--info-texto)} /* --------------------------------------------------- avisos flutuantes Sobem sobre o conteudo, nao empurram a pagina, e somem sozinhos. Encostam por baixo do cabecalho, usando a altura REAL dele, em vez de tapar o nome da fazenda e o botao de sair. */ .avisos{position:fixed;top:calc(var(--alt-topo,52px) + .6rem);left:50%;transform:translateX(-50%);z-index:1000; width:min(560px,calc(100vw - 1.6rem));display:flex;flex-direction:column;gap:.5rem; pointer-events:none} .aviso{pointer-events:auto;position:relative;padding:.75rem 2.4rem .75rem 1rem; border-radius:var(--raio);font-size:.94rem;line-height:1.35;border:1px solid; box-shadow:0 8px 24px rgba(0,0,0,.16); animation:aviso-entra .22s ease-out} .aviso-ok{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-texto)} .aviso-erro{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-texto)} .aviso-aviso{background:var(--alerta-fundo);border-color:var(--alerta-borda);color:var(--alerta-texto)} .aviso-info{background:var(--info-fundo);border-color:var(--info-borda);color:var(--info-texto)} .aviso .fechar{position:absolute;top:.35rem;right:.4rem;width:1.7rem;height:1.7rem; border:0;background:transparent;color:inherit;opacity:.55;cursor:pointer; font-size:1.15rem;line-height:1;border-radius:var(--raio)} .aviso .fechar:hover{opacity:1;background:rgba(0,0,0,.07)} .aviso.saindo{animation:aviso-sai .25s ease-in forwards} @keyframes aviso-entra{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} @keyframes aviso-sai{to{opacity:0;transform:translateY(-10px)}} /* Quem pediu menos movimento no sistema recebe o aviso sem deslize. */ @media(prefers-reduced-motion:reduce){ .aviso,.aviso.saindo{animation:none} .aviso.saindo{opacity:0} } /* ------------------------------------------------- previa da busca Cinco linhas visiveis e o resto na rolagem: a lista precisa caber sem tapar o formulario, e a altura fixa impede que ela pule de tamanho a cada tecla. O valor sai de 5 x (altura da linha) + a folga do padding. */ .previa-berco{position:relative} .previa{position:absolute;top:100%;left:0;right:0;z-index:60;margin-top:2px; background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio); box-shadow:0 10px 28px rgba(0,0,0,.18); max-height:calc(5 * 3.05rem);overflow-y:auto;overscroll-behavior:contain} .previa-linha{padding:.4rem .7rem;cursor:pointer;border-bottom:1px solid var(--borda); min-height:3.05rem;display:flex;flex-direction:column;justify-content:center} .previa-linha:last-child{border-bottom:0} .previa-linha:hover,.previa-linha.marcada{background:var(--verde-claro,#e8f3ec)} .previa-fj{font-weight:700;font-size:.98rem} .previa-dica{color:var(--cinza);font-size:.82rem} .previa-vazio{padding:.6rem .7rem;color:var(--cinza);font-size:.86rem} /* ------------------------------------------------- animais escolhidos */ .marcados{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .5rem} .marcado{display:inline-flex;align-items:center;gap:.3rem;background:var(--verde-claro,#e8f3ec); border:1px solid var(--borda);border-radius:999px;padding:.15rem .3rem .15rem .6rem; font-size:.86rem;font-weight:600} .marcado button{border:0;background:transparent;cursor:pointer;font-size:1rem;line-height:1; color:var(--cinza);padding:0 .25rem;border-radius:50%} .marcado button:hover{background:rgba(0,0,0,.1);color:#000} /* --------------------------------------------------------- sanfona Uma acao aberta por vez. O espaco embaixo do conteudo aberto e o que antes faltava: o botao "Salvar aplicação" encostava no titulo da acao seguinte, e era facil clicar no lugar errado. */ [data-sanfona] > details{margin-bottom:.4rem} [data-sanfona] > details[open]{border:1px solid var(--borda);border-radius:var(--raio); padding:.5rem;margin-bottom:.9rem;background:var(--superficie-2)} [data-sanfona] > details[open] > summary{margin-bottom:.2rem} [data-sanfona] > details > form{padding-bottom:.35rem} [data-sanfona] > .btn-bloco{margin-bottom:.4rem} /* ---------------------------------------------------------- painel */ .tot{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);padding:.8rem .9rem;box-shadow:var(--sombra)} .tot .n{font-size:1.9rem;font-weight:800;color:var(--verde);line-height:1.1;font-variant-numeric:tabular-nums} .tot .r{font-size:.82rem;color:var(--cinza);text-transform:uppercase;letter-spacing:.03em} .atalhos{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .atalho{display:flex;align-items:center;gap:.8rem;background:var(--superficie);border:1px solid var(--borda); border-radius:var(--raio);padding:1rem;box-shadow:var(--sombra);color:var(--texto);font-weight:700;min-height:76px} .atalho:hover{text-decoration:none;border-color:var(--verde);background:var(--verde-claro)} .atalho .ic{font-size:2rem;line-height:1} .atalho small{display:block;font-weight:400;color:var(--cinza);font-size:.8rem} .atalho.destaque{background:var(--verde);color:#fff;border-color:var(--verde)} .atalho.destaque small{color:#d5e8db} .atalho.destaque:hover{background:var(--verde-esc)} .alerta-item{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .2rem;border-bottom:1px dashed var(--borda)} .alerta-item:last-child{border-bottom:0} .alerta-item .ic{font-size:1.25rem} .alerta-item .tt{font-weight:700} .alerta-item .tx{font-size:.85rem;color:var(--cinza)} .alerta-urgente .tt{color:var(--vermelho)} .alerta-atrasado .tt{color:var(--erro-texto)} /* ---------------------------------------------------------- MODO CURRAL */ body.curral{background:#0f1a13;color:#fff} body.curral .topo{background:#000} body.curral .conteudo{max-width:100%;padding:.6rem} .curral-barra{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;background:#16241b; border:1px solid #2c4434;border-radius:var(--raio);padding:.6rem .8rem;margin-bottom:.7rem} .curral-barra .contador{font-size:1.05rem;font-weight:700} .curral-barra .contador b{font-size:1.5rem;color:#8fe0a3} .curral-grade{display:grid;gap:.7rem;grid-template-columns:minmax(320px,420px) 1fr} @media(max-width:900px){.curral-grade{grid-template-columns:1fr}} .painel-curral{background:#16241b;border:2px solid #2c4434;border-radius:var(--raio);padding:.8rem} .painel-curral h2{color:#8fe0a3;border-color:#2c4434} body.curral label{color:#9fb8a8;font-size:1rem} /* Mesma exclusao da regra geral: caixa de marcar nao e campo de texto, e pintar fundo por cima dela apaga o desenho nativo. No curral isso doia mais — fundo #0b130e sobre a caixa deixava a marca invisivel, com a usuaria de luva e sol na tela. */ body.curral input:not([type=checkbox]):not([type=radio]), body.curral select,body.curral textarea{ background:#0b130e;color:#fff;border:2px solid #3c5a45;font-size:1.25rem;padding:.7rem;min-height:52px} /* No curral a marca fica maior: dedo de luva erra alvo pequeno. */ body.curral input[type=checkbox],body.curral input[type=radio]{ inline-size:1.5rem;block-size:1.5rem;accent-color:#4caf6a} body.curral input:focus,body.curral select:focus{outline:3px solid var(--amarelo);border-color:var(--amarelo)} body.curral .btn{min-height:52px;font-size:1.05rem;padding:.7rem 1.1rem} body.curral .btn-sec{background:#22362a;color:#cfe9d7;border-color:#3c5a45} body.curral .btn-sec:hover{background:#2c4434;color:#fff} body.curral table.tab{background:#16241b;color:#e6f0e9} body.curral table.tab thead th{background:#22362a;color:#8fe0a3} body.curral table.tab th,body.curral table.tab td{border-bottom-color:#2c4434} body.curral table.tab tbody tr:hover{background:#1c2e22} /* No brete a lista de produtos e escura NOS DOIS TEMAS, pelo mesmo motivo do resto do curral: sol na tela e a usuaria de luva. Alto contraste ali e requisito de operacao, nao preferencia. */ body.curral .chk-produtos label{background:#0b130e;border-color:#3c5a45;color:#e6f0e9} body.curral .chk-produtos label:hover{border-color:#8fe0a3} body.curral .chk-produtos label.marcado{background:#1f5c34;border-color:#8fe0a3;color:#fff} #leitura{font-size:1.9rem;letter-spacing:.04em;text-align:center;font-weight:700;min-height:66px} .peso-entrada{font-size:2.6rem !important;text-align:center;font-weight:800;min-height:80px !important} .animal-card{background:#0b130e;border:3px solid #8fe0a3;border-radius:12px;padding:.9rem;margin-bottom:.7rem} .animal-card.intruso{border-color:var(--vermelho);background:#2a0f0c} .animal-fj{font-size:3rem;font-weight:900;line-height:1;color:#fff} .animal-sub{color:#9fb8a8;font-size:1rem;margin-top:.2rem} .destaque-verm{background:#3a2b00;border:2px solid var(--amarelo);border-radius:10px; padding:.6rem .8rem;margin:.6rem 0;font-size:1.15rem;font-weight:700;color:#ffd970} .destaque-verm small{display:block;color:#c9b271;font-weight:600;font-size:.8rem;text-transform:uppercase} .linha-info{display:flex;justify-content:space-between;gap:.6rem;padding:.35rem 0;border-bottom:1px dashed #2c4434;font-size:1.05rem} .linha-info span:first-child{color:#9fb8a8} .linha-info b{font-size:1.15rem} .aviso-animal{background:#4a1410;border:2px solid var(--vermelho);color:#ffc9c2; border-radius:10px;padding:.55rem .8rem;margin:.5rem 0;font-weight:700} .botoes-aparte{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .botoes-aparte .btn{min-height:56px} /* ---------------------------------------------------------- produtos ESTA LISTA APARECE EM DUAS TELAS DIFERENTES: - abrir sessao (curral.php:69) -> pagina normal, segue o tema - trabalho no brete (curral.php:176) -> body.curral, escuro sempre A versao escura estava escrita como padrao, e a tela de abrir sessao a desfazia com `style="background:#fff"` cravado no HTML. Estilo inline vence qualquer seletor — inclusive o tema. Com `--texto` claro no tema escuro, sobrava texto claro em bloco branco: ilegivel, e brilhando no meio de uma tela escura. O padrao passou a ser o do TEMA; o escuro do brete e a excecao, e vive onde as outras excecoes do curral vivem. */ .chk-produtos{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .chk-produtos label{display:flex;align-items:center;gap:.5rem; background:var(--superficie);border:2px solid var(--borda); border-radius:8px;padding:.6rem;font-size:1rem;color:var(--texto); cursor:pointer;min-height:50px;margin:0} .chk-produtos label:hover{border-color:var(--verde)} .chk-produtos label.marcado{background:var(--verde);border-color:var(--verde);color:#fff} .fila-off{background:#3a2b00;color:#ffd970;border:1px solid var(--amarelo);border-radius:8px; padding:.4rem .7rem;font-size:.9rem;font-weight:700} /* ---------------------------------------------------------- diversos */ .busca-rapida{display:flex;gap:.5rem;flex-wrap:wrap;align-items:flex-end} .busca-rapida .campo{margin:0;flex:1;min-width:160px} .filtros{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);padding:.8rem;margin-bottom:1rem} /* Campos de filtro alinhados PELA BASE. O grid estica cada celula ate a altura da mais alta, entao um rotulo que quebra em duas linhas empurrava o campo dele para baixo e desalinhava a fileira. Empurrar o conteudo para o fim resolve para qualquer rotulo, nao so para o que quebrou desta vez. */ .filtros .campo{display:flex;flex-direction:column;justify-content:flex-end} /* Excecao: a celula dos botoes e uma FILEIRA. Sem isto a regra acima empilha "Filtrar" e "Limpar" um sobre o outro. */ .filtros .campo-acoes{flex-direction:row;align-items:flex-end;gap:.4rem} .pilulas{display:flex;gap:.4rem;flex-wrap:wrap} .pilula{background:var(--superficie);border:1px solid var(--borda);border-radius:999px;padding:.3rem .8rem;font-size:.85rem;color:var(--cinza)} .pilula.ativo{background:var(--verde);color:#fff;border-color:var(--verde)} .pilula:hover{text-decoration:none} .linha-tempo{list-style:none;margin:0;padding:0} .linha-tempo li{position:relative;padding:.55rem 0 .55rem 1.6rem;border-bottom:1px dashed var(--borda)} .linha-tempo li:before{content:"";position:absolute;left:.35rem;top:1rem;width:9px;height:9px; border-radius:50%;background:var(--verde)} .linha-tempo .dt{font-size:.8rem;color:var(--cinza);font-weight:700} /* Observacao escrita pela usuaria: o unico texto da linha do tempo que nao foi o sistema que montou, entao aparece com marca propria. */ .obs-nota{display:inline-block;margin-top:.2rem;padding:.2rem .5rem;font-size:.85rem; background:var(--alerta-fundo);border-left:3px solid var(--alerta-borda);color:var(--alerta-texto);border-radius:0 4px 4px 0; white-space:pre-wrap} .abaixo-meta{color:var(--vermelho);font-weight:700} .acima-meta{color:var(--verde)} .mono{font-family:"Consolas","Courier New",monospace;font-size:.88rem} .nada{color:var(--cinza)} .sep{height:1px;background:var(--borda);margin:1rem 0} .aviso-consang{background:var(--erro-fundo);border:2px solid var(--vermelho);color:var(--erro-texto); border-radius:8px;padding:.6rem .8rem;font-weight:700;margin:.5rem 0} .rodape{max-width:1500px;margin:0 auto;padding:1rem .9rem 2rem;color:var(--cinza); font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem} body.curral .rodape{color:#5f7a68} /* ---------------------------------------------------------- celular */ @media(max-width:760px){ .btn-menu{display:block} .menu{display:none;position:static} body.menu-aberto .menu{display:block} .menu-int{flex-direction:column;padding:.3rem} .menu-item{border-bottom:1px solid rgba(255,255,255,.08);border-left:3px solid transparent} .menu-item.ativo{border-bottom-color:rgba(255,255,255,.08);border-left-color:var(--amarelo)} .usuario{display:none} .conteudo{padding:.7rem} h1{font-size:1.25rem} table.tab{font-size:.85rem} .cab-pagina{flex-direction:column;align-items:stretch} .cab-acoes .btn{flex:1} } /* ---------------------------------------------------------- impressao */ @media print{ .topo,.menu,.rodape,.cab-acoes,.btn,.filtros,.abas,.recado,.avisos,.nao-imprime{display:none !important} body{background:#fff;font-size:11pt} .conteudo{padding:0;max-width:100%} .cartao{border:0;box-shadow:none;padding:0;margin:0 0 .5rem} table.tab{font-size:9.5pt} table.tab th,table.tab td{padding:.18rem .3rem} table.tab thead th{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .quebra{page-break-after:always} @page{size:A4 portrait;margin:10mm} .folha-cab{display:block !important;border-bottom:2px solid #000;margin-bottom:6px;padding-bottom:4px} } .folha-cab{display:none} /* --------------------------------------------------------------------- TEMA ESCURO — etiquetas, recados e avisos --------------------------------------------------------------------- Estes tem cor PROPRIA, de significado: verde = deu certo, vermelho = deu errado, amarelo = atencao. Sao os unicos casos que precisam de regra e nao so de variavel — as cores claras originais, sobre fundo escuro, viram manchas berrantes e perdem a hierarquia justamente onde ela mais importa: no aviso. O significado nao muda; muda a luminosidade. Fundo escurece, texto clareia, e o contraste fica onde estava. --------------------------------------------------------------------- */ /* MODO CURRAL FICA FORA DO TEMA, DE PROPOSITO. Ele ja e escuro nos dois temas — nao por estilo, mas porque e usado no brete, com sol na tela e a usuaria de luva. Alto contraste ali e requisito de operacao, nao preferencia. Um "curral claro" seria pior para quem trabalha, entao o tema nao o alcanca. */ /* O botao de tema vive num
, que por padrao e bloco e empurraria o cabecalho para outra linha. Aqui ele nao ocupa espaco proprio. */ .form-tema{display:inline;margin:0} /* Botao so de icone: quadrado, sem o padding lateral de botao com texto. O SVG usa currentColor, entao acompanha a cor do botao nos dois temas. */ .btn-icone{padding:.28rem .42rem;line-height:0} .btn-icone svg{display:block}