/* static/css/components/footer.css */
/* filepath: d:\BRAYAN\Escritorio\geoprocesamiento\static\css\components\footer.css */

/**
 * Footer Component - Elite Level
 * Integrado con design-system.css
 * Depende de: design-system.css (cargado por styles.css)
 * Este archivo NO debe importar design-system.css independientemente
 */

/* ===== FOOTER COMPONENT ELITE ===== */

/* Base Footer Styles */
.page-footer {
  background: rgba(var(--color-surface-rgb), 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-outline-variant);
  position: relative;
  z-index: 10;
  transition: all var(--duration-normal) var(--easing-standard);
  contain: layout style;
}

/* Footer Brand Section */
.footer-brand {
  position: relative;
}

.footer-logo {
  border-radius: var(--radius-sm);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.footer-logo:hover {
  transform: scale(1.1);
}

.footer .brand-text {
  background: linear-gradient(
    135deg,
    var(--color-primary-500),
    var(--color-secondary-500)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: var(--font-weight-bold);
}

.footer-description {
  line-height: var(--line-height-relaxed);
  max-width: 280px;
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-sm);
}

/* Social Links */
.social-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.social-link {
  position: relative;
  display: block;
  text-decoration: none;
  transition: all var(--duration-fast) var(--easing-standard);
}

.social-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--easing-standard);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface);
}

.social-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
}

.social-btn:hover::before {
  opacity: 1;
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* Specific Social Colors */
.social-link[data-social="twitter"] .social-btn:hover {
  background: var(--color-info-500);
  color: var(--color-on-info);
  border-color: var(--color-info-500);
}

.social-link[data-social="linkedin"] .social-btn:hover {
  background: var(--color-primary-600);
  color: var(--color-on-primary);
  border-color: var(--color-primary-600);
}

.social-link[data-social="github"] .social-btn:hover {
  background: var(--color-surface-variant);
  color: var(--color-on-surface);
  border-color: var(--color-outline);
}

/* Footer Navigation */
.footer-nav {
  position: relative;
}

.footer-nav-title {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
  position: relative;
  font-size: var(--font-size-sm);
}

.footer-nav-title::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(
    135deg,
    var(--color-primary-500),
    var(--color-secondary-500)
  );
  border-radius: var(--radius-xs);
}

.footer-nav-list {
  margin: 0;
  padding: 0;
}

.footer-nav-link {
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: all var(--duration-fast) var(--easing-standard);
  position: relative;
  display: inline-block;
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.footer-nav-link:hover {
  color: var(--color-primary-500);
  transform: translateX(var(--space-1));
}

.footer-nav-link::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: var(--color-primary-500);
  transition: width var(--duration-fast) var(--easing-standard);
}

.footer-nav-link:hover::before {
  width: 6px;
}

/* Pro Badge */
.pro-badge {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-500);
  color: var(--color-on-primary);
  border-radius: var(--radius-xs);
  animation: pulse var(--duration-slow) infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Newsletter Section */
.footer-newsletter {
  position: relative;
}

.newsletter-title {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

.newsletter-description {
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-3);
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-sm);
}

.newsletter-form {
  position: relative;
}

.newsletter-input {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  padding: var(--space-3) var(--space-4);
  transition: all var(--duration-fast) var(--easing-standard);
  background: rgba(var(--color-surface-rgb), 0.8);
  backdrop-filter: blur(5px);
  color: var(--color-on-surface);
  font-size: var(--font-size-sm);
}

.newsletter-input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
  background: var(--color-surface);
  outline: none;
}

.newsletter-input::placeholder {
  color: var(--color-on-surface-variant);
}

.newsletter-submit {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-weight: var(--font-weight-medium);
  transition: all var(--duration-fast) var(--easing-standard);
  position: relative;
  overflow: hidden;
  background: var(--color-primary-500);
  color: var(--color-on-primary);
  border: 1px solid var(--color-primary-500);
  font-size: var(--font-size-sm);
}

.newsletter-submit::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left var(--duration-normal) var(--easing-standard);
}

.newsletter-submit:hover::before {
  left: 100%;
}

.newsletter-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  background: var(--color-primary-600);
}

.newsletter-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Newsletter Messages */
.newsletter-message {
  margin-top: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  animation: slideIn var(--duration-normal) var(--easing-decelerate);
}

.newsletter-message.alert-success {
  background: var(--color-success-50);
  color: var(--color-success-700);
  border: 1px solid var(--color-success-200);
}

.newsletter-message.alert-danger {
  background: var(--color-error-50);
  color: var(--color-error-700);
  border: 1px solid var(--color-error-200);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Legal Links */
.legal-links {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-outline-variant);
}

.legal-link {
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: all var(--duration-fast) var(--easing-standard);
  font-size: var(--font-size-xs);
}

.legal-link:hover {
  color: var(--color-primary-500);
  text-decoration: underline;
}

/* Footer Bottom */
.footer-divider {
  border-color: var(--color-outline-variant);
  margin: var(--space-8) 0 var(--space-4);
}

.footer-bottom {
  position: relative;
}

.copyright {
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-xs);
}

/* Made with Love Animation */
.bi-heart-fill {
  animation: heartbeat var(--duration-slow) var(--easing-standard) infinite;
  color: var(--color-error-500);
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Responsive Design */
@media (max-width: 991.98px) {
  .footer-nav-title {
    font-size: var(--font-size-base);
  }

  .newsletter-form .d-flex {
    flex-direction: column;
    gap: var(--space-2);
  }

  .newsletter-submit {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .page-footer {
    padding: var(--space-8) 0;
  }

  .footer-brand {
    text-align: center;
    margin-bottom: var(--space-8);
  }

  .social-links {
    justify-content: center;
  }

  .footer-nav {
    text-align: center;
    margin-bottom: var(--space-8);
  }

  .footer-newsletter {
    text-align: center;
  }

  .legal-links {
    justify-content: center;
    text-align: center;
  }

  .footer-bottom {
    text-align: center;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .footer-logo,
  .social-btn,
  .footer-nav-link,
  .newsletter-input,
  .newsletter-submit {
    transition: none;
  }

  .pro-badge,
  .bi-heart-fill {
    animation: none;
  }
}

/* Focus States */
.footer-nav-link:focus,
.social-link:focus,
.legal-link:focus,
.newsletter-input:focus,
.newsletter-submit:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .page-footer {
    background: white !important;
    border-top: 1px solid black !important;
  }

  .social-links,
  .newsletter-form,
  .newsletter-message {
    display: none !important;
  }
}