/* ===== Karate Navbar (solo estilo) ===== */
/* Mantener tamaños idénticos al navbar de gimnasios.
   Se referencian variables de gimnasios con fallback por si no existen. */
:root {
  --karate-primary-dark: #7a0a0a;
  --karate-primary-darker: #3b0000;
  --karate-accent: #d43a3a;
  --karate-text: #ffffff;
  --karate-text-muted: #f0dada;
  --karate-border: #840c0c;
  --karate-shadow: rgba(0,0,0,0.25);
  --karate-focus: #ffb3b3;

  --karate-nav-bg: linear-gradient(180deg, #b22222 0%, #7a0a0a 100%);
  --karate-nav-hover: linear-gradient(180deg, #c22626 0%, #8c0e0e 100%);
  --karate-nav-active: linear-gradient(180deg, #9b2222 0%, #640808 100%);
}
/* ===== Karate Navbar ===== */
.karate-navbar {
  position: relative;
  z-index: 1100; /* igual que gimnasios */
  height: var(--gym-nav-height, 70px);
  padding-inline: var(--gym-nav-x, 16px);
  padding-block: .9rem;
  gap: var(--gym-nav-gap, 12px);

  font-family: var(--gym-nav-font-family, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial);
  font-size: var(--gym-nav-font-size, 14px);
  font-weight: var(--gym-nav-font-weight, 700);
  line-height: var(--gym-nav-line-height, 1);
  --icon-size: var(--gym-nav-icon-size, 20px);

  background: var(--karate-nav-bg);
  border-bottom: 1px solid var(--karate-border);
  box-shadow: 0 2px 6px var(--karate-shadow);

  letter-spacing: .02em;
  color: #f8fafc !important;
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 70px; /* mismo que .navbar-expand-lg */
  padding-top: 0.5rem;   /* igual a bootstrap */
  padding-bottom: 0.5rem;
  padding-inline: 1rem;
}

/* Brand */
.karate-navbar .brand {
  font-weight: 600;
  font-size: 1.25rem; /* igual gimnasios */
  display: inline-flex;
  align-items: center;
  gap: var(--gym-brand-gap, 10px);
  color: var(--karate-text);
}

/* Links */
.karate-navbar .nav-link {
  color: var(--karate-text-muted);
  font-weight: 500; /* igual gimnasios */
  padding: var(--gym-nav-link-py, 10px) var(--gym-nav-link-px, 12px);
  border-radius: var(--gym-nav-link-radius, 8px);
  display: inline-flex;
  align-items: center;
  gap: var(--gym-nav-link-gap, 8px);
  transition: all 0.2s ease;
}

.karate-navbar .nav-link:hover {
  color: var(--karate-text);
  background: var(--karate-nav-hover);
  transform: translateY(-1px);
}

.karate-navbar .nav-link.active {
  color: var(--karate-text);
  background: var(--karate-nav-active);
  border-radius: 6px; /* igual gimnasios */
}

/* Íconos */
.karate-navbar .nav-link .icon,
.karate-navbar .brand .icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Dropdown */
.karate-navbar .dropdown {
  position: relative;
}

.karate-navbar .dropdown-toggle {
  color: var(--karate-text-muted);
  background: transparent;
  border: none;
  font: inherit;
  font-weight: 500;
  padding: var(--gym-nav-link-py, 10px) var(--gym-nav-link-px, 12px);
  border-radius: var(--gym-nav-link-radius, 8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.karate-navbar .dropdown-toggle:hover {
  color: var(--karate-text);
  background: var(--karate-nav-hover);
  transform: translateY(-1px);
}

.karate-navbar .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  margin-top: 6px;
  background: var(--karate-nav-bg);
  border: 1px solid var(--karate-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--karate-shadow);
  padding: 6px 0;
  display: none;
  z-index: 1200; /* igual gimnasios */
}

.karate-navbar .dropdown:hover .dropdown-menu,
.karate-navbar .dropdown:focus-within .dropdown-menu {
  display: block;
}

.karate-navbar .dropdown-item {
  padding: 8px 14px;
  color: var(--karate-text-muted);
  text-decoration: none;
  font-size: 14px;
  display: block;
  transition: all 0.2s ease;
}

.karate-navbar .dropdown-item:hover {
  color: var(--karate-text);
  background: var(--karate-nav-hover);
  transform: translateY(-1px);
}

.karate-navbar .dropdown-item:active {
  background: var(--karate-nav-active);
  color: var(--karate-text);
}

/* Divider */
.karate-navbar .dropdown-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--karate-border);
}

/* Botones */
.karate-navbar .btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  background-color: var(--karate-accent) !important;
}

.karate-navbar .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 1024px) {
  .karate-navbar {
    height: var(--gym-nav-height-md, 56px);
    padding-inline: var(--gym-nav-x-md, 12px);
  }
  .karate-navbar .brand { font-size: var(--gym-brand-font-size-md, 15px); }
  .karate-navbar .nav-link { padding: var(--gym-nav-link-py-md, 8px) var(--gym-nav-link-px-md, 10px); }
}

@media (max-width: 640px) {
  .karate-navbar {
    height: var(--gym-nav-height-sm, 52px);
    padding-inline: var(--gym-nav-x-sm, 10px);
  }
  .karate-navbar .brand { font-size: var(--gym-brand-font-size-sm, 14px); }
  .karate-navbar .nav-link { padding: var(--gym-nav-link-py-sm, 6px) var(--gym-nav-link-px-sm, 8px); }
}

.btn-register{ 
  background-color: var(--karate-accent) !important; 
} 
.btn-login{ 
  background-color: var(--karate-accent) !important; 
}