:root { /* Cores do modo claro (padrão) */ --primary-color: #2a9d8f; --secondary-color: #264653; --accent-color: #e9c46a; --text-dark: #333; --text-light: #fff; --header-bg: rgba(38, 70, 83, 0.95); --btn-primary: #2a9d8f; --btn-secondary: #e9c46a; --btn-highlight: #f4a261; --btn-text: #264653; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --body-bg: #ffffff; --card-bg: #fff; --border-color: #ddd; --icon-bg: rgba(42, 157, 143, 0.2); --icon-bg-hover: rgba(42, 157, 143, 0.3); } /* Modo escuro */ [data-theme="dark"] { --primary-color: #3aafa9; --secondary-color: #2b7a78; --accent-color: #ffb347; --text-dark: #f1f1f1; --text-light: #ffffff; --header-bg: rgba(23, 37, 42, 0.95); --btn-primary: #3aafa9; --btn-secondary: #ffb347; --btn-highlight: #ff9642; --btn-text: #17252a; --shadow: 0 4px 6px rgba(0, 0, 0, 0.25); --body-bg: #17252a; --card-bg: #2b7a78; --border-color: #345d5a; --icon-bg: rgba(58, 175, 169, 0.2); --icon-bg-hover: rgba(58, 175, 169, 0.3); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-dark); line-height: 1.6; min-height: 100vh; position: relative; overflow-x: hidden; background-color: var(--body-bg); transition: background-color 0.3s ease; } /* Header and Navigation */ header { background-color: var(--header-bg); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: var(--shadow); } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; max-width: 1400px; margin: 0 auto; } .logo-area { display: flex; align-items: center; } /* Estilo do botão Teste agora! no estilo ticket */ .cta-teste { --cta-orange: #FF6723; font: 700 0.92rem/1.2 "Segoe UI", sans-serif; color: #fff; text-transform: uppercase; letter-spacing: .4px; background: var(--cta-orange); padding: 0.5rem 1rem; display: inline-block; position: relative; border-radius: 4px; white-space: nowrap; transition: filter .2s ease; text-decoration: none; } .cta-teste:hover { filter: brightness(1.1); } /* "mordidas" laterais para o formato de ticket */ .cta-teste::before, .cta-teste::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: var(--header-bg); border-radius: 50%; } .cta-teste::before { left: -7px; } .cta-teste::after { right: -7px; } .nav-menu { display: flex; gap: 15px; } .nav-menu a { color: var(--text-light); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 4px; transition: all 0.3s ease; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: 0.95rem; } .nav-menu a i { font-size: 1rem; color: var(--accent-color); } .nav-menu a:hover, .nav-menu a.active { background-color: rgba(255, 255, 255, 0.1); } .nav-menu a.active i { color: #fff; } .login-area { display: flex; align-items: center; gap: 15px; } /* Estilo do botão dark mode */ .theme-toggle { background-color: transparent; color: var(--text-light); border: none; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: all 0.3s ease; } .theme-toggle:hover { background-color: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .theme-toggle .fa-moon { color: var(--accent-color); } /* Ajustes para elementos no modo escuro */ [data-theme="dark"] .farm-image { filter: brightness(0.85); } /* Preservar cores originais dos ícones mesmo no modo escuro */ [data-theme="dark"] .farm-icon i { /* Mantém as cores originais dos ícones */ color: inherit; } .login-btn { background-color: transparent; color: var(--text-light); border: 1px solid var(--text-light); padding: 8px 15px; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; } .login-btn:hover { background-color: rgba(255, 255, 255, 0.1); } .signup-btn { background-color: var(--btn-primary); color: var(--text-light); border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; } .signup-btn:hover { background-color: #238b7e; } /* Main Content */ .farm-container { position: relative; width: 100%; padding-top: 75px; /* Espaço para o header fixo */ height: calc(100vh - 75px); overflow: hidden; background-color: var(--body-bg); transition: background-color 0.3s ease; } .farm-image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Ajuste para telas desktop - exibe a imagem inteira */ @media (min-width: 992px) { .farm-image { object-fit: contain; max-height: calc(100vh - 75px); } .farm-container { background-color: var(--body-bg); /* Cor de fundo baseada no tema */ } } /* Farm Icons Area (preparação para o próximo passo) */ .farm-icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Permitirá clicar através dessa camada */ overflow: hidden; /* Garantir que os ícones não extravasem a área */ } .farm-icon { position: absolute; width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease, width 0.3s ease, height 0.3s ease; pointer-events: auto; /* Para que sejam clicáveis */ cursor: pointer; /* Tamanho reduzido para 70% por padrão */ transform: scale(0.6); } .farm-icon:hover { /* Aumenta 40% do tamanho normal quando hover */ transform: scale(1); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .farm-icon .icon-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); background-color: var(--secondary-color); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; white-space: nowrap; font-weight: 500; /* Garantir que o label seja visível mesmo com o ícone reduzido */ z-index: 20; } .farm-icon:hover .icon-label { opacity: 1; transform: translateX(-50%) translateY(-3px); } /* Estilos específicos para o posto de combustível - posicionamento fixo para desktop */ .fuel-station { position: absolute; /* Posição para desktop - valores exatos */ top: 476.927px; left: 1559.15px; background-color: rgba(244, 162, 97, 0.9); border: 2px solid #e76f51; z-index: 10; transform-origin: center; } /* Posição para tablets usando transform para centralização */ @media (max-width: 1199px) and (min-width: 768px) { .farm-icon { transform: translate(-50%, -50%) scale(0.6); } .farm-icon:hover { transform: translate(-50%, -50%) scale(1); } .fuel-station { top: 70%; left: 80%; } .grain-storage { top: 60%; left: 70%; } .office { top: 85%; left: 78%; } .cattle { top: 75%; left: 88%; } .inventory { top: 45%; left: 84%; } .fields { top: 70%; left: 60%; } .machines { top: 62%; left: 75%; } .biologicals { top: 68%; left: 80%; } .rainfall { top: 35%; left: 65%; } .monitoring { top: 40%; left: 85%; } } /* Posição para celulares usando transform para centralização */ @media (max-width: 767px) { .farm-icon { transform: translate(-50%, -50%) scale(0.6); } .farm-icon:hover { transform: translate(-50%, -50%) scale(1); } .fuel-station { top: 45%; left: 70%; } .grain-storage { top: 30%; left: 30%; } .office { top: 55%; left: 85%; } .cattle { top: 35%; left: 60%; } .inventory { top: 20%; left: 70%; } .fields { top: 62%; left: 20%; } .machines { top: 70%; left: 40%; } .biologicals { top: 75%; left: 80%; } .rainfall { top: 80%; left: 25%; } .monitoring { top: 85%; left: 60%; } } /* Posições fixas para todos os tamanhos de tela usando porcentagens e transform */ @media (min-width: 768px) { .farm-icon { position: absolute; transform: translate(-50%, -50%) scale(0.6); /* Centralizar o ícone na posição + escala */ } .farm-icon:hover { transform: translate(-50%, -50%) scale(1); /* Manter centralizado ao fazer hover */ } .fuel-station { top: 70%; /* Posição vertical do centro do ícone */ left: 85%; /* Posição horizontal do centro do ícone */ } .grain-storage { top: 60%; left: 75%; } .office { top: 85%; left: 82%; } .cattle { top: 80%; left: 88%; } .inventory { top: 45%; left: 84%; } .fields { top: 75%; left: 65%; } .machines { top: 55%; left: 86%; } .biologicals { top: 65%; left: 80%; } .rainfall { top: 30%; left: 68%; } .monitoring { top: 35%; left: 85%; } } /* Ajustes para dispositivos móveis em modo retrato */ @media (max-width: 767px) { .farm-icon { width: 40px; /* Tamanho base menor em dispositivos móveis */ height: 40px; /* Manter a escala reduzida mesmo em celulares */ transform: scale(0.7); } .farm-icon:hover { /* Em celulares, ao tocar aumenta para o tamanho original do celular */ transform: scale(1); } .farm-icon i { font-size: 20px; /* Ícone um pouco menor em dispositivos móveis */ } } /* Ajustes específicos para ícones em celulares */ @media (max-width: 767px) { .fuel-station, .grain-storage, .office, .cattle, .inventory, .fields, .machines, .biologicals, .rainfall, .monitoring { width: 40px; height: 40px; } } .fuel-station i { color: #e76f51; } /* Estilos específicos para o armazém de grãos */ .grain-storage { top: 55%; left: 45%; background-color: rgba(233, 196, 106, 0.9); border: 2px solid #b38728; z-index: 10; } .grain-storage i { color: #b38728; } /* Estilos para o Escritório */ .office { top: 30%; left: 70%; background-color: rgba(52, 152, 219, 0.9); border: 2px solid #2980b9; z-index: 10; } .office i { color: #2980b9; } /* Estilos para o Confinamento */ .cattle { top: 40%; left: 60%; background-color: rgba(142, 68, 173, 0.9); border: 2px solid #8e44ad; z-index: 10; } .cattle i { color: #8e44ad; } /* Estilos para o Estoque */ .inventory { top: 50%; left: 30%; background-color: rgba(230, 126, 34, 0.9); border: 2px solid #d35400; z-index: 10; } .inventory i { color: #d35400; } /* Estilos para os Talhões */ .fields { top: 60%; left: 40%; background-color: rgba(46, 204, 113, 0.9); border: 2px solid #27ae60; z-index: 10; } .fields i { color: #27ae60; } /* Estilos para as Máquinas */ .machines { top: 70%; left: 50%; background-color: rgba(231, 76, 60, 0.9); border: 2px solid #c0392b; z-index: 10; } .machines i { color: #c0392b; } /* Estilos para Biológicos */ .biologicals { top: 35%; left: 65%; background-color: rgba(39, 174, 96, 0.9); border: 2px solid #27ae60; z-index: 10; } .biologicals i { color: #27ae60; } /* Estilos para Chuvas */ .rainfall { top: 45%; left: 55%; background-color: rgba(41, 128, 185, 0.9); border: 2px solid #2980b9; z-index: 10; } .rainfall i { color: #2980b9; } /* Estilos para Monitoramento */ .monitoring { top: 55%; left: 35%; background-color: rgba(211, 84, 0, 0.9); border: 2px solid #d35400; z-index: 10; } .monitoring i { color: #d35400; } /* Popup de informações de combustível */ .fuel-info-popup, .grain-storage-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .fuel-info-popup.active, .grain-storage-popup.active { opacity: 1; visibility: visible; } .fuel-info-container, .grain-storage-container { width: 90%; max-width: 800px; background-color: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transform: translateY(20px); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; } .fuel-info-popup.active .fuel-info-container, .grain-storage-popup.active .grain-storage-container { transform: translateY(0); opacity: 1; } .fuel-info-header, .grain-storage-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; color: white; } .fuel-info-header { background: linear-gradient(135deg, #e76f51, #f4a261); } .grain-storage-header { background: linear-gradient(135deg, #b38728, #e9c46a); } /* Estilos para o conteúdo do popup do posto de combustível */ .fuel-info-content { padding: 20px; } /* Abas do popup */ .fuel-info-tabs, .grain-storage-tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px; } .fuel-tab, .grain-tab { padding: 10px 20px; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.3s ease; font-weight: 500; color: #555; } .fuel-tab:hover, .grain-tab:hover { color: #e76f51; } .fuel-tab.active, .grain-tab.active { border-bottom-color: #e76f51; color: #e76f51; } /* Conteúdo das abas */ .fuel-tab-content { display: none; } .fuel-tab-content.active { display: block; animation: fadeIn 0.5s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Aba de Estoque */ .fuel-summary { display: flex; justify-content: space-between; margin-bottom: 30px; flex-wrap: wrap; } .fuel-tank { width: 30%; min-width: 150px; text-align: center; padding: 15px; background-color: #f8f9fa; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 15px; } .tank-label { font-weight: bold; margin-bottom: 10px; color: #333; } .tank-level { height: 150px; width: 60px; margin: 0 auto 15px; background-color: #eee; border-radius: 5px; position: relative; overflow: hidden; border: 1px solid #ddd; } .tank-fill { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, #e76f51, #f4a261); transition: height 1s; } .tank-value { font-size: 18px; font-weight: bold; color: #e76f51; margin-bottom: 5px; } .tank-capacity { font-size: 12px; color: #777; } /* Alertas */ .fuel-alerts { background-color: #f8f9fa; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .fuel-alerts h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #333; } .alert { padding: 10px 15px; border-radius: 5px; margin-bottom: 10px; display: flex; align-items: center; } .alert i { margin-right: 10px; font-size: 16px; } .alert.warning { background-color: #fff3cd; color: #856404; } .alert.info { background-color: #d1ecf1; color: #0c5460; } /* Aba de Consumo */ .consumption-summary { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } .consumption-card { flex: 1; min-width: 250px; background-color: #f8f9fa; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .consumption-title { font-weight: bold; margin-bottom: 10px; color: #333; } .consumption-value { font-size: 24px; font-weight: bold; color: #e76f51; margin-bottom: 15px; } .consumption-chart { height: 150px; display: flex; align-items: flex-end; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ddd; } .chart-bar { flex: 1; background: linear-gradient(to top, #e76f51, #f4a261); border-radius: 3px 3px 0 0; position: relative; min-height: 20px; } .chart-bar span { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #777; } .machine-consumption { margin-bottom: 15px; } .machine-name { font-size: 14px; margin-bottom: 5px; color: #333; } .machine-fuel-bar { height: 10px; background-color: #eee; border-radius: 5px; overflow: hidden; margin-bottom: 5px; } .machine-fuel-fill { height: 100%; background: linear-gradient(to right, #e76f51, #f4a261); } .machine-fuel-value { text-align: right; font-size: 12px; color: #777; } .fuel-efficiency { background-color: #f8f9fa; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .fuel-efficiency h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #333; } .efficiency-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; } .efficiency-machine { font-size: 14px; color: #333; } .efficiency-value { font-weight: bold; color: #333; } .efficiency-trend { font-size: 12px; } .efficiency-trend.positive { color: #28a745; } .efficiency-trend.negative { color: #dc3545; } /* Aba de Relatórios */ .reports-list { margin-bottom: 30px; } .report-item { display: flex; align-items: center; padding: 15px; background-color: #f8f9fa; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .report-icon { width: 40px; height: 40px; background-color: #e76f51; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 15px; } .report-info { flex: 1; } .report-title { font-weight: 500; margin-bottom: 5px; color: #333; } .report-date { font-size: 12px; color: #777; } .report-action button { width: 36px; height: 36px; border-radius: 50%; background-color: #f8f9fa; border: 1px solid #ddd; color: #555; cursor: pointer; transition: all 0.3s; } .report-action button:hover { background-color: #e76f51; color: white; border-color: #e76f51; } .generate-report { background-color: #f8f9fa; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .generate-report h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #333; } .report-form .form-group { margin-bottom: 15px; } .report-form label { display: block; margin-bottom: 5px; font-weight: 500; color: #555; } .report-form select, .report-form input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .date-range { display: flex; align-items: center; gap: 10px; } .date-range input { flex: 1; } .date-range span { color: #777; } .format-options { display: flex; gap: 15px; } .format-options label { font-weight: normal; display: flex; align-items: center; gap: 5px; } .generate-button { background-color: #e76f51; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background-color 0.3s; } .generate-button:hover { background-color: #e35d3b; } .fuel-info-header h2, .grain-storage-header h2 { margin: 0; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; } .fuel-info-close, .grain-storage-close { background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s; } .fuel-info-close:hover, .grain-storage-close:hover { background-color: rgba(255, 255, 255, 0.3); } .fuel-info-content, .grain-storage-content { padding: 20px; max-height: 70vh; overflow-y: auto; } .fuel-info-tabs, .grain-storage-tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px; } .fuel-tab, .grain-tab { padding: 10px 20px; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.3s ease; font-weight: 500; } .fuel-tab:hover { color: #e76f51; } .grain-tab:hover { color: #b38728; } .fuel-tab.active { border-bottom-color: #e76f51; color: #e76f51; } .grain-tab.active { border-bottom-color: #b38728; color: #b38728; } .fuel-tab:hover:not(.active) { background-color: #f5f5f5; } .fuel-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .machine-card { border: 1px solid #eee; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .machine-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .machine-header { display: flex; align-items: center; margin-bottom: 15px; gap: 12px; } .machine-icon { width: 40px; height: 40px; background-color: #f4a261; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; } .machine-name { font-weight: 500; color: #333; margin: 0; } .machine-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .stat-item { background-color: #f8f9fa; padding: 10px; border-radius: 6px; } .stat-label { font-size: 0.8rem; color: #666; margin-bottom: 5px; } .stat-value { font-size: 1.1rem; font-weight: 500; color: #333; } .oil-change { margin-top: 15px; padding: 10px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; } .oil-change.warning { background-color: rgba(255, 193, 7, 0.2); border-left: 3px solid #ffc107; } .oil-change.danger { background-color: rgba(220, 53, 69, 0.2); border-left: 3px solid #dc3545; } .oil-change.good { background-color: rgba(40, 167, 69, 0.2); border-left: 3px solid #28a745; } .view-all-btn { display: block; margin: 20px auto 0; padding: 10px 20px; background-color: #e76f51; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; font-weight: 500; } .view-all-btn:hover { background-color: #e25c3d; } .farm-icon i { font-size: 24px; color: var(--secondary-color); } /* Overlay para exibir informações quando um ícone é clicado */ .icon-info { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 2000; } .info-content { background-color: white; width: 90%; max-width: 500px; padding: 30px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .close-info { position: absolute; top: 15px; right: 15px; color: white; font-size: 24px; cursor: pointer; } /* Mobile Menu Button */ .mobile-menu-btn { display: none; background: none; border: none; color: var(--text-light); font-size: 24px; cursor: pointer; position: relative; z-index: 1010; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .mobile-menu-btn:hover { background-color: rgba(255, 255, 255, 0.1); } .mobile-menu-btn.active { background-color: var(--accent-color); color: var(--secondary-color); } /* Responsive Design */ @media (max-width: 992px) { .header-container { padding: 15px 20px; } .nav-menu { gap: 10px; } .nav-menu a { padding: 8px 10px; font-size: 0.9rem; } } @media (max-width: 992px) { .mobile-menu-btn { display: flex; } .nav-menu { position: fixed; top: 0; right: -280px; /* Menu escondido à direita */ width: 280px; height: 100vh; flex-direction: column; background-color: var(--secondary-color); background-image: linear-gradient(rgba(38, 70, 83, 0.95), rgba(38, 70, 83, 0.98)), url('data:image/svg+xml;utf8,'); background-size: cover, 80px 80px; padding: 85px 25px 30px; transition: right 0.4s ease; z-index: 1000; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); align-items: flex-start; overflow-y: auto; } .nav-menu::before { content: 'Menu'; position: absolute; top: 25px; left: 25px; color: var(--accent-color); font-size: 1.2rem; font-weight: bold; letter-spacing: 1px; } .nav-menu.active { right: 0; } .nav-menu a { padding: 12px 15px; width: 100%; border-radius: 6px; border-left: 3px solid transparent; font-size: 1rem; } .nav-menu a.active, .nav-menu a:hover { border-left-color: var(--accent-color); background-color: rgba(255, 255, 255, 0.05); } .login-area { gap: 10px; } .login-btn, .signup-btn { padding: 6px 10px; font-size: 0.9rem; } .farm-icon { width: 40px; height: 40px; } .farm-icon i { font-size: 20px; } /* Overlay para quando o menu estiver aberto */ .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .menu-overlay.active { opacity: 1; visibility: visible; } } @media (max-width: 576px) { .header-container { padding: 10px 15px; } .cta-teste { font-size: 0.75rem; padding: 0.35rem 0.7rem; } .cta-teste::before, .cta-teste::after { width: 10px; height: 10px; } .cta-teste::before { left: -5px; } .cta-teste::after { right: -5px; } .login-area { gap: 5px; } .info-content { width: 95%; padding: 20px; } } /* Chat Overlay Styles */ .chat-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); backdrop-filter: blur(3px); background-color: rgba(0, 0, 0, 0.2); } .chat-overlay.active { opacity: 1; visibility: visible; } .chat-container { width: 70%; height: 75%; max-width: 800px; background-color: rgba(255, 255, 255, 0.9); /* 10% transparency */ border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; overflow: hidden; border: none; transform: translateY(30px) scale(0.95); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .chat-overlay.active .chat-container { transform: translateY(0) scale(1); } .chat-header { background: linear-gradient(135deg, #2a9d8f, #264653); color: white; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .chat-header h2 { margin: 0; font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 12px; letter-spacing: 0.5px; } .chat-header h2 i { color: var(--accent-color); font-size: 1.4rem; } .close-chat { background: rgba(255, 255, 255, 0.15); border: none; color: white; font-size: 1rem; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; backdrop-filter: blur(5px); } .close-chat:hover { background-color: rgba(255, 255, 255, 0.3); transform: rotate(90deg); } .chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; background-color: rgba(248, 247, 242, 0.7); } .message { max-width: 80%; padding: 14px 18px; border-radius: 18px; line-height: 1.5; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); margin-bottom: 4px; animation: messageAppear 0.3s ease-out forwards; opacity: 0; transform: translateY(10px); } @keyframes messageAppear { to { opacity: 1; transform: translateY(0); } } .user-message { align-self: flex-end; background-color: var(--primary-color); color: white; border-bottom-right-radius: 4px; margin-left: 40px; } .ai-message { align-self: flex-start; background-color: #f0f2f5; color: var(--secondary-color); border-bottom-left-radius: 4px; margin-right: 40px; position: relative; } .ai-message::before { content: ''; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-color: var(--accent-color); border-radius: 50%; background-image: url('data:image/svg+xml;utf8,'); background-size: 16px 16px; background-position: center; background-repeat: no-repeat; opacity: 0.8; } .typing-indicator { display: none; padding: 12px 16px; background-color: #e9ecef; border-radius: 18px; align-self: flex-start; margin-bottom: 15px; } .typing-indicator span { display: inline-block; width: 8px; height: 8px; background-color: #aaa; border-radius: 50%; margin-right: 5px; animation: typing 1s infinite ease-in-out; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; margin-right: 0; } @keyframes typing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .suggestion-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 15px 20px; border-top: 1px solid rgba(0, 0, 0, 0.05); background-color: rgba(255, 255, 255, 0.7); } .suggestion-chip { background-color: white; padding: 10px 18px; border-radius: 24px; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; border: 1px solid rgba(42, 157, 143, 0.2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); color: var(--primary-color); font-weight: 500; } .suggestion-chip:hover { background-color: var(--accent-color); color: var(--secondary-color); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .chat-input { display: flex; padding: 18px 20px; border-top: 1px solid rgba(0, 0, 0, 0.05); background-color: white; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03); position: relative; z-index: 2; } .chat-input input { flex: 1; padding: 14px 20px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 30px; font-size: 1rem; outline: none; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) inset; background-color: #f8f9fa; } .chat-input input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2), 0 2px 8px rgba(0, 0, 0, 0.05) inset; background-color: white; } .chat-input button { background-color: var(--primary-color); color: white; border: none; border-radius: 50%; width: 48px; height: 48px; margin-left: 12px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(42, 157, 143, 0.3); } .chat-input button:hover { background-color: #238b7e; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(42, 157, 143, 0.4); } .chat-input button:active { transform: translateY(0); }
Teste agora!
Fazenda Virtual
Posto
Armazém
Escritório
Confinamento
Estoque
Talhões
Máquinas
Biológicos
Chuvas
Monitoramento

Agrônomo Virtual Claudinho

Olá! Sou o Agrônomo Virtual Claudinho da CloudFarm.ai, especializado em agricultura e pecuária brasileira. Como posso ajudar você hoje? Você pode me perguntar sobre cultivos, solo, clima, tecnologias agrícolas ou manejo de animais.
Como melhorar a saúde do solo?
Culturas ideais para bioma cerrado?
Técnicas de irrigação eficientes

Posto de Combustível

Estoque
Consumo
Relatórios
Diesel S10
15.000 litros
Capacidade: 20.000 litros
Diesel S500
9.000 litros
Capacidade: 20.000 litros
Gasolina
6.000 litros
Capacidade: 10.000 litros

Alertas

Diesel S500 abaixo de 50% da capacidade
Abastecimento de Diesel S10 programado para 25/04
Consumo Mensal
32.450 litros
Jan
Fev
Mar
Abr
Por Máquina
Trator John Deere 8R
8.500 litros
Colheitadeira Case 7130
6.500 litros
Pulverizador Jacto
4.500 litros

Eficiência de Combustível

Trator John Deere 8R
4,2 litros/hora
5% melhor que média
Colheitadeira Case 7130
18,5 litros/hora
3% pior que média
Relatório de Consumo - Abril 2025
Gerado em: 15/04/2025
Análise de Eficiência - 1º Trimestre 2025
Gerado em: 05/04/2025
Histórico de Abastecimentos - Março 2025
Gerado em: 01/04/2025

Gerar Novo Relatório

até

Armazém de Grãos

Estoque
Movimentação
Relatórios
Capacidade Total
20.000 toneladas
65% ocupado

Soja

Quantidade Atual
8.500 ton
Umidade Média
13.2%
Impurezas
1.8%
Temperatura
24.5°C
Qualidade
Excelente

Milho

Quantidade Atual
4.200 ton
Umidade Média
14.5%
Impurezas
2.1%
Temperatura
25.8°C
Qualidade
Atenção: Umidade alta

Algodão

Quantidade Atual
350 ton
Umidade Média
8.2%
Impurezas
0.9%
Temperatura
22.3°C
Qualidade
Excelente
Consumo
Troca de Óleo
Relatórios

Trator John Deere 6110J

Consumo Médio
12.5 L/h
Último Abastecimento
18/04/2025
Horas Trabalhadas
1,245 h
Combustível Restante
65%
Próxima Troca de Óleo
Em 25 horas

Colheitadeira Case IH 8250

Consumo Médio
28.3 L/h
Último Abastecimento
19/04/2025
Horas Trabalhadas
890 h
Combustível Restante
42%
Próxima Troca de Óleo
Atrasada (10 horas)

Pulverizador Jacto Uniport 3030

Consumo Médio
15.7 L/h
Último Abastecimento
15/04/2025
Horas Trabalhadas
678 h
Combustível Restante
78%
Próxima Troca de Óleo
Em 122 horas