/* RedAI-Web – Footer component - Estático, sin scripts, footer normal */
/* Footer NORMAL: solo aparece al final del contenido al hacer scroll */

body footer.footer,
.page-wrapper footer.footer,
footer.footer,
.footer { 
  position: static !important; /* No fixed, no absolute, no sticky */
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  flex: 0 0 auto !important; /* No crece, no se encoje; queda al final del flex */
  flex-shrink: 0 !important;
  z-index: auto !important;
  transform: none !important;
  margin-top: auto !important; /* Empuja el footer al fondo del .page-wrapper */
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-top: 1px solid rgba(255,255,255,.06); 
  background: transparent !important;
  color: var(--neo-text, #e6e9f2) !important;
}

.footer-bottom { 
  text-align: center; 
  color: var(--neo-muted, #9aa6bf) !important; /* Fallback crítico */
  padding: 24px 0; 
  font-size: 14px; 
  background: transparent !important; /* Asegurar que no quede blanco */
}

body footer.footer--simple,
.page-wrapper footer.footer--simple,
footer.footer--simple,
.footer--simple { 
  position: static !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  z-index: auto !important;
  transform: none !important;
  margin-top: auto !important; /* Sticky footer: al fondo del .page-wrapper */
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-top: 1px solid rgba(255,255,255,.06); 
  background: var(--neo-surface, rgba(16,22,37,.5)) !important;
  color: var(--neo-text, #e6e9f2) !important;
}

.footer-container-simple { max-width: 1200px; margin: 0 auto; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.footer-left { 
  color: var(--neo-muted, #9aa6bf) !important; /* Fallback crítico */
  font-size: 14px; 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  background: transparent !important;
}
.footer-links-inline { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.footer-links-inline a { 
  color: var(--neo-text, #e6e9f2) !important; /* Fallback crítico */
  font-size: 14px; 
  opacity: .85; 
  text-decoration: none; 
}
.footer-links-inline a:hover { opacity: 1; }
.footer-social { display: flex; gap: 10px; justify-content: flex-end; }
.footer-social a { 
  color: var(--neo-text, #e6e9f2) !important; /* Fallback crítico */
  opacity: .8; 
}
.footer-social a:hover { opacity: 1; }

html[data-mode="light"] .footer--simple { background: var(--neo-surface, #c5cfde) !important; border-top: 1px solid var(--neo-border, rgba(0,0,0,.08)); color: var(--neo-text) !important; }

/* Tooltips de las redes sociales del footer: por ENCIMA del icono.
   El pie está al fondo de la página y el tooltip global ([title]:hover::after
   de base-extras.css) lo dibuja 40px por debajo, fuera de pantalla,
   alargando el scroll. Aquí lo invertimos (misma técnica que .tooltip-above). */
.footer-social a[title]:hover::after {
  bottom: 100%;
  top: auto;
  right: 0;
  margin-bottom: 8px;
  transform: none;
}
.footer-social a[title]:hover::before {
  bottom: 100%;
  top: auto;
  margin-bottom: 2px;
  border-bottom: 6px solid rgba(0, 0, 0, 0.9);
  border-top: none;
}

/* Versión: desktop = "Version Alpha 0.4.0", móvil = "A. 0.4.0" */
.footer .version-mobile { display: none; }
@media (max-width: 1023px) {
  .footer .version-desktop { display: none; }
  .footer .version-mobile { display: inline; }
}