/* Content Script CSS para Google Maps Scraper */
/* Autor: MicroAppsAI */
/* Versión: 1.0.0 */

/* Indicador de extensión activa */
#maps-scraper-indicator {
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  background: linear-gradient(135deg, #4285f4, #34a853) !important;
  color: white !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-weight: 500 !important;
  z-index: 999999 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  animation: mapsScraper-pulse 2s infinite !important;
  display: none !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
}

/* Animación de pulsación para el indicador */
@keyframes mapsScraper-pulse {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Overlay de progreso durante scraping */
.maps-scraper-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.1) !important;
  z-index: 999998 !important;
  pointer-events: none !important;
  display: none !important;
}

/* Progreso de scraping */
.maps-scraper-progress {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  z-index: 999999 !important;
  min-width: 280px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  border: 1px solid #e0e0e0 !important;
  display: none !important;
}

.maps-scraper-progress-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.maps-scraper-progress-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #202124 !important;
  margin: 0 !important;
}

.maps-scraper-progress-stats {
  font-size: 12px !important;
  color: #5f6368 !important;
  font-weight: 500 !important;
}

.maps-scraper-progress-bar {
  width: 100% !important;
  height: 6px !important;
  background: #f1f3f4 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
}

.maps-scraper-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #4285f4, #34a853) !important;
  border-radius: 3px !important;
  transition: width 0.3s ease !important;
  width: 0% !important;
}

.maps-scraper-progress-text {
  font-size: 12px !important;
  color: #5f6368 !important;
  margin: 0 !important;
}

/* Resaltado de elementos siendo procesados */
.maps-scraper-highlight {
  outline: 2px solid #4285f4 !important;
  outline-offset: 2px !important;
  background: rgba(66, 133, 244, 0.1) !important;
  transition: all 0.3s ease !important;
}

/* Elementos ya procesados */
.maps-scraper-processed {
  opacity: 0.6 !important;
  filter: grayscale(0.3) !important;
  position: relative !important;
}

.maps-scraper-processed::after {
  content: '✓' !important;
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  background: #34a853 !important;
  color: white !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: bold !important;
  z-index: 999999 !important;
}

/* Notificaciones temporales */
.maps-scraper-notification {
  position: fixed !important;
  top: 50px !important;
  right: 20px !important;
  background: white !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  z-index: 999999 !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-size: 13px !important;
  max-width: 300px !important;
  opacity: 0 !important;
  transform: translateX(100%) !important;
  transition: all 0.3s ease !important;
  border-left: 4px solid #4285f4 !important;
}

.maps-scraper-notification.show {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.maps-scraper-notification.success {
  border-left-color: #34a853 !important;
}

.maps-scraper-notification.error {
  border-left-color: #ea4335 !important;
}

.maps-scraper-notification.warning {
  border-left-color: #fbbc04 !important;
}

/* Botón de control de scraping */
.maps-scraper-control {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  background: #4285f4 !important;
  color: white !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  box-shadow: 0 2px 10px rgba(66, 133, 244, 0.3) !important;
  transition: all 0.3s ease !important;
  display: none !important;
}

.maps-scraper-control:hover {
  background: #3367d6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
}

.maps-scraper-control.stop {
  background: #ea4335 !important;
}

.maps-scraper-control.stop:hover {
  background: #d23220 !important;
  box-shadow: 0 4px 15px rgba(234, 67, 53, 0.4) !important;
}

/* Tooltip para elementos */
.maps-scraper-tooltip {
  position: absolute !important;
  background: #202124 !important;
  color: white !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  transform: translateY(5px) !important;
  transition: all 0.2s ease !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.maps-scraper-tooltip.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Debug panel (solo visible en modo debug) */
.maps-scraper-debug {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  background: rgba(0, 0, 0, 0.9) !important;
  color: #00ff00 !important;
  padding: 10px !important;
  border-radius: 6px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 11px !important;
  z-index: 999999 !important;
  max-width: 300px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  display: none !important;
  white-space: pre-wrap !important;
}

.maps-scraper-debug.show {
  display: block !important;
}

/* Overlay de búsqueda */
.maps-scraper-search-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(66, 133, 244, 0.1) !important;
  z-index: 999997 !important;
  pointer-events: none !important;
  display: none !important;
}

/* Animación de carga */
.maps-scraper-loading {
  position: relative !important;
}

.maps-scraper-loading::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #f3f3f3 !important;
  border-top: 2px solid #4285f4 !important;
  border-radius: 50% !important;
  animation: mapsScraper-spin 1s linear infinite !important;
  z-index: 999999 !important;
}

@keyframes mapsScraper-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Contador de resultados */
.maps-scraper-counter {
  position: fixed !important;
  top: 60px !important;
  right: 10px !important;
  background: rgba(52, 168, 83, 0.95) !important;
  color: white !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-weight: 600 !important;
  z-index: 999999 !important;
  display: none !important;
  backdrop-filter: blur(10px) !important;
}

.maps-scraper-counter.show {
  display: block !important;
  animation: mapsScraper-bounce 0.5s ease !important;
}

@keyframes mapsScraper-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Error overlay */
.maps-scraper-error {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  z-index: 999999 !important;
  max-width: 400px !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
  text-align: center !important;
  border: 1px solid #e0e0e0 !important;
  display: none !important;
}

.maps-scraper-error.show {
  display: block !important;
  animation: mapsScraper-slideIn 0.3s ease !important;
}

@keyframes mapsScraper-slideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.maps-scraper-error-icon {
  font-size: 48px !important;
  margin-bottom: 16px !important;
}

.maps-scraper-error-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #ea4335 !important;
  margin: 0 0 8px 0 !important;
}

.maps-scraper-error-message {
  font-size: 14px !important;
  color: #5f6368 !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.4 !important;
}

.maps-scraper-error-button {
  background: #4285f4 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.maps-scraper-error-button:hover {
  background: #3367d6 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #maps-scraper-indicator {
    top: 5px !important;
    right: 5px !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  
  .maps-scraper-progress {
    bottom: 10px !important;
    right: 10px !important;
    left: 10px !important;
    min-width: auto !important;
  }
  
  .maps-scraper-notification {
    top: 40px !important;
    right: 10px !important;
    left: 10px !important;
    max-width: none !important;
  }
  
  .maps-scraper-control {
    bottom: 10px !important;
    left: 10px !important;
    font-size: 12px !important;
    padding: 10px 16px !important;
  }
}

/* Ocultar elementos si hay conflictos */
.maps-scraper-hidden {
  display: none !important;
}

/* Preservar funcionamiento de Google Maps */
[id^="maps-scraper-"] {
  pointer-events: none !important;
}

[id^="maps-scraper-"] * {
  pointer-events: auto !important;
}

/* Asegurar que los estilos no afecten a Google Maps */
body:not([class*="maps-scraper"]) [id^="maps-scraper-"] {
  all: initial !important;
  font-family: 'Segoe UI', Arial, sans-serif !important;
}