/* === FOOTER NAV (mejorado) === */

/* Variables (ajusta según tu tema) */
:root{
  --bottom-bg: var(--bottom-nav-bg, rgba(12,14,18,0.92));
  --bottom-border: rgba(255,255,255,0.04);
  --tab-color: var(--text-secondary, #9aa4b2);
  --tab-active: var(--text-primary, #ffffff);
  --accent: var(--accent-color, #4f74d6);
  --tab-size: 56px;
  --tab-icon-size: 20px;
  --tab-gap: 6px;
  --tab-radius: 12px;
  --transition: 180ms cubic-bezier(.2,.9,.3,1);
  --shadow-top: 0 -8px 24px rgba(2,6,23,0.45);
}

/* Footer container */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0.02), var(--bottom-bg));
  border-top: 1px solid var(--bottom-border);
  box-shadow: var(--shadow-top);
  z-index: 90;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Tab item base */
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tab-gap);
  text-decoration: none;
  color: var(--tab-color);
  flex: 1;
  cursor: pointer;
  padding: 6px 8px;
  min-height: var(--tab-size);
  justify-content: center;
  transition: color var(--transition), transform var(--transition), background var(--transition);
  border-radius: var(--tab-radius);
  user-select: none;
}

/* Icon and label */
.tab-item i {
  font-size: var(--tab-icon-size);
  display:block;
  line-height:1;
  transition: transform var(--transition), color var(--transition);
}
.tab-item span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: inherit;
  opacity: 0.95;
}

/* Active state */
.tab-item.active {
  color: var(--tab-active);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 6px 18px rgba(2,6,23,0.28);
  transform: translateY(-4px);
}
.tab-item.active i {
  color: var(--accent);
  transform: translateY(-2px) scale(1.06);
}

/* Hover / focus states for accessibility */
.tab-item:hover,
.tab-item:focus {
  color: var(--tab-active);
  transform: translateY(-3px);
  outline: none;
}
.tab-item:focus-visible {
  box-shadow: 0 0 0 6px rgba(79,116,214,0.08);
  border-radius: 10px;
}

/* Badge / indicator (optional) */
.tab-item .tab-badge {
  position: absolute;
  top: 6px;
  right: 14%;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(79,116,214,0.12);
}

/* Compact layout on small screens: increase tappable area */
@media (max-width: 520px) {
  footer { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  :root { --tab-size: 60px; --tab-icon-size: 22px; }
  .tab-item span { font-size: 12px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tab-item, .tab-item i, .tab-item span {
    transition: none !important;
  }
}