/* Barra inferior 2026 (pedido del dueño 2026-10-12): flotante, efecto vidrio, bordes muy redondeados, cada opción en
   su cuadrito de color suave y la activa con degradado y una rayita debajo. Va de último y con !important donde
   mi-perfil.css y css/global-light-theme.css ya lo usan, para no tocar esos archivos. Marcado en index.html
   (.vk-nav-ico / .vk-nav-label). */
:root {
  /* Siempre blanca casi transparente, también con el celular en modo oscuro (pedido del dueño 2026-10-12). */
  --vkn-glass: rgba(255, 255, 255, 0.72);
  --vkn-border: rgba(255, 255, 255, 0.9);
  --vkn-ink: #334155;
  --vkn-shadow: 0 12px 34px rgba(37, 99, 235, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);
}

@media (max-width: 640px) {
  nav.mp-bottomnav {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    padding: 7px 6px !important;
    border-radius: 28px !important;
    justify-content: space-between !important;
    background: var(--vkn-glass) !important;
    -webkit-backdrop-filter: saturate(160%) blur(28px);
    backdrop-filter: saturate(160%) blur(28px);
    border: 1px solid var(--vkn-border) !important;
    box-shadow: var(--vkn-shadow) !important;
  }
  /* Sin efecto vidrio (teléfonos viejos): casi sólido, para que no se mezcle con lo de atrás. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    nav.mp-bottomnav { background: rgba(255, 255, 255, 0.97) !important; }
  }

  nav.mp-bottomnav .mp-bottomnav-item {
    flex: 1 1 0;
    min-width: 0;
    gap: 3px !important;
    padding: 0 !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px;
    color: var(--vkn-ink) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-tap-highlight-color: transparent;
  }
  nav.mp-bottomnav .mp-bottomnav-item::after {
    top: auto !important;
    bottom: -4px !important;
    width: 18px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #2563eb, #06b6d4) !important;
    box-shadow: none !important;
  }

  /* Cuadrito del ícono, cada opción con su color suave (como la referencia). */
  nav.mp-bottomnav .vk-nav-ico {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 36px;
    border-radius: 14px;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }
  nav.mp-bottomnav .vk-nav-ico svg { width: 22px; height: 22px; stroke: none !important; }
  #bottomNavInicio .vk-nav-ico { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
  #bottomNavPlay .vk-nav-ico { background: rgba(239, 68, 68, 0.11); color: #dc2626; }
  /* ＋ central (Crear plan / Pedir cita / Publicar), como en el diseño del dueño: círculo azul-morado levantado. */
  #bottomNavCrear .vk-nav-ico { width: 50px; height: 50px; margin-top: -16px; border-radius: 50%; color: #fff !important;
    background: linear-gradient(150deg, #3b82f6 0%, #8b5cf6 100%) !important; box-shadow: 0 8px 18px rgba(99, 102, 241, 0.4); }
  #bottomNavCrear .vk-nav-label { display: none; }
  #bottomNavCrear .vk-nav-ico svg { width: 24px; height: 24px; }
  #bottomNavLlamadas .vk-nav-ico { background: rgba(139, 92, 246, 0.13); color: #7c3aed; }
  #bottomNavChats .vk-nav-ico { background: rgba(16, 185, 129, 0.13); color: #059669; }
  #bottomNavMiNegocio .vk-nav-ico { background: rgba(245, 158, 11, 0.14); color: #d97706; }
  #bottomNavPerfil .vk-nav-ico { background: rgba(217, 70, 239, 0.12); color: #7e22ce; }

  /* Activa: cuadrito con degradado y brillo, ícono blanco, etiqueta azul y rayita debajo. */
  nav.mp-bottomnav .mp-bottomnav-item.active { color: #2563eb !important; }
  nav.mp-bottomnav .mp-bottomnav-item.active .vk-nav-ico {
    color: #fff !important;
    background: linear-gradient(160deg, #38bdf8 0%, #2563eb 100%) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
  }
  nav.mp-bottomnav .mp-bottomnav-item.active svg { stroke: none !important; }
  nav.mp-bottomnav .mp-bottomnav-item:active .vk-nav-ico { transform: scale(0.94); }
  #bottomNavInicio.active { color: #2563eb !important; background: none !important; }
  /* mi-perfil.css pintaba de dorado el ícono y la rayita de Inicio (regla con #id): se iguala a las demás. */
  #bottomNavInicio.active svg { stroke: none !important; }
  #bottomNavInicio.active::after { background: linear-gradient(90deg, #2563eb, #06b6d4) !important; box-shadow: none !important; }

  /* Globitos de notificación: rojo, con borde del color de la barra para que se despeguen del ícono. */
  nav.mp-bottomnav .mp-nav-badge {
    position: absolute !important;
    top: -5px !important;
    right: calc(50% - 30px) !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  }
  nav.mp-bottomnav .mp-nav-badge.hidden { display: none !important; }

  /* El botón "Crear" sube un poco para no quedar encima de la barra flotante. */
  .mp-fab { bottom: calc(6rem + env(safe-area-inset-bottom)) !important; }
}


/* Efecto al tocar (public/bottomnav-fx.js): se hunde al presionar, onda de luz y rebote al soltar. */
@media (max-width: 640px) {
  nav.mp-bottomnav .vk-nav-ico { overflow: hidden; }
  nav.mp-bottomnav .vk-nav-ico.vk-pressing { transform: scale(0.88) !important; transition-duration: 0.08s; }
  nav.mp-bottomnav .vk-nav-ico.vk-pop { animation: vknPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
  nav.mp-bottomnav .vk-nav-ico.vk-pop svg { animation: vknIcon 0.42s ease; }
  nav.mp-bottomnav .vk-nav-ripple {
    position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.75); pointer-events: none; animation: vknRipple 0.55s ease-out forwards;
  }
  nav.mp-bottomnav .mp-bottomnav-item:not(.active) .vk-nav-ripple { background: rgba(37, 99, 235, 0.28); }
  nav.mp-bottomnav .mp-bottomnav-item.active::after { animation: vknBar 0.3s ease; }
}
@keyframes vknPop { 0% { transform: scale(0.88); } 55% { transform: scale(1.1) translateY(-2px); } 100% { transform: scale(1) translateY(-1px); } }
@keyframes vknIcon { 0% { transform: translateY(0); } 40% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes vknRipple { from { transform: scale(1); opacity: 1; } to { transform: scale(9); opacity: 0; } }
@keyframes vknBar { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  nav.mp-bottomnav .vk-nav-ico.vk-pop, nav.mp-bottomnav .vk-nav-ico.vk-pop svg, nav.mp-bottomnav .vk-nav-ripple { animation: none; }
}

/* Barra de Citas (index.html .mp-dx-bottomnav.vk-nav2026): mismo diseño que la principal, con "Inicio" para salir. */
.mp-dx-bottomnav.vk-nav2026 {
  left: 10px; right: 10px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  padding: 7px 6px;
  border-radius: 28px;
  justify-content: space-between;
  background: var(--vkn-glass);
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  backdrop-filter: saturate(160%) blur(28px);
  border: 1px solid var(--vkn-border);
  box-shadow: var(--vkn-shadow);
  max-width: 560px;
  margin: 0 auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mp-dx-bottomnav.vk-nav2026 { background: rgba(255, 255, 255, 0.97); }
}
/* Espacio abajo para que la barra flotante no tape el contenido de Citas (sin :has, que los WebView viejos no entienden). */
.mp-dx { padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important; }
.vk-nav2026 button {
  flex: 1 1 0; min-width: 0;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 0; background: none; border: 0;
  font: inherit; font-size: 0.66rem; font-weight: 700; color: var(--vkn-ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vk-nav2026 .vk-nav-ico {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 36px; border-radius: 14px;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.vk-nav2026 .vk-nav-ico svg { width: 22px; height: 22px; }
.vk-nav2026 .vk-dx-home .vk-nav-ico { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.vk-nav2026 .vk-dx-search .vk-nav-ico { background: rgba(100, 116, 139, 0.12); color: #334155; }
.vk-nav2026 .vk-dx-explore .vk-nav-ico { background: rgba(139, 92, 246, 0.13); color: #7c3aed; }
.vk-nav2026 .vk-dx-chats .vk-nav-ico { background: rgba(16, 185, 129, 0.13); color: #047857; }
.vk-nav2026 .vk-dx-profile .vk-nav-ico { background: rgba(217, 70, 239, 0.12); color: #7e22ce; }
.vk-nav2026 button.active { color: #2563eb; }
.vk-nav2026 button.active .vk-nav-ico {
  color: #fff;
  background: linear-gradient(160deg, #38bdf8 0%, #2563eb 100%);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}
.vk-nav2026 button.active::after {
  content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2563eb, #06b6d4);
  animation: vknBar 0.3s ease;
}
.vk-nav2026 .mp-dx-nav-badge {
  top: -5px; right: calc(50% - 30px);
  min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ef4444; color: #fff; font-size: 0.64rem; font-weight: 800;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}
.vk-nav2026 .vk-nav-ico.vk-pressing { transform: scale(0.88); transition-duration: 0.08s; }
.vk-nav2026 .vk-nav-ico.vk-pop { animation: vknPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
.vk-nav2026 .vk-nav-ico.vk-pop svg { animation: vknIcon 0.42s ease; }
.vk-nav2026 .vk-nav-ripple {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: rgba(37, 99, 235, 0.28); pointer-events: none; animation: vknRipple 0.55s ease-out forwards;
}
.vk-nav2026 button.active .vk-nav-ripple { background: rgba(255, 255, 255, 0.75); }

/* ===== Barra de abajo, diseño original de VYNKO (el dueño 2026-10-31, con imagen: "me gustó ese diseño de los botones
   abajo, ¿lo puedes copiar igual?"): vidrio blanco, íconos de línea sin cuadrito, el ＋ en escudo degradado levantado y
   la opción activa como pastilla degradada con ícono y nombre en blanco. Va al final: manda sobre lo de arriba. ===== */
@media (max-width: 640px) {
  nav.mp-bottomnav {
    left: 12px !important; right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    min-height: 72px; padding: 6px 8px !important; border-radius: 34px !important; align-items: center !important;
    background: rgba(255, 255, 255, 0.82) !important; border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 14px 34px rgba(79, 70, 229, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 #fff !important;
  }
  nav.mp-bottomnav .mp-bottomnav-item { position: relative; height: 60px; justify-content: center !important; border-radius: 26px !important;
    font-size: 0.74rem !important; font-weight: 700 !important; color: #1e2a5a !important; }
  nav.mp-bottomnav .mp-bottomnav-item::after { display: none !important; }
  nav.mp-bottomnav .vk-nav-ico { width: 34px !important; height: 30px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
  nav.mp-bottomnav .vk-nav-ico svg { width: 27px !important; height: 27px !important; }
  nav.mp-bottomnav .vk-nav-ico svg[fill="none"] { stroke: currentColor !important; }
  #bottomNavInicio .vk-nav-ico { color: #2f3fbf !important; }
  #bottomNavPlay .vk-nav-ico { color: #6d28d9 !important; }
  #bottomNavChats .vk-nav-ico { color: #1e3a8a !important; }
  #bottomNavMiNegocio .vk-nav-ico { color: #b45309 !important; }
  #bottomNavPerfil .vk-nav-ico { color: #4338ca !important; }

  /* ＋ del centro: escudo azul -> morado, levantado, con brillo. */
  #bottomNavCrear { overflow: visible; }
  #bottomNavCrear .vk-nav-ico {
    width: 70px !important; height: 74px !important; margin-top: -34px !important; color: #fff !important;
    border-radius: 50% 50% 46% 46% / 42% 42% 58% 58% !important;
    background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.45), transparent 45%), linear-gradient(160deg, #38bdf8 0%, #3b5bf5 50%, #7c3aed 100%) !important;
    border: 3px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.5), 0 0 0 6px rgba(124, 58, 237, 0.12) !important;
  }
  #bottomNavCrear .vk-nav-ico svg { width: 34px !important; height: 34px !important; stroke-width: 3; }
  #bottomNavCrear.active { background: none !important; box-shadow: none !important; }

  /* Activa: pastilla clarita (azul cielo -> lila suave) con el ícono y el nombre en su color (el dueño 2026-10-31: "el
     efecto de selección hazlo clarito, así no se ven los íconos; el de Inicio se pierde"). */
  nav.mp-bottomnav .mp-bottomnav-item.active:not(#bottomNavCrear) {
    color: #3730a3 !important;
    background: linear-gradient(150deg, #e0f2fe 0%, #e0e7ff 55%, #ede9fe 100%) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.16), inset 0 0 0 1px rgba(99, 102, 241, 0.18) !important;
  }
  nav.mp-bottomnav .mp-bottomnav-item.active:not(#bottomNavCrear) .vk-nav-ico { transform: none !important; background: none !important; box-shadow: none !important; }
  nav.mp-bottomnav .mp-bottomnav-item.active:not(#bottomNavCrear) .vk-nav-ico svg { stroke-width: 2.3; }
  #bottomNavInicio.active { background: linear-gradient(150deg, #e0f2fe 0%, #e0e7ff 55%, #ede9fe 100%) !important; color: #3730a3 !important; }
  #bottomNavInicio.active .vk-nav-ico, #bottomNavInicio.active svg { color: #2f3fbf !important; }
  /* Una regla vieja de arriba (y mi-perfil.css) le quita el trazo al svg de Inicio activo: la casita es de línea y desaparecía. */
  nav.mp-bottomnav #bottomNavInicio.active .vk-nav-ico svg { stroke: currentColor !important; fill: none !important; }
  nav.mp-bottomnav .mp-nav-badge { top: 2px !important; right: calc(50% - 26px) !important; }
}

/* Android angostos o con la letra/pantalla agrandada (el dueño 2026-11-04, foto del teléfono de su hermano): el ＋ de
   70 px no cabía en su casilla y se montaba encima de "Chats". */
@media (max-width: 380px) {
  nav.mp-bottomnav { left: 8px !important; right: 8px !important; padding: 6px 4px !important; }
  nav.mp-bottomnav .mp-bottomnav-item { font-size: 0.68rem !important; padding-left: 0 !important; padding-right: 0 !important; }
  #bottomNavCrear .vk-nav-ico { width: 58px !important; height: 62px !important; margin-top: -28px !important; }
  #bottomNavCrear .vk-nav-ico svg { width: 28px !important; height: 28px !important; }
  nav.mp-bottomnav .vk-nav-ico svg { width: 24px !important; height: 24px !important; }
}