/* ==========================================================
   NUBO_MOBILE_MORE_BUBBLE_V2_START
   ========================================================== */

@media (max-width: 760px) {

  /* El estado activo se muestra como globo ovalado. */

  .mobile-nav.nubo-mobile-nav-more-v2
  > button:not(.mobile-add)::after {
    display:
      none !important;
  }

  .mobile-nav.nubo-mobile-nav-more-v2
  > button:not(.mobile-add).is-active,
  .mobile-nav.nubo-mobile-nav-more-v2
  > .nubo-mobile-more-toggle.is-open,
  .mobile-nav.nubo-mobile-nav-more-v2
  > .nubo-mobile-more-toggle.has-secondary-active {
    width:
      calc(100% - 8px) !important;

    justify-self:
      center !important;

    ;

    background: transparent !important;

    box-shadow: none !important;
  }

  .mobile-nav.nubo-mobile-nav-more-v2
  > .nubo-mobile-more-toggle.is-open {
    transform:
      translateY(-1px) !important;
  }


  /* ========================================================
     GLOBO FLOTANTE DE SECCIONES
     ======================================================== */

  .nubo-mobile-more-menu {
    position:
      absolute !important;

    z-index:
      10 !important;

    right:
      0 !important;

    bottom:
      calc(
        100% +
        13px
      ) !important;

    left:
      0 !important;

    display:
      grid !important;

    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      ) !important;

    align-items:
      stretch !important;

    gap:
      5px !important;

    width:
      auto !important;

    padding:
      9px !important;

    overflow:
      visible !important;

    border:
      1px solid
      rgba(190, 211, 200, 0.82) !important;

    border-radius:
      27px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.97),
        rgba(247, 251, 249, 0.95)
      ) !important;

    box-shadow:
      0 18px 43px
      rgba(12, 45, 28, 0.18),
      0 5px 15px
      rgba(12, 45, 28, 0.07),
      inset 0 1px 0
      rgba(255, 255, 255, 0.98) !important;

    backdrop-filter:
      blur(22px)
      saturate(145%) !important;

    -webkit-backdrop-filter:
      blur(22px)
      saturate(145%) !important;

    transform-origin:
      90%
      100%;

    animation:
      nubo-mobile-more-enter
      190ms
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      );
  }

  .nubo-mobile-more-menu[hidden] {
    display:
      none !important;
  }


  /*
   * Pequeña punta del globo hacia el botón Más.
   */

  .nubo-mobile-more-menu::after {
    content:
      "";

    position:
      absolute;

    right:
      8.5%;

    bottom:
      -7px;

    width:
      14px;

    height:
      14px;

    border-right:
      1px solid
      rgba(190, 211, 200, 0.82);

    border-bottom:
      1px solid
      rgba(190, 211, 200, 0.82);

    background:
      #f8fbf9;

    transform:
      translateX(50%)
      rotate(45deg);
  }


  /* ========================================================
     OPCIONES DEL GLOBO
     ======================================================== */

  .nubo-mobile-more-item {
    --more-color:
      #3e7560;

    --more-soft:
      #edf7f2;

    position:
      relative;

    z-index:
      1;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      5px;

    min-width:
      0;

    min-height:
      64px;

    padding:
      7px
      2px;

    border:
      0;

    border-radius:
      19px;

    color:
      #65776e;

    background:
      transparent;

    font:
      inherit;

    cursor:
      pointer;

    -webkit-tap-highlight-color:
      transparent;

    transition:
      color
      160ms
      ease,
      background
      160ms
      ease,
      transform
      150ms
      ease,
      box-shadow
      160ms
      ease;
  }

  .nubo-mobile-more-item.is-debts {
    --more-color:
      #e27058;

    --more-soft:
      #fff0eb;
  }

  .nubo-mobile-more-item.is-analysis {
    --more-color:
      #7657ca;

    --more-soft:
      #f1edfc;
  }

  .nubo-mobile-more-item.is-goals {
    --more-color:
      #168d78;

    --more-soft:
      #e8f7f3;
  }

  .nubo-mobile-more-item.is-reports {
    --more-color:
      #c48726;

    --more-soft:
      #fff6e5;
  }

  .nubo-mobile-more-item.is-profile {
    --more-color:
      #228259;

    --more-soft:
      #eaf8f0;
  }

  .nubo-mobile-more-item
  svg,
  .nubo-mobile-more-item
  .icon {
    width:
      21px !important;

    height:
      21px !important;

    color:
      var(--more-color) !important;
  }

  .nubo-mobile-more-item
  > span {
    display:
      block;

    width:
      100%;

    overflow:
      hidden;

    color:
      inherit;

    font-size:
      8.5px;

    font-weight:
      760;

    line-height:
      1.05;

    text-align:
      center;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }

  .nubo-mobile-more-item.is-active {
    color:
      var(--more-color);

    background: transparent !important;

    box-shadow: none !important;
  }

  .nubo-mobile-more-item:active {
    transform:
      scale(0.94);
  }

  .nubo-mobile-more-item:focus-visible {
    outline:
      3px solid
      rgba(43, 170, 108, 0.22);

    outline-offset:
      1px;
  }


  /* ========================================================
     PANTALLAS ESTRECHAS
     ======================================================== */

  @media (max-width: 370px) {
    .nubo-mobile-more-menu {
      right:
        -2px !important;

      left:
        -2px !important;

      gap:
        2px !important;

      padding:
        7px
        5px !important;
    }

    .nubo-mobile-more-item {
      min-height:
        59px;

      padding-inline:
        1px;

      border-radius:
        16px;
    }

    .nubo-mobile-more-item
    > span {
      font-size:
        7.6px;
    }

    .nubo-mobile-more-item
    svg,
    .nubo-mobile-more-item
    .icon {
      width:
        19px !important;

      height:
        19px !important;
    }
  }


  /* ========================================================
     ORIENTACIÓN HORIZONTAL
     ======================================================== */

  @media (
    orientation: landscape
  )
  and (
    max-height: 520px
  ) {
    .nubo-mobile-more-menu {
      bottom:
        calc(
          100% +
          8px
        ) !important;

      padding:
        6px !important;

      border-radius:
        22px !important;
    }

    .nubo-mobile-more-item {
      min-height:
        51px;

      gap:
        3px;
    }

    .nubo-mobile-more-item
    > span {
      font-size:
        7.5px;
    }
  }


  /* ========================================================
     MODO OSCURO
     ======================================================== */

  html[data-theme="dark"]
  .nubo-mobile-more-menu {
    border-color:
      rgba(84, 113, 98, 0.78) !important;

    background:
      linear-gradient(
        145deg,
        rgba(27, 40, 33, 0.97),
        rgba(20, 32, 26, 0.96)
      ) !important;

    box-shadow:
      0 19px 45px
      rgba(0, 0, 0, 0.38),
      inset 0 1px 0
      rgba(255, 255, 255, 0.05) !important;
  }

  html[data-theme="dark"]
  .nubo-mobile-more-menu::after {
    border-color:
      rgba(84, 113, 98, 0.78);

    background:
      #18271f;
  }

  html[data-theme="dark"]
  .nubo-mobile-more-item {
    color:
      #b5c2bb;
  }


  /* ========================================================
     ANIMACIÓN
     ======================================================== */

  @keyframes nubo-mobile-more-enter {
    from {
      opacity:
        0;

      transform:
        translateY(8px)
        scale(0.96);
    }

    to {
      opacity:
        1;

      transform:
        translateY(0)
        scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nubo-mobile-more-menu,
    .nubo-mobile-more-item,
    .nubo-mobile-more-toggle {
      animation:
        none !important;

      transition:
        none !important;
    }
  }
}

/* NUBO_MOBILE_MORE_BUBBLE_V2_END */