/** * Estilos para os recursos visuais do Mapa V2. * @version 3.6.1 - CORRIGIDO: Barra de LED colada no topo sem espaçamento e contraste aprimorado */ /* 1. VARIÁVEIS DE STATUS */ :root { --glow-ligada: #10b981; --glow-movimento: #3b82f6; --glow-desligada: #ef4444; --glow-desconhecida: #8b5cf6; } /* 2. MARCADORES DE VEÍCULO (sem alterações) */ .locamais-vehicle-marker .moto-icon { width: 38px; height: 38px; object-fit: contain; transition: transform 0.2s ease; animation-name: marker-glow-pulse; animation-duration: 2.2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .locamais-vehicle-marker:hover .moto-icon { transform: scale(1.1); } @keyframes marker-glow-pulse { 0%, 100% { filter: drop-shadow(0 0 4px var(--marker-glow-color)); } 50% { filter: drop-shadow(0 0 14px var(--marker-glow-color)); } } .locamais-vehicle-marker.status-ligada { --marker-glow-color: var(--glow-ligada); } .locamais-vehicle-marker.status-movimento { --marker-glow-color: var(--glow-movimento); animation-duration: 1.5s; } .locamais-vehicle-marker.status-desligada, .locamais-vehicle-marker.status-desconhecida { animation: none; filter: grayscale(60%); opacity: 0.8; } /* 3. CLUSTERS (sem alterações) */ .locamais-cluster-wrapper { background: transparent !important; border: none !important; } .cluster-pin { width: 40px; height: 48px; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); transition: filter 0.2s ease; background-size: contain; background-repeat: no-repeat; background-position: center; } .locamais-cluster-wrapper:hover .cluster-pin { filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4)); } .cluster-count-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background-color: #EE872C; color: #000203; padding: 3px 7px; font-size: 11px; font-weight: 700; min-width: 22px; text-align: center; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } /* ========================================================================== 4. CARD DE DETALHES COM CABEÇALHO "LUZ DE LED" - CORRIGIDO ========================================================================== */ .details-card-content { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; position: relative; padding: 1.25rem; padding-top: 1.5rem; /* ✅ AJUSTADO: Menos espaço para barra mais fina */ border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden; margin: 0; } /* ✅ BARRA LED NEON - BRILHO EXTREMO COMO PAINEL DE NEON */ .details-card-content::before { content: attr(data-status-label); position: absolute; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 1rem !important; margin: 0 !important; padding: 0 !important; /* ✅ FUNDO NEON COM MÚLTIPLOS GRADIENTES */ background: /* Reflexo superior */ linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 30%), /* Gradiente principal neon */ linear-gradient(45deg, var(--status-color, #6b7280) 0%, color-mix(in srgb, var(--status-color, #6b7280) 70%, white) 25%, var(--status-color, #6b7280) 50%, color-mix(in srgb, var(--status-color, #6b7280) 85%, white) 75%, var(--status-color, #6b7280) 100%), /* Base saturada */ radial-gradient(ellipse at center, color-mix(in srgb, var(--status-color, #6b7280) 90%, white) 0%, var(--status-color, #6b7280) 100%); /* ✅ GLASSMORPHISM INTENSO */ backdrop-filter: blur(15px) saturate(250%) brightness(120%); -webkit-backdrop-filter: blur(15px) saturate(250%) brightness(120%); /* ✅ TEXTO NEON COM BRILHO EXTREMO */ color: rgba(255,255,255,1); text-shadow: /* Halo interno */ 0 0 2px rgba(255,255,255,1), 0 0 4px rgba(255,255,255,0.9), /* Brilho da cor principal */ 0 0 8px var(--status-color, #6b7280), 0 0 12px var(--status-color, #6b7280), 0 0 16px var(--status-color, #6b7280), /* Brilho externo intenso */ 0 0 24px color-mix(in srgb, var(--status-color, #6b7280) 80%, white), 0 0 32px color-mix(in srgb, var(--status-color, #6b7280) 60%, white), /* Sombra de profundidade */ 0 2px 4px rgba(0,0,0,0.8); font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.8px; display: flex; align-items: center; justify-content: center; /* ✅ BRILHO NEON EXTREMO - MÚLTIPLAS CAMADAS */ box-shadow: /* Brilho interno - efeito 3D */ inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(255,255,255,0.2), inset 2px 0 0 rgba(255,255,255,0.3), inset -2px 0 0 rgba(255,255,255,0.3), /* Brilho neon - camada 1 (próximo) */ 0 0 8px var(--status-color, #6b7280), 0 0 16px var(--status-color, #6b7280), 0 0 24px var(--status-color, #6b7280), /* Brilho neon - camada 2 (médio) */ 0 0 40px color-mix(in srgb, var(--status-color, #6b7280) 80%, white), 0 0 60px color-mix(in srgb, var(--status-color, #6b7280) 70%, white), /* Brilho neon - camada 3 (distante) */ 0 0 100px color-mix(in srgb, var(--status-color, #6b7280) 50%, white), 0 0 150px -20px var(--status-color, #6b7280), /* Sombra base */ 0 3px 8px rgba(0,0,0,0.4); border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; /* ✅ BORDA NEON BRILHANTE */ border: 1px solid color-mix(in srgb, var(--status-color, #6b7280) 60%, white); border-bottom: none; z-index: 10; /* ✅ ANIMAÇÃO NEON INTENSA */ animation: neon-pulse 2s ease-in-out infinite; } /* ✅ CORES PARA CADA STATUS COM MELHOR CONTRASTE */ .details-card-content.status-ligada { --status-color: var(--glow-ligada); } .details-card-content.status-movimento { --status-color: var(--glow-movimento); } .details-card-content.status-desligada { --status-color: var(--glow-desligada); } .details-card-content.status-desconhecida { --status-color: var(--glow-desconhecida); } /* ✅ ANIMAÇÃO SUTIL PARA STATUS EM MOVIMENTO */ .details-card-content.status-movimento::before { animation: led-pulse 2s ease-in-out infinite; } @keyframes led-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.1), 0 0 20px -3px var(--status-color), 0 2px 4px rgba(0,0,0,0.1); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.1), 0 0 30px -2px var(--status-color), 0 2px 4px rgba(0,0,0,0.1); } } /* Restante dos estilos do card */ .details-card-photos { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .details-card-vehicle-photo, .details-card-client-photo { width: 80px; height: 80px; border-radius: 0.5rem; object-fit: cover; background-color: #f1f5f9; border: 1px solid #e5e7eb; } .details-card-client-photo { border-radius: 50%; } .details-card-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; } .details-info-item { display: flex; flex-direction: column; } .details-info-item .label { font-size: 0.7rem; color: #64748b; font-weight: 500; text-transform: uppercase; } .details-info-item .value { font-size: 0.9rem; font-weight: 600; color: #1e293b; } /* ✅ BOTÃO DE FECHAR NEON - MATCHING COM A BARRA */ .details-card-close-btn { position: absolute; top: 0.1rem; right: 0.3rem; width: 16px; height: 16px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 15; font-size: 0.65rem; font-weight: 900; /* ✅ FUNDO NEON MATCHING */ background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, transparent 50%), radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%), rgba(0,0,0,0.4); backdrop-filter: blur(10px) saturate(200%) brightness(130%); -webkit-backdrop-filter: blur(10px) saturate(200%) brightness(130%); /* ✅ TEXTO NEON BRILHANTE */ color: rgba(255,255,255,1); text-shadow: 0 0 2px rgba(255,255,255,1), 0 0 4px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.7), 0 0 8px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.8); /* ✅ BORDA E BRILHO NEON */ border: 1px solid rgba(255,255,255,0.5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(255,255,255,0.2), /* Brilho neon externo */ 0 0 4px rgba(255,255,255,0.6), 0 0 8px rgba(255,255,255,0.4), 0 0 12px rgba(255,255,255,0.2), 0 1px 4px rgba(0,0,0,0.5); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); animation: close-btn-neon 3s ease-in-out infinite; } .details-card-close-btn:hover { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8) 0%, transparent 50%), radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 70%), rgba(255,255,255,0.3); color: rgba(255,255,255,1); transform: scale(1.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(255,255,255,0.4), /* Explosão de brilho no hover */ 0 0 6px rgba(255,255,255,0.9), 0 0 12px rgba(255,255,255,0.7), 0 0 18px rgba(255,255,255,0.5), 0 0 24px rgba(255,255,255,0.3), 0 2px 6px rgba(0,0,0,0.6); text-shadow: 0 0 3px rgba(255,255,255,1), 0 0 6px rgba(255,255,255,1), 0 0 9px rgba(255,255,255,0.8), 0 0 12px rgba(255,255,255,0.6); } .details-card-close-btn:active { transform: scale(1.1); filter: brightness(0.9); } /* ✅ ANIMAÇÃO NEON DO BOTÃO */ @keyframes close-btn-neon { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(255,255,255,0.2), 0 0 4px rgba(255,255,255,0.6), 0 0 8px rgba(255,255,255,0.4), 0 0 12px rgba(255,255,255,0.2), 0 1px 4px rgba(0,0,0,0.5); filter: brightness(1.1); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(255,255,255,0.3), 0 0 6px rgba(255,255,255,0.8), 0 0 12px rgba(255,255,255,0.6), 0 0 18px rgba(255,255,255,0.4), 0 1px 4px rgba(0,0,0,0.5); filter: brightness(1.3); } }; height: 16px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 15; /* ✅ Acima da barra LED */ font-size: 0.65rem; font-weight: 900; /* ✅ EFEITO VIDRO MATCHING COM A BARRA */ background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 50%), rgba(0,0,0,0.3); backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); /* ✅ TEXTO COM BRILHO */ color: rgba(255,255,255,0.95); text-shadow: 0 0 3px rgba(255,255,255,0.8), 0 0 6px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.5); /* ✅ BORDA E BRILHO SUTIL */ border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2), 0 0 8px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.3); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* ✅ ANIMAÇÃO SUTIL DE BRILHO */ animation: close-btn-glow 4s ease-in-out infinite; } .details-card-close-btn:hover { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6) 0%, transparent 50%), rgba(255,255,255,0.2); color: rgba(255,255,255,1); transform: scale(1.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.3), 0 0 12px rgba(255,255,255,0.5), 0 2px 6px rgba(0,0,0,0.4); text-shadow: 0 0 4px rgba(255,255,255,1), 0 0 8px rgba(255,255,255,0.8); } .details-card-close-btn:active { transform: scale(1.05); filter: brightness(0.9); } /* ✅ ANIMAÇÃO DO BOTÃO DE FECHAR */ @keyframes close-btn-glow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2), 0 0 8px rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.3); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.2), 0 0 10px rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.3); } } /* 5. CORREÇÕES LEAFLET */ .leaflet-marker-icon { border: none !important; background: transparent !important; box-shadow: none !important; } .leaflet-popup-content-wrapper, .leaflet-popup-content, .leaflet-popup-tip-container { display: none !important; } /* RESET TOTAL DO CONTAINER */ #locamais-map-details-card * { box-sizing: border-box !important; } #locamais-map-details-card { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; }