/* Barra de abajo en cristal líquido (el dueño 2026-11-05, imagen de referencia + "rediseño completo de la barra"):
   Perfil · Chats · ＋ · Play · Inicio. Barra flotante muy redondeada, vidrio esmerilado con el degradado VYNKO (azul
   eléctrico, celeste y violeta), bordes finos con reflejo, íconos de línea nuevos en blanco, el ＋ redondo levantado y
   la opción activa iluminada con su fondo translúcido. Va de último (después de bottomnav-2026.css y
   chat-lista-estilos.css) y manda sobre ellos. Marcado: index.html nav.mp-bottomnav.vkg-nav. */

@media (max-width: 640px) {
  #vkgNav.vkg-nav {
    left: 12px !important; right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    height: 78px; min-height: 78px; padding: 0 8px !important; border-radius: 40px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 2px;
    overflow: visible !important; isolation: isolate;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, 0) 60%),
      linear-gradient(100deg, rgba(37, 99, 235, .80) 0%, rgba(56, 152, 248, .74) 28%, rgba(99, 102, 241, .74) 58%, rgba(147, 76, 240, .80) 100%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .55) !important;
    box-shadow:
      0 16px 38px rgba(67, 56, 202, .32),
      0 0 26px rgba(56, 189, 248, .22),
      inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -1px 0 rgba(255, 255, 255, .18),
      inset 0 -14px 26px rgba(124, 58, 237, .22) !important;
  }
  /* Reflejo de luz arriba (cristal líquido) */
  #vkgNav.vkg-nav::before {
    content: ''; position: absolute; z-index: -1; left: 18px; right: 18px; top: 3px; height: 30px; border-radius: 30px 30px 60% 60% / 30px 30px 100% 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)); pointer-events: none;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #vkgNav.vkg-nav { background: linear-gradient(100deg, #2f6fed 0%, #3b8ef5 30%, #6366f1 60%, #8b4cf0 100%) !important; }
  }

  /* Se esconde como antes: con el teclado abierto (keyboard-fix.js), dentro de un chat y en Citas. El display:flex
     !important de arriba les ganaba por el #id y la barra quedaba encima de la caja de escribir (no dejaba escribir). */
  html.vk-teclado #vkgNav.vkg-nav, html.vk-escribiendo #vkgNav.vkg-nav,
  body.body-chat-open #vkgNav.vkg-nav, body.body-in-citas #vkgNav.vkg-nav { display: none !important; }

  /* Escondidos (Mi negocio) siguen escondidos */
  #vkgNav.vkg-nav .mp-bottomnav-item.hidden { display: none !important; }
  /* Todos los íconos en blanco (bottomnav-2026.css los pintaba de colores con #id) */
  #vkgNav.vkg-nav .mp-bottomnav-item .vk-nav-ico, #vkgNav.vkg-nav .mp-bottomnav-item.active .vk-nav-ico, #vkgNav.vkg-nav .mp-bottomnav-item .vk-nav-ico svg { color: #fff !important; }
  /* Cada opción */
  #vkgNav.vkg-nav .mp-bottomnav-item {
    position: relative; flex: 1 1 0; min-width: 0; height: 66px; display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 0 !important;
    border-radius: 24px !important; background: none !important; box-shadow: none !important;
    color: rgba(255, 255, 255, .86) !important; font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .1px;
    text-shadow: 0 1px 2px rgba(30, 27, 75, .35); -webkit-tap-highlight-color: transparent;
  }
  #vkgNav.vkg-nav .mp-bottomnav-item .vk-nav-label { color: inherit !important; opacity: 1 !important; line-height: 1.1; }
  #vkgNav.vkg-nav .vk-nav-ico {
    width: 50px !important; height: 38px !important; border-radius: 16px !important; color: #fff !important;
    background: rgba(255, 255, 255, .10) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important;
    transition: background .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.34, 1.4, .64, 1) !important;
  }
  #vkgNav.vkg-nav .vk-nav-ico svg { width: 25px !important; height: 25px !important; stroke: currentColor !important; filter: drop-shadow(0 1px 2px rgba(30, 27, 75, .35)); }
  #vkgNav.vkg-nav .vk-nav-ico svg[fill="none"] { fill: none !important; }
  /* Rayita de luz debajo (se enciende en la activa) */
  #vkgNav.vkg-nav .mp-bottomnav-item:not(.vk-nav-plus)::after {
    content: '' !important; display: block !important; position: absolute !important; left: 50% !important; top: auto !important; bottom: 3px !important;
    width: 22px !important; height: 3px !important; border-radius: 3px !important; transform: translateX(-50%) scaleX(.4) !important;
    background: linear-gradient(90deg, #67e8f9, #e879f9) !important; opacity: 0; box-shadow: 0 0 8px rgba(232, 121, 249, .9) !important;
    transition: opacity .28s ease, transform .28s ease !important; animation: none !important;
  }

  /* Activa: se ilumina, fondo translúcido y la rayita de luz */
  #vkgNav.vkg-nav .mp-bottomnav-item.active:not(.vk-nav-plus), #vkgNav.vkg-nav #bottomNavCrear.mp-bottomnav-item { color: #fff !important; background: none !important; box-shadow: none !important; }
  #vkgNav.vkg-nav .mp-bottomnav-item.active:not(.vk-nav-plus) .vk-nav-ico {
    transform: translateY(-2px) !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, .42), rgba(186, 230, 253, .22) 55%, rgba(233, 213, 255, .26)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px rgba(30, 64, 175, .35), 0 0 18px rgba(103, 232, 249, .45) !important;
  }
  #vkgNav.vkg-nav .mp-bottomnav-item.active:not(.vk-nav-plus) .vk-nav-ico svg { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85)); stroke-width: 2.2; }
  #vkgNav.vkg-nav .mp-bottomnav-item.active:not(.vk-nav-plus)::after { opacity: 1; transform: translateX(-50%) scaleX(1) !important; }
  #vkgNav.vkg-nav #bottomNavInicio.active .vk-nav-ico svg { stroke: currentColor !important; fill: none !important; }
  #vkgNav.vkg-nav .mp-bottomnav-item:not(.active):active .vk-nav-ico { background: rgba(255, 255, 255, .2) !important; }

  /* ＋ central, el protagonista: redondo, levantado, degradado VYNKO y luz suave alrededor */
  #vkgNav.vkg-nav #bottomNavCrear { flex: 0 0 84px; height: 66px; overflow: visible !important; background: none !important; }
  #vkgNav.vkg-nav #bottomNavCrear .vk-nav-label { display: none !important; }
  #vkgNav.vkg-nav #bottomNavCrear .vk-nav-ico {
    width: 74px !important; height: 74px !important; margin-top: -30px !important; border-radius: 50% !important; color: #fff !important;
    background:
      radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%),
      linear-gradient(150deg, #22d3ee 0%, #2f80ff 38%, #4f46e5 64%, #a855f7 100%) !important;
    border: 2.5px solid rgba(255, 255, 255, .92) !important;
    box-shadow:
      0 12px 26px rgba(79, 70, 229, .5),
      0 0 22px rgba(56, 189, 248, .45),
      0 0 0 6px rgba(255, 255, 255, .16),
      inset 0 -6px 14px rgba(124, 58, 237, .45),
      inset 0 2px 0 rgba(255, 255, 255, .5) !important;
    transform: none !important;
  }
  #vkgNav.vkg-nav #bottomNavCrear .vk-nav-ico svg { width: 34px !important; height: 34px !important; filter: drop-shadow(0 2px 3px rgba(30, 27, 75, .35)); }
  #vkgNav.vkg-nav #bottomNavCrear:active .vk-nav-ico { transform: scale(.93) !important; }

  /* Globito rojo de Chats (y Mi negocio) */
  #vkgNav.vkg-nav .mp-nav-badge {
    position: absolute !important; top: 2px !important; right: calc(50% - 30px) !important; left: auto !important;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; box-sizing: border-box;
    background: linear-gradient(180deg, #ff4d5e, #e11d2e) !important; color: #fff !important; font-size: .68rem; font-weight: 900; line-height: 16px; text-align: center;
    border: 2px solid #fff !important; box-shadow: 0 3px 8px rgba(225, 29, 46, .5) !important; text-shadow: none;
  }
  #vkgNav.vkg-nav .mp-nav-badge.hidden { display: none !important; }

  /* Lo de abajo no queda tapado por la barra */
  .mp-main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .mp-fab { bottom: calc(108px + env(safe-area-inset-bottom)) !important; }

  /* Estilos de la lista de chats (chat-lista-estilos.css) ya no recolorean esta barra */
  body.vkls-msgs[data-vkls] #vkgNav.vkg-nav .mp-bottomnav-item .vk-nav-label { color: inherit !important; opacity: 1 !important; }
}

/* Teléfonos angostos o con la letra agrandada */
@media (max-width: 380px) {
  #vkgNav.vkg-nav { left: 8px !important; right: 8px !important; height: 72px; min-height: 72px; padding: 0 4px !important; }
  #vkgNav.vkg-nav .mp-bottomnav-item { font-size: .66rem !important; }
  #vkgNav.vkg-nav .vk-nav-ico { width: 44px !important; height: 34px !important; }
  #vkgNav.vkg-nav .vk-nav-ico svg { width: 22px !important; height: 22px !important; }
  #vkgNav.vkg-nav #bottomNavCrear { flex-basis: 70px; }
  #vkgNav.vkg-nav #bottomNavCrear .vk-nav-ico { width: 64px !important; height: 64px !important; margin-top: -26px !important; }
  #vkgNav.vkg-nav #bottomNavCrear .vk-nav-ico svg { width: 30px !important; height: 30px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #vkgNav.vkg-nav .vk-nav-ico, #vkgNav.vkg-nav .mp-bottomnav-item::after { transition: none !important; }
}